diff --git a/app/client-v2/apps/goat/app/(dashboard)/DashboardSidebar.tsx b/app/client-v2/apps/goat/app/(dashboard)/DashboardSidebar.tsx
index 1dcf72834..090efbfe1 100644
--- a/app/client-v2/apps/goat/app/(dashboard)/DashboardSidebar.tsx
+++ b/app/client-v2/apps/goat/app/(dashboard)/DashboardSidebar.tsx
@@ -1,14 +1,10 @@
 "use client";
 
 import { makeStyles } from "@/lib/theme";
-import { Text } from "@/lib/theme";
-import { useTheme } from "@/lib/theme";
 import { Fade, List, ListItem, ListItemButton, ListItemIcon } from "@mui/material";
-import { useRouter } from "next/navigation";
-import { usePathname } from "next/navigation";
 import { useState } from "react";
 
-import { Icon } from "@p4b/ui/components/theme";
+import { Icon, Text, useTheme } from "@p4b/ui/components/theme";
 import type { IconId } from "@p4b/ui/components/theme";
 
 export type DashboardSidebarProps = {
@@ -18,35 +14,47 @@ export type DashboardSidebarProps = {
   children: React.ReactNode;
 };
 
+/**
+ * A functional component that renders a dashboard sidebar.
+ * @param {DashboardSidebarProps} props - The props object containing the items and children.
+ * @returns The rendered dashboard sidebar component.
+ */
+
 export function DashboardSidebar(props: DashboardSidebarProps) {
   const { items, children } = props;
-  const router = useRouter();
+
+  // styling
   const { classes, cx } = useStyles(props)();
   const theme = useTheme();
+
+  // Component States
   const [hover, setHover] = useState(false);
-  const pathname = usePathname();
+  const [active, setActive] = useState<string | null>(items[0].placeholder);
+
+  // functions
   const handleHover = () => {
     setHover((currHover) => !currHover);
   };
+
   return (
     <>
       <nav className={cx(classes.root)} onMouseEnter={handleHover} onMouseLeave={handleHover}>
         <List>
           {items?.map(({ link, icon, placeholder }, indx) => (
-            <ListItem onClick={() => router.push(link)} disablePadding key={indx}>
+            <ListItem onClick={() => setActive(placeholder)} disablePadding key={indx}>
               <ListItemButton className={classes.itemList}>
-                <ListItemIcon sx={{ marginRight: "10px" }}>
+                <ListItemIcon>
                   <Icon
                     size="default"
                     iconId={icon}
                     iconVariant={
-                      pathname.includes(link) ? "focus" : theme.isDarkModeEnabled ? "white" : "gray"
+                      active === placeholder ? "focus" : theme.isDarkModeEnabled ? "white" : "gray"
                     }
                   />
                 </ListItemIcon>
                 {hover ? (
                   <Fade in={true}>
-                    <Text typo="body 2" color={pathname.startsWith(link) ? "focus" : "primary"}>
+                    <Text typo="body 2" color={active === placeholder ? "focus" : "primary"}>
                       {placeholder}
                     </Text>
                   </Fade>
@@ -68,7 +76,7 @@ const useStyles = (props: DashboardSidebarProps) =>
     root: {
       zIndex: "20",
       paddingTop: "52px",
-      backgroundColor: theme.colors.palette[theme.isDarkModeEnabled ? "dark" : "light"].light,
+      backgroundColor: theme.colors.useCases.surfaces.surface2,
       cursor: "pointer",
       width: props.width,
       left: 0,
@@ -78,14 +86,14 @@ const useStyles = (props: DashboardSidebarProps) =>
       transition: "width 0.4s ease",
       display: "flex",
       flexDirection: "column",
-      boxShadow: "0px 2px 4px -1px rgba(0, 0, 0, 0.12)",
+      boxShadow: "0px 1px 5px 0px #0000001F, 0px 2px 2px 0px #00000024, 0px 3px 1px -2px #00000033",
       "&:hover": {
         width: props.extended_width,
       },
     },
     itemList: {
       "&:hover": {
-        backgroundColor: theme.colors.palette[theme.isDarkModeEnabled ? "dark" : "light"].greyVariant1,
+        backgroundColor: `${theme.colors.palette[theme.isDarkModeEnabled ? "dark" : "light"].greyVariant2}aa`,
       },
     },
   }));
diff --git a/app/client-v2/apps/goat/app/(dashboard)/content/AccessSettings.tsx b/app/client-v2/apps/goat/app/(dashboard)/content/AccessSettings.tsx
new file mode 100644
index 000000000..91145fa09
--- /dev/null
+++ b/app/client-v2/apps/goat/app/(dashboard)/content/AccessSettings.tsx
@@ -0,0 +1,213 @@
+import React from "react";
+import { useState } from "react";
+
+import { Avatar } from "@p4b/ui/components/Avatar";
+import { Divider } from "@p4b/ui/components/DataDisplay";
+import { RadioInput, SelectField } from "@p4b/ui/components/Inputs";
+import { Text, Icon, Button } from "@p4b/ui/components/theme";
+import type { IconId } from "@p4b/ui/components/theme";
+import { makeStyles } from "@p4b/ui/lib/ThemeProvider";
+
+interface AccessSettingsProps {
+  changeState: (value: { name: string; icon: React.ReactNode; value: string } | null) => void;
+  setModalView: (value: number) => void;
+}
+
+const AccessSettings = (props: AccessSettingsProps) => {
+  const { changeState, setModalView } = props;
+
+  const { classes } = useStyles();
+
+  // Component States
+  const [settingChecked, setSettingChecked] = useState<string>("private");
+
+  //dumb data
+  const organizationPermissions = [
+    {
+      name: <div>View</div>,
+      value: "view",
+    },
+    {
+      name: <div>Edit</div>,
+      value: "edit",
+    },
+    {
+      name: <div>Download</div>,
+      value: "download",
+    },
+  ];
+
+  const teams = [
+    {
+      name: (
+        <div className={classes.teamName}>
+          {" "}
+          <Avatar label="TN" size={24} />
+          <Text typo="body 2">Team 1</Text>
+        </div>
+      ),
+      value: "team1",
+      permission: "",
+    },
+    {
+      name: (
+        <div className={classes.teamName}>
+          <Avatar label="TN" size={24} />
+          <Text typo="body 2">Team 2</Text>
+        </div>
+      ),
+      value: "team2",
+      permission: "",
+    },
+    {
+      name: (
+        <div className={classes.teamName}>
+          <Avatar label="TN" size={24} />
+          <Text typo="body 2">Team 3</Text>
+        </div>
+      ),
+      value: "team3",
+      permission: "",
+    },
+  ];
+
+  const accessSettings: {
+    name: string;
+    value: string;
+    icon: IconId;
+    description: string;
+    child: React.ReactNode;
+  }[] = [
+    {
+      name: "Private",
+      value: "private",
+      icon: "lock",
+      description: "Only you have access",
+      child: <></>,
+    },
+    {
+      name: "Organization",
+      value: "organization",
+      icon: "coorperate",
+      description: "Everyone within your organization have access",
+      child: (
+        <div className={classes.SettingInputWrapper}>
+          <Text typo="body 2">@Organization_name</Text>
+          <SelectField
+            className={classes.selectField}
+            options={organizationPermissions}
+            multiple={true}
+            checkbox={true}
+            label="Permissions"
+            size="small"
+          />
+        </div>
+      ),
+    },
+    {
+      name: "Teams",
+      value: "teams",
+      icon: "team",
+      description: "Set permission by teams",
+      child: (
+        <div>
+          <Divider width="100%" color="gray" />
+          {teams.map((team) => (
+            <>
+              <div className={classes.SettingInputWrapper}>
+                <Text typo="body 2">{team.name}</Text>
+                <SelectField
+                  className={classes.selectField}
+                  options={organizationPermissions}
+                  multiple={true}
+                  checkbox={true}
+                  label="Permissions"
+                  size="small"
+                />
+              </div>
+              <Divider width="100%" className={classes.divider} color="gray" />
+            </>
+          ))}
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <div>
+      <div style={{ paddingBottom: "23px" }}>
+        {accessSettings.map((setting, index) => (
+          <>
+            <div key={index} className={classes.visibilitySettings}>
+              <div className={classes.visibility}>
+                <Icon iconId={setting.icon} size="small" />
+                <div>
+                  <Text typo="body 2">{setting.name}</Text>
+                  {settingChecked === setting.value ? (
+                    <Text typo="body 3" className={classes.italic} color="secondary">
+                      {setting.description}
+                    </Text>
+                  ) : null}
+                </div>
+              </div>
+              <RadioInput value={setting.value} onCheck={setSettingChecked} selectedValue={settingChecked} />
+            </div>
+            {settingChecked === setting.value ? setting.child : null}
+            {index !== accessSettings.length - 1 ? <Divider width="100%" color="gray" /> : null}
+          </>
+        ))}
+      </div>
+      <div className={classes.buttons}>
+        <Button variant="noBorder" onClick={() => changeState(null)}>
+          CANCEL
+        </Button>
+        <Button variant="noBorder" onClick={() => setModalView(0)}>
+          APPLY
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+const useStyles = makeStyles({ name: { AccessSettings } })((theme) => ({
+  italic: {
+    fontStyle: "italic",
+  },
+  buttons: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "end",
+    gap: theme.spacing(2),
+    marginTop: theme.spacing(3),
+  },
+  visibilitySettings: {
+    display: "flex",
+    marginTop: theme.spacing(3),
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  visibility: {
+    display: "flex",
+    gap: theme.spacing(1),
+  },
+  SettingInputWrapper: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: theme.spacing(3),
+    marginTop: theme.spacing(3),
+  },
+  teamName: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(3),
+  },
+  selectField: {
+    flexGrow: "1",
+  },
+  divider: {
+    padding: "0",
+  },
+}));
+
+export default AccessSettings;
diff --git a/app/client-v2/apps/goat/app/(dashboard)/content/ContentInfoModal.tsx b/app/client-v2/apps/goat/app/(dashboard)/content/ContentInfoModal.tsx
new file mode 100644
index 000000000..28bcae9fb
--- /dev/null
+++ b/app/client-v2/apps/goat/app/(dashboard)/content/ContentInfoModal.tsx
@@ -0,0 +1,157 @@
+import React, { useState } from "react";
+
+import { Divider } from "@p4b/ui/components/DataDisplay";
+import { TextField } from "@p4b/ui/components/Inputs";
+import { Icon, Text, IconButton } from "@p4b/ui/components/theme";
+import { makeStyles } from "@p4b/ui/lib/ThemeProvider";
+
+interface ContentInfoModalProps {
+  sampleModalData: {
+    tag: string;
+    data: string;
+  }[];
+  containingProjects: {
+    name: string;
+    link: string;
+  }[];
+}
+
+const ContentInfoModal = (props: ContentInfoModalProps) => {
+  const { sampleModalData, containingProjects } = props;
+
+  const { classes } = useStyles();
+
+  // Component States
+  const [editMode, setEditMode] = useState(false);
+
+  return (
+    <div>
+      <div className={classes.modalListItem} style={{ paddingBottom: "4px" }}>
+        {editMode ? (
+          <>
+            <span style={{ display: "flex", alignItems: "center" }}>
+              <TextField
+                label=""
+                defaultValue="Study1_3994"
+                size="small"
+                className={classes.inputWrapper}
+                InputPropsClass={{
+                  className: classes.inputModal,
+                }}
+              />
+              .xml
+            </span>
+            <span>
+              <IconButton
+                onClick={() => setEditMode(!editMode)}
+                type="submit"
+                iconId="noBgCheck"
+                size="small"
+                className={classes.icon}
+                iconVariant="focus"
+              />
+              <IconButton
+                onClick={() => setEditMode(!editMode)}
+                type="submit"
+                iconId="close"
+                size="small"
+                iconVariant="error"
+              />
+            </span>
+          </>
+        ) : (
+          <>
+            <Text typo="body 2" className={classes.modalListItemTitle}>
+              Study1_3994.xml{" "}
+            </Text>
+            <IconButton onClick={() => setEditMode(!editMode)} type="submit" iconId="edit" size="small" />
+          </>
+        )}
+      </div>
+      <Divider width="100%" color="gray" className={classes.divider} />
+      {sampleModalData.map((data, indx) => (
+        <div className={classes.modalListItem} key={indx}>
+          <Text typo="body 2" className={classes.modalListItemTitle}>
+            {data.tag}:{" "}
+          </Text>
+          <Text typo="body 2" className={classes.modalListItemData}>
+            {data.data}
+          </Text>
+        </div>
+      ))}
+      <Divider width="100%" color="gray" className={classes.divider} />
+      <Text typo="body 2" className={classes.modalSectionTitle}>
+        Containing Projects
+      </Text>
+      {containingProjects.map((data) => (
+        <>
+          <div className={classes.projectText}>
+            <Text typo="body 2">{data.name}</Text>
+            <a href={data.link} className={classes.openLink}>
+              <Text typo="body 2" color="focus">
+                Open
+              </Text>
+              <Icon iconId="open" size="small" />
+            </a>
+          </div>
+          <Divider width="100%" color="gray" className={classes.divider} />
+        </>
+      ))}
+    </div>
+  );
+};
+
+const useStyles = makeStyles({ name: { ContentInfoModal } })((theme) => ({
+  modalHeader: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  modalListItem: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(2),
+    paddingBottom: theme.spacing(3),
+  },
+  modalListItemTitle: {
+    fontWeight: "800",
+  },
+  modalListItemData: {
+    color: `${theme.colors.palette[theme.isDarkModeEnabled ? "light" : "dark"].main}80`,
+  },
+  modalSectionTitle: {
+    fontWeight: "800",
+    paddingBottom: theme.spacing(3),
+  },
+  divider: {
+    margin: `0px 0px ${theme.spacing(3)}px 0px`,
+  },
+  projectText: {
+    padding: `0px ${theme.spacing(3)}px`,
+    paddingBottom: theme.spacing(3),
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  openLink: {
+    textDecoration: "none",
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(2),
+  },
+  inputModal: {
+    "&.MuiInputBase-input": {
+      padding: `0px ${theme.spacing(2)}px`,
+    },
+    width: "150px",
+  },
+  inputWrapper: {
+    marginRight: theme.spacing(1),
+  },
+  icon: {
+    color: "green",
+  },
+  iconWrapper: {},
+}));
+
+export default ContentInfoModal;
diff --git a/app/client-v2/apps/goat/app/(dashboard)/content/ContentManagement.tsx b/app/client-v2/apps/goat/app/(dashboard)/content/ContentManagement.tsx
new file mode 100644
index 000000000..ed2cb3264
--- /dev/null
+++ b/app/client-v2/apps/goat/app/(dashboard)/content/ContentManagement.tsx
@@ -0,0 +1,465 @@
+"use client";
+
+import { useState } from "react";
+
+import { FileManagementTable, Chip } from "@p4b/ui/components/DataDisplay";
+import Dialog from "@p4b/ui/components/Dialog";
+import Modal from "@p4b/ui/components/Modal";
+import { Card } from "@p4b/ui/components/Surfaces";
+import { Icon, Text, IconButton, Button } from "@p4b/ui/components/theme";
+import { makeStyles } from "@p4b/ui/lib/ThemeProvider";
+
+import ContentInfoModal from "./ContentInfoModal";
+import HeaderCard from "./HeaderCard";
+import MoreMenu from "./MoreMenu";
+import TreeViewFilter from "./TreeViewFilter";
+
+const ContentManagement = () => {
+  const { classes } = useStyles();
+  const [modalContent, setModalContent] = useState<object | null>(null);
+  const [dialogContent, setDialogContent] = useState<{
+    name: React.ReactNode;
+    type: React.ReactNode;
+    modified: string;
+    size: string;
+  } | null>(null);
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+
+  // Dumb Data
+  // These are the rows of the table, it is only temporary for now
+  const rows = [
+    {
+      name: (
+        <Text className={classes.folder} typo="body 2">
+          <span className={classes.icon}>
+            <Icon iconId="folder" />
+          </span>
+          Report_Final_Version
+        </Text>
+      ),
+      type: <Chip className={classes.chip} label="Layer" textDesign="italic" variant="Border" />,
+      modified: "23 Jun 19",
+      size: "30 kb",
+      path: ["home"],
+      stringName: "Report_Final_Version",
+      files: [
+        {
+          name: "Project_XYZ_Conclusion",
+          type: <Chip className={classes.chip} label="Project" textDesign="italic" variant="Border" />,
+          modified: "23 Jun 19",
+          size: "30 kb",
+          path: ["home", "Report_Final_Version"],
+        },
+        {
+          name: "Data_Analysis_2023_Q1",
+          type: <Chip className={classes.chip} label="Image" textDesign="italic" variant="Border" />,
+          modified: "23 Jun 19",
+          size: "30 kb",
+          path: ["home", "Report_Final_Version"],
+        },
+        {
+          name: "Experiment_Results_Phase2",
+          type: <Chip className={classes.chip} label="Report" textDesign="italic" variant="Border" />,
+          modified: "23 Jun 19",
+          size: "30 kb",
+          path: ["home", "Report_Final_Version"],
+        },
+      ],
+    },
+    {
+      name: (
+        <Text className={classes.folder} typo="body 2">
+          <span className={classes.icon}>
+            <Icon iconId="folder" />
+          </span>
+          plan_4_better
+        </Text>
+      ),
+      type: <Chip className={classes.chip} label="Layer" textDesign="italic" variant="Border" />,
+      modified: "23 Jun 19",
+      size: "30 kb",
+      path: ["home"],
+      stringName: "plan_4_better",
+      files: [
+        {
+          name: "Project_XYZ_Conclusion",
+          type: <Chip className={classes.chip} label="Project" textDesign="italic" variant="Border" />,
+          modified: "23 Jun 19",
+          size: "30 kb",
+          path: ["home", "plan_4_better"],
+        },
+        {
+          name: "Data_Analysis_2023_Q1",
+          type: <Chip className={classes.chip} label="Image" textDesign="italic" variant="Border" />,
+          modified: "23 Jun 19",
+          size: "30 kb",
+          path: ["home", "plan_4_better"],
+        },
+        {
+          name: "Experiment_Results_Phase2",
+          type: <Chip className={classes.chip} label="Report" textDesign="italic" variant="Border" />,
+          modified: "23 Jun 19",
+          size: "30 kb",
+          path: ["home", "plan_4_better"],
+        },
+      ],
+    },
+    {
+      name: (
+        <Text className={classes.folder} typo="body 2">
+          <span className={classes.icon}>
+            <Icon iconId="folder" />
+          </span>
+          example_proj
+        </Text>
+      ),
+      type: <Chip className={classes.chip} label="Layer" textDesign="italic" variant="Border" />,
+      modified: "23 Jun 19",
+      size: "30 kb",
+      path: ["home"],
+      stringName: "example_proj",
+      files: [
+        {
+          name: "Project_XYZ_Conclusion",
+          type: <Chip className={classes.chip} label="Project" textDesign="italic" variant="Border" />,
+          modified: "23 Jun 19",
+          size: "30 kb",
+          path: ["home", "example_proj"],
+        },
+        {
+          name: (
+            <Text className={classes.folder} typo="body 2">
+              <span className={classes.icon}>
+                <Icon iconId="folder" />
+              </span>
+              april_2023
+            </Text>
+          ),
+          type: <Chip className={classes.chip} label="Layer" textDesign="italic" variant="Border" />,
+          modified: "23 Jun 19",
+          size: "30 kb",
+          path: ["home", "example_proj"],
+          stringName: "april_2023",
+          files: [
+            {
+              name: "Project_XYZ_Conclusion",
+              type: <Chip className={classes.chip} label="Project" textDesign="italic" variant="Border" />,
+              modified: "23 Jun 19",
+              size: "30 kb",
+              path: ["home", "example_proj", "april_2023"],
+            },
+            {
+              name: "Data_Analysis_2023_Q1",
+              type: <Chip className={classes.chip} label="Image" textDesign="italic" variant="Border" />,
+              modified: "23 Jun 19",
+              size: "30 kb",
+              path: ["home", "example_proj", "april_2023"],
+            },
+            {
+              name: "Experiment_Results_Phase2",
+              type: <Chip className={classes.chip} label="Report" textDesign="italic" variant="Border" />,
+              modified: "23 Jun 19",
+              size: "30 kb",
+              path: ["home", "example_proj", "april_2023"],
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: "Report_Final_Version",
+      type: <Chip className={classes.chip} label="Layer" textDesign="italic" variant="Border" />,
+      modified: "23 Jun 19",
+      path: ["home"],
+      size: "30 kb",
+    },
+    {
+      name: "Project_XYZ_Conclusion",
+      type: <Chip className={classes.chip} label="Project" textDesign="italic" variant="Border" />,
+      modified: "23 Jun 19",
+      path: ["home"],
+      size: "30 kb",
+    },
+    {
+      name: "Data_Analysis_2023_Q1",
+      type: <Chip className={classes.chip} label="Image" textDesign="italic" variant="Border" />,
+      modified: "23 Jun 19",
+      path: ["home"],
+      size: "30 kb",
+    },
+    {
+      name: "Experiment_Results_Phase2",
+      type: <Chip className={classes.chip} label="Report" textDesign="italic" variant="Border" />,
+      modified: "23 Jun 19",
+      path: ["home"],
+      size: "30 kb",
+    },
+    {
+      name: "Report_Final_Version",
+      type: <Chip className={classes.chip} label="Layer" textDesign="italic" variant="Border" />,
+      modified: "23 Jun 19",
+      path: ["home"],
+      size: "30 kb",
+    },
+    {
+      name: "Project_XYZ_Conclusion",
+      type: <Chip className={classes.chip} label="Project" textDesign="italic" variant="Border" />,
+      modified: "23 Jun 19",
+      path: ["home"],
+      size: "30 kb",
+    },
+    {
+      name: "Data_Analysis_2023_Q1",
+      type: <Chip className={classes.chip} label="Image" textDesign="italic" variant="Border" />,
+      modified: "23 Jun 19",
+      path: ["home"],
+      size: "30 kb",
+    },
+    {
+      name: "Experiment_Results_Phase2",
+      type: <Chip className={classes.chip} label="Report" textDesign="italic" variant="Border" />,
+      modified: "23 Jun 19",
+      path: ["home"],
+      size: "30 kb",
+    },
+  ];
+
+  const columnNames = [
+    {
+      id: "name",
+      label: "Name",
+      numeric: false,
+    },
+    {
+      id: "type",
+      label: "Type",
+      numeric: false,
+    },
+    {
+      id: "modified",
+      label: "Modified",
+      numeric: false,
+    },
+    {
+      id: "size",
+      label: "Size",
+      numeric: false,
+    },
+  ];
+
+  const sampleModalData = [
+    {
+      tag: "Owner",
+      data: "User name owner",
+    },
+    {
+      tag: "Shared with",
+      data: "team name, team name, ...",
+    },
+    {
+      tag: "Type",
+      data: "Datat table",
+    },
+    {
+      tag: "Modified",
+      data: "30.02.2022 20:30",
+    },
+    {
+      tag: "Size",
+      data: "30Kb",
+    },
+    {
+      tag: "Location",
+      data: "content/project/folderx",
+    },
+  ];
+
+  const ContainingProjects = [
+    {
+      name: "Proposal_Budget_Revision",
+      link: "/home",
+    },
+    {
+      name: "FINAL_Project1",
+      link: "/home",
+    },
+    {
+      name: "Revision123",
+      link: "/home",
+    },
+  ];
+
+  const [path, setPath] = useState<string[]>(["home"]);
+
+  // this is the Info Modal
+  const modal = modalContent
+    ? {
+        header: (
+          <div className={classes.modalHeader}>
+            <Text typo="subtitle" className={classes.modalHeadertext}>
+              Info
+            </Text>
+            <IconButton onClick={() => setModalContent(null)} iconId="close" />
+          </div>
+        ),
+        body: <ContentInfoModal containingProjects={ContainingProjects} sampleModalData={sampleModalData} />,
+        action: (
+          <div className={classes.buttons}>
+            <Button variant="noBorder">VIEW</Button>
+            <Button variant="noBorder" onClick={() => setModalContent(null)}>
+              CANCEL
+            </Button>
+          </div>
+        ),
+      }
+    : null;
+
+  // this is the MoreMenu Dialog
+  const dialog = {
+    width: "133px",
+    body: <MoreMenu rowInfo={dialogContent} />,
+  };
+
+  function closeTablePopover() {
+    setAnchorEl(null);
+    setDialogContent(null);
+  }
+
+  return (
+    <>
+      <HeaderCard path={path} setPath={setPath} />
+      <div className={classes.container}>
+        <TreeViewFilter />
+        <Card noHover={true} className={classes.tableCard}>
+          <FileManagementTable
+            hover={true}
+            columnNames={columnNames}
+            rows={rows}
+            modal={modal}
+            setDialogAnchor={setAnchorEl}
+            openDialog={setDialogContent}
+            openModal={setModalContent}
+            currPath={path}
+            setPath={setPath}
+          />
+          {anchorEl ? (
+            <Dialog
+              anchorEl={anchorEl}
+              className={classes.moreInfoDialog}
+              onClick={closeTablePopover}
+              // title={dialog ? dialog.title : undefined}
+              width={dialog?.width ? dialog.width : "444px"}
+              direction="right"
+              // action={dialog?.action}
+            >
+              {dialog ? dialog.body : ""}
+            </Dialog>
+          ) : null}
+          {modal && modalContent ? (
+            <Modal
+              width="444px"
+              open={modalContent ? true : false}
+              changeOpen={() => setModalContent(null)}
+              header={modal.header}
+              action={modal.action}>
+              {modal.body}
+            </Modal>
+          ) : null}
+        </Card>
+      </div>
+    </>
+  );
+};
+
+const useStyles = makeStyles({ name: { ContentManagement } })((theme) => ({
+  container: {
+    display: "flex",
+    gap: theme.spacing(3),
+  },
+  buttonTable: {
+    fontSize: "12px",
+    padding: "2px",
+  },
+  treeView: {
+    padding: theme.spacing(3),
+  },
+  tableCard: {
+    flexGrow: "1",
+    padding: theme.spacing(3),
+  },
+  folder: {
+    display: "flex",
+    gap: theme.spacing(2),
+  },
+  icon: {
+    opacity: 0.5,
+  },
+  modalHeader: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  modalHeadertext: {
+    fontWeight: "500",
+  },
+  modalListItem: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(2),
+    paddingBottom: theme.spacing(3),
+  },
+  modalListItemTitle: {
+    fontWeight: "800",
+  },
+  modalListItemData: {
+    color: `${theme.colors.palette[theme.isDarkModeEnabled ? "light" : "dark"].main}80`,
+  },
+  modalSectionTitle: {
+    fontWeight: "800",
+    paddingBottom: theme.spacing(3),
+  },
+  divider: {
+    margin: `0px 0px ${theme.spacing(3)}px 0px`,
+  },
+  projectText: {
+    padding: `0px ${theme.spacing(3)}px`,
+    paddingBottom: theme.spacing(3),
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  openLink: {
+    textDecoration: "none",
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(2),
+  },
+  inputModal: {
+    "&.css-1umu3ji-MuiInputBase-input-MuiOutlinedInput-input": {
+      padding: "0px",
+    },
+  },
+  buttons: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "end",
+    gap: theme.spacing(2),
+  },
+  moreInfoDialog: {
+    padding: "0px",
+  },
+  chip: {
+    height: "auto",
+    fontSize: "12px",
+    "& .css-6od3lo-MuiChip-label": {
+      padding: "3px 0px",
+    },
+    "& .mui-6od3lo-MuiChip-label": {
+      padding: "0px 10px",
+    },
+    margin: "12px 0px",
+    padding: "3px 0px",
+  },
+}));
+
+export default ContentManagement;
diff --git a/app/client-v2/apps/goat/app/(dashboard)/content/CreateContent.tsx b/app/client-v2/apps/goat/app/(dashboard)/content/CreateContent.tsx
new file mode 100644
index 000000000..1f253a32b
--- /dev/null
+++ b/app/client-v2/apps/goat/app/(dashboard)/content/CreateContent.tsx
@@ -0,0 +1,275 @@
+import React, { useEffect, useRef, useState } from "react";
+
+import { Divider } from "@p4b/ui/components/DataDisplay";
+import { FileUploadProgress } from "@p4b/ui/components/DataDisplay";
+import DropFieldFileInput from "@p4b/ui/components/DropFieldFileInput";
+import { SelectField, TextField } from "@p4b/ui/components/Inputs";
+import Stepper from "@p4b/ui/components/Stepper";
+import { Button, Text } from "@p4b/ui/components/theme";
+import { makeStyles } from "@p4b/ui/lib/ThemeProvider";
+
+interface CreateContentProps {
+  modalState: (value: boolean) => void;
+}
+
+const CreateContent = (props: CreateContentProps) => {
+  const { modalState } = props;
+
+  const { classes } = useStyles();
+
+  // refs
+  const stepperElem = useRef<{ handleComplete: () => void } | null>(null);
+
+  // Input related
+  const [uploadType, setUploadType] = useState<string | string[]>("");
+  const [urlValue, setUrlValue] = useState("");
+  const [saveFormat, setSaveFormat] = useState<string | string[]>("");
+  const [uploadFile, setUploadFile] = useState<FileList>();
+  const [progressUpload, setProgressUpload] = useState<boolean>(false);
+
+  // dumb data
+  const layerTypes = [
+    {
+      name: "URL",
+      value: "url",
+    },
+    {
+      name: "Shapefile",
+      value: "shapefile",
+    },
+    {
+      name: "Geopackage",
+      value: "geopackage",
+    },
+    {
+      name: "Geobuf",
+      value: "geobuf",
+    },
+    {
+      name: "CSV",
+      value: "csv",
+    },
+    {
+      name: "XLSX",
+      value: "xlsx",
+    },
+    {
+      name: "KML",
+      value: "kml",
+    },
+  ];
+
+  // Add Content steps in case the chosen layer type is URL
+  let steps = [
+    {
+      label: "Choose format",
+      status: "active",
+      child: (
+        <div>
+          <Text typo="body 1">Chose Layer Type:</Text>
+          <SelectField
+            className={classes.selectInput}
+            options={layerTypes}
+            label="Chose Format"
+            size="small"
+            updateChange={setUploadType}
+          />
+          <Text color="secondary" typo="label 2" className={classes.descriptionText}>
+            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
+            massa. Cum sociis natoque penatibus et magnis{" "}
+          </Text>
+        </div>
+      ),
+    },
+    {
+      label: "Load content",
+      status: "active",
+      child: (
+        <div>
+          <Text typo="body 1">Paste the URL here:</Text>
+          <div className={classes.FormInputWrapper}>
+            <TextField
+              onValueBeingTypedChange={({ value }) => setUrlValue(value)}
+              size="small"
+              label=""
+              className={classes.FormInput}
+            />
+            <Button variant="noBorder" onClick={loadUrl} disabled={urlValue.length > 4 ? false : true}>
+              LOAD
+            </Button>
+          </div>
+          <Text color="secondary" typo="label 2" className={classes.descriptionText}>
+            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
+            massa. Cum sociis natoque penatibus et magnis{" "}
+          </Text>
+        </div>
+      ),
+    },
+    {
+      label: "Store",
+      status: "active",
+      child: (
+        <div>
+          <div className={classes.urlPreview}>
+            <img
+              src="https://i.postimg.cc/GpvYCgx9/geoportal-min.png"
+              alt="geoportal"
+              className={classes.image}
+            />
+            <Text typo="body 2">GeoPortal Title XYZ</Text>
+            <Text typo="label 2" className={classes.textLink} color="secondary">
+              {urlValue}
+            </Text>
+          </div>
+          <Divider width="100%" color="gray" />
+          <div>
+            <Text typo="body 1">Choose a storing format:</Text>
+            <SelectField
+              className={classes.selectInput}
+              options={layerTypes}
+              label="Chose Format"
+              size="small"
+              updateChange={setSaveFormat}
+            />
+            <Text color="secondary" typo="label 2" className={classes.descriptionText}>
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
+              Aenean massa. Cum sociis natoque penatibus et magnis{" "}
+            </Text>
+          </div>
+        </div>
+      ),
+    },
+  ];
+
+  // Add content steps in case we chose to import via local types (type !== url)
+  const uploadLocallySteps = [
+    {
+      label: "Choose format",
+      status: "active",
+      child: (
+        <div>
+          <Text typo="body 1">Chose Layer Type:</Text>
+          <SelectField
+            className={classes.selectInput}
+            options={layerTypes}
+            label="Chose Format"
+            size="small"
+            updateChange={setUploadType}
+          />
+          <Text color="secondary" typo="label 2" className={classes.descriptionText}>
+            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
+            massa. Cum sociis natoque penatibus et magnis{" "}
+          </Text>
+        </div>
+      ),
+    },
+    {
+      label: "Load content",
+      status: "active",
+      child: (
+        <div>
+          <DropFieldFileInput onContentAdded={setUploadFile} onUploadFinish={setProgressUpload} />
+        </div>
+      ),
+    },
+    {
+      label: "Store",
+      status: "active",
+      child: (
+        <div>
+          <FileUploadProgress onFinished={() => console.log("finished")} finished={true} />
+        </div>
+      ),
+    },
+  ];
+
+  useEffect(() => {
+    if (uploadType) {
+      if (uploadType !== "url") {
+        const newSteps = steps.slice(0, -2);
+        steps = [...newSteps, ...uploadLocallySteps];
+      }
+      completeStep();
+    }
+  }, [uploadType, progressUpload]);
+
+  //functions
+  const simpleActions = (
+    <div className={classes.buttons}>
+      <Button variant="noBorder" onClick={() => modalState(false)}>
+        CANCEL
+      </Button>
+      {saveFormat.length || progressUpload ? (
+        <Button variant="noBorder" onClick={() => modalState(false)}>
+          ADD
+        </Button>
+      ) : null}
+    </div>
+  );
+
+  function loadUrl() {
+    if (urlValue) {
+      completeStep();
+    }
+  }
+
+  function completeStep() {
+    if (stepperElem.current !== null && stepperElem.current !== undefined) {
+      stepperElem.current.handleComplete();
+    }
+  }
+
+  return (
+    <div>
+      <Stepper
+        steps={uploadType === "url" ? steps : uploadLocallySteps}
+        ref={stepperElem}
+        customActions={simpleActions}
+        className={classes.stepper}
+      />
+    </div>
+  );
+};
+
+const useStyles = makeStyles({ name: { Stepper } })((theme) => ({
+  stepper: {
+    paddingBottom: theme.spacing(3),
+  },
+  buttons: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "end",
+    gap: theme.spacing(2),
+  },
+  selectInput: {
+    margin: `${theme.spacing(3)}px 0px`,
+  },
+  stepText: {
+    fontSize: "14px",
+  },
+  descriptionText: {
+    fontStyle: "italic",
+  },
+  FormInputWrapper: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(2),
+  },
+  FormInput: {
+    flexGrow: "1",
+    margin: `${theme.spacing(3)}px 0px`,
+  },
+  image: {
+    boxShadow: theme.shadows[2],
+  },
+  textLink: {
+    fontStyle: "italic",
+  },
+  urlPreview: {
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(3),
+  },
+}));
+
+export default CreateContent;
diff --git a/app/client-v2/apps/goat/app/(dashboard)/content/DownloadModal.tsx b/app/client-v2/apps/goat/app/(dashboard)/content/DownloadModal.tsx
new file mode 100644
index 000000000..c15827a39
--- /dev/null
+++ b/app/client-v2/apps/goat/app/(dashboard)/content/DownloadModal.tsx
@@ -0,0 +1,90 @@
+import { SelectField } from "@p4b/ui/components/Inputs";
+import { Text, Button } from "@p4b/ui/components/theme";
+import { makeStyles } from "@p4b/ui/lib/ThemeProvider";
+
+interface DownloadModalProps {
+  name: React.ReactNode;
+  changeState: (value: { name: string; icon: React.ReactNode; value: string } | null) => void;
+}
+
+const DownloadModal = (props: DownloadModalProps) => {
+  const { name, changeState } = props;
+
+  const { classes } = useStyles();
+
+  // Dumb Data
+  // options to put in the select
+  const staticData = [
+    {
+      name: "URL",
+      value: "url",
+    },
+    {
+      name: "Shapefile",
+      value: "shapefile",
+    },
+    {
+      name: "Geopackage",
+      value: "geopackage",
+    },
+    {
+      name: "Geobuf",
+      value: "geobuf",
+    },
+    {
+      name: "CSV",
+      value: "csv",
+    },
+    {
+      name: "XLSX",
+      value: "xlsx",
+    },
+    {
+      name: "KML",
+      value: "kml",
+    },
+  ];
+
+  return (
+    <div>
+      <Text typo="body 1" className={classes.bold}>
+        {name ? name : ""}
+      </Text>
+      <SelectField
+        className={classes.selectInput}
+        options={staticData}
+        size="small"
+        label="Download Format"
+      />
+      <Text typo="label 1">
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
+        massa. Cum sociis natoque penatibus et magnis{" "}
+      </Text>
+      <div className={classes.buttons}>
+        <Button variant="noBorder" onClick={() => changeState(null)}>
+          CANCEL
+        </Button>
+        <Button variant="noBorder">DOWNLOAD</Button>
+      </div>
+    </div>
+  );
+};
+const useStyles = makeStyles({ name: { DownloadModal } })((theme) => ({
+  selectInput: {
+    margin: `${theme.spacing(3)}px 0px`,
+  },
+  bold: {
+    fontWeight: 800,
+  },
+  italic: {
+    fontStyle: "italic",
+  },
+  buttons: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "end",
+    gap: theme.spacing(2),
+    marginTop: theme.spacing(3),
+  },
+}));
+export default DownloadModal;
diff --git a/app/client-v2/apps/goat/app/(dashboard)/content/HeaderCard.tsx b/app/client-v2/apps/goat/app/(dashboard)/content/HeaderCard.tsx
new file mode 100644
index 000000000..837a44055
--- /dev/null
+++ b/app/client-v2/apps/goat/app/(dashboard)/content/HeaderCard.tsx
@@ -0,0 +1,145 @@
+import { useState } from "react";
+
+import Modal from "@p4b/ui/components/Modal";
+import { ToggleTabs } from "@p4b/ui/components/Navigation/ToggleTabs";
+import { Card } from "@p4b/ui/components/Surfaces";
+import { Button, Text, IconButton, Icon } from "@p4b/ui/components/theme";
+import { makeStyles } from "@p4b/ui/lib/ThemeProvider";
+
+import CreateContent from "./CreateContent";
+
+interface HeaderCardProps {
+  path: string[];
+  setPath: (value: string[]) => void;
+}
+
+const HeaderCard = (props: HeaderCardProps) => {
+  const { path, setPath } = props;
+
+  const { classes } = useStyles();
+  const [value, setValue] = useState<string | null>("formatLeft");
+  const [addContent, setAddContent] = useState(false);
+
+  function handlePathChange(indx: number) {
+    const newPath = [...path];
+    setPath(newPath.slice(0, indx + 1));
+  }
+
+  return (
+    <Card noHover={true} width="100%" className={classes.headerCard}>
+      <div className={classes.headerContainer}>
+        <div className={classes.headerPath}>
+          <Text typo="page heading" className={classes.headerText}>
+            Content
+          </Text>
+          <span style={{ display: "flex", alignItems: "center" }}>
+            <span className={classes.path}>
+              {path.map((singlePath, indx) => (
+                <span key={indx} className={classes.path}>
+                  {indx === 0 ? <Icon iconId="home" size="small" iconVariant="gray" /> : null}
+                  <Text
+                    typo="body 2"
+                    className={classes.pathFile}
+                    color={indx === path.length - 1 ? "primary" : "secondary"}>
+                    <span onClick={() => handlePathChange(indx)}>{singlePath}</span>
+                  </Text>
+                  {indx !== path.length - 1 ? <Text typo="body 2">/</Text> : null}
+                </span>
+              ))}
+            </span>
+          </span>
+        </div>
+        <div className={classes.headerActions}>
+          <div style={{ display: "flex", gap: "10px" }}>
+            <Button variant="noBorder" startIcon="newFolder">
+              New folder
+            </Button>
+            <Button variant="noBorder" onClick={() => setAddContent(true)} startIcon="newFile">
+              Add content
+            </Button>
+          </div>
+          <ToggleTabs
+            defaultValue={value}
+            onResultChange={setValue}
+            tabs={[
+              {
+                iconId: "formatLeft",
+                value: "formatLeft",
+              },
+              {
+                iconId: "viewModul",
+                value: "viewModul",
+              },
+            ]}
+          />
+        </div>
+      </div>
+      <Modal
+        width="444px"
+        open={addContent}
+        changeOpen={() => setAddContent(false)}
+        header={
+          <div className={classes.modalHeader}>
+            <Text typo="section heading" className={classes.modalHeadertext}>
+              Add content
+            </Text>
+            <IconButton onClick={() => setAddContent(false)} iconId="close" />
+          </div>
+        }>
+        <CreateContent modalState={setAddContent} />
+      </Modal>
+    </Card>
+  );
+};
+
+const useStyles = makeStyles({ name: { HeaderCard } })((theme) => ({
+  headerCard: {
+    marginBottom: theme.spacing(3),
+  },
+  headerContainer: {
+    padding: `${theme.spacing(2)}px ${theme.spacing(3)}px`,
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    width: "100%",
+  },
+  headerText: {
+    fontWeight: 800,
+    width: "29%",
+    // width: "fit-content",
+  },
+  headerPath: {
+    width: "60%",
+    display: "flex",
+    alignItems: "center",
+    gap: "100px",
+  },
+  path: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(2),
+  },
+  pathFile: {
+    cursor: "pointer",
+  },
+  headerActions: {
+    width: "40%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "end",
+    gap: theme.spacing(5) + theme.spacing(3),
+  },
+  icon: {
+    marginRight: "10px",
+  },
+  modalHeadertext: {
+    fontWeight: "500",
+  },
+  modalHeader: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+}));
+
+export default HeaderCard;
diff --git a/app/client-v2/apps/goat/app/(dashboard)/content/MoreMenu.tsx b/app/client-v2/apps/goat/app/(dashboard)/content/MoreMenu.tsx
new file mode 100644
index 000000000..1b5c43492
--- /dev/null
+++ b/app/client-v2/apps/goat/app/(dashboard)/content/MoreMenu.tsx
@@ -0,0 +1,165 @@
+import React, { useState, useEffect } from "react";
+
+import Modal from "@p4b/ui/components/Modal";
+import { Icon, Text, IconButton } from "@p4b/ui/components/theme";
+import { makeStyles } from "@p4b/ui/lib/ThemeProvider";
+
+import DownloadModal from "./DownloadModal";
+import MoveModal from "./MoveModal";
+import ShareModal from "./ShareModal";
+
+interface MoreMenuProps {
+  rowInfo: { name: React.ReactNode; type: React.ReactNode; modified: string; size: string } | null;
+}
+
+const MoreMenu = (props: MoreMenuProps) => {
+  const { rowInfo } = props;
+
+  const { classes, cx } = useStyles();
+
+  // Component States
+  const [selectedOption, setSelectedOption] = useState<{
+    name: string;
+    icon: React.ReactNode;
+    value: string;
+  } | null>(null);
+
+  // Options to show in the More Menu
+  const defaultOptions = [
+    [
+      {
+        value: "Info",
+        name: "Info",
+        icon: <Icon size="small" iconId="info" className={classes.icon} />,
+      },
+      {
+        value: "View",
+        name: "View",
+        icon: <Icon size="small" iconId="view" className={classes.icon} />,
+      },
+    ],
+    [
+      {
+        value: "Duplicate",
+        name: "Duplicate",
+        icon: <Icon size="small" iconId="duplicate" className={classes.icon} />,
+      },
+      {
+        value: "Move",
+        name: "Move",
+        icon: <Icon size="small" iconId="moveFile" className={classes.icon} />,
+      },
+      {
+        value: "Delete",
+        name: "Delete",
+        icon: <Icon size="small" iconId="delete" className={classes.icon} />,
+      },
+    ],
+    [
+      {
+        value: "Share",
+        name: "Share",
+        icon: <Icon size="small" iconId="reply" className={classes.icon} />,
+      },
+      {
+        value: "Download",
+        name: "Download",
+        icon: <Icon size="small" iconId="download" className={classes.icon} />,
+      },
+    ],
+  ];
+
+  useEffect(() => {
+    console.log(selectedOption);
+  }, [selectedOption]);
+
+  interface ComponentOptions {
+    [key: string]: React.ReactElement<any, any>;
+  }
+
+  /**
+   * Defines a componentOptions object that contains different modals for various actions.
+   * @param {ComponentOptions} componentOptions - The options for different modals.
+   * @returns None
+   */
+  const componentOptions: ComponentOptions = {
+    Download: <DownloadModal name={rowInfo ? rowInfo.name : ""} changeState={setSelectedOption} />,
+    Share: (
+      <ShareModal
+        name={rowInfo ? rowInfo.name : ""}
+        changeState={setSelectedOption}
+        modalState={selectedOption}
+      />
+    ),
+    Move: <MoveModal changeState={setSelectedOption} />,
+  };
+
+  return (
+    <div>
+      {defaultOptions.map((options, index) => (
+        <div key={index} className={classes.section}>
+          {options.map((option, indx) => (
+            <div key={indx} className={classes.option} onClick={() => setSelectedOption(option)}>
+              {/* <span className={classes.icon}>{option.icon}</span> */}
+              {option.icon}
+              <Text typo="body 1">{option.name}</Text>
+            </div>
+          ))}
+        </div>
+      ))}
+      <Modal
+        width="444px"
+        header={
+          <div className={classes.modalHeader}>
+            <Text typo="subtitle" className={classes.headerText}>
+              {selectedOption ? selectedOption.name : ""}
+            </Text>
+            <IconButton onClick={() => setSelectedOption(null)} iconId="close" />
+          </div>
+        }
+        open={selectedOption ? true : false}
+        changeOpen={() => setSelectedOption(null)}>
+        {
+          componentOptions[
+            selectedOption !== null && ["Download", "Share", "Move"].includes(selectedOption.value)
+              ? selectedOption.value
+              : "Download"
+          ]
+        }
+      </Modal>
+    </div>
+  );
+};
+
+const useStyles = makeStyles({ name: { MoreMenu } })((theme) => ({
+  option: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(2),
+    padding: `${theme.spacing(1)}px ${theme.spacing(3)}px`,
+    cursor: "pointer",
+    "&:hover": {
+      backgroundColor: `${theme.colors.palette[theme.isDarkModeEnabled ? "dark" : "light"].greyVariant1}80`,
+    },
+  },
+  icon: {
+    opacity: 0.5,
+  },
+  section: {
+    margin: `${theme.spacing(2)}px 0px`,
+  },
+  goatIconSize: {
+    width: "20px",
+    height: "20px",
+  },
+  modalHeader: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  headerText: {
+    fontWeight: "normal",
+  },
+}));
+
+export default MoreMenu;
diff --git a/app/client-v2/apps/goat/app/(dashboard)/content/MoveModal.tsx b/app/client-v2/apps/goat/app/(dashboard)/content/MoveModal.tsx
new file mode 100644
index 000000000..ea554e26e
--- /dev/null
+++ b/app/client-v2/apps/goat/app/(dashboard)/content/MoveModal.tsx
@@ -0,0 +1,130 @@
+import React from "react";
+
+import { TreeView } from "@p4b/ui/components/DataDisplay";
+import { Icon } from "@p4b/ui/components/theme";
+import { Button } from "@p4b/ui/components/theme";
+import { makeStyles } from "@p4b/ui/lib/ThemeProvider";
+
+interface MoveModalProps {
+  changeState: (value: { name: string; icon: React.ReactNode; value: string } | null) => void;
+}
+
+const MoveModal = (props: MoveModalProps) => {
+  const { changeState } = props;
+
+  const { classes } = useStyles();
+
+  // Dumb Temporary Data
+  const treeData = [
+    {
+      id: "node_1",
+      name: (
+        <div className={classes.folder}>
+          <Icon iconId="folder" />
+          Report_Final_Version
+        </div>
+      ),
+    },
+    {
+      id: "node_2",
+      name: (
+        <div className={classes.folder}>
+          <Icon iconId="folder" />
+          plan_4_better
+        </div>
+      ),
+    },
+    {
+      id: "node_3",
+      name: (
+        <div className={classes.folder}>
+          <Icon iconId="folder" />
+          example_proj
+        </div>
+      ),
+      children: [
+        {
+          id: "node_3_1",
+          name: (
+            <div className={classes.folder}>
+              <Icon iconId="folder" />
+              april_2023
+            </div>
+          ),
+        },
+      ],
+    },
+    {
+      id: "node_4",
+      name: (
+        <div className={classes.folder}>
+          <Icon iconId="folder" />
+          Report_Final_Version
+        </div>
+      ),
+    },
+    {
+      id: "node_5",
+      name: (
+        <div className={classes.folder}>
+          <Icon iconId="folder" />
+          plan_4_better
+        </div>
+      ),
+    },
+    {
+      id: "node_6",
+      name: (
+        <div className={classes.folder}>
+          <Icon iconId="folder" />
+          example_proj
+        </div>
+      ),
+      children: [
+        {
+          id: "node_6_1",
+          name: (
+            <div className={classes.folder}>
+              <Icon iconId="folder" />
+              april_2023
+            </div>
+          ),
+        },
+      ],
+    },
+  ];
+
+  return (
+    <div>
+      <TreeView nodes={treeData} className={classes.treeView} />
+      <div className={classes.buttons}>
+        <Button variant="noBorder" onClick={() => changeState(null)}>
+          MOVE HERE
+        </Button>
+        <Button variant="noBorder" onClick={() => changeState(null)}>
+          CANCEL
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+const useStyles = makeStyles({ name: { TreeView } })((theme) => ({
+  folder: {
+    display: "flex",
+    gap: theme.spacing(2),
+    padding: `6px 0px`,
+  },
+  buttons: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "end",
+    gap: theme.spacing(2),
+    marginTop: theme.spacing(3),
+  },
+  treeView: {
+    maxHeight: "150px",
+  },
+}));
+
+export default MoveModal;
diff --git a/app/client-v2/apps/goat/app/(dashboard)/content/ShareModal.tsx b/app/client-v2/apps/goat/app/(dashboard)/content/ShareModal.tsx
new file mode 100644
index 000000000..e34878185
--- /dev/null
+++ b/app/client-v2/apps/goat/app/(dashboard)/content/ShareModal.tsx
@@ -0,0 +1,185 @@
+import type { Dayjs } from "dayjs";
+import React from "react";
+import { useState } from "react";
+
+import { Divider } from "@p4b/ui/components/DataDisplay";
+import { Switch, DatePicker, TextField } from "@p4b/ui/components/Inputs";
+import { Text, Icon, IconButton, Button } from "@p4b/ui/components/theme";
+import { makeStyles } from "@p4b/ui/lib/ThemeProvider";
+
+import AccessSettings from "./AccessSettings";
+
+interface ShareModalProps {
+  name?: React.ReactNode;
+  changeState: (value: { name: string; icon: React.ReactNode; value: string } | null) => void;
+  modalState: { name: string; icon: React.ReactNode; value: string } | null;
+}
+
+const ShareModal = (props: ShareModalProps) => {
+  const { name, changeState, modalState } = props;
+
+  const { classes } = useStyles();
+
+  // Component States
+  const [checked, setChecked] = useState<boolean>(false);
+  const [checkedExpirationDate, setCheckedExpirationDate] = useState<boolean>(false);
+  const [linkShareStatus, setLinkShareStatus] = useState<boolean>(true);
+  const [date, setDate] = useState<Dayjs | null>(null);
+  const [password, setPassword] = useState<string | null>(null);
+  const [modalView, setModalView] = useState<number>(0);
+
+  // Functions
+  function handleSwitch(event: React.ChangeEvent<HTMLInputElement>, checked: boolean) {
+    setChecked(checked);
+  }
+
+  function handleLinkSHareStatus(event: React.ChangeEvent<HTMLInputElement>, checked: boolean) {
+    setLinkShareStatus(checked);
+  }
+
+  function handleExpirationStatus(event: React.ChangeEvent<HTMLInputElement>, checked: boolean) {
+    setCheckedExpirationDate(checked);
+  }
+
+  function enterAccessSettings() {
+    setModalView(1);
+    if (modalState) {
+      const newState = modalState;
+      newState.name = "Access Settings";
+      changeState({
+        name: "Access Settings",
+        icon: newState.icon,
+        value: newState.value,
+      });
+    }
+  }
+
+  return (
+    <div>
+      {modalView === 0 ? (
+        <div>
+          <Text typo="body 2" className={classes.italic}>
+            {name ? name : ""}
+          </Text>
+          <div className={classes.visibilitySettings}>
+            <div className={classes.visibility}>
+              <Icon iconId="lock" size="small" />
+              <div>
+                <Text typo="body 2">Private</Text>
+                <Text typo="body 3" className={classes.italic} color="secondary">
+                  Only you have access
+                </Text>
+              </div>
+            </div>
+            <IconButton iconId="edit" type="submit" iconVariant="focus" onClick={enterAccessSettings} />
+          </div>
+          <Divider width="100%" color="gray" />
+          <div className={classes.switcher}>
+            <Switch checked={linkShareStatus} onChecked={handleLinkSHareStatus} />
+            <Text typo="body 1">Allow link sharing</Text>
+          </div>
+          <div className={classes.switcher}>
+            <Switch checked={checked} onChecked={handleSwitch} />
+            <Text typo="body 1">Protected by password</Text>
+          </div>
+          {checked ? (
+            <div style={{ marginTop: "8px" }}>
+              <TextField
+                label="Set Password"
+                size="small"
+                className={classes.shareInput}
+                onValueBeingTypedChange={({ value }) => setPassword(value)}
+              />
+            </div>
+          ) : null}
+          <div className={classes.switcher}>
+            <Switch checked={checkedExpirationDate} onChecked={handleExpirationStatus} />
+            <Text typo="body 1">Expiration date</Text>
+          </div>
+          {checkedExpirationDate ? (
+            <>
+              <Divider width="100%" color="gray" />
+              <div style={{ paddingBottom: "23px" }}>
+                <Text typo="body 1">Set expiration date:</Text>
+                <DatePicker
+                  ClassName={classes.dateInput}
+                  onChange={setDate}
+                  value={date}
+                  label="DD/MM/YY"
+                  size="small"
+                />
+              </div>
+            </>
+          ) : null}
+          <Divider width="100%" color="gray" />
+          <div className={classes.shareInputWrapper}>
+            <TextField
+              defaultValue="https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?type=design&node-id=12355-135723&mode=design&t=0W9nCyQtk2pQyAUU-0"
+              size="small"
+              className={classes.shareInput}
+            />
+            <Button>Copy</Button>
+          </div>
+          <div className={classes.buttons}>
+            <Button variant="noBorder" onClick={() => changeState(null)}>
+              CANCEL
+            </Button>
+            <Button variant="noBorder" onClick={() => changeState(null)}>
+              SAVE
+            </Button>
+          </div>
+        </div>
+      ) : (
+        <AccessSettings changeState={changeState} setModalView={setModalView} />
+      )}
+    </div>
+  );
+};
+
+const useStyles = makeStyles({ name: { ShareModal } })((theme) => ({
+  selectInput: {
+    margin: `${theme.spacing(3)}px 0px`,
+  },
+  bold: {
+    fontWeight: 800,
+  },
+  italic: {
+    fontStyle: "italic",
+  },
+  buttons: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "end",
+    gap: theme.spacing(2),
+    marginTop: theme.spacing(3),
+  },
+  visibilitySettings: {
+    display: "flex",
+    marginTop: theme.spacing(3),
+    justifyContent: "space-between",
+  },
+  visibility: {
+    display: "flex",
+    gap: theme.spacing(1),
+  },
+  switcher: {
+    display: "flex",
+    alignItems: "center",
+    // gap: theme.spacing(1),
+  },
+  dateInput: {
+    width: "100%",
+  },
+  shareInput: {
+    width: "100%",
+  },
+  shareInputWrapper: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: theme.spacing(3),
+    paddingBottom: "23px",
+  },
+}));
+
+export default ShareModal;
diff --git a/app/client-v2/apps/goat/app/(dashboard)/content/TreeViewFilter.tsx b/app/client-v2/apps/goat/app/(dashboard)/content/TreeViewFilter.tsx
new file mode 100644
index 000000000..332344fe5
--- /dev/null
+++ b/app/client-v2/apps/goat/app/(dashboard)/content/TreeViewFilter.tsx
@@ -0,0 +1,89 @@
+import React, { useState } from "react";
+
+import { TreeViewWithCheckboxes } from "@p4b/ui/components/DataDisplay";
+import { Card } from "@p4b/ui/components/Surfaces";
+import { Button } from "@p4b/ui/components/theme";
+import { makeStyles } from "@p4b/ui/lib/ThemeProvider";
+
+const TreeViewFilter = () => {
+  const { classes } = useStyles();
+
+  // Component States
+  const [selectedFilters, setSelectedFilters] = useState<string[]>([]);
+
+  const treeData = [
+    {
+      id: "layers",
+      name: "Layers",
+      count: "(100)",
+      children: [
+        {
+          id: "feature",
+          name: "Feature",
+          count: "(72)",
+        },
+        {
+          id: "imagery",
+          name: "Imagery",
+          count: "(28)",
+        },
+      ],
+    },
+    {
+      id: "reports",
+      name: "Reports",
+      count: "(43)",
+    },
+    {
+      id: "projects",
+      name: "Projects",
+      count: "(10)",
+      children: [
+        {
+          id: "project_one",
+          name: "Project_one",
+          count: "(6)",
+          children: [
+            {
+              id: "project_two",
+              name: "Project_Twosadddsadsdfsaad",
+              count: "(4)",
+            },
+          ],
+        },
+      ],
+    },
+  ];
+
+  // Functions
+  function clearFilters() {
+    setSelectedFilters([]);
+  }
+
+  return (
+    <Card className={classes.treeView} noHover={true} width="280px">
+      <div className={classes.wrapper}>
+        <TreeViewWithCheckboxes
+          selected={selectedFilters}
+          changeSelected={setSelectedFilters}
+          treeData={treeData}
+        />
+        {selectedFilters.length ? <Button onClick={clearFilters}>Clear Filters</Button> : null}
+      </div>
+    </Card>
+  );
+};
+
+const useStyles = makeStyles({ name: { TreeViewFilter } })((theme) => ({
+  treeView: {
+    padding: theme.spacing(3),
+  },
+  wrapper: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-between",
+    height: "100%",
+  },
+}));
+
+export default TreeViewFilter;
diff --git a/app/client-v2/apps/goat/app/(dashboard)/content/page.tsx b/app/client-v2/apps/goat/app/(dashboard)/content/page.tsx
index 0775686e3..cd88547d7 100644
--- a/app/client-v2/apps/goat/app/(dashboard)/content/page.tsx
+++ b/app/client-v2/apps/goat/app/(dashboard)/content/page.tsx
@@ -1,3 +1,9 @@
+import ContentManagement from "./ContentManagement";
+
 export default function ContentPage() {
-  return <div>Contents Page</div>;
+  return (
+    <div>
+      <ContentManagement />
+    </div>
+  );
 }
diff --git a/app/client-v2/apps/goat/app/(dashboard)/home/CardList.tsx b/app/client-v2/apps/goat/app/(dashboard)/home/CardList.tsx
index 5b1388fa7..de90bb484 100644
--- a/app/client-v2/apps/goat/app/(dashboard)/home/CardList.tsx
+++ b/app/client-v2/apps/goat/app/(dashboard)/home/CardList.tsx
@@ -2,10 +2,8 @@
 
 import { makeStyles } from "@/lib/theme";
 
-import { CardContent } from "@p4b/ui/components/Card";
-import { CardMedia } from "@p4b/ui/components/Card";
-import { Card } from "@p4b/ui/components/Card/Card";
-import { Divider } from "@p4b/ui/components/Divider";
+import { Divider } from "@p4b/ui/components/DataDisplay/Divider";
+import { CardContent, CardMedia, Card } from "@p4b/ui/components/Surfaces";
 import { Button } from "@p4b/ui/components/theme";
 import { Text } from "@p4b/ui/components/theme";
 
diff --git a/app/client-v2/apps/goat/app/(dashboard)/home/NewsLetterSection.tsx b/app/client-v2/apps/goat/app/(dashboard)/home/NewsLetterSection.tsx
index 81d53c5e9..fa793ee7a 100644
--- a/app/client-v2/apps/goat/app/(dashboard)/home/NewsLetterSection.tsx
+++ b/app/client-v2/apps/goat/app/(dashboard)/home/NewsLetterSection.tsx
@@ -2,8 +2,8 @@
 
 import { makeStyles } from "@/lib/theme";
 
-import { Card } from "@p4b/ui/components/Card";
-import { TextField } from "@p4b/ui/components/Text/TextField";
+import { TextField } from "@p4b/ui/components/Inputs";
+import { Card } from "@p4b/ui/components/Surfaces";
 import { Text } from "@p4b/ui/components/theme";
 import { Button } from "@p4b/ui/components/theme";
 
diff --git a/app/client-v2/apps/goat/app/(dashboard)/home/page.tsx b/app/client-v2/apps/goat/app/(dashboard)/home/page.tsx
index c5ff33f4a..19da6c7f7 100644
--- a/app/client-v2/apps/goat/app/(dashboard)/home/page.tsx
+++ b/app/client-v2/apps/goat/app/(dashboard)/home/page.tsx
@@ -19,6 +19,9 @@ interface CardDataType {
 }
 
 const Home = () => {
+  const { classes, cx } = useStyles();
+
+  // Project Dumb Data
   const tempCardInfo: CardDataType[] = [
     {
       buttons: ["See all"],
@@ -206,8 +209,6 @@ const Home = () => {
     },
   ];
 
-  const { classes, cx } = useStyles();
-
   return (
     <>
       <SlideShow images={slideShowImages} height={328} width="100%" />
diff --git a/app/client-v2/apps/goat/app/(dashboard)/layout.tsx b/app/client-v2/apps/goat/app/(dashboard)/layout.tsx
index cf30f3773..41d70ddec 100644
--- a/app/client-v2/apps/goat/app/(dashboard)/layout.tsx
+++ b/app/client-v2/apps/goat/app/(dashboard)/layout.tsx
@@ -2,8 +2,8 @@
 
 import { makeStyles } from "@/lib/theme";
 
-import Footer from "@p4b/ui/components/Footer";
-import { Toolbar } from "@p4b/ui/components/Toolbar";
+import Footer from "@p4b/ui/components/Navigation/Footer";
+import { Toolbar } from "@p4b/ui/components/Navigation/Toolbar";
 import { Icon } from "@p4b/ui/components/theme";
 import type { IconId } from "@p4b/ui/components/theme";
 
diff --git a/app/client-v2/apps/goat/app/(dashboard)/settings/layout.tsx b/app/client-v2/apps/goat/app/(dashboard)/settings/layout.tsx
index a0e3e6f73..c85fa01ab 100644
--- a/app/client-v2/apps/goat/app/(dashboard)/settings/layout.tsx
+++ b/app/client-v2/apps/goat/app/(dashboard)/settings/layout.tsx
@@ -4,7 +4,7 @@ import { makeStyles } from "@/lib/theme";
 import { Text } from "@/lib/theme";
 import { useState } from "react";
 
-import { Divider } from "@p4b/ui/components/Divider";
+import { Divider } from "@p4b/ui/components/DataDisplay/Divider";
 
 import Organization from "./organization/page";
 import PrivacyPreferences from "./privacy-preference/page";
diff --git a/app/client-v2/apps/goat/app/(dashboard)/settings/organization/AddTeamModal.tsx b/app/client-v2/apps/goat/app/(dashboard)/settings/organization/AddTeamModal.tsx
new file mode 100644
index 000000000..7652d2bb2
--- /dev/null
+++ b/app/client-v2/apps/goat/app/(dashboard)/settings/organization/AddTeamModal.tsx
@@ -0,0 +1,115 @@
+import React, { useState } from "react";
+
+import Modal from "@p4b/ui/components/Modal";
+import { Button, Text, IconButton } from "@p4b/ui/components/theme";
+import { makeStyles } from "@p4b/ui/lib/ThemeProvider";
+
+import TeamModalBody from "./TeamModalBody";
+import type { Team } from "./Teams";
+
+interface AddTeamModalProps {
+  visibility: boolean;
+  setVisibility: (value: boolean) => void;
+  addTeam: (value: Team) => void;
+}
+
+export type Option = {
+  label: string;
+  value: string;
+} & {
+  [key: string]: string | number | boolean;
+};
+
+const AddTeamModal = (props: AddTeamModalProps) => {
+  const { visibility, setVisibility, addTeam } = props;
+
+  const { classes } = useStyles();
+
+  const [selectedOption, setSelectedOption] = useState<Option[] | undefined>([]);
+  const [teamName, setTeamName] = useState<string | null>(null);
+
+  function saveTeam() {
+    if (teamName && selectedOption && selectedOption.length) {
+      addTeam({
+        name: teamName,
+        participants: selectedOption,
+        createdAt: "23 Jun 19",
+      });
+      setVisibility(false);
+    }
+  }
+
+  return (
+    <Modal
+      width="444px"
+      open={visibility}
+      changeOpen={setVisibility}
+      action={
+        <>
+          <Button onClick={() => setVisibility(false)} variant="noBorder">
+            CANCEL
+          </Button>
+          <Button onClick={saveTeam} variant="noBorder">
+            SAVE
+          </Button>
+        </>
+      }
+      header={
+        <div className={classes.modalHeader}>
+          <Text typo="subtitle" className={classes.modalHeadertext}>
+            New team
+          </Text>
+          <IconButton onClick={() => setVisibility(false)} iconId="close" />
+        </div>
+      }>
+      <TeamModalBody
+        setSelectedOption={setSelectedOption}
+        selectedOption={selectedOption}
+        setTeamName={setTeamName}
+      />
+    </Modal>
+  );
+};
+
+const useStyles = makeStyles({ name: { AddTeamModal } })((theme) => ({
+  modalHeader: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  modalHeadertext: {
+    fontWeight: "500",
+  },
+  input: {
+    width: "100%",
+  },
+  label: {
+    paddingBottom: theme.spacing(2),
+    fontWeight: "bold",
+  },
+  boxLabel: {
+    marginBottom: theme.spacing(5),
+  },
+  useSelectedWrapper: {
+    display: "flex",
+    marginTop: theme.spacing(3),
+    justifyContent: "space-between",
+  },
+  userSelected: {
+    display: "flex",
+    gap: theme.spacing(1),
+  },
+  italic: {
+    fontStyle: "italic",
+  },
+  orangeButton: {
+    "&.MuiButton-text": {
+      color: "orange",
+      "&:hover": {
+        color: "orange",
+      },
+    },
+  },
+}));
+
+export default AddTeamModal;
diff --git a/app/client-v2/apps/goat/app/(dashboard)/settings/organization/InviteUser.tsx b/app/client-v2/apps/goat/app/(dashboard)/settings/organization/InviteUser.tsx
new file mode 100644
index 000000000..0d7300280
--- /dev/null
+++ b/app/client-v2/apps/goat/app/(dashboard)/settings/organization/InviteUser.tsx
@@ -0,0 +1,48 @@
+import React from "react";
+
+import { TextField } from "@p4b/ui/components/Inputs";
+import { Text, Icon } from "@p4b/ui/components/theme";
+import { makeStyles } from "@p4b/ui/lib/ThemeProvider";
+
+const InviteUser = () => {
+  const { classes } = useStyles();
+
+  return (
+    <div>
+      <div className={classes.head}>
+        <Icon
+          iconId="home"
+          wrapped="circle"
+          bgVariant="focus"
+          bgOpacity={0.6}
+          iconVariant="secondary"
+          size="small"
+        />
+        <Text typo="body 1">Organization name</Text>
+      </div>
+      <Text typo="body 2">
+        Send an invitation via email <br /> The receiver will get a link with 72 hours of expiration
+      </Text>
+      <div className={classes.formInputs}>
+        <TextField size="small" type="email" label="Email address" />
+      </div>
+    </div>
+  );
+};
+
+const useStyles = makeStyles({ name: { InviteUser } })((theme) => ({
+  formInputs: {
+    marginTop: theme.spacing(3),
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(2),
+  },
+  head: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(2),
+    marginBottom: theme.spacing(3),
+  },
+}));
+
+export default InviteUser;
diff --git a/app/client-v2/apps/goat/app/(dashboard)/settings/organization/ManageUsers.tsx b/app/client-v2/apps/goat/app/(dashboard)/settings/organization/ManageUsers.tsx
index 5b580ad09..15a8d8fb9 100644
--- a/app/client-v2/apps/goat/app/(dashboard)/settings/organization/ManageUsers.tsx
+++ b/app/client-v2/apps/goat/app/(dashboard)/settings/organization/ManageUsers.tsx
@@ -4,17 +4,18 @@ import { makeStyles } from "@/lib/theme";
 import { Text } from "@/lib/theme";
 import { useState } from "react";
 
-import Banner from "@p4b/ui/components/Banner";
-import { Card } from "@p4b/ui/components/Card";
-import Dialog from "@p4b/ui/components/Dialog";
-import EnhancedTable from "@p4b/ui/components/EnhancedTable";
+import { Chip } from "@p4b/ui/components/DataDisplay";
+import { EnhancedTable } from "@p4b/ui/components/DataDisplay/EnhancedTable";
+import { TextField } from "@p4b/ui/components/Inputs/TextField";
 import Modal from "@p4b/ui/components/Modal";
-import { SelectField } from "@p4b/ui/components/SelectField";
-import Table from "@p4b/ui/components/Table";
-import { TextField } from "@p4b/ui/components/Text/TextField";
-import { Icon, Button } from "@p4b/ui/components/theme";
+import Banner from "@p4b/ui/components/Surfaces/Banner";
+import { Card } from "@p4b/ui/components/Surfaces/Card";
+import { Icon, Button, IconButton } from "@p4b/ui/components/theme";
 
-interface RowsType {
+import InviteUser from "./InviteUser";
+import UserInfoModal from "./UserInfoModal";
+
+export interface RowsType {
   name: string;
   email: string;
   role: string;
@@ -24,11 +25,12 @@ interface RowsType {
 
 const ManageUsers = () => {
   const { classes } = useStyles();
-  const [userInDialog, setUserInDialog] = useState<RowsType | null>();
-  const [addUserDialog, setAddUserDialog] = useState(false);
-  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+
+  // Component States
+  const [userInDialog, setUserInDialog] = useState<RowsType | boolean>();
   const [ismodalVisible, setModalVisible] = useState<boolean>(false);
-  // const open = Boolean(anchorEl);
+  const [isAddUser, setAddUser] = useState<boolean>(false);
+
   const columnNames = [
     {
       id: "name",
@@ -57,28 +59,12 @@ const ManageUsers = () => {
     },
   ];
 
-  const extensionColumns = ["Extensions", "Study Area"];
-  const extensionRows: { extension: string; studyarea: string }[] = [
-    {
-      extension: "Active mobility",
-      studyarea: "Greater Munich",
-    },
-    {
-      extension: "Motorised mobility",
-      studyarea: "Greater Munich",
-    },
-  ];
-
   const rows: RowsType[] = [
     {
       name: "Luca William Silva",
       email: "john.wloremipsum@gmail.com",
       role: "Admin",
-      status: (
-        <Button startIcon="check" className={classes.buttonSmall}>
-          Active
-        </Button>
-      ),
+      status: <Chip className={classes.chip} label="Active" variant="Border" color="success" icon="check" />,
       Added: "23 Jun 19",
     },
     {
@@ -86,9 +72,7 @@ const ManageUsers = () => {
       email: "john.wloremipsum@gmail.com",
       role: "Admin",
       status: (
-        <Button variant="secondary" startIcon="email" className={classes.buttonSmall}>
-          Invite sent
-        </Button>
+        <Chip className={classes.chip} label="Invite sent" variant="Border" color="main" icon="email" />
       ),
       Added: "23 Jun 19",
     },
@@ -97,9 +81,7 @@ const ManageUsers = () => {
       email: "john.wloremipsum@gmail.com",
       role: "Admin",
       status: (
-        <Button variant="warning" startIcon="warnOutlined" className={classes.buttonSmall}>
-          Expired
-        </Button>
+        <Chip className={classes.chip} label="Expired" variant="Border" color="warning" icon="warnOutlined" />
       ),
       Added: "23 Jun 19",
     },
@@ -107,11 +89,7 @@ const ManageUsers = () => {
       name: "John William Silva",
       email: "john.wloremipsum@gmail.com",
       role: "Admin",
-      status: (
-        <Button startIcon="check" className={classes.buttonSmall}>
-          Active
-        </Button>
-      ),
+      status: <Chip className={classes.chip} label="Active" variant="Border" color="success" icon="check" />,
       Added: "23 Jun 19",
     },
     {
@@ -119,9 +97,7 @@ const ManageUsers = () => {
       email: "john.wloremipsum@gmail.com",
       role: "Admin",
       status: (
-        <Button variant="secondary" startIcon="email" className={classes.buttonSmall}>
-          Invite sent
-        </Button>
+        <Chip className={classes.chip} label="Invite sent" variant="Border" color="main" icon="email" />
       ),
       Added: "23 Jun 19",
     },
@@ -130,28 +106,23 @@ const ManageUsers = () => {
       email: "john.wloremipsum@gmail.com",
       role: "Admin",
       status: (
-        <Button variant="secondary" startIcon="email" className={classes.buttonSmall}>
-          Invite sent
-        </Button>
+        <Chip className={classes.chip} label="Invite sent" variant="Border" color="main" icon="email" />
       ),
       Added: "23 Jun 19",
     },
   ];
 
-  function openAddUserDialog(event: React.MouseEvent<HTMLButtonElement>) {
-    setAnchorEl(event.currentTarget);
-    setAddUserDialog(true);
-  }
-
-  function handleAddUserClose() {
-    setAnchorEl(null);
-    setAddUserDialog(false);
-  }
+  // Functions
 
   function openModal() {
     setModalVisible(true);
   }
 
+  function closeModal() {
+    setUserInDialog(false);
+    setModalVisible(false);
+  }
+
   return (
     <div>
       <div className={classes.container}>
@@ -172,117 +143,44 @@ const ManageUsers = () => {
           <TextField className={classes.searchInput} type="text" label="Search" size="small" />
           <Icon iconId="filter" size="medium" iconVariant="gray" />
           <div style={{ position: "relative" }}>
-            <Button onClick={openAddUserDialog} className={classes.searchButton}>
+            <Button onClick={() => setAddUser(true)} className={classes.searchButton}>
               Invite user
             </Button>
-            {addUserDialog ? (
-              <Dialog
-                title="Invite team mate"
+            {/* Invite User Dialog */}
+            {isAddUser ? (
+              <Modal
                 width="444px"
-                direction="right"
-                anchorEl={anchorEl}
+                open={isAddUser}
+                changeOpen={setAddUser}
                 action={
-                  <div className={classes.buttons}>
-                    <Button variant="noBorder" onClick={handleAddUserClose}>
+                  <>
+                    <Button variant="noBorder" onClick={() => setAddUser(false)}>
                       CANCEL
                     </Button>
                     <Button variant="noBorder">SEND INVITATION</Button>
-                  </div>
+                  </>
                 }
-                onClick={handleAddUserClose}>
-                <div className={classes.head}>
-                  <Icon
-                    iconId="user"
-                    wrapped="circle"
-                    bgVariant="gray2"
-                    bgOpacity={0.6}
-                    iconVariant="secondary"
-                    size="small"
-                  />
-                  <Text typo="body 1">Organization name</Text>
-                </div>
-                <Text typo="body 3">
-                  Send an invitation via email <br /> The receiver will get a link with 72 hours of expiration
-                </Text>
-                <div className={classes.formInputs}>
-                  <TextField size="small" type="email" label="Email address" />
-                  <SelectField
-                    size="small"
-                    defaultValue="editor"
-                    label="Permission"
-                    options={[
-                      {
-                        name: "Editor",
-                        value: "editor",
-                      },
-                      {
-                        name: "Admin",
-                        value: "admin",
-                      },
-                      {
-                        name: "Guest",
-                        value: "guest",
-                      },
-                    ]}
-                  />
-                </div>
-              </Dialog>
+                header={
+                  <div className={classes.modalHeader2}>
+                    <Text typo="subtitle" className={classes.headerText}>
+                      Invite user
+                    </Text>
+                    <IconButton onClick={() => setAddUser(false)} iconId="close" />
+                  </div>
+                }>
+                <InviteUser />
+              </Modal>
             ) : null}
           </div>
         </div>
       </div>
       <Card noHover={true} className={classes.tableCard}>
+        {/* ManageUsers Table */}
         <EnhancedTable
           rows={rows}
           columnNames={columnNames}
           openDialog={setUserInDialog}
-          dialog={{
-            title: userInDialog ? userInDialog.name : "unknown",
-            action: (
-              <div style={{ textAlign: "right" }}>
-                <Button onClick={openModal} variant="noBorder">
-                  REMOVE USER
-                </Button>
-              </div>
-            ),
-            body: (
-              <div>
-                <div className={classes.userDataContainer}>
-                  <span className={classes.userDataText}>
-                    <Text typo="body 2" className={classes.userDataTitle}>
-                      Name:{" "}
-                    </Text>{" "}
-                    <Text typo="label 2">{userInDialog ? userInDialog?.name : ""}</Text>
-                  </span>
-                  <span className={classes.userDataText}>
-                    <Text typo="body 2" className={classes.userDataTitle}>
-                      E-mail:{" "}
-                    </Text>{" "}
-                    <Text typo="label 2">{userInDialog ? userInDialog?.email : ""}</Text>
-                  </span>
-                  <span className={classes.userDataText}>
-                    <Text typo="body 2" className={classes.userDataTitle}>
-                      Added in:{" "}
-                    </Text>{" "}
-                    <Text typo="label 2">{userInDialog ? userInDialog?.Added : ""}</Text>
-                  </span>
-                  <span className={classes.userDataText}>
-                    <Text typo="body 2" className={classes.userDataTitle}>
-                      Last Active:{" "}
-                    </Text>{" "}
-                    <Text typo="label 2">3 days ago</Text>
-                  </span>
-                  <span className={classes.userDataText}>
-                    <Text typo="body 2" className={classes.userDataTitle}>
-                      Organisation role:{" "}
-                    </Text>{" "}
-                    <Text typo="label 2">{userInDialog ? userInDialog?.role : ""}</Text>
-                  </span>
-                </div>
-                <Table minWidth="100%" rows={extensionRows} columnNames={extensionColumns} />
-              </div>
-            ),
-          }}
+          action={<IconButton type="submit" iconId="moreVert" size="medium" />}
         />
       </Card>
       <Banner
@@ -296,28 +194,42 @@ const ManageUsers = () => {
         image="https://s3-alpha-sig.figma.com/img/630a/ef8f/d732bcd1f3ef5d6fe31bc6f94ddfbca8?Expires=1687132800&Signature=aJvQ22UUlmvNjDlrgzV6MjJK~YgohUyT9mh8onGD-HhU5yMI0~ThWZUGVn562ihhRYqlyiR5Rskno84OseNhAN21WqKNOZnAS0TyT3SSUP4t4AZJOmeuwsl2EcgElMzcE0~Qx2X~LWxor1emexxTlWntivbnUeS6qv1DIPwCferjYIwWsiNqTm7whk78HUD1-26spqW3AXVbTtwqz3B8q791QigocHaK9b4f-Ulrk3lsmp8BryHprwgetHlToFNlYYR-SqPFrEeOKNQuEDKH0QzgGv3TX7EfBNL0kgP3Crued~JNth-lIEPCjlDRnFQyNpSiLQtf9r2tH9xIsKA~XQ__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4"
         imageSide="right"
       />
+      {/* Confirm User Removal */}
       <Modal
-        width="444px"
-        open={ismodalVisible}
-        changeOpen={setModalVisible}
+        width="523px"
+        open={userInDialog ? true : false}
+        changeOpen={setUserInDialog}
         action={
-          <>
-            <Button onClick={() => setModalVisible(false)} variant="noBorder">
-              CANCEL
-            </Button>
-            <Button onClick={() => setModalVisible(false)} variant="noBorder">
-              CONFIRM
+          ismodalVisible ? (
+            <>
+              <Button onClick={closeModal} variant="noBorder">
+                CANCEL
+              </Button>
+              <Button onClick={closeModal} variant="noBorder">
+                CONFIRM
+              </Button>
+            </>
+          ) : (
+            <Button onClick={() => openModal()} variant="noBorder">
+              REMOVE USER
             </Button>
-          </>
+          )
         }
         header={
-          <Text className={classes.modalHeader} typo="object heading">
-            <Icon iconId="warn" iconVariant="focus" /> Attention
-          </Text>
+          ismodalVisible ? (
+            <Text className={classes.modalHeader} typo="subtitle">
+              <Icon iconId="warn" iconVariant="warning" /> Attention
+            </Text>
+          ) : (
+            <div className={classes.modalHeader2}>
+              <Text typo="subtitle" className={classes.headerText}>
+                {typeof userInDialog !== "boolean" ? userInDialog?.name : ""}
+              </Text>
+              <IconButton onClick={() => setUserInDialog(false)} iconId="close" />
+            </div>
+          )
         }>
-        <Text typo="body 1">
-          By removing a user they won&apos;t be able to access any projects under your organisation
-        </Text>
+        <UserInfoModal ismodalVisible={ismodalVisible} userInDialog={userInDialog ? userInDialog : false} />
       </Modal>
     </div>
   );
@@ -366,20 +278,6 @@ const useStyles = makeStyles({ name: { ManageUsers } })((theme) => ({
     padding: theme.spacing(3),
     marginBottom: theme.spacing(5),
   },
-  userDataContainer: {
-    border: `1px solid ${theme.colors.palette[theme.isDarkModeEnabled ? "dark" : "light"].greyVariant1}`,
-    padding: theme.spacing(3),
-    borderRadius: 4,
-  },
-  userDataText: {
-    display: "flex",
-    gap: theme.spacing(1),
-    alignItems: "center",
-    marginBottom: theme.spacing(2),
-  },
-  userDataTitle: {
-    fontWeight: "800",
-  },
   formInputs: {
     marginTop: theme.spacing(3),
     display: "flex",
@@ -391,8 +289,18 @@ const useStyles = makeStyles({ name: { ManageUsers } })((theme) => ({
     alignItems: "center",
     gap: theme.spacing(1),
   },
-  buttonSmall: {
-    padding: "3px 10px",
+  modalHeader2: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
+  chip: {
+    "& .mui-6od3lo-MuiChip-label": {
+      padding: "4px",
+    },
+  },
+  headerText: {
+    fontWeight: "normal",
   },
 }));
 
diff --git a/app/client-v2/apps/goat/app/(dashboard)/settings/organization/Overview.tsx b/app/client-v2/apps/goat/app/(dashboard)/settings/organization/Overview.tsx
index 4d304e10b..d1151d838 100644
--- a/app/client-v2/apps/goat/app/(dashboard)/settings/organization/Overview.tsx
+++ b/app/client-v2/apps/goat/app/(dashboard)/settings/organization/Overview.tsx
@@ -1,9 +1,9 @@
 import { makeStyles } from "@/lib/theme";
 import React, { useRef } from "react";
 
-import Banner from "@p4b/ui/components/Banner";
 import Dialog from "@p4b/ui/components/Dialog";
-import { TextField } from "@p4b/ui/components/Text/TextField";
+import { TextField } from "@p4b/ui/components/Inputs/TextField";
+import Banner from "@p4b/ui/components/Surfaces/Banner";
 import type { IconId } from "@p4b/ui/components/theme";
 import { Icon, Button, Text } from "@p4b/ui/components/theme";
 
diff --git a/app/client-v2/apps/goat/app/(dashboard)/settings/organization/TeamModalBody.tsx b/app/client-v2/apps/goat/app/(dashboard)/settings/organization/TeamModalBody.tsx
new file mode 100644
index 000000000..8da76ac92
--- /dev/null
+++ b/app/client-v2/apps/goat/app/(dashboard)/settings/organization/TeamModalBody.tsx
@@ -0,0 +1,193 @@
+import React from "react";
+
+import { Checkbox } from "@p4b/ui/components/Checkbox";
+import { Chip } from "@p4b/ui/components/DataDisplay";
+import { AutoComplete, TextField } from "@p4b/ui/components/Inputs";
+import { Text, Button } from "@p4b/ui/components/theme";
+import { makeStyles } from "@p4b/ui/lib/ThemeProvider";
+
+import type { Option } from "./AddTeamModal";
+import type { Team } from "./Teams";
+
+interface TeamModalBodyProps {
+  selectedEditRow?: Team;
+  setSelectedOption?: (value: Option[]) => void;
+  selectedOption?: Option[];
+  setTeamName?: (value: string) => void;
+}
+
+const TeamModalBody = (props: TeamModalBodyProps) => {
+  const { selectedEditRow, setSelectedOption, selectedOption, setTeamName } = props;
+
+  const { classes } = useStyles();
+
+  const options = [
+    {
+      label: "Sumaya Randolph",
+      value: "sumaya",
+      selected: false,
+    },
+    {
+      label: "Priya Phelps",
+      value: "priya",
+      selected: false,
+    },
+    {
+      label: "Amanda Dickson",
+      value: "amanda",
+      selected: false,
+    },
+    {
+      label: "Alia Campbell",
+      value: "alia",
+      selected: false,
+    },
+    {
+      label: "Cole Chaney",
+      value: "cole",
+      selected: false,
+    },
+    {
+      label: "Idris Lowery",
+      value: "idris",
+      selected: false,
+    },
+  ];
+
+  function changeStatusOfUser(user: Option, status: boolean) {
+    if (selectedOption) {
+      selectedOption?.forEach((userSelected) => {
+        if (userSelected.label === user.label) {
+          userSelected.selected = status;
+        }
+      });
+    }
+
+    if (setSelectedOption) {
+      setSelectedOption(selectedOption ? [...selectedOption] : []);
+    }
+  }
+
+  function removeUser(user: Option) {
+    const options = selectedOption?.filter(
+      (userSelected) => userSelected.label !== user.label && userSelected
+    );
+    if (setSelectedOption) {
+      setSelectedOption(options ? [...options] : []);
+    }
+  }
+
+  return (
+    <>
+      <div className={classes.boxLabel}>
+        <Text typo="body 2" className={classes.label}>
+          Team name
+        </Text>
+        <TextField
+          onValueBeingTypedChange={({ value }) => (setTeamName ? setTeamName(value) : null)}
+          className={classes.input}
+          defaultValue={selectedEditRow ? selectedEditRow.name : ""}
+          size="small"
+          type="text"
+        />
+      </div>
+      <div className={classes.boxLabel}>
+        <Text typo="body 2" className={classes.label}>
+          Add users
+        </Text>
+        <AutoComplete
+          selectedOptions={selectedOption}
+          setSelected={setSelectedOption}
+          multiple={true}
+          className={classes.input}
+          size="small"
+          options={options}
+        />
+      </div>
+      <div>
+        {selectedOption && selectedOption.length ? (
+          <>
+            <Text typo="body 2" className={classes.label}>
+              User list
+            </Text>
+            {selectedOption.map((option, indx) => (
+              <div className={classes.useSelectedWrapper} key={indx}>
+                <div className={classes.userSelected}>
+                  <Checkbox
+                    checked={typeof option.selected === "boolean" ? option.selected : false}
+                    onChange={(event: React.SyntheticEvent, value: boolean) =>
+                      changeStatusOfUser(option, value)
+                    }
+                  />
+                  <div>
+                    <Text typo="body 2">{option.label}</Text>
+                    <Text typo="body 3" className={classes.italic} color="secondary">
+                      user@email.com
+                    </Text>
+                  </div>
+                </div>
+                {typeof option.selected === "boolean" && option.selected ? (
+                  <Chip label="invited" />
+                ) : (
+                  <Button
+                    variant="noBorder"
+                    onClick={() => removeUser(option)}
+                    className={classes.orangeButton}>
+                    Remove user
+                  </Button>
+                )}
+                {/* <IconButton iconId="edit" type="submit" iconVariant="focus" onClick={enterAccessSettings} /> */}
+              </div>
+            ))}
+          </>
+        ) : null}
+      </div>
+    </>
+  );
+};
+
+const useStyles = makeStyles({ name: { TeamModalBody } })((theme) => ({
+  tableCard: {
+    padding: theme.spacing(3),
+  },
+  modalHeader: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  modalHeadertext: {
+    fontWeight: "500",
+  },
+  input: {
+    width: "100%",
+  },
+  label: {
+    paddingBottom: theme.spacing(2),
+    fontWeight: "bold",
+  },
+  boxLabel: {
+    marginBottom: theme.spacing(5),
+  },
+  useSelectedWrapper: {
+    display: "flex",
+    marginTop: theme.spacing(3),
+    justifyContent: "space-between",
+  },
+  userSelected: {
+    display: "flex",
+    gap: theme.spacing(1),
+  },
+  italic: {
+    fontStyle: "italic",
+  },
+  orangeButton: {
+    "&.MuiButton-text": {
+      color: "orange",
+      "&:hover": {
+        color: "orange",
+      },
+    },
+  },
+}));
+
+export default TeamModalBody;
diff --git a/app/client-v2/apps/goat/app/(dashboard)/settings/organization/Teams.tsx b/app/client-v2/apps/goat/app/(dashboard)/settings/organization/Teams.tsx
new file mode 100644
index 000000000..5ed91d56f
--- /dev/null
+++ b/app/client-v2/apps/goat/app/(dashboard)/settings/organization/Teams.tsx
@@ -0,0 +1,174 @@
+"use client";
+
+import React, { useState } from "react";
+
+import { TextField } from "@p4b/ui/components/Inputs";
+import { Button, Icon, Text } from "@p4b/ui/components/theme";
+import { makeStyles } from "@p4b/ui/lib/ThemeProvider";
+
+import type { Option } from "./AddTeamModal";
+import AddTeamModal from "./AddTeamModal";
+import TeamsTable from "./TeamsTable";
+
+export interface Team {
+  name: string;
+  participants: Option[];
+  createdAt: string;
+}
+
+const Teams = () => {
+  const [ismodalVisible, setModalVisible] = useState<boolean>(false);
+  const [teams, setTeams] = useState<Team[]>([]);
+
+  const { classes } = useStyles();
+
+  function addTeam(team: Team) {
+    setTeams([...teams, team]);
+  }
+
+  function editTeam(team: Team) {
+    console.log(team);
+    const updatedTeams = teams.map((singleTeam) => {
+      if (singleTeam.name === team.name) {
+        return team;
+      }
+      return singleTeam;
+    });
+
+    setTeams([...updatedTeams]);
+  }
+
+  return (
+    <div>
+      <div className={classes.headWrapper}>
+        <div className={classes.head}>
+          <Icon
+            iconId="user"
+            wrapped="circle"
+            bgVariant="gray2"
+            bgOpacity={0.6}
+            iconVariant="secondary"
+            size="medium"
+          />
+          <Text typo="body 1" className={classes.name}>
+            Organization name
+          </Text>
+        </div>
+        <div className={classes.search}>
+          <TextField className={classes.searchInput} type="text" label="Search" size="small" />
+          <Icon iconId="filter" size="medium" iconVariant="gray" />
+          <div style={{ position: "relative" }}>
+            <Button className={classes.searchButton} onClick={() => setModalVisible(true)}>
+              New Team
+            </Button>
+          </div>
+        </div>
+        <AddTeamModal visibility={ismodalVisible} setVisibility={setModalVisible} addTeam={addTeam} />
+      </div>
+      {teams.length ? (
+        <TeamsTable rows={teams} editTeam={editTeam} />
+      ) : (
+        <div className={classes.createTeam}>
+          <img src="/assets/illustrations/teams.svg" alt="" />
+          <Text typo="page heading" color="focus" className={classes.IconText}>
+            Create teams to easily manage your projects
+          </Text>
+        </div>
+      )}
+      {/* {teams ? teams.map((team) => team.name) : null} */}
+    </div>
+  );
+};
+
+const useStyles = makeStyles({ name: { Teams } })((theme) => ({
+  bannerText: {
+    color: "white",
+    "@media (max-width: 1268px)": {
+      fontSize: "14px",
+    },
+  },
+  IconText: {
+    fontWeight: "500",
+  },
+  name: {
+    fontWeight: "bold",
+  },
+  createTeam: {
+    marginTop: "22px",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+  },
+  headWrapper: {
+    padding: theme.spacing(3),
+    paddingTop: "0",
+  },
+  head: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(2),
+    marginBottom: theme.spacing(3),
+  },
+  buttons: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "end",
+    gap: theme.spacing(2),
+  },
+  search: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: theme.spacing(4),
+    marginBottom: theme.spacing(3),
+  },
+  searchButton: {
+    width: "131px",
+  },
+  container: {
+    padding: `0px ${theme.spacing(3)}px`,
+    marginBottom: theme.spacing(2),
+  },
+  searchInput: {
+    flexGrow: "1",
+  },
+  tableCard: {
+    padding: theme.spacing(3),
+    marginBottom: theme.spacing(5),
+  },
+  userDataContainer: {
+    border: `1px solid ${theme.colors.palette[theme.isDarkModeEnabled ? "dark" : "light"].greyVariant1}`,
+    padding: theme.spacing(3),
+    borderRadius: 4,
+  },
+  userDataText: {
+    display: "flex",
+    gap: theme.spacing(1),
+    alignItems: "center",
+    marginBottom: theme.spacing(2),
+  },
+  userDataTitle: {
+    fontWeight: "800",
+  },
+  formInputs: {
+    // marginTop: theme.spacing(3),
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(2),
+  },
+  modalHeader: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(1),
+  },
+  buttonSmall: {
+    padding: "3px 10px",
+  },
+  switcher: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(1),
+  },
+}));
+
+export default Teams;
diff --git a/app/client-v2/apps/goat/app/(dashboard)/settings/organization/TeamsTable.tsx b/app/client-v2/apps/goat/app/(dashboard)/settings/organization/TeamsTable.tsx
new file mode 100644
index 000000000..a4935510f
--- /dev/null
+++ b/app/client-v2/apps/goat/app/(dashboard)/settings/organization/TeamsTable.tsx
@@ -0,0 +1,163 @@
+import React, { useState, useEffect } from "react";
+
+import { EnhancedTable } from "@p4b/ui/components/DataDisplay";
+import Modal from "@p4b/ui/components/Modal";
+import { Card } from "@p4b/ui/components/Surfaces";
+import { IconButton } from "@p4b/ui/components/theme";
+import { Text, Button } from "@p4b/ui/components/theme";
+import { makeStyles } from "@p4b/ui/lib/ThemeProvider";
+
+import type { Option } from "./AddTeamModal";
+import TeamModalBody from "./TeamModalBody";
+import type { Team } from "./Teams";
+
+interface TeamsTableProps {
+  rows: Team[];
+  editTeam: (value: Team) => void;
+}
+
+const TeamsTable = (props: TeamsTableProps) => {
+  const { rows, editTeam } = props;
+
+  const [userInDialog, setUserInDialog] = useState<Team | boolean>();
+  const [selectedOption, setSelectedOption] = useState<Option[] | null>(null);
+  const [teamName, setTeamName] = useState<string | null>(null);
+
+  const { classes } = useStyles();
+
+  const columnNames = [
+    {
+      id: "1",
+      numeric: false,
+      label: "Team",
+    },
+    {
+      id: "2",
+      numeric: true,
+      label: "Users",
+    },
+    {
+      id: "3",
+      numeric: true,
+      label: "Creation",
+    },
+  ];
+
+  useEffect(() => {
+    if (userInDialog && typeof userInDialog !== "boolean") {
+      const team = rows.find((row) => row.name === userInDialog.name);
+      setSelectedOption(team ? team.participants : null);
+      setTeamName(team ? team.name : "");
+    }
+  }, [userInDialog]);
+
+  function saveEditTeam() {
+    if (userInDialog && typeof userInDialog !== "boolean") {
+      const team = rows.find((row) => row.name === userInDialog.name);
+      if (team) {
+        team.participants = selectedOption;
+        team.name = teamName;
+        editTeam(team);
+        setUserInDialog(false);
+      }
+    }
+  }
+
+  return (
+    <Card noHover={true} className={classes.tableCard}>
+      <EnhancedTable
+        rows={[
+          ...rows.map((row) => ({
+            name: row.name,
+            count: row.participants.length,
+            createdAt: row.createdAt,
+          })),
+        ]}
+        dense={false}
+        alternativeColors={false}
+        columnNames={columnNames}
+        openDialog={setUserInDialog}
+        action={<IconButton type="submit" iconId="edit" size="medium" iconVariant="focus" />}
+        checkbox={false}
+        hover={true}
+      />
+      <Modal
+        header={
+          <div className={classes.modalHeader}>
+            <Text typo="subtitle" className={classes.modalHeadertext}>
+              Edit Team
+            </Text>
+            <IconButton onClick={() => setSelectedOption(null)} iconId="close" />
+          </div>
+        }
+        action={
+          <>
+            <Button onClick={() => setUserInDialog(false)} variant="noBorder">
+              CANCEL
+            </Button>
+            <Button onClick={saveEditTeam} variant="noBorder">
+              SAVE
+            </Button>
+          </>
+        }
+        width="444px"
+        open={userInDialog ? true : false}
+        changeOpen={setUserInDialog}>
+        {userInDialog && typeof userInDialog !== "boolean" ? (
+          <TeamModalBody
+            selectedEditRow={userInDialog}
+            selectedOption={selectedOption}
+            setSelectedOption={setSelectedOption}
+            setTeamName={setTeamName}
+          />
+        ) : null}
+      </Modal>
+    </Card>
+  );
+};
+
+const useStyles = makeStyles({ name: { TeamsTable } })((theme) => ({
+  tableCard: {
+    padding: theme.spacing(3),
+  },
+  modalHeader: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  modalHeadertext: {
+    fontWeight: "500",
+  },
+  input: {
+    width: "100%",
+  },
+  label: {
+    paddingBottom: theme.spacing(2),
+    fontWeight: "bold",
+  },
+  boxLabel: {
+    marginBottom: theme.spacing(5),
+  },
+  useSelectedWrapper: {
+    display: "flex",
+    marginTop: theme.spacing(3),
+    justifyContent: "space-between",
+  },
+  userSelected: {
+    display: "flex",
+    gap: theme.spacing(1),
+  },
+  italic: {
+    fontStyle: "italic",
+  },
+  orangeButton: {
+    "&.MuiButton-text": {
+      color: "orange",
+      "&:hover": {
+        color: "orange",
+      },
+    },
+  },
+}));
+
+export default TeamsTable;
diff --git a/app/client-v2/apps/goat/app/(dashboard)/settings/organization/UserInfoModal.tsx b/app/client-v2/apps/goat/app/(dashboard)/settings/organization/UserInfoModal.tsx
new file mode 100644
index 000000000..d8e9a9935
--- /dev/null
+++ b/app/client-v2/apps/goat/app/(dashboard)/settings/organization/UserInfoModal.tsx
@@ -0,0 +1,217 @@
+import React, { useState } from "react";
+
+import { Switch } from "@p4b/ui/components/Inputs";
+import { Text } from "@p4b/ui/components/theme";
+import { IconButton } from "@p4b/ui/components/theme";
+import { makeStyles } from "@p4b/ui/lib/ThemeProvider";
+
+import type { RowsType } from "./ManageUsers";
+
+interface UserInfoModal {
+  ismodalVisible: boolean;
+  userInDialog: RowsType | boolean;
+}
+
+const UserInfoModal = (props: UserInfoModal) => {
+  const { ismodalVisible, userInDialog } = props;
+
+  const { classes } = useStyles();
+
+  const [extensions, setExtensions] = useState<
+    {
+      id: string;
+      extension: string;
+      studyarea: string;
+      maxPlaces: number;
+      checked: boolean;
+      placesLeft: number;
+    }[]
+  >([
+    {
+      id: "1",
+      extension: "Active mobility",
+      studyarea: "Greater Munich",
+      maxPlaces: 3,
+      placesLeft: 1,
+      // available: "1 of 3 seats available",
+      checked: false,
+    },
+    {
+      id: "2",
+      extension: "Motorised mobility",
+      studyarea: "Greater Munich",
+      maxPlaces: 3,
+      placesLeft: 0,
+      checked: false,
+    },
+    {
+      id: "3",
+      extension: "Active mobility",
+      studyarea: "Berlin",
+      maxPlaces: 3,
+      placesLeft: 2,
+      checked: false,
+    },
+    {
+      id: "4",
+      extension: "Active mobility",
+      studyarea: "London",
+      maxPlaces: 3,
+      placesLeft: 3,
+      checked: false,
+    },
+  ]);
+
+  // Function
+
+  /**
+   * Updates the state of the extensions array based on the provided element name and checked value
+   * @param {React.ChangeEvent<HTMLInputElement>} event - The change event object.
+   * @param {boolean} checked - The new checked state of the switch.
+   * @param {string | undefined} elementName - The name of the element associated with the switch.
+   */
+
+  function handleSwitch(
+    event: React.ChangeEvent<HTMLInputElement>,
+    checked: boolean,
+    elementName: string | undefined
+  ) {
+    if (elementName) {
+      extensions.forEach((ext, index) => {
+        if (ext.id === elementName) {
+          const newExtensionState = extensions;
+          if (checked) {
+            newExtensionState[index].placesLeft--;
+          } else {
+            newExtensionState[index].placesLeft++;
+          }
+          newExtensionState[index].checked = !ext.checked;
+          setExtensions([...newExtensionState]);
+        }
+      });
+    }
+  }
+
+  return (
+    <>
+      {ismodalVisible ? (
+        <Text typo="body 1">
+          By removing a user they won&apos;t be able to access any projects under your organisation
+        </Text>
+      ) : (
+        <div>
+          <div className={classes.userDataContainer}>
+            <span className={classes.userDataText}>
+              <Text typo="body 2" className={classes.userDataTitle}>
+                Name:{" "}
+              </Text>{" "}
+              <Text typo="label 1" className={classes.userDataValue}>
+                {typeof userInDialog !== "boolean" ? userInDialog?.name : ""}
+              </Text>
+            </span>
+            <span className={classes.userDataText}>
+              <Text typo="body 2" className={classes.userDataTitle}>
+                E-mail:{" "}
+              </Text>{" "}
+              <Text typo="label 1" className={classes.userDataValue}>
+                {typeof userInDialog !== "boolean" ? userInDialog?.email : ""}
+              </Text>
+            </span>
+            <span className={classes.userDataText}>
+              <Text typo="body 2" className={classes.userDataTitle}>
+                Added in:{" "}
+              </Text>{" "}
+              <Text typo="label 1" className={classes.userDataValue}>
+                {typeof userInDialog !== "boolean" ? userInDialog?.Added : ""}
+              </Text>
+            </span>
+            <span className={classes.userDataText}>
+              <Text typo="body 2" className={classes.userDataTitle}>
+                Last Active:{" "}
+              </Text>{" "}
+              <Text typo="label 1" className={classes.userDataValue}>
+                3 days ago
+              </Text>
+            </span>
+            <span className={classes.userDataText}>
+              <Text typo="body 2" className={classes.userDataTitle}>
+                Organisation role:{" "}
+              </Text>{" "}
+              <Text typo="label 1" className={classes.userDataValue}>
+                {typeof userInDialog !== "boolean" ? userInDialog?.role : ""}
+              </Text>
+              <IconButton type="submit" iconId="edit" size="small" />
+            </span>
+            <span className={classes.userDataText}>
+              <Text typo="body 2" className={classes.userDataTitle}>
+                Status:{" "}
+              </Text>{" "}
+              <Text typo="label 1" className={classes.userDataValue}>
+                {typeof userInDialog !== "boolean" ? userInDialog?.status : ""}
+              </Text>
+            </span>
+          </div>
+          <div className={classes.allSwitchers}>
+            <Text typo="body 2" className={classes.name}>
+              Extensions:
+            </Text>
+            {extensions.map((extension, indx) => (
+              <div key={indx} className={classes.switcher}>
+                <Switch
+                  checked={extension.checked}
+                  onChecked={handleSwitch}
+                  elementName={extension.id}
+                  disabled={!extension.placesLeft && !extension.checked}
+                />
+                <Text typo="body 1">
+                  {extension.extension} - {extension.studyarea}
+                </Text>
+                <Text typo="caption" color="secondary">
+                  {extension.placesLeft} of {extension.maxPlaces} seats available
+                </Text>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+const useStyles = makeStyles({ name: { UserInfoModal } })((theme) => ({
+  name: {
+    fontWeight: "bold",
+  },
+  container: {
+    padding: `0px ${theme.spacing(3)}px`,
+    marginBottom: theme.spacing(2),
+  },
+  userDataContainer: {
+    border: `1px solid ${theme.colors.palette[theme.isDarkModeEnabled ? "dark" : "light"].greyVariant1}`,
+    padding: theme.spacing(3),
+    borderRadius: 4,
+  },
+  userDataText: {
+    display: "flex",
+    gap: theme.spacing(2),
+    alignItems: "center",
+    marginBottom: theme.spacing(2),
+  },
+  userDataTitle: {
+    fontWeight: "800",
+  },
+  switcher: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(1),
+    marginTop: theme.spacing(2),
+  },
+  allSwitchers: {
+    margin: `${theme.spacing(5)}px 0px`,
+  },
+  userDataValue: {
+    marginTop: "3px",
+  },
+}));
+
+export default UserInfoModal;
diff --git a/app/client-v2/apps/goat/app/(dashboard)/settings/organization/page.tsx b/app/client-v2/apps/goat/app/(dashboard)/settings/organization/page.tsx
index 157843096..f6e3f5f3d 100644
--- a/app/client-v2/apps/goat/app/(dashboard)/settings/organization/page.tsx
+++ b/app/client-v2/apps/goat/app/(dashboard)/settings/organization/page.tsx
@@ -1,9 +1,10 @@
 import { makeStyles } from "@/lib/theme";
 
-import { Tabs } from "@p4b/ui/components/Tabs";
+import { Tabs } from "@p4b/ui/components/Navigation/Tabs";
 
 import ManageUsers from "./ManageUsers";
 import Overview from "./Overview";
+import Teams from "./Teams";
 
 const Organization = () => {
   const { classes, cx } = useStyles();
@@ -18,7 +19,7 @@ const Organization = () => {
       name: "Manage users",
     },
     {
-      child: <div>overview</div>,
+      child: <Teams />,
       name: "Teams",
     },
     {
diff --git a/app/client-v2/apps/goat/app/(dashboard)/settings/page.tsx b/app/client-v2/apps/goat/app/(dashboard)/settings/page.tsx
index 50bd4bea7..b1148185a 100644
--- a/app/client-v2/apps/goat/app/(dashboard)/settings/page.tsx
+++ b/app/client-v2/apps/goat/app/(dashboard)/settings/page.tsx
@@ -1,5 +1,7 @@
 import { redirect } from "next/navigation";
 
+import "../../../styles/globals.css";
+
 export default async function Home({}) {
   return redirect("/settings/organization");
 }
diff --git a/app/client-v2/apps/goat/app/(dashboard)/settings/subscription/Subscription.tsx b/app/client-v2/apps/goat/app/(dashboard)/settings/subscription/Subscription.tsx
deleted file mode 100644
index 54b9ed1b5..000000000
--- a/app/client-v2/apps/goat/app/(dashboard)/settings/subscription/Subscription.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import { makeStyles } from "@/lib/theme";
-import { useState } from "react";
-
-import Banner from "@p4b/ui/components/Banner";
-import { Button, Text } from "@p4b/ui/components/theme";
-
-import SubscriptionStatusCard from "./SubscriptionStatusCard";
-import type { SubscriptionStatusCardDataType } from "./SubscriptionStatusCard";
-
-const Subscription = () => {
-  const { classes } = useStyles();
-
-  const [subscriptionDetails, setSubscriptionDetails] = useState<SubscriptionStatusCardDataType>({
-    icon: "rocketLaunch",
-    title: "Starter",
-    listItems: [
-      <Text typo="body 2" key={1}>
-        Next payment: 23 July 2024
-      </Text>,
-      <Text typo="body 2" key={2}>
-        Annual payment cycle: 23 July 2023 - 23 July 2024
-      </Text>,
-      <Text typo="body 2" key={3}>
-        2 of 12 editors seat available
-      </Text>,
-      <Text typo="body 2" key={4}>
-        Region: Greater Munich
-      </Text>,
-    ],
-    action: (
-      <Button className={classes.button} variant="primary">
-        Add seats
-      </Button>
-    ),
-  });
-
-  const subscriptionExtensions: SubscriptionStatusCardDataType[] = [
-    {
-      icon: "run",
-      title: "Active mobility",
-      listItems: [
-        <Text typo="body 2" key={1}>
-          Next payment: 23 July 2024
-        </Text>,
-        <Text typo="body 2" key={2}>
-          Annual payment cycle: 23 July 2023 - 23 July 2024
-        </Text>,
-        <Text typo="body 2" key={3}>
-          2 of 12 editors seat available
-        </Text>,
-        <Text typo="body 2" key={4}>
-          Region: Greater Munich
-        </Text>,
-      ],
-      action: (
-        <Button className={classes.button} variant="primary">
-          Add seats
-        </Button>
-      ),
-    },
-    {
-      icon: "bus",
-      title: "Motorised mobility",
-      listItems: [
-        <Text typo="body 2" key={1}>
-          Next payment: 23 July 2024
-        </Text>,
-        <Text typo="body 2" key={2}>
-          Annual payment cycle: 23 July 2023 - 23 July 2024
-        </Text>,
-        <Text typo="body 2" key={3}>
-          2 of 12 editors seat available
-        </Text>,
-        <Text typo="body 2" key={4}>
-          Region: Greater Munich
-        </Text>,
-      ],
-      action: (
-        <Button className={classes.button} variant="primary">
-          Add seats
-        </Button>
-      ),
-    },
-  ];
-
-  return (
-    <div>
-      {[subscriptionDetails, ...subscriptionExtensions].map((extension, indx) => (
-        <SubscriptionStatusCard sectionData={extension} key={indx} />
-      ))}
-      <Banner
-        actions={<Button>Subscribe Now</Button>}
-        content={
-          <Text className={classes.bannerText} typo="body 1">
-            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
-            massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.{" "}
-          </Text>
-        }
-        image="https://s3-alpha-sig.figma.com/img/630a/ef8f/d732bcd1f3ef5d6fe31bc6f94ddfbca8?Expires=1687132800&Signature=aJvQ22UUlmvNjDlrgzV6MjJK~YgohUyT9mh8onGD-HhU5yMI0~ThWZUGVn562ihhRYqlyiR5Rskno84OseNhAN21WqKNOZnAS0TyT3SSUP4t4AZJOmeuwsl2EcgElMzcE0~Qx2X~LWxor1emexxTlWntivbnUeS6qv1DIPwCferjYIwWsiNqTm7whk78HUD1-26spqW3AXVbTtwqz3B8q791QigocHaK9b4f-Ulrk3lsmp8BryHprwgetHlToFNlYYR-SqPFrEeOKNQuEDKH0QzgGv3TX7EfBNL0kgP3Crued~JNth-lIEPCjlDRnFQyNpSiLQtf9r2tH9xIsKA~XQ__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4"
-        imageSide="right"
-      />
-    </div>
-  );
-};
-
-const useStyles = makeStyles({ name: { Subscription } })((theme) => ({
-  settingSection: {
-    padding: theme.spacing(2),
-  },
-  tabs: {
-    padding: "0",
-  },
-  bannerText: {
-    color: "white",
-    "@media (max-width: 1268px)": {
-      fontSize: "14px",
-    },
-  },
-  extensionButtonWrapper: {
-    marginBottom: theme.spacing(5),
-  },
-  button: {
-    marginTop: theme.spacing(3),
-    padding: `${theme.spacing(1)}px ${theme.spacing(2) + 2}px`,
-    fontSize: "13px",
-  },
-}));
-
-export default Subscription;
diff --git a/app/client-v2/apps/goat/app/(dashboard)/settings/subscription/SubscriptionSettings.tsx b/app/client-v2/apps/goat/app/(dashboard)/settings/subscription/SubscriptionSettings.tsx
index dd02fd125..e376d504e 100644
--- a/app/client-v2/apps/goat/app/(dashboard)/settings/subscription/SubscriptionSettings.tsx
+++ b/app/client-v2/apps/goat/app/(dashboard)/settings/subscription/SubscriptionSettings.tsx
@@ -1,49 +1,11 @@
-import { makeStyles } from "@/lib/theme";
-
-import { Tabs } from "@p4b/ui/components/Tabs";
-
-import Subscription from "./Subscription";
-import Overview from "./page";
+import Subscription from "./page";
 
 const SubscriptionSettings = () => {
-  const { classes, cx } = useStyles();
-
-  const tabs = [
-    {
-      child: <Overview />,
-      name: "Overview",
-    },
-    {
-      child: <Subscription />,
-      name: "Subscription",
-    },
-  ];
-
   return (
     <>
-      <Tabs tabs={tabs} className={classes.tabs} />
+      <Subscription />
     </>
   );
 };
 
-const useStyles = makeStyles({ name: { SubscriptionSettings } })((theme) => ({
-  settingSection: {
-    padding: theme.spacing(2),
-  },
-  tabs: {
-    padding: "0",
-  },
-  bannerText: {
-    color: "white",
-  },
-  extensionButtonWrapper: {
-    marginBottom: theme.spacing(5),
-  },
-  button: {
-    marginTop: theme.spacing(3),
-    padding: `${theme.spacing(1)}px ${theme.spacing(2) + 2}px`,
-    fontSize: "13px",
-  },
-}));
-
 export default SubscriptionSettings;
diff --git a/app/client-v2/apps/goat/app/(dashboard)/settings/subscription/SubscriptionStatusCard.tsx b/app/client-v2/apps/goat/app/(dashboard)/settings/subscription/SubscriptionStatusCard.tsx
index c35049260..7f06885cd 100644
--- a/app/client-v2/apps/goat/app/(dashboard)/settings/subscription/SubscriptionStatusCard.tsx
+++ b/app/client-v2/apps/goat/app/(dashboard)/settings/subscription/SubscriptionStatusCard.tsx
@@ -1,6 +1,6 @@
 import { makeStyles } from "@/lib/theme";
 
-import { Card } from "@p4b/ui/components/Card";
+import { Card } from "@p4b/ui/components/Surfaces/Card";
 import { Icon, Text } from "@p4b/ui/components/theme";
 import type { IconId } from "@p4b/ui/components/theme";
 
diff --git a/app/client-v2/apps/goat/app/(dashboard)/settings/subscription/page.tsx b/app/client-v2/apps/goat/app/(dashboard)/settings/subscription/page.tsx
index 835d7cadc..46fe6da24 100644
--- a/app/client-v2/apps/goat/app/(dashboard)/settings/subscription/page.tsx
+++ b/app/client-v2/apps/goat/app/(dashboard)/settings/subscription/page.tsx
@@ -1,42 +1,60 @@
 import { makeStyles } from "@/lib/theme";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
-import Banner from "@p4b/ui/components/Banner";
+import Banner from "@p4b/ui/components/Surfaces/Banner";
 import { Button, Text } from "@p4b/ui/components/theme";
 
 import SubscriptionStatusCard from "./SubscriptionStatusCard";
 import type { SubscriptionStatusCardDataType } from "./SubscriptionStatusCard";
 
-const Overview = () => {
+const Subscription = () => {
   const { classes } = useStyles();
-  const [isDemo, setIsDemo] = useState<boolean | null>(null);
-  const [subscriptionStatus, setSubscriptionStatus] = useState<SubscriptionStatusCardDataType>({
+
+  const [subscriptionDetails, setSubscriptionDetails] = useState<SubscriptionStatusCardDataType>({
     icon: "rocketLaunch",
     title: "Starter",
     listItems: [
       <Text typo="body 2" key={1}>
-        2 of 12 seats available
+        Next payment: 23 July 2024
+      </Text>,
+      <Text typo="body 2" key={2}>
+        Annual payment cycle: 23 July 2023 - 23 July 2024
+      </Text>,
+      <Text typo="body 2" key={3}>
+        2 of 12 editors seat available
+      </Text>,
+      <Text typo="body 2" key={4}>
+        Region: Greater Munich
       </Text>,
     ],
     action: (
-      <Button className={classes.button} variant="secondary">
-        Manage seats
+      <Button className={classes.button} variant="primary">
+        Add seats
       </Button>
     ),
   });
 
-  const extensions: SubscriptionStatusCardDataType[] = [
+  const subscriptionExtensions: SubscriptionStatusCardDataType[] = [
     {
       icon: "run",
       title: "Active mobility",
       listItems: [
         <Text typo="body 2" key={1}>
-          Great Munich Area - 6 of 10 editors available
+          Next payment: 23 July 2024
+        </Text>,
+        <Text typo="body 2" key={2}>
+          Annual payment cycle: 23 July 2023 - 23 July 2024
+        </Text>,
+        <Text typo="body 2" key={3}>
+          2 of 12 editors seat available
+        </Text>,
+        <Text typo="body 2" key={4}>
+          Region: Greater Munich
         </Text>,
       ],
       action: (
-        <Button className={classes.button} variant="secondary">
-          Manage seats
+        <Button className={classes.button} variant="primary">
+          Add seats
         </Button>
       ),
     },
@@ -45,27 +63,31 @@ const Overview = () => {
       title: "Motorised mobility",
       listItems: [
         <Text typo="body 2" key={1}>
-          Great Munich Area - 4 of 10 editors available
+          Next payment: 23 July 2024
+        </Text>,
+        <Text typo="body 2" key={2}>
+          Annual payment cycle: 23 July 2023 - 23 July 2024
+        </Text>,
+        <Text typo="body 2" key={3}>
+          2 of 12 editors seat available
+        </Text>,
+        <Text typo="body 2" key={4}>
+          Region: Greater Munich
         </Text>,
       ],
       action: (
-        <Button className={classes.button} variant="secondary">
-          Manage seats
+        <Button className={classes.button} variant="primary">
+          Add seats
         </Button>
       ),
     },
   ];
 
-  useEffect(() => {
-    setIsDemo(false);
-  });
-
   return (
     <div>
-      {[subscriptionStatus, ...extensions].map((extension, indx) => (
+      {[subscriptionDetails, ...subscriptionExtensions].map((extension, indx) => (
         <SubscriptionStatusCard sectionData={extension} key={indx} />
       ))}
-      <div className={classes.extensionButtonWrapper}>{!isDemo ? <Button>Add extensions</Button> : null}</div>
       <Banner
         actions={<Button>Subscribe Now</Button>}
         content={
@@ -81,7 +103,7 @@ const Overview = () => {
   );
 };
 
-const useStyles = makeStyles({ name: { Overview } })((theme) => ({
+const useStyles = makeStyles({ name: { Subscription } })((theme) => ({
   settingSection: {
     padding: theme.spacing(2),
   },
@@ -104,4 +126,4 @@ const useStyles = makeStyles({ name: { Overview } })((theme) => ({
   },
 }));
 
-export default Overview;
+export default Subscription;
diff --git a/app/client-v2/apps/goat/app/components/Navbar.tsx b/app/client-v2/apps/goat/app/components/Navbar.tsx
new file mode 100644
index 000000000..4d59e9ed8
--- /dev/null
+++ b/app/client-v2/apps/goat/app/components/Navbar.tsx
@@ -0,0 +1,28 @@
+import Link from "next/link";
+
+export default function Navbar() {
+  return (
+    <nav className="bg-blue-800 p-4">
+      <ul className="flex justify-evenly text-2xl font-bold">
+        <li>
+          <Link href="/">Home</Link>
+        </li>
+        <li>
+          <Link href="/api/auth/signin">Sign In</Link>
+        </li>
+        <li>
+          <Link href="/api/auth/signout">Sign Out</Link>
+        </li>
+        <li>
+          <Link href="/server">Server</Link>
+        </li>
+        <li>
+          <Link href="/client">Client</Link>
+        </li>
+        <li>
+          <Link href="/extra">Extra</Link>
+        </li>
+      </ul>
+    </nav>
+  );
+}
diff --git a/app/client-v2/apps/goat/app/components/UserCard.tsx b/app/client-v2/apps/goat/app/components/UserCard.tsx
new file mode 100644
index 000000000..afb88219e
--- /dev/null
+++ b/app/client-v2/apps/goat/app/components/UserCard.tsx
@@ -0,0 +1,50 @@
+import Image from "next/image";
+
+type User =
+  | {
+      name?: string | null | undefined;
+      email?: string | null | undefined;
+      image?: string | null | undefined;
+    }
+  | undefined;
+
+type Props = {
+  user: User;
+  pagetype: string;
+};
+
+export default function Card({ user, pagetype }: Props) {
+  //console.log(user)
+
+  const greeting = user?.name ? (
+    <div className="flex flex-col items-center p-6 bg-white rounded-lg font-bold text-5xl text-black">
+      Hello {user?.name}!
+    </div>
+  ) : null;
+
+  // const emailDisplay = user?.email ? (
+  //     <div className="flex flex-col items-center p-6 bg-white rounded-lg font-bold text-5xl text-black">
+  //         {user?.email}
+  //     </div>
+  // ) : null
+
+  const userImage = user?.image ? (
+    <Image
+      className="border-4 border-black dark:border-slate-500 drop-shadow-xl shadow-black rounded-full mx-auto mt-8"
+      src={user?.image}
+      width={200}
+      height={200}
+      alt={user?.name ?? "Profile Pic"}
+      priority={true}
+    />
+  ) : null;
+
+  return (
+    <section className="flex flex-col gap-4">
+      {greeting}
+      {/* {emailDisplay} */}
+      {userImage}
+      <p className="text-2xl text-center">{pagetype} Page!</p>
+    </section>
+  );
+}
diff --git a/app/client-v2/apps/goat/app/layout.tsx b/app/client-v2/apps/goat/app/layout.tsx
index 7df53f7fd..4030595d3 100644
--- a/app/client-v2/apps/goat/app/layout.tsx
+++ b/app/client-v2/apps/goat/app/layout.tsx
@@ -3,6 +3,8 @@ import AuthProvider from "@/lib/context/AuthProvider";
 import Provider from "@/lib/context/StoreProvider";
 import type { Metadata } from "next";
 
+import "../styles/globals.css";
+
 export const metadata: Metadata = {
   title: {
     template: "%s | GOAT",
@@ -14,10 +16,12 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
-      <body>
+      <body style={{ backgroundColor: "#f2f2f3" }}>
         <Provider>
           <AuthProvider>
-            <ThemeRegistry>{children}</ThemeRegistry>
+            <ThemeRegistry>
+              <div style={{ marginTop: "101px" }}>{children}</div>
+            </ThemeRegistry>
           </AuthProvider>
         </Provider>
       </body>
diff --git a/app/client-v2/apps/goat/app/server/page.tsx b/app/client-v2/apps/goat/app/server/page.tsx
new file mode 100644
index 000000000..defc94e06
--- /dev/null
+++ b/app/client-v2/apps/goat/app/server/page.tsx
@@ -0,0 +1,19 @@
+import { getServerSession } from "next-auth/next";
+import { redirect } from "next/navigation";
+
+import { options } from "../api/auth/[...nextauth]/options";
+import UserCard from "../components/UserCard";
+
+export default async function ServerPage() {
+  const session = await getServerSession(options);
+
+  if (!session) {
+    redirect("/api/auth/signin?callbackUrl=/server");
+  }
+
+  return (
+    <section className="flex flex-col gap-6">
+      <UserCard user={session?.user} pagetype="Server" />
+    </section>
+  );
+}
diff --git a/app/client-v2/apps/goat/lib/store/map/actions.ts b/app/client-v2/apps/goat/lib/store/map/actions.ts
index 8b1378917..e69de29bb 100644
--- a/app/client-v2/apps/goat/lib/store/map/actions.ts
+++ b/app/client-v2/apps/goat/lib/store/map/actions.ts
@@ -1 +0,0 @@
-
diff --git a/app/client-v2/apps/goat/lib/theme.ts b/app/client-v2/apps/goat/lib/theme.ts
index 7adc7265a..d7250f240 100644
--- a/app/client-v2/apps/goat/lib/theme.ts
+++ b/app/client-v2/apps/goat/lib/theme.ts
@@ -1,5 +1,5 @@
 import "@p4b/ui/assets/fonts/mulish/font.css";
-import { createText } from "@p4b/ui/components/Text";
+import { createText } from "@p4b/ui/components/DataDisplay/Text";
 import {
   createThemeProvider,
   defaultGetTypographyDesc,
diff --git a/app/client-v2/apps/goat/package.json b/app/client-v2/apps/goat/package.json
index 00dff3aae..91d4bbb42 100644
--- a/app/client-v2/apps/goat/package.json
+++ b/app/client-v2/apps/goat/package.json
@@ -3,16 +3,22 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "dev": "NODE_OPTIONS='--inspect' next dev -p 3000",
+    "dev": "cross-env NODE_OPTIONS='--inspect' next dev -p 3000",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
+    "@emotion/cache": "latest",
+    "@emotion/react": "latest",
+    "@emotion/styled": "latest",
+    "@mui/icons-material": "latest",
+    "@mui/material": "latest",
     "@p4b/ui": "workspace:*",
     "@reduxjs/toolkit": "^1.9.5",
     "@types/mapbox-gl": "^2.7.11",
     "axios": "^1.4.0",
+    "cross-env": "^7.0.3",
     "geojson": "^0.5.0",
     "mapbox-gl": "^2.15.0",
     "maplibre-gl": "^3.1.0",
@@ -23,11 +29,6 @@
     "react-dom": "^18.2.0",
     "react-map-gl": "^7.1.2",
     "react-redux": "^8.1.1",
-    "@emotion/cache": "latest",
-    "@emotion/react": "latest",
-    "@emotion/styled": "latest",
-    "@mui/icons-material": "latest",
-    "@mui/material": "latest",
     "tss-react": "latest"
   },
   "devDependencies": {
diff --git a/app/client-v2/apps/goat/public/assets/illustrations/teams.svg b/app/client-v2/apps/goat/public/assets/illustrations/teams.svg
new file mode 100644
index 000000000..d96a46e3f
--- /dev/null
+++ b/app/client-v2/apps/goat/public/assets/illustrations/teams.svg
@@ -0,0 +1,170 @@
+<svg width="388" height="257" viewBox="0 0 388 257" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.7">
+<path d="M326.132 29.8685C320.339 31.5154 314.446 32.7927 308.49 33.6927C281.421 37.707 219.026 46.3062 188.778 45.0726C149.521 43.469 25.108 0.709305 15.7117 25.2939C6.31532 49.8785 9.07592 230.005 27.332 233.747C45.5881 237.489 110.274 208.093 148.427 207.019C186.58 205.944 277.809 234.816 315.404 236.44C353 238.064 356.323 232.163 365.173 200.63C374.022 169.096 383.418 65.3808 381.762 41.3307C380.348 20.8838 340.188 25.9261 326.132 29.8685Z" fill="#2BB381"/>
+<path opacity="0.7" d="M326.132 29.8685C320.339 31.5154 314.446 32.7927 308.49 33.6927C281.421 37.707 219.026 46.3062 188.778 45.0726C149.521 43.469 25.108 0.709305 15.7117 25.2939C6.31532 49.8785 9.07592 230.005 27.332 233.747C45.5881 237.489 110.274 208.093 148.427 207.019C186.58 205.944 277.809 234.816 315.404 236.44C353 238.064 356.323 232.163 365.173 200.63C374.022 169.096 383.418 65.3808 381.762 41.3307C380.348 20.8838 340.188 25.9261 326.132 29.8685Z" fill="white"/>
+<path opacity="0.15" d="M15.3402 112.463C21.7025 113.969 29.7417 112.833 32.2082 112.422C32.2082 115.825 32.2805 119.407 32.6159 123.134C33.0387 128.578 33.9487 133.975 35.3352 139.258C35.3352 139.32 35.3765 139.386 35.3919 139.448C34.4528 137.973 31.6819 133.943 31.46 133.64C27.9667 129.615 18.8387 123.874 13.3329 126.213C9.36489 127.893 8.20389 132.622 10.1957 136.231C12.2287 139.916 17.0997 141.741 21.0317 142.316C25.4847 142.959 34.8553 140.26 35.5983 140.034C37.1336 145.39 39.0263 150.638 41.264 155.742C42.554 158.713 43.9472 161.668 45.392 164.608C44.5406 163.365 43.7666 162.254 43.6428 162.11C40.1443 158.086 31.0163 152.344 25.5105 154.688C21.5477 156.364 20.3867 161.098 22.3784 164.706C24.4115 168.392 29.2773 170.216 33.2144 170.787C37.1515 171.357 45.2579 169.245 47.3786 168.623C47.9359 169.748 48.488 170.879 49.0504 172C51.7646 177.381 54.4943 182.737 57.0123 188.078C57.8998 189.959 58.7048 191.84 59.5201 193.732C58.7564 192.621 58.1063 191.676 57.9721 191.568C54.4788 187.543 45.3507 181.802 39.845 184.14C35.8821 185.821 34.716 190.55 36.7077 194.158C38.7717 197.849 43.6118 199.668 47.5437 200.244C51.3673 200.799 58.8029 198.882 61.3209 198.188C62.0949 200.141 62.8689 202.094 63.5346 204.022C63.9577 205.348 64.4582 206.592 64.8039 207.954C65.1497 209.316 65.547 210.611 65.9185 211.917C66.5274 214.461 67.1775 217.088 67.7142 219.586C68.1012 221.318 68.4314 222.978 68.7771 224.654C67.9154 222.768 66.1507 219.118 65.9649 218.83C63.1269 214.328 54.9741 207.286 49.1795 208.761C44.9999 209.82 43.1319 214.317 44.5354 218.188C45.9854 222.14 50.521 224.675 54.3395 225.836C58.5397 227.116 67.838 225.949 68.999 225.795C69.5563 228.56 70.0723 231.259 70.5161 233.813C70.8876 235.911 71.2316 237.924 71.5481 239.853H75.32C74.9382 237.732 74.5168 235.505 74.0558 233.171C73.4985 230.354 72.8484 227.363 72.1569 224.294C74.9559 223.176 77.6868 221.896 80.3355 220.46C83.3954 223.765 91.2386 227.656 92.2551 228.118C91.187 230.735 90.124 233.258 89.0817 235.643C88.447 237.103 87.8227 238.496 87.2086 239.858H91.1664C91.5585 238.928 91.9507 237.987 92.348 237.016C93.4419 234.363 94.5616 231.511 95.6814 228.571C96.8063 228.802 106.001 230.668 110.305 229.701C114.195 228.828 118.907 226.617 120.625 222.798C122.328 219.046 120.8 214.42 116.719 213.032C111.043 211.136 102.389 217.55 99.2211 221.832C99.0354 222.084 97.3119 225.05 96.2541 226.941C96.7082 225.738 97.1571 224.572 97.606 223.343C98.509 220.886 99.3398 218.409 100.243 215.741C100.635 214.439 101.031 213.125 101.43 211.799C101.853 210.493 102.131 209.054 102.493 207.687C103.267 204.464 103.891 201.159 104.443 197.813C106.605 198.594 114.324 201.272 118.323 200.989C122.322 200.707 127.292 199.257 129.598 195.731C131.853 192.282 131.048 187.476 127.219 185.508C121.899 182.778 112.369 187.81 108.587 191.568C108.349 191.799 105.934 194.796 104.644 196.466C104.959 194.456 105.289 192.447 105.542 190.401C106.28 184.495 106.837 178.492 107.426 172.504C107.601 170.674 107.802 168.849 107.998 167.019C108.762 167.307 117.864 170.684 122.343 170.37C126.321 170.093 131.316 168.633 133.618 165.112C135.919 161.591 135.073 156.852 131.239 154.889C125.924 152.154 116.394 157.191 112.606 160.944C112.322 161.226 108.86 165.57 108.029 166.685C108.458 162.66 108.922 158.651 109.536 154.724C110.344 149.409 111.497 144.152 112.988 138.986C113.344 139.119 122.828 142.686 127.436 142.368C131.414 142.09 136.409 140.63 138.711 137.104C140.966 133.655 140.161 128.85 136.332 126.886C131.017 124.152 121.487 129.189 117.699 132.941C117.451 133.188 114.809 136.472 113.571 138.081L113.267 137.927C114.907 132.77 117.007 127.769 119.541 122.985C120.903 120.333 122.353 117.876 123.819 115.511C125.516 116.359 133.318 120.137 137.477 120.297C141.466 120.456 146.585 119.556 149.268 116.303C151.951 113.049 151.621 108.259 148.03 105.884C143.045 102.584 133.019 106.547 128.84 109.862C128.685 109.991 127.632 111.024 126.502 112.155C126.502 111.908 126.502 111.641 126.502 111.291C126.667 111.034 126.837 110.777 127.018 110.52C129.521 106.768 132.044 103.484 134.299 100.595C135.599 98.9604 136.807 97.5109 137.947 96.1642C140.047 96.1231 148.509 95.8713 152.214 94.1391C155.826 92.448 159.954 89.2972 160.826 85.1852C161.683 81.1554 159.191 76.9612 154.908 76.5037C148.958 75.8664 141.894 83.9824 139.717 88.8397C139.531 89.2612 137.354 96.1642 137.462 96.1642H137.591C136.466 97.4338 135.274 98.8113 133.979 100.343C131.667 103.175 129.077 106.393 126.502 110.083C126.45 104.352 125.434 92.4532 117.844 91.7336C107.818 90.7827 104.944 102.188 111.161 108.372C115.511 112.705 121.259 113.296 124.314 113.265C122.39 116.118 120.46 119.191 118.638 122.517C115.976 127.291 113.745 132.292 111.971 137.459C111.971 137.516 111.941 137.582 111.92 137.644C111.951 135.902 111.873 131.019 111.822 130.643C111.136 125.365 106.698 115.573 100.816 114.488C96.5792 113.707 92.9878 117.017 92.6524 121.124C92.3067 125.313 95.3563 129.507 98.3284 132.16C101.682 135.141 110.996 138.035 111.744 138.261C110.072 143.563 108.759 148.97 107.813 154.447C107.24 157.639 106.781 160.867 106.326 164.11C106.326 162.599 106.275 161.247 106.249 161.062C105.563 155.783 101.12 145.991 95.2428 144.907C91.0012 144.126 87.415 147.431 87.0745 151.537C86.7288 155.732 89.7835 159.926 92.7505 162.573C95.7175 165.22 103.659 167.883 105.754 168.551C105.604 169.795 105.434 171.039 105.284 172.283C104.567 178.265 103.881 184.233 103.019 190.072C102.72 192.128 102.348 194.143 101.987 196.158C101.987 194.816 101.94 193.685 101.915 193.516C101.228 188.237 96.7908 178.445 90.9084 177.361C86.6668 176.585 83.0807 179.89 82.7401 183.997C82.3995 188.186 85.4491 192.385 88.4161 195.032C91.2954 197.602 98.5555 200.08 101.048 200.887C100.609 202.943 100.176 204.999 99.6597 206.967C99.2779 208.304 99.0044 209.619 98.5452 210.94L97.2758 214.857C96.3728 217.319 95.4646 219.863 94.5255 222.243C93.8857 223.898 93.2458 225.471 92.606 227.054C92.9311 224.998 93.4781 220.994 93.4884 220.655C93.424 215.973 92.1556 211.386 89.8041 207.332C89.8194 206.816 89.7866 206.3 89.7061 205.79C89.0456 201.724 85.2117 198.702 81.0476 199.807C75.2684 201.349 71.5996 211.449 71.3262 216.769C71.3262 217.083 71.5171 220.501 71.6822 222.66C71.3932 221.405 71.1249 220.187 70.8102 218.902C70.2013 216.332 69.5253 213.829 68.8029 211.11C68.4039 209.811 68.0049 208.499 67.6058 207.173C67.2343 205.847 66.6718 204.495 66.2075 203.143C65.1445 199.946 63.839 196.862 62.4458 193.778C64.6853 193.264 72.6007 191.208 75.7792 188.808C78.9578 186.407 82.3015 182.429 82.2757 178.224C82.2447 174.112 78.9114 170.54 74.6286 171.028C68.6791 171.671 63.5191 181.108 62.4407 186.32C62.3736 186.644 62.0227 190.468 61.8679 192.575C61.0165 190.72 60.1806 188.869 59.2569 187.019C56.5995 181.689 53.7461 176.374 50.9184 171.085C50.0515 169.461 49.2104 167.826 48.3384 166.197C49.1382 166.017 58.6016 163.827 62.162 161.103C65.3302 158.687 68.6843 154.729 68.6533 150.52C68.6275 146.408 65.2941 142.841 61.0113 143.324C55.0619 143.966 49.9019 153.403 48.8234 158.615C48.7409 159.006 48.2403 164.511 48.1836 165.919C46.3105 162.321 44.4787 158.723 42.8172 155.125C40.5456 150.248 38.5945 145.23 36.9761 140.101C37.3476 140.019 47.2341 137.783 50.9081 134.992C54.0763 132.576 57.4303 128.618 57.3993 124.409C57.3993 120.297 54.0402 116.729 49.7574 117.213C43.8079 117.855 38.6479 127.292 37.5694 132.504C37.4972 132.843 37.1154 137.043 36.9761 139.042L36.6407 139.078C35.1516 133.868 34.1328 128.535 33.5963 123.144C33.2609 120.183 33.1112 117.336 33.0235 114.565C34.9069 114.334 43.5086 113.193 47.069 111.045C50.4798 108.989 54.2569 105.421 54.6903 101.237C55.1134 97.1254 52.1929 93.2344 47.8843 93.2242C41.9039 93.2242 35.7325 102.029 34.0864 107.102C33.9987 107.375 33.4002 110.274 32.9925 112.391C32.9925 111.142 32.9254 109.847 32.9306 108.649C32.9306 104.142 33.2299 100.014 33.5085 96.3647C33.6891 94.3087 33.8904 92.4172 34.0968 90.6644C35.8305 89.4822 42.7449 84.6147 44.876 81.14C46.94 77.7476 48.648 72.8492 47.1 68.9377C45.5829 65.1032 41.1814 62.9753 37.3579 64.949C32.0431 67.6835 30.6499 78.313 31.5219 83.5867C31.5993 84.039 33.5859 90.9985 33.6994 90.9369L33.8027 90.8649C33.5705 92.5457 33.3383 94.3498 33.1267 96.3287C32.7603 99.9781 32.3837 104.111 32.2753 108.634C32.2753 109.467 32.2443 110.32 32.234 111.204C29.9533 107.704 22.7603 97.8861 14.9893 99.9678C5.56713 102.363 7.72401 110.659 15.3402 112.463Z" fill="black"/>
+<path opacity="0.15" d="M362.815 134.632C357.562 135.881 350.947 134.94 348.883 134.601C348.883 137.413 348.821 140.373 348.542 143.452C348.193 147.947 347.443 152.402 346.303 156.765C346.303 156.816 346.266 156.868 346.251 156.919C347.03 155.706 349.316 152.375 349.517 152.139C352.407 148.818 359.946 144.084 364.481 146.012C367.758 147.395 368.718 151.301 367.061 154.282C365.405 157.263 361.36 158.836 358.098 159.309C354.424 159.823 346.684 157.608 346.07 157.423C344.796 161.835 343.228 166.157 341.375 170.36C340.312 172.817 339.161 175.259 337.98 177.69C338.686 176.662 339.326 175.742 339.424 175.634C342.314 172.308 349.853 167.579 354.388 169.502C357.665 170.89 358.625 174.796 356.968 177.777C355.312 180.758 351.292 182.326 348.005 182.799C344.718 183.272 338.062 181.509 336.313 181.015C335.848 181.941 335.394 182.876 334.93 183.801C332.691 188.242 330.43 192.673 328.356 197.078C327.618 198.62 326.958 200.188 326.292 201.745C326.916 200.83 327.453 200.064 327.546 199.956C330.436 196.631 337.974 191.902 342.51 193.824C345.787 195.212 346.746 199.118 345.09 202.1C343.434 205.081 339.414 206.649 336.127 207.121C332.969 207.579 326.839 205.996 324.775 205.42C324.135 207.034 323.49 208.648 322.948 210.241C322.598 211.336 322.185 212.369 321.916 213.485C321.648 214.6 321.302 215.68 320.998 216.759C320.482 218.861 319.966 221.03 319.512 223.091C319.192 224.525 318.918 225.898 318.635 227.275C319.347 225.733 320.802 222.711 320.957 222.469C323.304 218.748 330.033 212.935 334.822 214.153C338.268 215.027 339.811 218.743 338.64 221.94C337.469 225.137 333.697 227.296 330.544 228.257C327.076 229.311 319.393 228.35 318.439 228.221C317.974 230.508 317.551 232.734 317.185 234.841C316.875 236.579 316.596 238.239 316.344 239.832H313.248C313.564 238.074 313.908 236.233 314.28 234.307C314.739 231.984 315.276 229.511 315.828 226.977C313.516 226.055 311.26 224.998 309.073 223.811C306.545 226.54 300.064 229.732 299.223 230.138C300.105 232.297 300.987 234.389 301.844 236.353C302.36 237.555 302.876 238.707 303.392 239.832H300.193C299.873 239.065 299.548 238.282 299.218 237.483C298.315 235.294 297.391 232.94 296.467 230.508C295.533 230.704 287.933 232.241 284.388 231.444C281.173 230.719 277.282 228.91 275.843 225.744C274.403 222.577 275.693 218.825 279.068 217.694C283.753 216.127 290.9 221.426 293.516 224.962C293.671 225.173 295.064 227.62 295.962 229.182C295.59 228.185 295.219 227.224 294.847 226.196C294.099 224.166 293.413 222.12 292.67 219.92C292.346 218.847 292.019 217.761 291.689 216.661C291.338 215.582 291.111 214.395 290.812 213.253C290.172 210.591 289.656 207.862 289.202 205.096C287.417 205.744 281.039 207.954 277.742 207.723C274.444 207.491 270.332 206.289 268.454 203.379C266.575 200.47 267.251 196.564 270.42 194.934C274.806 192.683 282.68 196.841 285.807 199.941C286.003 200.131 287.995 202.608 289.063 203.986C288.8 202.326 288.547 200.671 288.32 198.98C287.711 194.097 287.246 189.142 286.772 184.197C286.622 182.681 286.457 181.175 286.297 179.664C285.667 179.905 278.144 182.691 274.429 182.434C271.142 182.203 267.019 181 265.115 178.091C263.211 175.181 263.918 171.27 267.081 169.646C271.467 167.389 279.341 171.547 282.468 174.647C282.706 174.883 285.564 178.45 286.251 179.391C285.894 176.066 285.513 172.755 285.002 169.512C284.335 165.123 283.386 160.781 282.159 156.513C281.859 156.626 274.026 159.571 270.239 159.304C266.952 159.078 262.829 157.875 260.925 154.961C259.021 152.046 259.723 148.135 262.886 146.49C267.277 144.234 275.146 148.392 278.273 151.491C278.48 151.692 280.662 154.406 281.668 155.721L281.921 155.593C280.572 151.336 278.845 147.208 276.761 143.257C275.636 141.067 274.439 139.037 273.232 137.089C271.828 137.788 265.383 140.903 261.947 141.042C258.655 141.17 254.424 140.425 252.21 137.742C249.996 135.059 250.27 131.096 253.242 129.137C257.37 126.413 265.626 129.687 269.094 132.422C269.223 132.525 270.089 133.378 271.023 134.313C271.023 134.108 271.023 133.871 271.023 133.599L270.611 132.967C268.547 129.883 266.483 127.153 264.594 124.743C263.521 123.391 262.53 122.173 261.581 121.083C259.847 121.052 252.855 120.841 249.8 119.412C246.746 117.984 243.407 115.414 242.685 112.016C241.962 108.618 244.037 105.221 247.576 104.846C252.489 104.332 258.325 111.014 260.12 115.038C260.275 115.383 262.071 121.088 261.983 121.088H261.88C262.809 122.116 263.789 123.278 264.842 124.542C266.751 126.881 268.887 129.543 271.034 132.586C271.075 127.857 271.916 118.025 278.185 117.428C286.441 116.647 288.825 126.069 283.701 131.173C280.089 134.771 275.363 135.239 272.84 135.213C274.429 137.572 276.023 140.111 277.509 142.861C279.711 146.801 281.553 150.93 283.015 155.197C283.015 155.243 283.041 155.3 283.062 155.351C283.036 153.907 283.098 149.877 283.139 149.569C283.707 145.21 287.37 137.12 292.231 136.205C295.729 135.562 298.696 138.292 298.975 141.684C299.254 145.076 296.736 148.613 294.279 150.797C291.509 153.264 283.815 155.649 283.201 155.84C284.582 160.217 285.668 164.682 286.452 169.204C286.926 171.835 287.319 174.503 287.68 177.181C287.68 175.932 287.721 174.817 287.742 174.662C288.309 170.304 291.978 162.218 296.834 161.324C300.332 160.676 303.299 163.411 303.578 166.798C303.862 170.262 301.344 173.727 298.882 175.911C296.421 178.096 289.873 180.301 288.139 180.851C288.268 181.879 288.407 182.907 288.531 183.935C289.125 188.874 289.692 193.804 290.399 198.625C290.647 200.321 290.956 201.987 291.256 203.652C291.256 202.542 291.297 201.596 291.318 201.467C291.885 197.109 295.549 189.023 300.41 188.129C303.908 187.481 306.875 190.216 307.154 193.603C307.432 196.99 304.914 200.532 302.458 202.722C300.002 204.911 294.083 206.89 292.025 207.553C292.386 209.249 292.747 210.951 293.17 212.58C293.49 213.685 293.717 214.77 294.094 215.859L295.126 219.098C295.869 221.128 296.622 223.21 297.396 225.194C297.912 226.561 298.454 227.861 298.98 229.167C298.712 227.476 298.263 224.161 298.253 223.883C298.307 220.017 299.355 216.23 301.297 212.883C301.286 212.452 301.313 212.02 301.38 211.593C301.896 208.237 305.09 205.739 308.526 206.654C313.304 207.918 316.328 216.265 316.555 220.655C316.555 220.912 316.4 223.739 316.261 225.517C316.504 224.489 316.726 223.461 316.984 222.433C317.5 220.326 318.046 218.244 318.645 215.998L319.631 212.745C319.935 211.65 320.399 210.534 320.786 209.419C321.731 206.849 322.809 204.279 323.96 201.709C322.113 201.272 315.57 199.612 312.943 197.597C310.317 195.582 307.52 192.406 307.52 188.936C307.52 185.467 310.296 182.588 313.836 182.974C318.748 183.488 323.01 191.295 323.903 195.603C323.955 195.87 324.249 199.026 324.373 200.768C325.074 199.226 325.771 197.684 326.53 196.178C328.723 191.779 331.086 187.389 333.418 182.999C334.135 181.653 334.832 180.306 335.534 178.959C334.873 178.81 327.061 177.001 324.12 174.755C321.504 172.755 318.733 169.486 318.759 166.017C318.784 162.547 321.535 159.674 325.069 160.054C329.982 160.568 334.244 168.381 335.136 172.683C335.203 173.007 335.616 177.556 335.652 178.718C337.2 175.752 338.712 172.781 340.085 169.795C341.963 165.768 343.575 161.623 344.909 157.387C344.6 157.32 336.437 155.47 333.423 153.167C330.807 151.172 328.036 147.903 328.062 144.429C328.088 140.954 330.838 138.081 334.378 138.466C339.29 138.98 343.547 146.788 344.44 151.095C344.502 151.378 344.817 154.842 344.93 156.492L345.209 156.523C346.456 152.226 347.312 147.825 347.768 143.375C348.047 140.934 348.171 138.58 348.243 136.292C346.695 136.102 339.584 135.161 336.643 133.383C333.826 131.687 330.709 128.757 330.348 125.282C329.987 121.808 332.412 118.672 335.967 118.667C340.905 118.667 346.003 125.94 347.366 130.119C347.438 130.345 347.933 132.74 348.269 134.488C348.269 133.46 348.32 132.386 348.315 131.404C348.315 127.683 348.072 124.275 347.84 121.263C347.696 119.546 347.526 117.999 347.355 116.555C345.926 115.578 340.214 111.559 338.454 108.685C336.695 105.812 335.358 101.839 336.617 98.6109C337.876 95.3829 341.504 93.6867 344.667 95.3161C349.053 97.5726 350.209 106.372 349.481 110.736C349.419 111.111 347.763 116.858 347.686 116.806L347.598 116.745C347.794 118.133 347.985 119.623 348.16 121.258C348.459 124.275 348.769 127.683 348.857 131.419C348.857 132.108 348.888 132.812 348.898 133.522C350.776 130.628 356.721 122.522 363.135 124.27C370.89 126.295 369.099 133.126 362.815 134.632Z" fill="black"/>
+<g opacity="0.3">
+<path d="M351.23 26.9336V71.5334H296.973V26.9336H315.157V28.7377C315.183 29.2445 315.403 29.7219 315.772 30.0714C316.142 30.4209 316.631 30.6158 317.141 30.6158C317.65 30.6158 318.14 30.4209 318.509 30.0714C318.879 29.7219 319.099 29.2445 319.125 28.7377V26.9336H329.078V28.7377C329.065 29.0051 329.106 29.2724 329.199 29.5234C329.292 29.7745 329.436 30.004 329.621 30.198C329.806 30.3921 330.029 30.5466 330.276 30.6522C330.523 30.7577 330.789 30.8122 331.057 30.8122C331.326 30.8122 331.592 30.7577 331.839 30.6522C332.086 30.5466 332.309 30.3921 332.494 30.198C332.679 30.004 332.822 29.7745 332.916 29.5234C333.009 29.2724 333.05 29.0051 333.036 28.7377V26.9336H351.23Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M307.066 39.4854H300.25V46.2753H307.066V39.4854Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M317.288 39.4854H310.471V46.2753H317.288V39.4854Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M327.51 39.4854H320.693V46.2753H327.51V39.4854Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M337.732 39.4854H330.915V46.2753H337.732V39.4854Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M347.954 39.4854H341.137V46.2753H347.954V39.4854Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M307.066 49.9507H300.25V56.7406H307.066V49.9507Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M317.288 49.9507H310.471V56.7406H317.288V49.9507Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M327.51 49.9507H320.693V56.7406H327.51V49.9507Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M337.732 49.9507H330.915V56.7406H337.732V49.9507Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M347.954 49.9507H341.137V56.7406H347.954V49.9507Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M307.066 60.4155H300.25V67.2055H307.066V60.4155Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M317.288 60.4155H310.471V67.2055H317.288V60.4155Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M327.51 60.4155H320.693V67.2055H327.51V60.4155Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M337.732 60.4155H330.915V67.2055H337.732V60.4155Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M347.954 60.4155H341.137V67.2055H347.954V60.4155Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M319.125 21.9479V28.7378C319.099 29.2446 318.879 29.722 318.509 30.0715C318.14 30.421 317.65 30.6159 317.141 30.6159C316.631 30.6159 316.142 30.421 315.772 30.0715C315.403 29.722 315.183 29.2446 315.157 28.7378V21.9479C315.183 21.4412 315.403 20.9637 315.772 20.6142C316.142 20.2647 316.631 20.0698 317.141 20.0698C317.65 20.0698 318.14 20.2647 318.509 20.6142C318.879 20.9637 319.099 21.4412 319.125 21.9479Z" fill="black" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M333.036 21.9478V28.7377C333.05 29.005 333.009 29.2724 332.916 29.5234C332.822 29.7744 332.679 30.004 332.494 30.198C332.309 30.392 332.086 30.5466 331.839 30.6521C331.592 30.7577 331.326 30.8122 331.057 30.8122C330.789 30.8122 330.523 30.7577 330.276 30.6521C330.029 30.5466 329.806 30.392 329.621 30.198C329.436 30.004 329.292 29.7744 329.199 29.5234C329.106 29.2724 329.065 29.005 329.079 28.7377V21.9478C329.104 21.4424 329.324 20.9662 329.692 20.6176C330.061 20.2691 330.549 20.0747 331.057 20.0747C331.565 20.0747 332.054 20.2691 332.422 20.6176C332.791 20.9662 333.01 21.4424 333.036 21.9478Z" fill="black" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<g opacity="0.3">
+<path d="M208.185 218.399H200.667V235.741H208.185V218.399Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M218.247 209.532H210.729V235.741H218.247V209.532Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M228.304 198.358H220.786V235.741H228.304V198.358Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M238.366 190.648H230.848V235.741H238.366V190.648Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<g opacity="0.3">
+<path d="M119.881 51.1197C126.148 37.3962 120.06 21.2105 106.283 14.968C92.5064 8.7254 76.2577 14.7899 69.9909 28.5133C63.724 42.2368 69.8121 58.4224 83.5889 64.665C97.3658 70.9076 113.614 64.8431 119.881 51.1197Z" stroke="black" stroke-miterlimit="10"/>
+<path d="M110.452 55.2706C119.023 46.7336 119.023 32.8924 110.452 24.3553C101.882 15.8183 87.9871 15.8183 79.4169 24.3553C70.8467 32.8924 70.8467 46.7336 79.4169 55.2706C87.9871 63.8077 101.882 63.8077 110.452 55.2706Z" stroke="black" stroke-miterlimit="10"/>
+<path d="M104.87 49.7098C110.357 44.2439 110.357 35.382 104.87 29.9162C99.3829 24.4503 90.4865 24.4503 84.9994 29.9162C79.5123 35.382 79.5123 44.2439 84.9994 49.7098C90.4865 55.1757 99.3829 55.1757 104.87 49.7098Z" stroke="black" stroke-miterlimit="10"/>
+<path d="M100.55 45.4065C103.651 42.3173 103.651 37.3087 100.55 34.2194C97.4488 31.1302 92.4207 31.1302 89.3194 34.2194C86.2182 37.3087 86.2182 42.3173 89.3194 45.4065C92.4207 48.4958 97.4488 48.4958 100.55 45.4065Z" stroke="black" stroke-miterlimit="10"/>
+<path d="M98.2872 39.8089C98.2821 39.1495 98.0812 38.5063 97.7098 37.9604C97.3384 37.4145 96.8131 36.9902 96.2001 36.7411C95.5871 36.4921 94.9138 36.4292 94.265 36.5606C93.6163 36.692 93.0211 37.0117 92.5544 37.4795C92.0877 37.9472 91.7704 38.5421 91.6425 39.1891C91.5145 39.8361 91.5817 40.5064 91.8355 41.1155C92.0893 41.7246 92.5184 42.2452 93.0687 42.6118C93.619 42.9784 94.266 43.1746 94.928 43.1757C95.3711 43.1763 95.8099 43.0896 96.2191 42.9204C96.6283 42.7512 96.9998 42.5029 97.3121 42.1899C97.6245 41.8768 97.8715 41.5052 98.0388 41.0966C98.2062 40.6879 98.2906 40.2503 98.2872 39.8089Z" stroke="black" stroke-miterlimit="10"/>
+</g>
+<path d="M94.2727 40.4723H57.4148V39.1514H94.2727C94.4469 39.1527 94.6136 39.2226 94.7364 39.3459C94.8591 39.4691 94.928 39.6357 94.928 39.8093C94.9287 39.8957 94.9123 39.9814 94.8797 40.0615C94.8471 40.1415 94.7991 40.2144 94.7382 40.276C94.6773 40.3376 94.6049 40.3866 94.525 40.4203C94.4452 40.454 94.3594 40.4717 94.2727 40.4723Z" fill="#B2B2B2"/>
+<path d="M54.1382 35.1011L54.3446 35.3375L58.1939 39.1463H46.6717L42.5488 35.1011H54.1382Z" fill="#B2B2B2"/>
+<path d="M42.5488 44.3632L46.6768 40.4619H58.2043C56.6944 41.6015 55.3214 42.9105 54.1124 44.3632H42.5488Z" fill="#B2B2B2"/>
+<path d="M364.884 239.822H379.44" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M124.247 239.822H358.97" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.8933 239.822H120.609" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M256.482 206.715L257.711 215.967C257.711 215.967 259.212 227.399 259.558 230.051C259.903 232.703 259.759 239.709 259.759 239.709H254.501L254.434 229.845L254.568 212.976L256.482 206.715Z" fill="#808080" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M259.785 236.861C259.785 238.485 259.759 239.709 259.759 239.709H254.501L254.475 235.566L259.785 236.861Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M259.774 238.624C259.774 239.071 259.774 239.411 259.774 239.58V239.652V239.704H254.501V238.619L259.774 238.624Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M248.696 234.677C248.696 234.677 246.715 236.651 245.76 237.057C244.805 237.463 243.304 237.602 243.097 238.085C242.977 238.689 242.954 239.308 243.03 239.92H256.075C256.262 239.28 256.331 238.611 256.276 237.946C256.219 237.524 256.105 237.113 255.935 236.723C255.935 236.723 249.516 234.61 248.696 234.677Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M256.075 239.914H243.02C242.986 239.552 242.972 239.188 242.979 238.825H256.281C256.243 239.193 256.174 239.557 256.075 239.914Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M259.831 193.588C259.831 193.588 259.759 197.736 259.145 198.892C258.531 200.049 257.303 202.023 257.303 202.023C257.303 202.023 255.729 214.873 256.003 216.106C256.276 217.34 257.164 220.527 257.096 222.788C257.029 225.05 255.868 234.487 255.868 234.487C255.868 234.487 256.209 235.098 256.142 235.304C256.075 235.51 255.935 236.733 255.935 236.733C255.935 236.733 253.82 236.394 252.323 235.982C251.098 235.615 249.892 235.185 248.711 234.692C248.566 234.276 248.542 233.826 248.644 233.397C248.851 232.924 249.398 231.562 249.398 231.562C249.398 231.562 249.191 223.533 249.191 222.176C249.191 220.819 248.097 214.893 248.097 213.67C248.097 212.446 246.802 201.087 247.003 199.792C247.205 198.496 247.349 196.528 247.349 196.528L247.003 193.444L259.831 193.588Z" fill="#A1A1A1" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M252.695 203.739C252.747 207.481 252.824 214.281 252.726 215.356" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M252.659 201.272C252.659 201.272 252.659 201.735 252.659 202.485" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M252.865 216.851C252.865 216.851 253.273 219.575 253.407 222.906C253.541 226.237 252.932 233.314 252.932 233.314C253.06 233.62 253.152 233.939 253.206 234.265C253.113 234.665 252.974 235.053 252.793 235.422" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M257.984 170.787C257.984 170.787 261.013 175.521 261.482 177.392C261.952 179.262 260.229 188.7 260.229 188.7C260.229 188.7 260.91 193.017 260.698 193.433C260.542 193.716 260.329 193.965 260.074 194.163H246.916C246.633 193.695 246.421 193.187 246.286 192.657C246.172 191.998 246.207 191.322 246.389 190.678C246.653 189.794 247.277 179.648 247.907 177.777C248.536 175.906 251.276 172.452 251.276 172.452L257.984 170.787Z" fill="#2BB381" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M248.902 163.884C248.99 163.246 250.007 162.707 250.347 162.218C250.688 161.73 250.487 161.273 250.76 160.718C251.575 159.088 252.189 157.567 254.099 157.12C256.472 156.606 260.187 157.798 261.292 159.869C261.674 160.661 261.894 161.52 261.94 162.397C261.986 163.274 261.857 164.152 261.56 164.979C261.288 165.795 260.812 166.529 260.177 167.112C259.986 167.281 257.876 168.263 257.896 168.14L257.685 169.805L251.792 171.306L251.529 168.705C250.951 168.705 250.374 168.653 249.805 168.551C249.129 168.392 248.918 168.135 249.073 167.559C249.227 166.983 249.702 164.958 249.702 164.958C249.424 164.774 249.18 164.545 248.98 164.28C248.911 164.16 248.884 164.021 248.902 163.884Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M251.235 162.044C251.132 162.362 251.188 162.666 251.359 162.722C251.529 162.779 251.761 162.568 251.875 162.249C251.988 161.93 251.926 161.627 251.751 161.571C251.575 161.514 251.343 161.725 251.235 162.044Z" fill="#283648"/>
+<path d="M252.643 161.236C252.577 160.974 252.415 160.745 252.189 160.595C251.963 160.445 251.689 160.384 251.42 160.424" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M249.95 165.94C250.182 165.974 250.42 165.95 250.641 165.871C250.863 165.792 251.061 165.661 251.219 165.487" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M257.778 166.176C258.294 165.41 258.036 163.961 257.179 163.606C256.322 163.251 255.296 164.547 255.043 164.459C254.79 164.372 255.641 162.917 255.641 162.917C255.088 162.597 254.641 162.121 254.357 161.55C254.099 160.784 255.905 160.008 256.421 159.931C256.937 159.854 254.109 157.114 254.109 157.114C256.482 156.6 260.198 157.793 261.302 159.864C261.684 160.656 261.905 161.515 261.951 162.392C261.997 163.269 261.867 164.146 261.57 164.973C261.298 165.79 260.822 166.524 260.187 167.106C259.494 167.514 258.765 167.858 258.01 168.134H257.907L256.421 167.106C256.971 166.97 257.453 166.639 257.778 166.176Z" fill="#283648" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M250.832 173.192L248.804 175.999L248.128 190.812L246.988 193.449L245.538 188.679L248.546 175.469L250.61 171.995L250.832 173.192Z" fill="#283648" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M257.896 169.173L250.636 171.568L250.899 174.477L258.469 170.992L257.896 169.173Z" fill="#2BB381" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M251.524 168.705L252.932 168.602L251.787 170.319L251.524 168.705Z" fill="#283648" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M231.941 174.739L238.99 169.589L242.385 183.169L241.343 184.31L231.941 174.739Z" fill="#DEDEDE" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M235.022 167.667L241.704 183.498L248.128 190.832L244.212 194.06L238.376 185.091C238.376 185.091 230.909 175.726 230.698 175.104C230.486 174.482 235.022 167.667 235.022 167.667Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M247.339 184.166L243.484 182.717C243.484 182.717 242.37 181.097 242.2 180.758C242.029 180.419 240.136 179.73 239.888 179.478C239.64 179.226 238.778 178.286 238.691 178.712C238.603 179.139 238.433 179.561 238.861 179.818C239.34 180.224 239.771 180.682 240.146 181.185C240.146 181.185 238.082 181.01 237.922 181.524C237.762 182.038 238.262 183.066 238.262 183.066C238.6 183.1 238.925 183.217 239.207 183.405C239.46 183.662 239.976 184.767 240.574 185.024C241.173 185.281 243.314 185.369 243.314 185.369L245.708 187.24L247.339 184.166Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M244.836 183.117L243.706 182.696C243.706 182.696 242.581 185.435 242.674 185.466L243.835 185.821L244.836 183.117Z" fill="#2BB381" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M259.697 177.217C259.82 177.611 259.881 178.022 259.878 178.435C259.826 179.422 257.06 191.074 256.849 191.799C256.637 192.524 254.919 192.94 254.398 192.786C253.877 192.632 243.758 186.469 243.655 186.207C243.551 185.945 244.331 183.041 244.852 182.881C245.373 182.722 251.89 185.451 251.89 185.451C251.89 185.451 252.184 178.137 252.633 176.862" fill="#2BB381"/>
+<path d="M259.697 177.217C259.82 177.611 259.881 178.022 259.878 178.435C259.826 179.422 257.06 191.074 256.849 191.799C256.637 192.524 254.919 192.94 254.398 192.786C253.877 192.632 243.758 186.469 243.655 186.207C243.551 185.945 244.331 183.041 244.852 182.881C245.373 182.722 251.89 185.451 251.89 185.451C251.89 185.451 252.184 178.137 252.633 176.862" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M252.205 185.559L254.553 186.808" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M254.604 186.027L253.041 185.662" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M149.877 73.6562L152.054 83.3503L158.829 81.5924L159.428 83.5559L149.547 89.5594L147.405 84.7227L149.877 73.6562Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M140.001 70.4023L133.282 73.5583L134.98 88.9937L146.105 89.1839L149.211 82.0753L149.877 73.656L144.856 71.1785L140.001 70.4023Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M138.138 71.4457L139.516 77.2898L146.647 77.7473L146.187 72.1344L144.856 71.1681C144.856 71.1681 139.17 69.7392 138.138 71.4457Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M145.904 59.0174C147.395 59.2178 148.778 59.9529 149.35 61.1967C150.284 63.2116 149.505 65.2316 149.82 65.6942C150.122 66.245 150.382 66.8171 150.599 67.4059L149.35 68.182C149.35 68.182 148.035 70.6184 147.57 70.9268C147.106 71.2352 145.3 70.3511 145.3 70.3511L144.051 72.6795L140.001 69.2665L141.719 66.0078C141.719 66.0078 140.171 63.0574 140.94 61.1967C141.667 59.4543 143.886 58.7501 145.904 59.0174Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M149.108 65.6378C149.108 65.9822 148.974 66.2649 148.809 66.2649C148.644 66.2649 148.509 65.9822 148.509 65.6378C148.509 65.2934 148.644 65.0107 148.809 65.0107C148.974 65.0107 149.108 65.278 149.108 65.6378Z" fill="#283648"/>
+<path d="M148.386 68.7679C148.064 68.7047 147.78 68.5206 147.591 68.2539L148.386 68.7679Z" fill="white"/>
+<path d="M148.386 68.7679C148.064 68.7047 147.78 68.5206 147.591 68.2539" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M148.319 64.2188C148.319 64.2188 149.046 63.823 149.351 64.3524L148.319 64.2188Z" fill="white"/>
+<path d="M148.319 64.2188C148.319 64.2188 149.046 63.823 149.351 64.3524" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M134.975 88.9937C134.975 88.9937 131.837 92.2627 131.265 98.5232C130.692 104.784 129.835 116.59 129.835 116.59L126.837 135.372L130.547 135.511L136.549 117.161L140.548 102.769L145.259 117.279L148.355 135.665L151.925 135.238L151.667 112.73L151.095 109.07C150.336 104.223 149.006 99.4824 147.132 94.9458L146.956 94.5192L146.079 89.1633L134.975 88.9937Z" fill="#283648" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M149.738 61.2892C149.738 61.2892 150.114 62.8312 147.833 64.3732L145.548 65.9152C145.548 65.9152 145.259 76.5858 144.975 77.1563C144.691 77.7269 137.833 71.6051 138.267 70.3253C138.778 68.4771 139.107 66.5833 139.247 64.6713C139.247 63.6793 139.412 60.9191 141.125 59.2126C142.839 57.5061 150.264 57.9327 150.692 59.3565C150.761 59.5456 150.79 59.7466 150.779 59.9473C150.768 60.1481 150.716 60.3445 150.627 60.5249C150.538 60.7053 150.413 60.866 150.26 60.9973C150.108 61.1286 149.93 61.2279 149.738 61.2892Z" fill="#283648" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M133.282 73.5581L125.542 86.4081L123.602 98.0759L125.666 98.2352L129.531 87.1174L134.041 81.6228C134.041 81.6228 134.304 75.6295 133.282 73.5581Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M127.648 100.837C127.648 100.837 126.796 99.7057 126.703 99.567C126.61 99.4282 125.671 98.2563 125.671 98.2563C125.671 98.2563 123.86 97.5521 123.607 98.0969C123.354 98.6418 122.931 102.569 122.885 102.898C122.838 103.227 123.215 103.463 123.215 103.463L123.545 101.865C123.545 101.865 123.685 103.509 123.685 103.977C123.685 104.445 124.154 104.352 124.154 104.352L124.299 101.911C124.299 101.911 124.768 103.885 124.861 104.352C124.864 104.419 124.891 104.483 124.936 104.533C124.98 104.583 125.041 104.616 125.107 104.627C125.174 104.638 125.242 104.626 125.3 104.593C125.359 104.559 125.404 104.507 125.429 104.445C125.429 104.306 125.522 101.679 125.522 101.679C125.522 101.679 125.945 103.273 126.038 103.648C126.13 104.023 126.554 103.499 126.554 103.499L126.471 100.929C126.471 100.929 126.693 101.042 127.307 101.279C127.921 101.515 127.648 100.837 127.648 100.837Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M126.481 100.955L125.996 99.5669" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M158.829 81.592L159.634 79.2636L161.028 78.0866C161.028 78.0866 161.095 76.9763 161.513 76.9095C161.931 76.8427 162.07 77.0483 161.998 77.6702C161.923 78.1152 161.758 78.5402 161.513 78.9192C161.513 78.9192 162.416 78.2922 162.622 78.6417C162.828 78.9912 162.761 82.1009 162.555 82.5172C162.349 82.9336 159.428 83.5452 159.428 83.5452L158.829 81.592Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M161.492 78.9194L160.749 79.6699C160.749 79.6699 160.47 82.5072 160.749 82.5072H162.555" fill="white"/>
+<path d="M161.492 78.9194L160.749 79.6699C160.749 79.6699 160.47 82.5072 160.749 82.5072H162.555" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M126.837 135.372L125.805 138.261C125.425 138.897 125.153 139.592 125 140.317C124.887 141.232 128.452 140.774 129.025 140.774C129.567 140.822 130.107 140.66 130.532 140.322C130.878 139.978 130.532 135.511 130.532 135.511L126.837 135.372Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M151.946 135.331L153.205 137.865C153.205 137.865 156.079 139.011 156.198 139.7C156.317 140.389 156.198 140.728 155.506 140.841C154.815 140.954 147.452 140.841 147.452 140.841V138.554C147.452 137.978 148.375 135.758 148.375 135.758L151.946 135.331Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M166.559 206.407L165.006 207.954L103.055 159.535L104.603 157.993L166.559 206.407Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M103.055 206.407L104.603 207.954L166.559 159.535L165.006 157.993L103.055 206.407Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M167.87 143.725H165.677V239.904H167.87V143.725Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M105.485 143.725H103.292V239.904H105.485V143.725Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M104.299 157.31V159.494H165.646V157.31H104.299Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M104.293 206.653V208.838H165.641V206.653H104.293Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M156.931 206.407L155.377 207.954L93.4264 159.535L94.9796 157.993L156.931 206.407Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M93.4264 206.407L94.9796 207.954L156.931 159.535L155.377 157.993L93.4264 206.407Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M94.67 157.31V159.494H156.017V157.31H94.67Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M94.67 206.649V208.833H156.017V206.649H94.67Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M94.8248 143.725H92.6318V239.904H94.8248V143.725Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M158.153 143.725H155.96V239.904H158.153V143.725Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M171.585 140.995H88.8598V145.169H171.585V140.995Z" fill="#283648" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M160.568 113.43V4.56445" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M224.975 69.6934V4.56445" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M204.8 165.739C204.8 165.225 204.831 164.711 204.8 164.197C204.547 158.75 203.193 153.409 200.822 148.495L214.124 136.878L201.926 123.041H198.737L198.458 126.069L189.206 134.154C184.377 130.381 178.753 127.745 172.756 126.444L171.936 109.297H168.747L154.268 126.644C148.237 128.123 142.626 130.962 137.87 134.94L123.984 124.953H120.795L121.244 127.009L122.126 127.523L113.158 139.859L126.703 149.625C124.199 155.206 122.999 161.28 123.194 167.389L106.378 172.061L110.81 187.903L108.153 189.794H111.342L127.937 185.168C130.729 190.43 134.642 195.019 139.402 198.615L132.374 215.124L145.966 220.871L146.203 222.315H149.392L156.332 206.114C162.073 207.248 167.994 207.109 173.675 205.708L180.698 218.625L179.227 221.791H182.416L198.644 212.996L190.151 197.376C194.651 193.648 198.298 189.003 200.847 183.755L215.404 186.325L215.595 186.926H218.768L222.019 168.798L204.8 165.739ZM164.861 184.202C161.279 184.369 157.727 183.474 154.655 181.63C151.583 179.786 149.128 177.076 147.602 173.843C146.076 170.61 145.546 166.999 146.08 163.466C146.613 159.933 148.187 156.637 150.601 153.995C153.015 151.352 156.161 149.482 159.642 148.621C163.122 147.759 166.781 147.945 170.156 149.155C173.531 150.364 176.47 152.544 178.602 155.417C180.733 158.29 181.962 161.728 182.132 165.297C182.245 167.668 181.888 170.038 181.081 172.272C180.274 174.506 179.033 176.559 177.43 178.315C175.826 180.07 173.89 181.494 171.734 182.504C169.577 183.514 167.242 184.091 164.861 184.202Z" fill="#283648" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M197.658 183.739L215.595 186.931L218.845 168.803L201.616 165.719C201.616 165.205 201.642 164.691 201.616 164.177C201.363 158.729 200.01 153.389 197.638 148.474L210.935 136.837L198.737 123L186.017 134.154C181.188 130.381 175.564 127.745 169.567 126.444L168.747 109.297L150.284 110.171L151.069 126.619C145.031 128.104 139.417 130.951 134.66 134.94L120.795 124.953L109.959 139.859L123.504 149.625C121 155.206 119.8 161.28 119.995 167.389L103.184 172.067L108.148 189.8L124.742 185.174C127.532 190.442 131.445 195.039 136.208 198.64L129.18 215.15L146.208 222.346L153.122 206.114C158.863 207.248 164.784 207.109 170.465 205.708L179.206 221.791L195.465 213.022L186.962 197.376C191.465 193.645 195.113 188.995 197.658 183.739ZM142.694 167.014C142.524 163.445 143.42 159.905 145.269 156.843C147.118 153.781 149.837 151.334 153.082 149.811C156.327 148.288 159.953 147.758 163.5 148.288C167.048 148.818 170.358 150.384 173.012 152.787C175.667 155.191 177.546 158.325 178.412 161.793C179.278 165.26 179.092 168.906 177.879 172.269C176.665 175.631 174.477 178.56 171.593 180.684C168.708 182.808 165.256 184.032 161.673 184.202C156.868 184.43 152.169 182.747 148.61 179.523C145.051 176.3 142.923 171.8 142.694 167.014Z" fill="#2BB381" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M257.742 106.167C259.765 102.065 260.936 97.598 261.183 93.0342L275.688 89.8371L272.329 74.7358H269.14L269.284 75.4091L258.448 77.7992C256.434 73.0759 253.372 68.8688 249.491 65.494L255.848 52.5567L241.931 45.7462H238.742L241.322 47.0003L235.832 58.1747C230.798 56.8289 225.522 56.6531 220.409 57.6607L214.258 44.7593H211.069L211.694 45.9672L200.238 51.4002L206.245 64.0189C202.134 67.1102 198.782 71.091 196.441 75.661L182.178 72.3251H178.99V73.4765L181.822 73.9134L178.649 87.3647L192.715 90.6595C192.635 95.6528 193.651 100.603 195.692 105.165L183.824 114.468L191.482 124.162L190.228 126.609H193.412L205.099 117.444C208.856 120.586 213.26 122.867 217.999 124.126L217.901 139.469L233.412 139.572L233.505 124.666C238.327 123.74 242.893 121.795 246.895 118.96L256.844 126.963L255.595 128.505H258.784L268.531 116.493L257.112 107.298C257.324 106.912 257.551 106.552 257.742 106.167ZM240.621 97.8246C239.298 100.517 237.203 102.759 234.601 104.266C231.999 105.772 229.006 106.477 226.003 106.289C222.999 106.102 220.118 105.032 217.725 103.214C215.332 101.396 213.534 98.9114 212.558 96.0753C211.582 93.2392 211.473 90.1786 212.243 87.2804C213.014 84.3823 214.63 81.7769 216.887 79.7937C219.144 77.8105 221.941 76.5385 224.924 76.1386C227.906 75.7388 230.941 76.229 233.644 77.5473C237.269 79.3149 240.04 82.4442 241.348 86.2469C242.656 90.0495 242.395 94.2141 240.621 97.8246Z" fill="#283648" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M243.717 118.924L255.585 128.49L265.332 116.478L253.913 107.282C254.114 106.907 254.341 106.552 254.532 106.167C256.559 102.066 257.733 97.5987 257.984 93.0342L272.489 89.8371L269.13 74.7512L255.265 77.8352C253.251 73.1119 250.188 68.9047 246.307 65.53L252.664 52.5926L238.742 45.7462L232.638 58.1747C227.604 56.8289 222.328 56.6531 217.215 57.6607L211.069 44.7593L197.05 51.4002L203.056 64.0189C198.945 67.1102 195.593 71.091 193.252 75.661L178.99 72.3251L175.445 87.3647L189.511 90.6595C189.431 95.6528 190.447 100.603 192.488 105.165L180.62 114.468L190.213 126.609L201.895 117.444C205.652 120.586 210.055 122.867 214.795 124.126L214.697 139.469L230.208 139.572L230.301 124.666C235.134 123.733 239.71 121.775 243.717 118.924ZM210.099 84.4863C211.422 81.7935 213.517 79.5521 216.119 78.0453C218.721 76.5386 221.713 75.8344 224.717 76.0216C227.721 76.2089 230.602 77.2792 232.995 79.0973C235.388 80.9154 237.186 83.3996 238.162 86.2357C239.137 89.0718 239.247 92.1324 238.476 95.0305C237.706 97.9286 236.09 100.534 233.833 102.517C231.576 104.501 228.779 105.772 225.796 106.172C222.813 106.572 219.779 106.082 217.076 104.764C213.454 102.996 210.685 99.8685 209.377 96.0683C208.069 92.2681 208.328 88.1061 210.099 84.4966V84.4863Z" fill="#2BB381" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M289.754 135.552C289.754 135.552 285.626 138.518 285.363 138.584C285.1 138.651 283.222 139.001 283.025 139.402C282.899 139.61 282.817 139.842 282.784 140.083C282.751 140.325 282.768 140.57 282.835 140.805C283.041 141.201 296.018 140.702 296.018 140.702C296.185 140.206 296.228 139.676 296.142 139.16C296.042 138.321 295.99 137.476 295.987 136.631L289.754 135.552Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M296.168 139.967L282.788 140.07C282.722 140.313 282.738 140.572 282.835 140.805C283.041 141.201 296.018 140.702 296.018 140.702C296.1 140.465 296.15 140.218 296.168 139.967Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M322.272 134.766L321.488 137.038L318.495 139.664C318.495 139.664 318.299 140.394 318.635 140.528C318.97 140.661 324.723 140.481 324.723 140.481C325.175 140.258 325.601 139.986 325.993 139.669C326.323 139.335 329.166 135.182 329.089 134.714C329.011 134.247 327.267 132.792 327.267 132.792L322.272 134.766Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M325.993 139.669C326.323 139.335 329.166 135.182 329.089 134.714C328.961 134.423 328.771 134.164 328.531 133.954C327.499 135.681 325.549 138.96 325.105 139.212C324.661 139.464 320.172 139.654 318.475 139.726C318.439 139.89 318.346 140.425 318.624 140.538C318.903 140.651 324.713 140.492 324.713 140.492C325.169 140.266 325.598 139.99 325.993 139.669Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M300.533 102.003C300.326 102.639 300.153 103.286 300.017 103.941C300.017 104.208 300.09 105.072 300.09 105.072C300.09 105.072 291.472 115.408 290.946 116.411C290.42 117.413 290.219 134.617 290.219 134.617C290.219 134.617 289.414 134.822 289.419 135.089C289.398 135.358 289.355 135.625 289.29 135.886C290.15 136.395 291.049 136.835 291.978 137.202C293.01 137.526 295.662 137.973 295.662 137.973C295.86 137.554 295.971 137.099 295.987 136.637C295.987 135.968 295.771 134.771 295.771 134.581C295.771 134.39 298.397 119.628 298.397 119.628L306.823 110.232C306.823 110.232 310.518 120.6 311.256 121.196C311.994 121.792 321.261 133.784 321.261 133.784C321.261 133.784 320.595 134.19 320.931 134.385C321.333 134.779 321.68 135.225 321.963 135.711C321.963 135.711 324.641 135.29 325.704 134.617C326.383 134.158 326.932 133.533 327.298 132.802C326.944 132.186 326.558 131.589 326.142 131.013C325.807 130.618 325.332 129.955 325.332 129.955L317.53 116.549C317.53 116.549 315.611 101.499 315.064 100.101C314.517 98.7033 312.623 96.5034 312.623 96.5034L300.533 102.003Z" fill="#A1A1A1" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M300.146 103.34L313.48 97.4389L312.603 96.5137L300.466 101.474L300.146 103.34Z" fill="#283648" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M303.082 102.651L303.428 103.715C303.428 103.715 302.762 104.121 302.912 104.45C303.207 104.867 303.554 105.245 303.944 105.576" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M304.151 102.178L304.667 103.37C304.667 103.37 304.006 103.884 304.341 104.373C304.589 104.701 304.86 105.012 305.152 105.303" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M304.455 107.292L303.985 106.711" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M306.823 110.222L305.342 108.392" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M321.834 126.634L322.959 128.562" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M313.408 104.769L316.039 116.282L315.843 117.218C315.843 117.218 316.648 117.346 316.648 117.547V117.747L321.08 125.349" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M294.367 130.931L293.96 134.118" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M304.543 109.775L296.256 119.371C296.256 119.371 294.914 119.248 295.115 119.577C295.301 119.855 295.505 120.121 295.724 120.374L294.506 129.852" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M291.359 85.514C291.359 85.514 292.076 92.0778 292.649 92.782C293.222 93.4862 298.748 98.6879 298.748 98.6879C298.748 98.6879 299.863 101.941 299.909 102.178C299.955 102.414 299.625 102.82 300.425 102.692C301.225 102.563 312.345 97.4234 312.721 97.0379C313.059 96.6554 313.256 96.1694 313.279 95.6604C313.204 95.2772 313.026 94.9216 312.763 94.6324C312.418 94.3241 312.051 94.0423 311.664 93.7894C311.664 93.7894 306.426 85.0874 305.275 84.0234C304.125 82.9595 299.93 79.3409 298.026 78.9811C296.567 78.7544 295.089 78.6701 293.614 78.7292L291.359 85.514Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M276.013 78.0352C275.616 77.4343 275.184 76.8575 274.718 76.3082C274.444 76.0923 271.359 74.3652 271.359 74.3652C271.359 74.3652 270.327 74.5811 271.085 75.1208C271.844 75.7885 272.535 76.5288 273.149 77.331C272.673 77.1821 272.184 77.0738 271.689 77.0072C271.307 77.0072 271.173 77.8707 271.581 77.9787C271.911 78.0684 272.237 78.1765 272.556 78.3025C272.556 78.3025 273.423 79.7057 273.856 79.9216C274.255 80.0736 274.674 80.1637 275.1 80.1889L292.556 87.3797L293.475 82.4145L276.013 78.0352Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M288.944 76.3183C288.225 75.3949 287.395 74.5629 286.472 73.8409C284.955 72.6587 279.924 74.3549 279.197 78.6365C279.197 78.6365 278.552 80.6925 279.584 81.7924C280.376 82.5913 281.262 83.2935 282.221 83.8844C282.221 83.8844 283.939 85.8582 284.13 85.7605C284.448 85.4246 284.731 85.0578 284.976 84.6657C284.976 84.6657 287.737 86.1563 288.02 85.9199C288.474 85.3015 288.881 84.6503 289.238 83.9718L290.786 84.9535L292.778 78.8883L290.353 78.3743L288.944 76.3183Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M292.35 78.4209L290.172 85.6169L292.179 87.0664L294.15 78.4517L292.35 78.4209Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M291.994 90.7056L291.601 103.869L292.618 105.838L293.975 103.479L292.504 89.9141L291.994 90.7056Z" fill="#2BB381" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M297.061 81.2531C296.463 81.072 295.837 81.0006 295.213 81.0423C293.082 81.2479 290.084 85.9973 289.893 86.095C289.703 86.1926 285.704 90.0014 285.704 90.0014L274.656 88.4594L271.56 84.702C271.061 84.4993 270.582 84.2497 270.131 83.9567C269.795 83.674 269.692 83.0161 269.269 83.3502C268.846 83.6843 268.614 84.1109 268.753 84.4399C268.949 84.7545 269.191 85.0385 269.47 85.2828L269.759 85.7095C269.759 85.7095 266.384 85.5193 266.147 85.7352C265.91 85.951 265.817 86.3571 265.997 86.4702C266.178 86.5833 268.098 86.8146 268.789 86.9842C268.789 87.0202 265.249 87.087 265.177 87.2823C265.105 87.4776 265.069 87.8323 265.213 87.9042C265.358 87.9762 268.407 88.4902 268.407 88.4902C267.589 88.5922 266.779 88.7502 265.982 88.9631C265.952 89.0015 265.93 89.0455 265.918 89.0925C265.906 89.1395 265.903 89.1885 265.911 89.2365C265.918 89.2846 265.935 89.3306 265.96 89.372C265.986 89.4133 266.02 89.4491 266.059 89.4771C266.999 89.5311 267.942 89.5311 268.882 89.4771C268.882 89.4771 266.973 89.878 267.122 90.099C267.272 90.32 267.344 90.392 267.489 90.428C267.633 90.464 273.031 91.2298 273.031 91.2298V91.1836L273.717 91.3532C273.717 91.3532 286.72 95.6965 287.246 95.789C287.892 95.8212 288.536 95.7197 289.14 95.4909C289.47 95.347 295.079 90.5308 295.079 90.5308L295.131 90.2686" fill="white"/>
+<path d="M297.061 81.2531C296.463 81.072 295.837 81.0006 295.213 81.0423C293.082 81.2479 290.084 85.9973 289.893 86.095C289.703 86.1926 285.704 90.0014 285.704 90.0014L274.656 88.4594L271.56 84.702C271.061 84.4993 270.582 84.2497 270.131 83.9567C269.795 83.674 269.692 83.0161 269.269 83.3502C268.846 83.6843 268.614 84.1109 268.753 84.4399C268.949 84.7545 269.191 85.0385 269.47 85.2828L269.759 85.7095C269.759 85.7095 266.384 85.5193 266.147 85.7352C265.91 85.951 265.817 86.3571 265.997 86.4702C266.178 86.5833 268.098 86.8146 268.789 86.9842C268.789 87.0202 265.249 87.087 265.177 87.2823C265.105 87.4776 265.069 87.8323 265.213 87.9042C265.358 87.9762 268.407 88.4902 268.407 88.4902C267.589 88.5922 266.779 88.7502 265.982 88.9631C265.952 89.0015 265.93 89.0455 265.918 89.0925C265.906 89.1395 265.903 89.1885 265.911 89.2365C265.918 89.2846 265.935 89.3306 265.96 89.372C265.986 89.4133 266.02 89.4491 266.059 89.4771C266.999 89.5311 267.942 89.5311 268.882 89.4771C268.882 89.4771 266.973 89.878 267.122 90.099C267.272 90.32 267.344 90.392 267.489 90.428C267.633 90.464 273.031 91.2298 273.031 91.2298V91.1836L273.717 91.3532C273.717 91.3532 286.72 95.6965 287.246 95.789C287.892 95.8212 288.536 95.7197 289.14 95.4909C289.47 95.347 295.079 90.5308 295.079 90.5308L295.131 90.2686" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M295.539 89.8161L298.774 87.6162" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M295.946 89.9705L299.114 88.7163" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M282.298 79.382C282.298 79.382 282.602 80.888 283.02 80.8983C283.438 80.9086 284.775 80.1479 284.775 80.1479L285.838 80.5539C285.838 80.5539 286.395 80.2507 285.786 79.6699C285.177 79.089 284.831 79.1559 284.888 78.6419C284.945 78.1279 286.147 76.4985 286.952 77.4597C287.474 78.1756 287.827 78.9996 287.984 79.8703L290.332 78.3797C290.332 78.3797 288.474 74.6532 287.623 73.985C286.772 73.3168 284.527 73.0547 282.943 73.7229C281.359 74.3911 279.878 74.9256 279.13 77.0896C278.381 79.2535 278.325 81.2016 278.81 81.2787C279.295 81.3558 280.084 78.575 280.291 78.3129C280.497 78.0508 282.298 79.382 282.298 79.382Z" fill="#283648" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M283.402 82.569C283.66 82.7695 283.784 83.0316 283.686 83.1601C283.588 83.2886 283.299 83.2269 283.041 83.0265C282.783 82.826 282.664 82.569 282.762 82.4405C282.86 82.312 283.149 82.3737 283.402 82.569Z" fill="#283648"/>
+<path d="M281.746 82.6509C281.746 82.6509 281.514 81.7309 282.386 81.5664" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M286.075 84.4398C286.182 84.378 286.274 84.2945 286.346 84.1946C286.418 84.0947 286.468 83.9807 286.492 83.8602C286.516 83.7397 286.515 83.6155 286.487 83.4956C286.46 83.3758 286.407 83.2631 286.333 83.165" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M285.198 89.4667L288.686 96.1025L291.075 94.6838L287.241 88.6289L285.198 89.4667Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M297.2 94.6992C300.315 96.0695 303.676 96.7969 307.081 96.8375" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M300.58 97.3979C300.58 97.3979 304.816 98.6932 306.963 97.9119" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M348.263 206.407L346.71 207.954L284.754 159.535L286.307 157.993L348.263 206.407Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M284.754 206.407L286.307 207.954L348.263 159.535L346.71 157.993L284.754 206.407Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M349.574 143.725H347.381V239.904H349.574V143.725Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M287.19 143.725H284.997V239.904H287.19V143.725Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M285.998 157.31V159.494H347.345V157.31H285.998Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M285.998 206.649V208.833H347.345V206.649H285.998Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M338.635 206.407L337.082 207.954L275.131 159.535L276.684 157.993L338.635 206.407Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M275.131 206.407L276.684 207.954L338.635 159.535L337.082 157.993L275.131 206.407Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M276.374 157.31V159.494H337.722V157.31H276.374Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M276.369 206.653V208.838H337.716V206.653H276.369Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M276.529 143.725H274.336V239.904H276.529V143.725Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M339.853 143.725H337.66V239.904H339.853V143.725Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M353.289 140.995H270.564V145.169H353.289V140.995Z" fill="#283648" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M86.9868 178.332L97.539 182.752L108.654 180.753L108.865 182.644L97.8589 186.854L85.8258 181.596L86.9868 178.332Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M96.1767 167.091C96.1767 167.091 98.3594 168.032 98.1788 169.204C97.9982 170.376 97.0023 170.674 96.5276 171.316C96.0529 171.959 96.1148 171.614 96.1148 171.614L95.702 167.97C95.702 167.97 95.6453 166.562 96.1767 167.091Z" fill="#283648" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M87.2757 164.387C86.8653 163.948 86.3593 163.609 85.7967 163.395C85.2341 163.181 84.6297 163.099 84.0301 163.154C81.8526 163.272 80.9341 164.567 80.9341 166.094C80.9341 167.62 81.1715 167.147 77.9258 168.088C74.6802 169.029 74.6853 170.262 74.6234 170.905C74.5615 171.547 73.7978 171.552 72.7968 172.668C71.7957 173.783 71.7338 177.222 75.3768 178.517C79.0197 179.812 82.059 177.72 82.7091 175.017C83.3593 172.313 82.7091 171.614 83.5193 170.848C84.3294 170.082 83.5193 168.911 83.8701 167.502C84.221 166.094 86.1715 165.503 86.8165 165.39C87.4615 165.277 87.3944 164.917 87.2757 164.387Z" fill="#283648" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M85.2582 173.778C85.2582 173.778 78.8443 177.325 77.2705 179.432C75.6967 181.54 74.9485 189.743 74.9485 189.743L82.6885 194.683C82.6885 194.683 87.9259 189.353 88.3645 187.785C88.8031 186.217 87.8072 177.448 87.8072 177.448L85.2582 173.778Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M94.7577 166.073C91.2077 163.092 85.9857 165.168 85.5678 167.163C85.3185 168.378 85.2197 169.619 85.2737 170.858L85.5678 173.48L85.2582 173.778L83.9321 174.4L87.3377 180.881L89.3397 176.132C89.3397 176.132 91.7753 177.54 92.1674 177.54C92.5596 177.54 94.7474 174.785 94.7474 174.785C94.7474 174.785 95.4337 175.263 95.6504 175.212C95.8671 175.161 95.9084 172.39 95.9084 172.39C96.277 171.257 96.5091 170.083 96.5999 168.895C96.6773 167.281 94.7577 166.073 94.7577 166.073Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M94.0405 172.149C93.9683 172.483 94.0405 172.786 94.2159 172.817C94.3914 172.848 94.5771 172.611 94.6494 172.277C94.7216 171.943 94.6494 171.64 94.4688 171.609C94.2882 171.578 94.1076 171.815 94.0405 172.149Z" fill="#283648"/>
+<path d="M95.444 171.085C95.394 170.969 95.3204 170.865 95.2279 170.779C95.1354 170.693 95.0261 170.628 94.9067 170.586C94.7874 170.545 94.6608 170.528 94.5347 170.538C94.4087 170.548 94.2861 170.583 94.1747 170.643" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M93.1684 175.49C93.039 175.512 92.9062 175.508 92.7787 175.476C92.6513 175.444 92.532 175.385 92.4287 175.304C92.3255 175.223 92.2406 175.121 92.1795 175.005C92.1185 174.89 92.0827 174.762 92.0745 174.631" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M96.765 168.324C96.765 168.324 98.0601 167.209 95.217 165.446C92.3738 163.683 88.8495 163.39 86.8474 164.742C86.0297 165.298 85.4076 166.095 85.0688 167.022C84.73 167.949 84.6916 168.958 84.9589 169.908C85.3717 171.496 84.9021 172.549 85.7277 173.079C86.5533 173.608 88.8495 172.493 89.1436 171.434C89.4378 170.375 89.4997 169.851 90.3821 169.969C91.2644 170.087 91.5689 171.439 91.5689 171.439C91.5689 171.439 93.6328 169.733 94.8609 169.496C95.618 169.35 96.2952 168.933 96.765 168.324Z" fill="#283648" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M74.9485 189.722C74.9485 189.722 67.2085 195.705 66.5067 199.303C65.805 202.901 62.8122 219.729 62.8122 219.729C62.8122 219.729 56.8988 234.384 56.8988 234.795C56.8988 235.206 59.3808 235.72 59.3808 235.72C59.3808 235.72 68.2611 222.839 68.5707 222.428C68.8803 222.017 74.3654 208.221 74.3654 208.221L79.7008 219.992L83.8288 236.213L86.5172 235.699L86.7907 217.195L81.512 197.813L82.673 194.662L74.9485 189.722Z" fill="#283648" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M60.356 234.713C60.356 234.713 61.388 237.591 61.6615 237.838C61.935 238.085 63.3901 239.236 63.3075 239.647C63.225 240.059 59.3498 239.894 58.4417 239.812C57.5335 239.73 55.5521 237.509 55.3044 236.851C55.0567 236.193 56.5428 234.055 57.2858 233.562C58.0289 233.068 60.356 234.713 60.356 234.713Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M86.672 234.795L88.8031 236.717C88.8031 236.717 92.4615 238.131 92.4615 238.439C92.4615 238.748 91.7391 239.282 89.5719 239.591C87.5005 239.815 85.4055 239.682 83.3799 239.195C82.5543 238.881 83.8959 236.208 83.8959 236.208L86.672 234.795Z" fill="white" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M80.5419 182.47C80.8051 183.611 81.0579 183.385 82.0435 184.012C84.0198 185.286 96.1871 189.244 96.1871 189.244L108.695 184.068L111.182 183.554L112.013 183.744C112.171 183.764 112.331 183.751 112.485 183.708C112.638 183.665 112.781 183.592 112.905 183.493C113.158 183.302 111.822 182.727 111.822 182.727C112.524 182.765 113.228 182.744 113.927 182.665C114.443 182.537 114.5 182.033 114.242 182.033C113.984 182.033 111.884 181.776 111.884 181.776C111.884 181.776 114.562 181.015 114.691 180.825C114.82 180.635 114.433 180.188 114.051 180.188C113.669 180.188 111.249 180.568 111.249 180.568L112.013 179.997C112.705 179.81 113.369 179.533 113.989 179.175C114.047 179.14 114.093 179.09 114.124 179.031C114.154 178.971 114.167 178.904 114.16 178.837C114.154 178.77 114.128 178.707 114.087 178.654C114.046 178.601 113.99 178.561 113.927 178.538L112.379 178.728L110.021 179.617L110.274 178.985C110.634 178.695 110.882 178.29 110.976 177.839C111.043 177.206 110.341 177.839 110.341 177.839L108.236 179.807L107.663 181.863L96.476 184.911L85.124 178.116L84.7422 177.988" fill="white"/>
+<path d="M80.5419 182.47C80.8051 183.611 81.0579 183.385 82.0435 184.012C84.0198 185.286 96.1871 189.244 96.1871 189.244L108.695 184.068L111.182 183.554L112.013 183.744C112.171 183.764 112.331 183.751 112.485 183.708C112.638 183.665 112.781 183.592 112.905 183.493C113.158 183.302 111.822 182.727 111.822 182.727C112.524 182.765 113.228 182.744 113.927 182.665C114.443 182.537 114.5 182.033 114.242 182.033C113.984 182.033 111.884 181.776 111.884 181.776C111.884 181.776 114.562 181.015 114.691 180.825C114.82 180.635 114.433 180.188 114.051 180.188C113.669 180.188 111.249 180.568 111.249 180.568L112.013 179.997C112.705 179.81 113.369 179.533 113.989 179.175C114.047 179.14 114.093 179.09 114.124 179.031C114.154 178.971 114.167 178.904 114.16 178.837C114.154 178.77 114.128 178.707 114.087 178.654C114.046 178.601 113.99 178.561 113.927 178.538L112.379 178.728L110.021 179.617L110.274 178.985C110.634 178.695 110.882 178.29 110.976 177.839C111.043 177.206 110.341 177.839 110.341 177.839L108.236 179.807L107.663 181.863L96.476 184.911L85.124 178.116L84.7422 177.988" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M79.706 183.955L83.7257 186.433L88.4161 179.9C88.4161 179.9 84.2881 177.145 83.8495 177.083C83.4109 177.021 81.8732 176.703 80.9805 178.111" fill="white"/>
+<path d="M79.706 183.955L83.7257 186.433L88.4161 179.9C88.4161 179.9 84.2881 177.145 83.8495 177.083C83.4109 177.021 81.8732 176.703 80.9805 178.111" stroke="#283648" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/app/client-v2/apps/goat/styles/globals.css b/app/client-v2/apps/goat/styles/globals.css
index e69de29bb..1bb68ddf5 100644
--- a/app/client-v2/apps/goat/styles/globals.css
+++ b/app/client-v2/apps/goat/styles/globals.css
@@ -0,0 +1,3 @@
+body {
+  background-color: black;
+}
\ No newline at end of file
diff --git a/app/client-v2/packages/keycloak-theme/src/login/pages/Login.tsx b/app/client-v2/packages/keycloak-theme/src/login/pages/Login.tsx
index fbad344f4..0c1d557ec 100644
--- a/app/client-v2/packages/keycloak-theme/src/login/pages/Login.tsx
+++ b/app/client-v2/packages/keycloak-theme/src/login/pages/Login.tsx
@@ -12,7 +12,7 @@ import { useStateRef } from "powerhooks/useStateRef";
 import { useState, type FormEventHandler } from "react";
 
 import { Checkbox } from "@p4b/ui/components/Checkbox";
-import { TextField } from "@p4b/ui/components/Text/TextField";
+import { TextField } from "@p4b/ui/components/Inputs";
 
 import { makeStyles, Text, Button } from "../../theme";
 import type { I18n } from "../i18n";
diff --git a/app/client-v2/packages/keycloak-theme/src/login/pages/LoginResetPassword.tsx b/app/client-v2/packages/keycloak-theme/src/login/pages/LoginResetPassword.tsx
index 9afaaf949..55a373890 100644
--- a/app/client-v2/packages/keycloak-theme/src/login/pages/LoginResetPassword.tsx
+++ b/app/client-v2/packages/keycloak-theme/src/login/pages/LoginResetPassword.tsx
@@ -1,7 +1,7 @@
 import { Link } from "@mui/material";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 
-import { TextField } from "@p4b/ui/components/Text/TextField";
+import { TextField } from "@p4b/ui/components/Inputs/TextField";
 
 import { Button, makeStyles, Text } from "../../theme";
 import type { I18n } from "../i18n";
diff --git a/app/client-v2/packages/keycloak-theme/src/login/pages/LoginUpdatePassword.tsx b/app/client-v2/packages/keycloak-theme/src/login/pages/LoginUpdatePassword.tsx
index fbff2fe4c..1a025d80a 100644
--- a/app/client-v2/packages/keycloak-theme/src/login/pages/LoginUpdatePassword.tsx
+++ b/app/client-v2/packages/keycloak-theme/src/login/pages/LoginUpdatePassword.tsx
@@ -2,7 +2,7 @@ import FormControlLabel from "@mui/material/FormControlLabel";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 
 import { Checkbox } from "@p4b/ui/components/Checkbox";
-import { TextField } from "@p4b/ui/components/Text/TextField";
+import { TextField } from "@p4b/ui/components/Inputs/TextField";
 
 import { makeStyles, Text, Button } from "../../theme";
 import type { I18n } from "../i18n";
diff --git a/app/client-v2/packages/keycloak-theme/src/login/pages/shared/UserProfileFormFields.tsx b/app/client-v2/packages/keycloak-theme/src/login/pages/shared/UserProfileFormFields.tsx
index fe6e533cc..4aea1b5e9 100644
--- a/app/client-v2/packages/keycloak-theme/src/login/pages/shared/UserProfileFormFields.tsx
+++ b/app/client-v2/packages/keycloak-theme/src/login/pages/shared/UserProfileFormFields.tsx
@@ -7,8 +7,8 @@ import { useMemo, useEffect, Fragment } from "react";
 import { capitalize } from "tsafe/capitalize";
 
 import { Checkbox } from "@p4b/ui/components/Checkbox";
-import type { AttributeOptions } from "@p4b/ui/components/Text/TextField";
-import { TextField } from "@p4b/ui/components/Text/TextField";
+import type { AttributeOptions } from "@p4b/ui/components/Inputs";
+import { TextField } from "@p4b/ui/components/Inputs";
 
 import { Text, makeStyles } from "../../../theme";
 import { regExpStrToEmailDomains } from "../../emailDomainAcceptListHelper";
diff --git a/app/client-v2/packages/keycloak-theme/src/theme.tsx b/app/client-v2/packages/keycloak-theme/src/theme.tsx
index 226bd1f8f..1982ba1cb 100644
--- a/app/client-v2/packages/keycloak-theme/src/theme.tsx
+++ b/app/client-v2/packages/keycloak-theme/src/theme.tsx
@@ -2,9 +2,7 @@ import CloseSharp from "@mui/icons-material/CloseSharp";
 
 import "@p4b/ui/assets/fonts/mulish/font.css";
 import { createButton } from "@p4b/ui/components/Button";
-import { createIcon } from "@p4b/ui/components/Icon";
-import { createIconButton } from "@p4b/ui/components/Icon/IconButton";
-import { createText } from "@p4b/ui/components/Text";
+import { createText, createIconButton, createIcon } from "@p4b/ui/components/DataDisplay";
 import {
   createThemeProvider,
   defaultGetTypographyDesc,
diff --git a/app/client-v2/packages/ui/components/Alert.tsx b/app/client-v2/packages/ui/components/Alert.tsx
index 0197f7747..e22083712 100644
--- a/app/client-v2/packages/ui/components/Alert.tsx
+++ b/app/client-v2/packages/ui/components/Alert.tsx
@@ -7,9 +7,9 @@ import { useReducer, memo } from "react";
 import type { ReactNode } from "react";
 
 import { makeStyles } from "../lib/ThemeProvider";
-import { createIcon } from "./Icon/Icon";
-import { createIconButton } from "./Icon/IconButton";
-import { Text } from "./Text/TextBase";
+import { createIcon } from "./DataDisplay";
+import { createIconButton } from "./DataDisplay/IconButton";
+import { Text } from "./theme";
 
 export type AlertProps = {
   className?: string;
@@ -47,7 +47,13 @@ export const Alert = memo((props: AlertProps) => {
       action={
         doDisplayCross ? <IconButton iconId="closeSharp" aria-label="close" onClick={close} /> : undefined
       }>
-      {typeof children === "string" ? <Text typo="label 2">{children}</Text> : children}
+      {typeof children === "string" ? (
+        <Text typo="label 2" color="primary">
+          {children}
+        </Text>
+      ) : (
+        children
+      )}
     </MuiAlert>
   );
 });
diff --git a/app/client-v2/packages/ui/components/Avatar.tsx b/app/client-v2/packages/ui/components/Avatar.tsx
new file mode 100644
index 000000000..8e963839b
--- /dev/null
+++ b/app/client-v2/packages/ui/components/Avatar.tsx
@@ -0,0 +1,83 @@
+/* eslint-disable react/display-name */
+import { Avatar as MUIAvatar } from "@mui/material";
+import { memo } from "react";
+
+import { makeStyles } from "../lib/ThemeProvider";
+import { Text } from "./theme";
+
+export type AvatarProps = {
+  className?: string;
+  size?: number;
+  label?: string;
+  image?: string;
+  color?: "primary" | "focus" | "error" | "warning" | "success" | "info" | "default";
+};
+
+export const Avatar = memo((props: AvatarProps) => {
+  const { className, size = 40, color = "default", label, image } = props;
+
+  const { classes, cx } = useStyles({ color, size });
+
+  return (
+    <MUIAvatar
+      className={cx(className, classes.avatar)}
+      sx={{ width: size, height: size }}
+      src={image ? image : undefined}>
+      <Text typo="caption" className={classes.teamTitle}>
+        {label}
+      </Text>
+    </MUIAvatar>
+  );
+});
+
+const useStyles = makeStyles<{ color: string; size: number }>({
+  name: { Avatar },
+})((theme, { color, size }) => {
+  let backColor = "";
+
+  switch (color) {
+    case "primary":
+      backColor = theme.colors.palette[theme.isDarkModeEnabled ? "dark" : "light"].main;
+      break;
+    case "focus":
+      backColor = theme.colors.palette.focus.main;
+      break;
+    case "error":
+      backColor = theme.colors.palette.redError.main;
+      break;
+    case "warning":
+      backColor = theme.colors.palette.orangeWarning.main;
+      break;
+    case "success":
+      backColor = theme.colors.palette.greenSuccess.main;
+      break;
+    case "info":
+      backColor = theme.colors.palette.blueInfo.main;
+      break;
+    default:
+      break;
+  }
+
+  let fontsize = "13px";
+
+  switch (true) {
+    case size < 30:
+      break;
+    case size < 40:
+      fontsize = "16px";
+      break;
+    case size > 40:
+      fontsize = "18px";
+      break;
+  }
+
+  return {
+    avatar: {
+      backgroundColor: backColor ? backColor : undefined,
+      fontSize: fontsize,
+    },
+    teamTitle: {
+      color: theme.colors.palette.light.main,
+    },
+  };
+});
diff --git a/app/client-v2/packages/ui/components/Button.tsx b/app/client-v2/packages/ui/components/Button.tsx
index e706784c9..416e833c5 100644
--- a/app/client-v2/packages/ui/components/Button.tsx
+++ b/app/client-v2/packages/ui/components/Button.tsx
@@ -19,7 +19,7 @@ import { id } from "tsafe/id";
 import { makeStyles } from "../lib/ThemeProvider";
 import { variantNameUsedForMuiButton } from "../lib/typography";
 import { pxToNumber } from "../tools/pxToNumber";
-import type { IconProps } from "./Icon/Icon";
+import type { IconProps } from "./DataDisplay";
 
 export type ButtonProps<IconId extends string = never> =
   | ButtonProps.Regular<IconId>
@@ -111,7 +111,7 @@ export function createButton<IconId extends string = never>(params?: {
       const IconWd = useGuaranteedMemo(
         // eslint-disable-next-line react/display-name
         () => (props: { iconId: IconId }) =>
-          <Icon iconId={props.iconId} className={classes.icon} size="default" />,
+          <Icon iconId={props.iconId} className={classes.icon} size="small" />,
         [disabled, classes.icon]
       );
 
@@ -174,7 +174,7 @@ export function createButton<IconId extends string = never>(params?: {
             case "ternary":
               return theme.colors.palette[theme.isDarkModeEnabled ? "dark" : "light"].main;
             case "noBorder":
-              return theme.colors.palette[theme.isDarkModeEnabled ? "light" : "dark"].greyVariant3;
+              return `${theme.colors.palette[theme.isDarkModeEnabled ? "light" : "dark"].greyVariant3}E6`;
             case "warning":
               return theme.muiTheme.palette.warning.main;
           }
@@ -206,7 +206,7 @@ export function createButton<IconId extends string = never>(params?: {
             case "ternary":
               return theme.colors.palette[theme.isDarkModeEnabled ? "dark" : "light"].main;
             case "noBorder":
-              return "transparent";
+              return `${theme.colors.palette[theme.isDarkModeEnabled ? "dark" : "light"].greyVariant1}80`;
             case "warning":
               return theme.muiTheme.palette.warning.main;
           }
@@ -233,21 +233,31 @@ export function createButton<IconId extends string = never>(params?: {
           pxToNumber(theme.typography.variants[variantNameUsedForMuiButton].style.lineHeight);
 
         return {
+          fontWeight: "500",
+          fontSize: "14px",
           textTransform: "unset" as const,
-          backgroundColor: disabled
-            ? theme.colors.useCases.buttons.actionDisabledBackground
-            : (() => {
-                switch (variant) {
-                  case "primary":
-                  case "secondary":
-                  case "noBorder":
-                  case "warning":
-                    return "transparent";
-                  case "ternary":
-                    return theme.colors.palette[theme.isDarkModeEnabled ? "light" : "dark"].main;
+          backgroundColor: (() => {
+            switch (variant) {
+              case "noBorder":
+                return "transparent";
+                break;
+              case "primary":
+              case "secondary":
+              case "warning":
+                if (disabled) {
+                  theme.colors.useCases.buttons.actionDisabledBackground;
+                } else {
+                  return "transparent";
                 }
-              })(),
-          borderRadius: approxHeight / 2,
+              case "ternary":
+                if (disabled) {
+                  theme.colors.useCases.buttons.actionDisabledBackground;
+                } else {
+                  return theme.colors.palette[theme.isDarkModeEnabled ? "light" : "dark"].main;
+                }
+            }
+          })(),
+          borderRadius: variant === "noBorder" ? "1px" : approxHeight / 2,
           borderWidth,
           borderStyle: "solid",
           borderColor: disabled ? "transparent" : hoverBackgroundColor,
diff --git a/app/client-v2/packages/ui/components/DataDisplay/Chip.tsx b/app/client-v2/packages/ui/components/DataDisplay/Chip.tsx
new file mode 100644
index 000000000..88888ae21
--- /dev/null
+++ b/app/client-v2/packages/ui/components/DataDisplay/Chip.tsx
@@ -0,0 +1,112 @@
+import { Chip as MUIChip } from "@mui/material";
+import React from "react";
+
+import { changeColorOpacity } from "../../lib";
+import { makeStyles } from "../../lib/ThemeProvider";
+import { Icon, Text } from "../theme";
+import type { IconId } from "../theme";
+
+interface ChipProps {
+  className?: string;
+  variant?: "filled" | "Border" | "filledWithBorder";
+  textDesign?: "normal" | "italic";
+  color?: "main" | "success" | "warning" | "error";
+  label: React.ReactNode; // JSX Element
+  icon?: IconId;
+}
+
+export const Chip = (props: ChipProps) => {
+  const { variant = "filled", textDesign = "normal", label, className, color = "main", icon } = props;
+
+  const { classes, cx } = useStyles({ variant, textDesign, color, icon });
+
+  const labelChip = (
+    <div className={classes.chipContent}>
+      {icon ? <Icon iconId={icon} iconVariant={color} /> : null}
+      <Text className={classes.chipText} typo="body 3">
+        {label}
+      </Text>
+    </div>
+  );
+
+  return <MUIChip className={cx(classes.chip, className)} label={labelChip} />;
+};
+
+const useStyles = makeStyles<{
+  variant: "filled" | "Border" | "filledWithBorder";
+  textDesign: "normal" | "italic";
+  color: "main" | "success" | "warning" | "error";
+  icon?: IconId;
+}>({ name: { Chip } })((theme, { variant, textDesign, color, icon }) => {
+  let bgColor;
+  switch (variant) {
+    case "filled":
+    case "filledWithBorder":
+      bgColor = changeColorOpacity({
+        color: theme.colors.palette[theme.isDarkModeEnabled ? "dark" : "light"].greyVariant2,
+        opacity: 0.3,
+      });
+      break;
+    case "Border":
+      bgColor = "transparent";
+      break;
+  }
+
+  let border;
+  switch (variant) {
+    case "filled":
+      border = "none";
+      break;
+    case "filledWithBorder":
+    case "Border":
+      switch (color) {
+        case "main":
+          border = `1px solid ${theme.colors.palette.dark.main}BF`;
+          break;
+        case "success":
+          border = `1px solid ${theme.colors.palette.greenSuccess.main}BF`;
+          break;
+        case "warning":
+          border = `1px solid ${theme.colors.palette.orangeWarning.main}BF`;
+          break;
+        case "error":
+          border = `1px solid ${theme.colors.palette.redError.main}BF`;
+          break;
+      }
+      break;
+  }
+
+  let textColor;
+  switch (color) {
+    case "main":
+      textColor = theme.colors.palette.dark.main;
+      break;
+    case "success":
+      textColor = theme.colors.palette.greenSuccess.main;
+      break;
+    case "warning":
+      textColor = theme.colors.palette.orangeWarning.main;
+      break;
+    case "error":
+      textColor = theme.colors.palette.redError.main;
+      break;
+  }
+
+  return {
+    chip: {
+      backgroundColor: bgColor,
+      border: border,
+      fontStyle: textDesign === "italic" ? "italic" : "normal",
+    },
+    chipContent: {
+      display: "flex",
+      alignItems: "center",
+      gap: "6px",
+      paddingRight: icon ? "6px" : "0px",
+    },
+    chipText: {
+      color: textColor,
+      fontStyle: "italic",
+    },
+  };
+});
diff --git a/app/client-v2/packages/ui/components/Divider.tsx b/app/client-v2/packages/ui/components/DataDisplay/Divider.tsx
similarity index 94%
rename from app/client-v2/packages/ui/components/Divider.tsx
rename to app/client-v2/packages/ui/components/DataDisplay/Divider.tsx
index 89bff14b6..a10ce6868 100644
--- a/app/client-v2/packages/ui/components/Divider.tsx
+++ b/app/client-v2/packages/ui/components/DataDisplay/Divider.tsx
@@ -3,7 +3,7 @@ import { forwardRef, memo } from "react";
 import type { Equals } from "tsafe";
 import { assert } from "tsafe/assert";
 
-import { makeStyles } from "../lib/ThemeProvider";
+import { makeStyles } from "../../lib/ThemeProvider";
 
 export type DividerProps = {
   className?: string;
@@ -39,7 +39,7 @@ const useStyles = makeStyles({ name: { Divider } })((theme) => ({
   root: {
     height: "1px",
     opacity: "0.08",
-    margin: "25px 0",
+    margin: "16px 0",
   },
   main: {
     backgroundColor: theme.isDarkModeEnabled
diff --git a/app/client-v2/packages/ui/components/EnhancedTable.tsx b/app/client-v2/packages/ui/components/DataDisplay/EnhancedTable.tsx
similarity index 78%
rename from app/client-v2/packages/ui/components/EnhancedTable.tsx
rename to app/client-v2/packages/ui/components/DataDisplay/EnhancedTable.tsx
index c33a167a5..59bf75e9a 100644
--- a/app/client-v2/packages/ui/components/EnhancedTable.tsx
+++ b/app/client-v2/packages/ui/components/DataDisplay/EnhancedTable.tsx
@@ -12,11 +12,12 @@ import TableSortLabel from "@mui/material/TableSortLabel";
 import { visuallyHidden } from "@mui/utils";
 import * as React from "react";
 
-import { changeColorOpacity } from "../lib";
-import { makeStyles } from "../lib/ThemeProvider";
-import Dialog from "./Dialog";
-import { Text } from "./theme";
-import { IconButton } from "./theme";
+import { changeColorOpacity } from "../../lib";
+import { makeStyles } from "../../lib/ThemeProvider";
+import Dialog from "../Dialog";
+import { Text } from "../theme";
+
+// SORTING FUNCTIONS
 
 function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
   if (b[orderBy] < a[orderBy]) {
@@ -39,10 +40,6 @@ function getComparator<Key extends keyof any>(
     : (a, b) => -descendingComparator(a, b, orderBy);
 }
 
-// Since 2020 all major browsers ensure sort stability with Array.prototype.sort().
-// stableSort() brings sort stability to non-modern browsers (notably IE11). If you
-// only support modern browsers you can replace stableSort(exampleArray, exampleComparator)
-// with exampleArray.slice().sort(exampleComparator)
 function stableSort<T>(array: readonly T[], comparator: (a: T, b: T) => number) {
   const stabilizedThis = array.map((el, index) => [el, index] as [T, number]);
   stabilizedThis.sort((a, b) => {
@@ -68,16 +65,30 @@ interface EnhancedTableProps {
     label: string;
   }[];
   checkbox: boolean;
+  action: React.ReactNode | null;
 }
 
 function EnhancedTableHead(props: EnhancedTableProps) {
-  const { onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort, columns, checkbox } = props;
+  const {
+    onSelectAllClick,
+    order,
+    orderBy,
+    numSelected,
+    rowCount,
+    onRequestSort,
+    columns,
+    checkbox,
+    action = null,
+  } = props;
+
+  const { classes } = useStyles({ dense: undefined, alternativeColors: false, checkbox });
+
+  // functions
+
   const createSortHandler = (property: any) => (event: React.MouseEvent<unknown>) => {
     onRequestSort(event, property);
   };
 
-  const { classes } = useStyles();
-
   return (
     <TableHead>
       <TableRow>
@@ -104,7 +115,9 @@ function EnhancedTableHead(props: EnhancedTableProps) {
               active={orderBy === headCell.id}
               direction={orderBy === headCell.id ? order : "asc"}
               onClick={createSortHandler(headCell.id)}>
-              {headCell.label}
+              <Text className={classes.tableCellHeaderText} typo="body 2">
+                {headCell.label}
+              </Text>
               {orderBy === headCell.id ? (
                 <Box component="span" sx={visuallyHidden}>
                   {order === "desc" ? "sorted descending" : "sorted ascending"}
@@ -113,14 +126,17 @@ function EnhancedTableHead(props: EnhancedTableProps) {
             </TableSortLabel>
           </TableCell>
         ))}
-        <TableCell className={classes.tableCell} padding="checkbox" />
+        {action ? <TableCell className={classes.tableCell} padding="checkbox" /> : null}
       </TableRow>
     </TableHead>
   );
 }
 
 type EnhanceTableProps = {
-  rows: { name: string | number; [key: string]: any }[];
+  rows: { name: React.ReactNode; [key: string]: any }[];
+  dense: boolean;
+  alternativeColors: boolean;
+  hover?: boolean;
   columnNames: {
     id: string;
     numeric: boolean;
@@ -129,25 +145,43 @@ type EnhanceTableProps = {
   openDialog?: React.Dispatch<React.SetStateAction<object | null>>;
   dialog?: { title: string; body: React.ReactNode; action: React.ReactNode };
   checkbox?: boolean;
-  more?: boolean;
+  action?: React.ReactNode | null;
 };
 
-export default function EnhancedTable(props: EnhanceTableProps) {
-  const { rows, columnNames, openDialog, dialog, checkbox = true, more = true, ...rest } = props;
+/**
+ * Renders an enhanced table component with customizable props.
+ * @param {EnhanceTableProps} props - The props object containing the necessary data for rendering the table.
+ * @returns The rendered enhanced table component.
+ */
+export function EnhancedTable(props: EnhanceTableProps) {
+  const {
+    rows,
+    columnNames,
+    openDialog,
+    dense,
+    dialog,
+    checkbox = true,
+    action = null,
+    alternativeColors = true,
+    hover = false,
+    ...rest
+  } = props;
 
-  type ObjectKeys = keyof (typeof rows)[0];
+  const { classes } = useStyles({ dense, alternativeColors, checkbox });
 
+  // Here we get the keys of the row so that we can render it
+  type ObjectKeys = keyof (typeof rows)[0];
   const rowKeys: ObjectKeys[] = Object.keys(rows[0]) as ObjectKeys[];
 
+  // Component State
   const [order, setOrder] = React.useState<Order>("asc");
   const [orderBy, setOrderBy] = React.useState(rowKeys[0]);
   const [selected, setSelected] = React.useState<(string | number)[]>([]);
   const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
   const [page, setPage] = React.useState(0);
-  const [dense, setDense] = React.useState(false);
-  const [rowsPerPage, setRowsPerPage] = React.useState(5);
-  const { classes } = useStyles();
+  const [rowsPerPage, setRowsPerPage] = React.useState(25);
 
+  // functions
   const handleRequestSort = (event: React.MouseEvent<unknown>, property: keyof ObjectKeys) => {
     const isAsc = orderBy === property && order === "asc";
     setOrder(isAsc ? "desc" : "asc");
@@ -188,16 +222,12 @@ export default function EnhancedTable(props: EnhanceTableProps) {
     setPage(0);
   };
 
-  const handleChangeDense = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setDense(event.target.checked);
-  };
-
   const isSelected = (name: string | number) => selected.indexOf(name) !== -1;
 
-  function openDialogInitializer(event: React.MouseEvent<HTMLButtonElement>, indx: number) {
-    setAnchorEl(event.currentTarget);
+  function openDialogInitializer(row: { [x: string]: string | number; [x: number]: string | number }) {
+    // setAnchorEl(event.currentTarget);
     if (openDialog) {
-      openDialog(rows[indx]);
+      openDialog(row);
     }
   }
 
@@ -234,6 +264,7 @@ export default function EnhancedTable(props: EnhanceTableProps) {
               onRequestSort={handleRequestSort}
               rowCount={rows.length}
               checkbox={checkbox}
+              action={action}
             />
             <TableBody>
               {visibleRows.map((row, index) => {
@@ -243,7 +274,7 @@ export default function EnhancedTable(props: EnhanceTableProps) {
                 return (
                   <TableRow
                     className={classes.tableRow}
-                    hover={false}
+                    hover={hover}
                     role="checkbox"
                     aria-checked={isItemSelected}
                     tabIndex={-1}
@@ -268,6 +299,7 @@ export default function EnhancedTable(props: EnhanceTableProps) {
                           className={classes.tableCell}
                           key={index}
                           component="th"
+                          align={columnNames[index].numeric ? "right" : "left"}
                           id={labelId}
                           scope="row"
                           padding="none">
@@ -276,20 +308,11 @@ export default function EnhancedTable(props: EnhanceTableProps) {
                           </Text>
                         </TableCell>
                       ))}
-                    {more ? (
+                    {action ? (
                       <TableCell className={classes.tableCell} padding="none">
-                        <IconButton
-                          onClick={(e) => openDialogInitializer(e, index)}
-                          iconId="moreVert"
-                          // iconVariant="gray"
-                          size="medium"
-                        />
+                        <div onClick={() => openDialogInitializer(row)}>{action}</div>
                       </TableCell>
                     ) : null}
-                    {/* <TableCell align="right">{row.calories}</TableCell>
-                    <TableCell align="right">{row.fat}</TableCell>
-                    <TableCell align="right">{row.carbs}</TableCell>
-                    <TableCell align="right">{row.protein}</TableCell> */}
                   </TableRow>
                 );
               })}
@@ -319,7 +342,7 @@ export default function EnhancedTable(props: EnhanceTableProps) {
           anchorEl={anchorEl}
           onClick={closeTablePopover}
           title={dialog ? dialog.title : "unknown"}
-          width="444px"
+          width="523px"
           direction="right"
           action={dialog?.action}>
           {dialog ? dialog.body : ""}
@@ -329,20 +352,24 @@ export default function EnhancedTable(props: EnhanceTableProps) {
   );
 }
 
-const useStyles = makeStyles({
+const useStyles = makeStyles<{ dense?: boolean | undefined; alternativeColors: boolean; checkbox: boolean }>({
   name: { EnhancedTable },
-})((theme) => ({
+})((theme, { dense, alternativeColors, checkbox }) => ({
   tableRow: {
-    border: "none",
     backgroundColor: "transparent",
     "&:nth-of-type": {},
     "&:nth-of-type(odd)": {
-      backgroundColor: changeColorOpacity({ color: theme.colors.palette.focus.main, opacity: 0.08 }),
+      backgroundColor: alternativeColors
+        ? changeColorOpacity({ color: theme.colors.palette.focus.main, opacity: 0.08 })
+        : "transparent",
       borderColor: changeColorOpacity({ color: theme.colors.palette.focus.main, opacity: 0.08 }),
     },
     // hide last border
     "&:last-child td, &:last-child th": {
-      border: 0,
+      border: alternativeColors ? 0 : "",
+    },
+    "&.MuiTableRow-hover:hover": {
+      background: theme.colors.palette[theme.isDarkModeEnabled ? "dark" : "light"].greyVariant1,
     },
   },
   tableCell: {
@@ -357,7 +384,11 @@ const useStyles = makeStyles({
     [`&.${tableCellClasses.body}`]: {
       fontSize: 14,
       border: "none",
+      borderBottom: alternativeColors
+        ? "none"
+        : `0.5px solid ${theme.colors.palette[theme.isDarkModeEnabled ? "dark" : "light"].greyVariant1}`,
     },
+    paddingLeft: checkbox ? 0 : theme.spacing(3),
   },
   tableContainer: {
     boxShadow: "none",
@@ -365,7 +396,11 @@ const useStyles = makeStyles({
     backgroundColor: "transparent",
   },
   tableCellText: {
-    padding: theme.spacing(3),
+    padding: dense ? 0 : theme.spacing(3),
     fontSize: "12px",
   },
+  tableCellHeaderText: {
+    fontWeight: "bold",
+    paddingLeft: theme.spacing(3),
+  },
 }));
diff --git a/app/client-v2/packages/ui/components/DataDisplay/FileManagementTable.tsx b/app/client-v2/packages/ui/components/DataDisplay/FileManagementTable.tsx
new file mode 100644
index 000000000..6fa350550
--- /dev/null
+++ b/app/client-v2/packages/ui/components/DataDisplay/FileManagementTable.tsx
@@ -0,0 +1,533 @@
+import Box from "@mui/material/Box";
+import Paper from "@mui/material/Paper";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell, { tableCellClasses } from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableHead from "@mui/material/TableHead";
+import TablePagination from "@mui/material/TablePagination";
+import TableRow from "@mui/material/TableRow";
+import TableSortLabel from "@mui/material/TableSortLabel";
+import { visuallyHidden } from "@mui/utils";
+import { isValidElement, useEffect } from "react";
+import * as React from "react";
+
+import { changeColorOpacity } from "../../lib";
+import { makeStyles } from "../../lib/ThemeProvider";
+import { Text, Icon, IconButton } from "../theme";
+
+// SORTING FUNCTIONS
+
+/**
+ * A comparator function used for sorting an array of objects in descending order based on a specific property.
+ * @param {T} a - The first object to compare.
+ * @param {T} b - The second object to compare.
+ * @param {keyof T} orderBy - The property of the objects to sort by.
+ * @returns {number} - Returns -1 if b[orderBy] is less than a[orderBy], 1 if b[orderBy] is greater than a[orderBy], or 0 if they are equal.
+ */
+
+function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
+  if (b[orderBy] < a[orderBy]) {
+    return -1;
+  }
+  if (b[orderBy] > a[orderBy]) {
+    return 1;
+  }
+  return 0;
+}
+
+type Order = "asc" | "desc";
+
+/**
+ * Returns a comparator function based on the given order and orderBy parameters.
+ * @param {Order} order - The order in which to sort the items (asc or desc).
+ * @param {Key} orderBy - The key to sort the items by.
+ * @returns A comparator function that can be used to sort an array of objects.
+ */
+
+function getComparator<Key extends keyof any>(
+  order: Order,
+  orderBy: Key
+): (a: { [key in Key]: number | string }, b: { [key in Key]: number | string }) => number {
+  return order === "desc"
+    ? (a, b) => descendingComparator(a, b, orderBy)
+    : (a, b) => -descendingComparator(a, b, orderBy);
+}
+
+/**
+ * Sorts an array in a stable manner using a custom comparator function.
+ * @param {readonly T[]} array - The array to be sorted.
+ * @param {(a: T, b: T) => number} comparator - The function used to compare elements in the array.
+ * @returns {T[]} - The sorted array.
+ */
+
+function stableSort<T extends Rows>(array: readonly T[], comparator: (a: T, b: T) => number) {
+  const stabilizedThis = array.map((el, index) => [el, index] as [T, number]);
+  stabilizedThis.sort((a, b) => {
+    const order = comparator(a[0], b[0]);
+    if (order !== 0) {
+      return order;
+    }
+    return a[1] - b[1];
+  });
+  return stabilizedThis.map((el) => el[0]);
+}
+
+interface FileManagementHeadProps {
+  numSelected: number;
+  onRequestSort: (event: React.MouseEvent<unknown>, property: any) => void;
+  order: Order;
+  orderBy: string | number;
+  rowCount: number;
+  columns: {
+    id: string;
+    numeric: boolean;
+    label: string;
+  }[];
+}
+
+/**
+ * Renders the table head component for an enhanced table.
+ * @param {EnhancedTableProps} props - The props for the EnhancedTableHead component.
+ * @returns The rendered table head component.
+ */
+
+function FileManagementHead(props: FileManagementHeadProps) {
+  const { order, orderBy, numSelected, rowCount, onRequestSort, columns } = props;
+  const createSortHandler = (property: any) => (event: React.MouseEvent<unknown>) => {
+    onRequestSort(event, property);
+  };
+
+  const { classes } = useStyles();
+
+  return (
+    <TableHead>
+      <TableRow>
+        {columns.map((headCell) => (
+          <TableCell
+            className={classes.tableCell}
+            key={headCell.id}
+            align={headCell.numeric ? "right" : "left"}
+            sortDirection={orderBy === headCell.id ? order : false}>
+            <TableSortLabel
+              active={orderBy === headCell.id}
+              direction={orderBy === headCell.id ? order : "asc"}
+              onClick={createSortHandler(headCell.id)}>
+              <Text className={classes.tableCellHeaderText} typo="body 1">
+                {headCell.label}
+              </Text>
+              {orderBy === headCell.id ? (
+                <Box component="span" sx={visuallyHidden}>
+                  {order === "desc" ? "sorted descending" : "sorted ascending"}
+                </Box>
+              ) : null}
+            </TableSortLabel>
+          </TableCell>
+        ))}
+        <TableCell className={classes.tableCell} padding="checkbox" />
+      </TableRow>
+    </TableHead>
+  );
+}
+
+type Rows = { name: React.ReactNode; [key: string]: any };
+
+type FileManagementProps = {
+  rows: Rows[];
+  hover?: boolean;
+  columnNames: {
+    id: string;
+    numeric: boolean;
+    label: string;
+  }[];
+  openDialog?: React.Dispatch<
+    React.SetStateAction<{
+      [x: string]: string | number;
+      [x: number]: string | number;
+    } | null>
+  >;
+  modal?: { body: React.ReactNode; action: React.ReactNode; header: React.ReactNode } | null;
+  openModal?: React.Dispatch<React.SetStateAction<object | null>>;
+  setDialogAnchor?: React.Dispatch<React.SetStateAction<HTMLButtonElement | null>>;
+  more?: boolean;
+  currPath: string[];
+  setPath: (value: string[]) => void;
+};
+
+/**
+ * Renders an enhanced table component with customizable props.
+ * @param {EnhanceTableProps} props - The props object containing the necessary data for rendering the table.
+ * @returns The rendered enhanced table component.
+ */
+
+export function FileManagementTable(props: FileManagementProps) {
+  const {
+    rows,
+    columnNames,
+    openModal,
+    setDialogAnchor,
+    modal,
+    openDialog,
+    more = true,
+    hover = false,
+    currPath,
+    setPath,
+    ...rest
+  } = props;
+
+  const { classes } = useStyles();
+
+  // Here we get the keys of the row so that we can render it
+  type ObjectKeys = keyof (typeof rows)[0];
+  const rowKeys: ObjectKeys[] = Object.keys(rows[0]) as ObjectKeys[];
+
+  // Component State
+  const [order, setOrder] = React.useState<Order>("asc");
+  const [orderBy, setOrderBy] = React.useState(rowKeys[0]);
+  const [selected, setSelected] = React.useState<(string | number)[]>([]);
+  const [page, setPage] = React.useState(0);
+  const [rowsPerPage, setRowsPerPage] = React.useState(25);
+  const [rowOnPath, setRowOnPath] = React.useState<Rows[] | null>(rows);
+
+  useEffect(() => {
+    switchPath({
+      direction: "change",
+      changePath: currPath,
+    });
+  }, [currPath]);
+
+  // functions
+  const handleRequestSort = (event: React.MouseEvent<unknown>, property: keyof ObjectKeys) => {
+    const isAsc = orderBy === property && order === "asc";
+    setOrder(isAsc ? "desc" : "asc");
+    setOrderBy(property);
+  };
+
+  const handleChangePage = (event: unknown, newPage: number) => {
+    setPage(newPage);
+  };
+
+  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setPage(0);
+  };
+
+  /**
+   * Recursively searches for an element in an array of objects with nested paths.
+   * @param {Rows[]} rows - The array of objects to search through.
+   * @param {string[]} targetPath - The target path to search for.
+   * @returns {Rows[] | null} - An array of objects that match the target path, or null if no match is found.
+   */
+  function findElementWithNestedPath(rows: Rows[], targetPath: string[]) {
+    let files: Rows[] = [];
+
+    rows.map((row) => {
+      if (JSON.stringify(row.path) === JSON.stringify(targetPath)) {
+        files.push(row);
+      }
+      if (row.files) {
+        const nestedResult = findElementWithNestedPath(row.files, targetPath);
+        if (nestedResult) {
+          files = [...files, ...nestedResult];
+        }
+      }
+    });
+
+    if (files.length) {
+      return files;
+    }
+    return null;
+  }
+
+  function findSiblingsWithNestedPath(rows: Rows[], targetPath: string[]) {
+    const targetElement = findElementWithNestedPath(rows, targetPath);
+    if (!targetElement) {
+      return [];
+    }
+    return targetElement;
+  }
+
+  function switchPath(props: {
+    direction: "back" | "enter" | "change";
+    currPath?: string[];
+    changePath?: string[];
+    folderName?: string;
+  }) {
+    let newPath: string[] = [];
+
+    switch (props.direction) {
+      case "back":
+        if (props.currPath) {
+          newPath = [...props.currPath];
+          newPath.pop();
+          setPath(newPath);
+          break;
+        }
+      case "enter":
+        if (props.folderName && props.currPath) {
+          newPath = [...props.currPath];
+          newPath.push(props.folderName);
+          setPath(newPath);
+        }
+        break;
+      case "change":
+        if (props.changePath) {
+          newPath = props.changePath;
+          setPath(newPath);
+        }
+        break;
+    }
+
+    if (newPath.length) {
+      const siblings = findSiblingsWithNestedPath(rows, newPath);
+      setRowOnPath(siblings.flat(Infinity));
+    }
+  }
+
+  function handleRowClick(row: Rows) {
+    if (openModal && !React.isValidElement(row.name) && row.name !== "...") {
+      openModal(row);
+    } else {
+      if (row.files) {
+        switchPath({
+          direction: "enter",
+          currPath: row.path,
+          folderName: row.stringName,
+        });
+      } else if (row.name === "..." && currPath.length > 1) {
+        switchPath({
+          direction: "back",
+          currPath: currPath,
+        });
+      }
+    }
+  }
+
+  function openDialogInitializer(
+    event: React.MouseEvent<HTMLButtonElement>,
+    row: { [x: string]: string | number; [x: number]: string | number }
+  ) {
+    if (setDialogAnchor) {
+      setDialogAnchor(event.currentTarget);
+      if (openDialog) {
+        openDialog(row);
+      }
+    }
+  }
+
+  // Avoid a layout jump when reaching the last page with empty rows.
+  const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
+
+  const visibleRows: Rows[] = React.useMemo(() => {
+    const stable_sort = stableSort(rowOnPath ? rowOnPath : [], getComparator(order, orderBy)).slice(
+      page * rowsPerPage,
+      page * rowsPerPage + rowsPerPage
+    );
+    return stable_sort;
+  }, [order, orderBy, page, rowsPerPage, rowOnPath]);
+
+  return (
+    <Box sx={{ width: "100%" }}>
+      <Paper sx={{ width: "100%", mb: 2 }} className={classes.tableContainer}>
+        <TableContainer>
+          <Table sx={{ minWidth: 750 }} aria-labelledby="tableTitle" size="small">
+            <FileManagementHead
+              numSelected={selected.length}
+              order={order}
+              columns={columnNames}
+              orderBy={orderBy}
+              onRequestSort={handleRequestSort}
+              rowCount={rows.length}
+            />
+            <TableBody>
+              <TableRow
+                className={classes.tableRow}
+                onClick={() => handleRowClick({ name: "..." })}
+                hover={hover}
+                role="checkbox"
+                tabIndex={-1}
+                sx={{ cursor: "pointer" }}>
+                <TableCell
+                  className={classes.tableCell}
+                  sx={{ padding: "12px" }}
+                  component="th"
+                  id="go-back"
+                  scope="row"
+                  padding="none">
+                  <Text className={classes.tableCellText} typo="body 2">
+                    <Icon iconId="moreHorizontal" iconVariant="gray" />
+                  </Text>
+                </TableCell>
+                <TableCell
+                  className={classes.tableCell}
+                  component="th"
+                  id="go-back"
+                  scope="row"
+                  padding="none"
+                />
+                <TableCell
+                  className={classes.tableCell}
+                  component="th"
+                  id="go-back"
+                  scope="row"
+                  padding="none"
+                />
+                <TableCell
+                  className={classes.tableCell}
+                  component="th"
+                  id="go-back"
+                  scope="row"
+                  padding="none"
+                />
+                <TableCell
+                  className={classes.tableCell}
+                  component="th"
+                  id="go-back"
+                  scope="row"
+                  padding="none"
+                />
+              </TableRow>
+              {visibleRows.map((row, index) => {
+                const labelId = `enhanced-table-checkbox-${index}`;
+
+                return (
+                  <TableRow
+                    className={classes.tableRow}
+                    hover={hover}
+                    role="checkbox"
+                    tabIndex={-1}
+                    key={index}
+                    sx={{ cursor: "pointer" }}>
+                    <TableCell
+                      onClick={() => handleRowClick(row)}
+                      className={classes.tableCell}
+                      component="th"
+                      id={labelId}
+                      scope="row"
+                      padding="none">
+                      {isValidElement(row.name) ? (
+                        row.name
+                      ) : (
+                        <Text className={classes.tableCellText} typo="body 2">
+                          {row.name}
+                        </Text>
+                      )}
+                    </TableCell>
+                    <TableCell
+                      onClick={() => handleRowClick(row)}
+                      className={classes.tableCell}
+                      component="th"
+                      id={labelId}
+                      scope="row"
+                      padding="none">
+                      {row.type}
+                    </TableCell>
+                    <TableCell
+                      onClick={() => handleRowClick(row)}
+                      className={classes.tableCell}
+                      component="th"
+                      id={labelId}
+                      scope="row"
+                      padding="none">
+                      <Text className={classes.tableCellText} typo="body 2">
+                        {row.modified}
+                      </Text>
+                    </TableCell>
+                    <TableCell
+                      onClick={() => handleRowClick(row)}
+                      className={classes.tableCell}
+                      component="th"
+                      id={labelId}
+                      scope="row"
+                      padding="none">
+                      <Text className={classes.tableCellText} typo="body 2">
+                        {row.size}
+                      </Text>
+                    </TableCell>
+                    {more ? (
+                      <TableCell className={classes.tableCell} padding="none">
+                        <IconButton
+                          onClick={(e) => openDialogInitializer(e, row)}
+                          iconId="moreVert"
+                          size="large"
+                        />
+                      </TableCell>
+                    ) : null}
+                  </TableRow>
+                );
+              })}
+              {emptyRows > 0 && (
+                <TableRow
+                  style={{
+                    height: 33 * emptyRows,
+                  }}>
+                  <TableCell colSpan={6} />
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </TableContainer>
+        <TablePagination
+          rowsPerPageOptions={[5, 10, 25]}
+          component="div"
+          count={rows.length}
+          rowsPerPage={rowsPerPage}
+          page={page}
+          onPageChange={handleChangePage}
+          onRowsPerPageChange={handleChangeRowsPerPage}
+        />
+      </Paper>
+    </Box>
+  );
+}
+
+const useStyles = makeStyles({
+  name: { FileManagementTable },
+})((theme) => ({
+  tableRow: {
+    backgroundColor: "transparent",
+    "&:nth-of-type": {},
+    "&:nth-of-type(odd)": {
+      backgroundColor: "transparent",
+      borderColor: changeColorOpacity({ color: theme.colors.palette.focus.main, opacity: 0.08 }),
+    },
+    "&.MuiTableRow-hover:hover": {
+      background: `${theme.colors.palette[theme.isDarkModeEnabled ? "dark" : "light"].greyVariant1}80`,
+    },
+  },
+  tableCell: {
+    [`&.${tableCellClasses.head}`]: {
+      backgroundColor: "transparent",
+      color: theme.colors.useCases.typography[theme.isDarkModeEnabled ? "textSecondary" : "textPrimary"],
+      fontWeight: "bold",
+      borderBottom: `0.5px solid ${
+        theme.colors.palette[theme.isDarkModeEnabled ? "dark" : "light"].greyVariant1
+      }`,
+    },
+    [`&.${tableCellClasses.body}`]: {
+      fontSize: 14,
+      border: "none",
+      borderBottom: `0.5px solid ${
+        theme.colors.palette[theme.isDarkModeEnabled ? "dark" : "light"].greyVariant1
+      }`,
+    },
+    paddingLeft: theme.spacing(3),
+  },
+  tableContainer: {
+    boxShadow: "none",
+    backgroundImage: "none",
+    backgroundColor: "transparent",
+  },
+  tableCellText: {
+    padding: 0,
+  },
+  tableCellHeaderText: {
+    fontWeight: "bold",
+    paddingLeft: 0,
+  },
+  modalHeader: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+}));
diff --git a/app/client-v2/packages/ui/components/DataDisplay/FileUploadProgress.tsx b/app/client-v2/packages/ui/components/DataDisplay/FileUploadProgress.tsx
new file mode 100644
index 000000000..aef22a847
--- /dev/null
+++ b/app/client-v2/packages/ui/components/DataDisplay/FileUploadProgress.tsx
@@ -0,0 +1,90 @@
+// Copyright (c) 2020 GitHub user u/garronej
+import { Box } from "@mui/material";
+import { forwardRef, memo } from "react";
+import type { Equals } from "tsafe";
+import { assert } from "tsafe/assert";
+
+import { makeStyles } from "../../lib/ThemeProvider";
+import LinearProgress from "../LinearProgress";
+import { Text, IconButton, Icon } from "../theme";
+
+export type FileUploadProgressProps = {
+  className?: string;
+  onFinished: (value: boolean) => void;
+  finished?: boolean;
+};
+
+/**
+ * A memoized functional component that represents the progress of a file upload.
+ * @param {FileUploadProgressProps} props - The props for the component.
+ * @param {React.Ref<HTMLElement>} ref - The ref for the component.
+ * @returns {React.ReactElement} - The rendered component.
+ */
+export const FileUploadProgress = memo(
+  forwardRef<HTMLElement, FileUploadProgressProps>((props, ref) => {
+    const {
+      className,
+      onFinished,
+      finished = false,
+      //For the forwarding, rest should be empty (typewise)
+      ...rest
+    } = props;
+
+    //For the forwarding, rest should be empty (typewise),
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    assert<Equals<typeof rest, {}>>();
+
+    const { classes, cx } = useStyles();
+
+    return (
+      <Box className={classes.container}>
+        <Box>
+          <Icon iconId="file" wrapped="circle" bgVariant="focus" bgOpacity={0.12} className={classes.icon} />
+        </Box>
+        <Box sx={{ width: "228px" }}>
+          <Text typo="label 2">document _file_name.pdf</Text>
+          <Text typo="label 2" color="secondary" className={classes.dataInfo}>
+            <Text typo="label 2" color="secondary">
+              100kb
+            </Text>{" "}
+            <Text typo="label 2" color="secondary">
+              •
+            </Text>
+            <Text typo="label 2" color="secondary">
+              {finished ? "Complete" : "Loading"}
+            </Text>
+          </Text>
+          {finished ? (
+            <LinearProgress finished={onFinished} defaultValue={100} />
+          ) : (
+            <LinearProgress finished={onFinished} />
+          )}
+        </Box>
+        <Box>
+          <IconButton type="submit" iconId="close" size="small" iconVariant="grey" />
+        </Box>
+      </Box>
+    );
+  })
+);
+
+const useStyles = makeStyles({ name: { FileUploadProgress } })((theme) => ({
+  container: {
+    width: "100%",
+    display: "flex",
+    justifyContent: "space-between",
+    gap: theme.spacing(3),
+    padding: theme.spacing(3),
+  },
+  content: {
+    width: "228px",
+  },
+  icon: {
+    margin: "8px",
+  },
+  dataInfo: {
+    marginBottom: theme.spacing(3),
+    display: "flex",
+    gap: theme.spacing(2),
+  },
+}));
diff --git a/app/client-v2/packages/ui/components/Icon/Icon.tsx b/app/client-v2/packages/ui/components/DataDisplay/Icon.tsx
similarity index 83%
rename from app/client-v2/packages/ui/components/Icon/Icon.tsx
rename to app/client-v2/packages/ui/components/DataDisplay/Icon.tsx
index 68c48b5f8..73575e18f 100644
--- a/app/client-v2/packages/ui/components/Icon/Icon.tsx
+++ b/app/client-v2/packages/ui/components/DataDisplay/Icon.tsx
@@ -44,7 +44,7 @@ export type IconProps<IconId extends string = string> = {
   size?: IconSizeName;
   bgVariant?: "focus" | "secondary" | "gray" | "gray2";
   bgOpacity?: number;
-  iconVariant?: "white" | "secondary" | "focus" | "gray" | "gray2";
+  iconVariant?: "white" | "secondary" | "focus" | "gray" | "gray2" | "warning" | "main" | "error" | "success";
   onClick?: MouseEventHandler<SVGSVGElement>;
 };
 
@@ -56,28 +56,19 @@ export type MuiIconLike = (props: {
 
 export type SvgComponentLike = ElementType;
 
-// function blendHexColorWithOpacity(hexColor: string, opacity: number) {
-//   // Remove the '#' character from the hex color
-//   const normalizedHexColor = hexColor.replace("#", "");
-
-//   // Convert the opacity to its hexadecimal equivalent
-//   const opacityHex = Math.round(opacity * 255)
-//     .toString(16)
-//     .padStart(2, "0");
-
-//   // Combine the opacity hex value with the original hex color
-//   const blendedHexColor = `#${normalizedHexColor}${opacityHex}`;
-//   return blendedHexColor;
-// }
-
 function isMuiIcon(Component: MuiIconLike | SvgComponentLike): Component is MuiIconLike {
   return "type" in (Component as MuiIconLike);
 }
 
-function getBgColor(key: "focus" | "secondary" | "gray" | "white" | "gray2", theme: Theme): string {
+function getBgColor(
+  key: "focus" | "secondary" | "gray" | "white" | "gray2" | "warning" | "main" | "error" | "success",
+  theme: Theme
+): string {
   switch (key) {
     case "focus":
       return theme.colors.palette.focus.main;
+    case "success":
+      return theme.colors.palette.greenSuccess.main;
     case "secondary":
       return theme.colors.palette.light.main;
     case "gray":
@@ -86,6 +77,12 @@ function getBgColor(key: "focus" | "secondary" | "gray" | "white" | "gray2", the
       return theme.colors.palette.light.greyVariant2;
     case "white":
       return theme.colors.palette.light.main;
+    case "warning":
+      return theme.colors.palette.orangeWarning.main;
+    case "main":
+      return theme.colors.palette.dark.main;
+    case "error":
+      return theme.colors.palette.redError.main;
     default:
       return "light";
   }
@@ -98,7 +95,16 @@ export function createIcon<IconId extends string>(componentByIconId: {
     size: IconSizeName;
     wrapped: "circle" | "square" | undefined;
     bgVariant: "focus" | "secondary" | "gray" | "gray2";
-    iconVariant: "white" | "secondary" | "focus" | "gray" | "gray2";
+    iconVariant:
+      | "white"
+      | "secondary"
+      | "focus"
+      | "gray"
+      | "gray2"
+      | "warning"
+      | "main"
+      | "error"
+      | "success";
     bgOpacity: number;
   }>()((theme, { size, wrapped, bgVariant, iconVariant, bgOpacity }) => ({
     root: {
@@ -109,10 +115,6 @@ export function createIcon<IconId extends string>(componentByIconId: {
       position: "relative",
     },
     iconWrapper: {
-      // backgroundColor: wrapped ? `${theme.colors.palette.focus.main}14` : "",
-      // width: 'fit-content',
-      // height: 'fit-content',
-      // borderRadius: wrapped === "circle" ? "50%" : 4,
       padding: wrapped ? "4px" : "",
       display: "flex",
       alignItems: "center",
diff --git a/app/client-v2/packages/ui/components/Icon/IconButton.tsx b/app/client-v2/packages/ui/components/DataDisplay/IconButton.tsx
similarity index 62%
rename from app/client-v2/packages/ui/components/Icon/IconButton.tsx
rename to app/client-v2/packages/ui/components/DataDisplay/IconButton.tsx
index 3f80fc978..60704fd16 100644
--- a/app/client-v2/packages/ui/components/Icon/IconButton.tsx
+++ b/app/client-v2/packages/ui/components/DataDisplay/IconButton.tsx
@@ -37,6 +37,8 @@ export namespace IconButtonProps {
 
     tabIndex?: number;
 
+    /** Defaults to grey */
+    iconVariant?: "white" | "secondary" | "focus" | "grey" | "grey2" | "error";
     name?: string;
     id?: string;
     "aria-label"?: string;
@@ -75,6 +77,7 @@ export function createIconButton<IconId extends string = never>(params?: {
         disabled = false,
         autoFocus = false,
         tabIndex,
+        iconVariant = "grey2",
         name,
         id,
         "aria-label": ariaLabel,
@@ -97,7 +100,7 @@ export function createIconButton<IconId extends string = never>(params?: {
         })
       );
 
-      const { classes, cx } = useStyles({ disabled, isMouseIn });
+      const { classes, cx } = useStyles({ disabled, isMouseIn, iconVariant });
 
       return (
         <MuiIconButton
@@ -152,36 +155,77 @@ export function createIconButton<IconId extends string = never>(params?: {
     })
   );
 
-  const useStyles = makeStyles<{ disabled: boolean; isMouseIn: boolean }>({
+  const useStyles = makeStyles<{
+    disabled: boolean;
+    isMouseIn: boolean;
+    iconVariant: "white" | "secondary" | "focus" | "grey" | "grey2" | "error";
+  }>({
     name: { IconButton },
-  })((theme, { disabled, isMouseIn }) => ({
-    root: {
-      padding: theme.spacing(2),
-      "&:hover": {
-        backgroundColor: "unset",
-        "& svg": {
-          color: theme.colors.useCases.buttons.actionHoverPrimary,
+  })((theme, { disabled, isMouseIn, iconVariant }) => {
+    let color;
+    let hoverColor;
+    switch (iconVariant) {
+      case "focus":
+        color = theme.colors.palette.focus.main;
+        hoverColor = theme.colors.palette.focus.light;
+        break;
+      case "secondary":
+        color = theme.colors.palette.light.main;
+        hoverColor = theme.colors.palette.light.light;
+        break;
+      case "grey":
+        color = theme.colors.palette.light.greyVariant4;
+        hoverColor = theme.colors.palette.light.greyVariant3;
+        break;
+      case "grey2":
+        color = theme.colors.palette.light.greyVariant2;
+        hoverColor = theme.colors.palette.light.greyVariant3;
+        break;
+      case "white":
+        color = theme.colors.palette.light.main;
+        hoverColor = theme.colors.palette.light.light;
+        break;
+      case "error":
+        color = theme.colors.palette.redError.main;
+        hoverColor = `${theme.colors.palette.redError.main}80`;
+        break;
+      default:
+        color = "light";
+        break;
+    }
+
+    return {
+      root: {
+        padding: theme.spacing(2),
+        "&:hover": {
+          backgroundColor: "unset",
+          "& svg": {
+            color: hoverColor,
+          },
         },
-      },
 
-      //NOTE: If the position of the button is relative (the default)
-      //it goes hover everything not positioned, we have to mess with z-index and
-      //we don't want that.
-      //The relative positioning is needed for the touch ripple effect.
-      //If we dont have position relative the effect is not restricted to the
-      //button: https://user-images.githubusercontent.com/6702424/157982515-c97dfa81-b09a-4323-beb9-d1e92e7ebe4d.mov
-      //The solution is set 'position: relative' only when the ripple effect is supposed to be visible.
-      //This explain the following awful rules.
-      //The expected result is: https://user-images.githubusercontent.com/6702424/157984062-27e544c3-f86f-47b8-b141-c5f61b8a2880.mov
-      position: isMouseIn ? "relative" : "unset",
-      "& .MuiTouchRipple-root": {
-        display: isMouseIn ? "unset" : "none",
+        //NOTE: If the position of the button is relative (the default)
+        //it goes hover everything not positioned, we have to mess with z-index and
+        //we don't want that.
+        //The relative positioning is needed for the touch ripple effect.
+        //If we dont have position relative the effect is not restricted to the
+        //button: https://user-images.githubusercontent.com/6702424/157982515-c97dfa81-b09a-4323-beb9-d1e92e7ebe4d.mov
+        //The solution is set 'position: relative' only when the ripple effect is supposed to be visible.
+        //This explain the following awful rules.
+        //The expected result is: https://user-images.githubusercontent.com/6702424/157984062-27e544c3-f86f-47b8-b141-c5f61b8a2880.mov
+        position: isMouseIn ? "relative" : "unset",
+        "& .MuiTouchRipple-root": {
+          display: isMouseIn ? "unset" : "none",
+        },
+      },
+      icon: {
+        color: color,
+        "&:hover": {
+          color: hoverColor,
+        },
       },
-    },
-    icon: {
-      color: theme.colors.useCases.typography[disabled ? "textDisabled" : "textPrimary"],
-    },
-  }));
+    };
+  });
 
   return { IconButton };
 }
diff --git a/app/client-v2/packages/ui/components/Table.tsx b/app/client-v2/packages/ui/components/DataDisplay/Table.tsx
similarity index 90%
rename from app/client-v2/packages/ui/components/Table.tsx
rename to app/client-v2/packages/ui/components/DataDisplay/Table.tsx
index 0af9e4688..bc7227de6 100644
--- a/app/client-v2/packages/ui/components/Table.tsx
+++ b/app/client-v2/packages/ui/components/DataDisplay/Table.tsx
@@ -9,11 +9,11 @@ import { forwardRef, memo } from "react";
 import type { Dispatch, SetStateAction } from "react";
 import React, { useState, useRef } from "react";
 
-import { changeColorOpacity } from "../lib";
-import { makeStyles } from "../lib/ThemeProvider";
-import { Checkbox } from "./Checkbox";
-import Dialog from "./Dialog";
-import { IconButton } from "./theme";
+import { changeColorOpacity } from "../../lib";
+import { makeStyles } from "../../lib/ThemeProvider";
+import { Checkbox } from "../Checkbox";
+import Dialog from "../Dialog";
+import { IconButton } from "../theme";
 
 export type TableProps = {
   className?: string;
@@ -26,6 +26,12 @@ export type TableProps = {
   openDialog?: Dispatch<SetStateAction<object | null>>;
 };
 
+/**
+ * A memoized functional component that renders a table.
+ * @param {TableProps} props - The props object containing the necessary data for rendering the table.
+ * @param {React.Ref<HTMLElement>} ref - The ref object for accessing the table element.
+ * @returns The rendered table component.
+ */
 const Table = memo(
   forwardRef<HTMLElement, TableProps>((props, ref) => {
     // Table Props
@@ -41,6 +47,9 @@ const Table = memo(
       ...rest
     } = props;
 
+    // refs
+    const dialogRef = useRef<HTMLDivElement>(null);
+
     // component state management
     const [dialogCoords, setDialogCoords] = useState<{ left: string; top: string } | null>(null);
     const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
@@ -50,9 +59,10 @@ const Table = memo(
 
     // related to styling
     const { classes, cx } = useStyles(dialogCoords ? dialogCoords : { left: false, top: false });
-    const dialogRef = useRef<HTMLDivElement>(null);
 
+    // Here we get the keys of the row so that we can render it
     type ObjectKeys = keyof (typeof rows)[0];
+    const rowKeys: ObjectKeys[] = Object.keys(rows[0]) as ObjectKeys[];
 
     function openDialogInitializer(event: React.MouseEvent<HTMLButtonElement>, indx: number) {
       setAnchorEl(event.currentTarget);
@@ -69,8 +79,6 @@ const Table = memo(
       }
     }
 
-    const rowKeys: ObjectKeys[] = Object.keys(rows[0]) as ObjectKeys[];
-
     return (
       <TableContainer className={classes.tableContainer} component={Paper}>
         <MUITable sx={{ minWidth: minWidth }} aria-label="customized table">
diff --git a/app/client-v2/packages/ui/components/Text/Text.tsx b/app/client-v2/packages/ui/components/DataDisplay/Text.tsx
similarity index 98%
rename from app/client-v2/packages/ui/components/Text/Text.tsx
rename to app/client-v2/packages/ui/components/DataDisplay/Text.tsx
index d5be606aa..5ffc1a71a 100644
--- a/app/client-v2/packages/ui/components/Text/Text.tsx
+++ b/app/client-v2/packages/ui/components/DataDisplay/Text.tsx
@@ -19,7 +19,7 @@ export function createText<TypographyVariantNameCustom extends string = never>(p
     className?: string | null;
     typo: TypographyVariantNameCustom | TypographyDesc.VariantNameBase;
     color?: "primary" | "secondary" | "disabled" | "focus" | undefined;
-    children: NonNullable<React.ReactNode>;
+    children: React.ReactNode;
     htmlComponent?: TypographyDesc.HtmlComponent;
     componentProps?: JSX.IntrinsicElements[TypographyDesc.HtmlComponent];
 
diff --git a/app/client-v2/packages/ui/components/Tooltip.tsx b/app/client-v2/packages/ui/components/DataDisplay/Tooltip.tsx
similarity index 90%
rename from app/client-v2/packages/ui/components/Tooltip.tsx
rename to app/client-v2/packages/ui/components/DataDisplay/Tooltip.tsx
index 926bba67e..274e6dfad 100644
--- a/app/client-v2/packages/ui/components/Tooltip.tsx
+++ b/app/client-v2/packages/ui/components/DataDisplay/Tooltip.tsx
@@ -5,8 +5,8 @@ import MuiTooltip from "@mui/material/Tooltip";
 import { memo } from "react";
 import type { ReactNode, ReactElement } from "react";
 
-import { makeStyles } from "../lib/ThemeProvider";
-import { Text } from "./Text/TextBase";
+import { makeStyles } from "../../lib/ThemeProvider";
+import { Text } from "../theme";
 
 export type TooltipProps = {
   title: NonNullable<ReactNode> | undefined;
diff --git a/app/client-v2/packages/ui/components/DataDisplay/TreeView.tsx b/app/client-v2/packages/ui/components/DataDisplay/TreeView.tsx
new file mode 100644
index 000000000..59e2f2400
--- /dev/null
+++ b/app/client-v2/packages/ui/components/DataDisplay/TreeView.tsx
@@ -0,0 +1,99 @@
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import { TreeView as MUITreeView, TreeItem } from "@mui/lab";
+import * as React from "react";
+import { memo } from "react";
+
+import { makeStyles } from "../../lib/ThemeProvider";
+
+export type TreeViewProps = {
+  className?: string;
+  nodes: TreeNode[];
+  getSelected?: (node: TreeNode) => void;
+};
+
+interface TreeNode {
+  id: string;
+  name: React.ReactNode;
+  count?: string;
+  children?: TreeNode[];
+}
+
+/**
+ * A memoized component that renders a tree view.
+ * @param {TreeViewProps} props - The props for the TreeView component.
+ * @returns The rendered TreeView component.
+ */
+
+export const TreeView = memo((props: TreeViewProps) => {
+  const { className, nodes, getSelected } = props;
+
+  const { classes } = useStyles();
+
+  // functions
+  function handleItemClick(node: TreeNode) {
+    if (getSelected) {
+      getSelected(node);
+    }
+  }
+
+  /**
+   * Recursively renders a list of tree nodes as React components.
+   * @param {TreeNode[]} list - The list of tree nodes to render.
+   * @returns {React.ReactNode} - The rendered React components.
+   */
+
+  function returnItems(list: TreeNode[]): React.ReactNode {
+    return (
+      <>
+        {list.map((item) => (
+          <div key={item.id}>
+            <TreeItem
+              className={classes.treeItem}
+              onClick={() => handleItemClick(item)}
+              nodeId={item.id}
+              label={item.name}
+            />
+            {item.children ? returnItems(item.children) : null}
+          </div>
+        ))}
+      </>
+    );
+  }
+
+  return (
+    <MUITreeView
+      className={className}
+      aria-label="file system navigator"
+      defaultCollapseIcon={<ExpandMoreIcon />}
+      defaultExpandIcon={<ChevronRightIcon />}
+      sx={{ maxHeight: 200, flexGrow: 1, maxWidth: 400, overflowY: "auto" }}>
+      {nodes.map((node) => (
+        <div key={node.id}>
+          <TreeItem
+            className={classes.treeItem}
+            onClick={() => handleItemClick(node)}
+            nodeId={node.id}
+            label={node.name}>
+            {node.children ? returnItems(node.children) : null}
+          </TreeItem>
+        </div>
+      ))}
+    </MUITreeView>
+  );
+});
+
+const useStyles = makeStyles({ name: { TreeView } })((theme) => ({
+  treeItem: {
+    "& .MuiTreeItem-content:hover, & .MuiTreeItem-content:focus, & .MuiTreeItem-content:active, & .MuiTreeItem-content.Mui-selected":
+      {
+        background: theme.colors.palette.light.greyVariant1,
+      },
+    "& .css-1kj19pu-MuiTreeItem-content.Mui-selected:hover, & .css-1kj19pu-MuiTreeItem-content.Mui-selected.Mui-focused ":
+      {
+        background: theme.colors.palette.light.greyVariant1,
+      },
+  },
+}));
+
+TreeView.displayName = "Stepper";
diff --git a/app/client-v2/packages/ui/components/DataDisplay/TreeViewWithCheckboxes.tsx b/app/client-v2/packages/ui/components/DataDisplay/TreeViewWithCheckboxes.tsx
new file mode 100644
index 000000000..9c6c8473a
--- /dev/null
+++ b/app/client-v2/packages/ui/components/DataDisplay/TreeViewWithCheckboxes.tsx
@@ -0,0 +1,192 @@
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import { TreeView, TreeItem } from "@mui/lab";
+import { Checkbox, FormControlLabel } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import React, { useState, useEffect } from "react";
+
+import { makeStyles } from "../../lib/ThemeProvider";
+import { Text } from "../theme";
+
+// Custom styled TreeItem to adjust the padding
+const StyledTreeItem = styled(TreeItem)(({ theme }) => ({
+  "& .MuiTreeItem-content": {
+    paddingTop: theme.spacing(0.5),
+    paddingBottom: theme.spacing(0.5),
+  },
+  "& .MuiTreeItem-content:hover, & .MuiTreeItem-content:focus, & .MuiTreeItem-content:active, & .MuiTreeItem-content.Mui-selected":
+    {
+      backgroundColor: "transparent",
+    },
+}));
+
+interface TreeNode {
+  id: string;
+  name: string;
+  count?: string;
+  children?: TreeNode[];
+}
+
+interface TreeViewProps {
+  treeData: TreeNode[];
+  checkbox?: boolean;
+  selected?: string[];
+  changeSelected?: (value: string[]) => void;
+}
+
+/**
+ * A custom TreeView component with checkboxes.
+ * @param {TreeViewProps} props - The props for the TreeView component.
+ * @returns The rendered TreeView component.
+ */
+
+export const TreeViewWithCheckboxes: React.FC<TreeViewProps> = (props) => {
+  const { treeData, checkbox = true, selected, changeSelected } = props;
+  const { classes } = useStyles();
+
+  // Component State
+  const [checked, setChecked] = useState<string[]>([]);
+
+  useEffect(() => {
+    if (selected !== undefined && !selected.length && checked.length) {
+      setChecked([]);
+    }
+  }, [selected]);
+
+  // functions
+  const handleToggle = (event: React.ChangeEvent<HTMLInputElement>, nodeId: string) => {
+    if (checked.includes(nodeId)) {
+      setChecked(checked.filter((id) => id !== nodeId));
+      if (changeSelected) {
+        changeSelected(checked.filter((id) => id !== nodeId));
+      }
+    } else {
+      setChecked([...checked, nodeId]);
+      if (changeSelected) {
+        changeSelected([...checked, nodeId]);
+      }
+    }
+  };
+
+  /**
+   * Handles the parent check for a given tree node.
+   * If the parent has children, it checks if all the children are already checked.
+   * If all children are checked, it unchecks them and updates the selected values accordingly.
+   * If not all children are checked, it checks them and updates the selected values accordingly.
+   * @param {TreeNode} parent - The parent tree node to handle the check for.
+   * @returns None
+   */
+
+  const handleParentCheck = (parent: TreeNode) => {
+    if ("children" in parent) {
+      const checkedChildrenIds = getAllChildrenIds(parent);
+      const allChecked = checkedChildrenIds.every((id) => checked.includes(id));
+
+      if (allChecked) {
+        setChecked(checked.filter((id) => !checkedChildrenIds.includes(id)));
+        if (changeSelected) {
+          changeSelected(checked.filter((id) => !checkedChildrenIds.includes(id)));
+        }
+      } else {
+        setChecked([...checked, ...checkedChildrenIds]);
+        if (changeSelected) {
+          changeSelected([...checked, ...checkedChildrenIds]);
+        }
+      }
+    }
+  };
+
+  /**
+   * Recursively retrieves the IDs of all children nodes of a given TreeNode.
+   * @param {TreeNode} node - The TreeNode object to retrieve children IDs from.
+   * @returns {string[]} An array of strings representing the IDs of all children nodes.
+   */
+
+  const getAllChildrenIds = (node: TreeNode): string[] => {
+    let childrenIds: string[] = [];
+    if (node.children) {
+      childrenIds = node.children.map((child) => child.id).flat();
+      node.children.forEach((child) => {
+        childrenIds.push(...getAllChildrenIds(child));
+      });
+    }
+    return childrenIds;
+  };
+
+  const renderTree = (nodes: TreeNode, type: "root" | "child") => (
+    <StyledTreeItem
+      key={nodes.id}
+      className={classes.label}
+      nodeId={nodes.id}
+      label={
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={checked.includes(nodes.id)}
+              indeterminate={
+                nodes.children &&
+                nodes.children.some((child) => checked.includes(child.id)) &&
+                !checked.includes(nodes.id)
+              }
+              onChange={(event) => {
+                handleToggle(event, nodes.id);
+                handleParentCheck(nodes);
+              }}
+            />
+          }
+          label={
+            <span style={{ display: "flex", gap: "4px", alignItems: "center" }}>
+              <Text typo="body 1" className={`tag ${type === "root" ? "nodeTag" : undefined}`}>
+                {nodes.name}
+              </Text>
+              {nodes.count ? (
+                <Text typo="body 3" className={classes.count}>
+                  {nodes.count}
+                </Text>
+              ) : null}
+            </span>
+          }
+        />
+      }>
+      {Array.isArray(nodes.children)
+        ? nodes.children.map((childNode, index) => renderTree(childNode, "child"))
+        : null}
+    </StyledTreeItem>
+  );
+
+  return (
+    <TreeView defaultCollapseIcon={<ExpandMoreIcon />} defaultExpandIcon={<ChevronRightIcon />}>
+      {treeData.map((data, index) => (
+        <div key={index} className={classes.treeRootNode}>
+          {renderTree(data, "root")}
+        </div>
+      ))}
+    </TreeView>
+  );
+};
+
+const useStyles = makeStyles({ name: { TreeViewWithCheckboxes } })((theme) => ({
+  label: {
+    "&:hover": {
+      background: "transparent",
+    },
+  },
+  count: {
+    fontStyle: "italic",
+    color: theme.colors.palette.dark.greyVariant4,
+  },
+  treeRootNode: {
+    marginBottom: theme.spacing(5),
+    "& .nodeTag": {
+      fontWeight: "800",
+    },
+    "& .tag": {
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+    },
+    "& .css-9se70z-MuiTypography-root": {
+      width: "90%",
+    },
+  },
+}));
diff --git a/app/client-v2/packages/ui/components/DataDisplay/index.ts b/app/client-v2/packages/ui/components/DataDisplay/index.ts
new file mode 100644
index 000000000..7724d7760
--- /dev/null
+++ b/app/client-v2/packages/ui/components/DataDisplay/index.ts
@@ -0,0 +1,12 @@
+export * from "./Chip";
+export * from "./Divider";
+export * from "./EnhancedTable";
+export * from "./FileManagementTable";
+export * from "./Icon";
+export * from "./IconButton";
+export * from "./Table";
+export * from "./Text";
+export * from "./Tooltip";
+export * from "./TreeViewWithCheckboxes";
+export * from "./FileUploadProgress";
+export * from "./TreeView";
diff --git a/app/client-v2/packages/ui/components/Dialog.tsx b/app/client-v2/packages/ui/components/Dialog.tsx
index 7d9855578..a73162b17 100644
--- a/app/client-v2/packages/ui/components/Dialog.tsx
+++ b/app/client-v2/packages/ui/components/Dialog.tsx
@@ -18,10 +18,10 @@ export type DialogProps = {
 const Dialog = memo(
   forwardRef<HTMLElement, DialogProps>((props, ref) => {
     const { className, children, title, action, width, direction, onClick, anchorEl, ...rest } = props;
+
     const { classes, cx } = useStyles({ width });
 
     return (
-      // <Card ref={ref} className={cx(classes.card, className)} width={width} noHover={true}>
       <Popover
         className={classes.popover}
         open={true}
@@ -35,14 +35,16 @@ const Dialog = memo(
           vertical: "top",
           horizontal: direction,
         }}>
-        <div className={classes.card}>
-          <div className={classes.header}>
-            {/* header */}
-            {title ? <Text typo="navigation label">{title}</Text> : null}
-            <span onClick={onClick}>
-              <IconButton className={classes.xButton} type="submit" size="small" iconId="close" />
-            </span>
-          </div>
+        <div className={cx(classes.card, className)}>
+          {title ? (
+            <div className={classes.header}>
+              {/* header */}
+              <Text typo="navigation label">{title}</Text>
+              <span onClick={onClick}>
+                <IconButton className={classes.xButton} type="submit" size="small" iconId="close" />
+              </span>
+            </div>
+          ) : null}
           <div>
             {/* header */}
             {children}
@@ -56,7 +58,6 @@ const Dialog = memo(
           ) : null}
         </div>
       </Popover>
-      // </Card>
     );
   })
 );
@@ -67,7 +68,7 @@ const useStyles = makeStyles<{ width: string }>({
   card: {
     backgroundColor: theme.colors.palette[theme.isDarkModeEnabled ? "dark" : "light"].light,
     maxHeight: "500px",
-    padding: `${theme.spacing(3)}px ${theme.spacing(5)}px`,
+    padding: `16px 32px`,
   },
   header: {
     display: "flex",
diff --git a/app/client-v2/packages/ui/components/DropFieldFileInput.tsx b/app/client-v2/packages/ui/components/DropFieldFileInput.tsx
new file mode 100644
index 000000000..6f558dc60
--- /dev/null
+++ b/app/client-v2/packages/ui/components/DropFieldFileInput.tsx
@@ -0,0 +1,142 @@
+import { Box } from "@mui/material";
+import React, { useState, useRef } from "react";
+import type { DragEvent, ChangeEvent } from "react";
+
+import { makeStyles } from "../lib/ThemeProvider";
+import { FileUploadProgress } from "./DataDisplay";
+import { Text } from "./theme";
+import { Icon } from "./theme";
+
+interface DropFieldProps {
+  onContentAdded: (value: FileList) => void;
+  onUploadFinish: (value: boolean) => void;
+}
+
+const DropFieldFileInput = (props: DropFieldProps) => {
+  const { onContentAdded, onUploadFinish } = props;
+
+  const { classes } = useStyles();
+
+  // Refs
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  // Component States
+  const [isDragOver, setIsDragOver] = useState(false);
+  const [file, setFile] = useState<FileList>();
+
+  // Functions
+  const handleDragOver = (event: DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    setIsDragOver(true);
+  };
+
+  const handleDragLeave = () => {
+    setIsDragOver(false);
+  };
+
+  const handleDrop = (event: DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    setIsDragOver(false);
+    const files = event.dataTransfer?.files;
+    if (files) {
+      console.log("files");
+      // Process the dropped files here
+      setFile(files);
+      onContentAdded(files);
+    }
+  };
+
+  const handleFileInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const files = event.target.files;
+    if (files) {
+      // Process the selected files here
+      setFile(files);
+      onContentAdded(files);
+    }
+  };
+
+  const handleDropZoneClick = () => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  };
+
+  return (
+    <>
+      {file ? (
+        <FileUploadProgress onFinished={onUploadFinish} />
+      ) : (
+        <Box
+          className={classes.dropZone}
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          onDrop={handleDrop}
+          onClick={handleDropZoneClick}>
+          <Box className={classes.iconWrapper}>
+            <Icon
+              iconId="file"
+              wrapped="circle"
+              bgVariant="focus"
+              bgOpacity={0.12}
+              className={classes.icon}
+            />
+          </Box>
+          <Text typo="body 1" className={classes.textMessage}>
+            <Text typo="body 1" color="focus">
+              Click to upload
+            </Text>{" "}
+            or drag and drop
+          </Text>
+          <Box sx={{ display: "flex", justifyContent: "center", gap: "8px" }}>
+            <Icon iconId="info" iconVariant="gray" size="small" />
+            <Text typo="label 2" color="secondary" className={classes.supportedFormat}>
+              Supported formats: geojson, shapefile, geopackage, geobuf, csv, xlsx, kml, mvt, wfs, binary,
+              wms, xyz, wmts, mvt, csv, xlsx, json
+            </Text>
+          </Box>
+          <input
+            type="file"
+            ref={fileInputRef}
+            className={classes.fileInput}
+            onChange={handleFileInputChange}
+            accept=".geojson,.shp,.gpkg,.geobuf,.csv,.xlsx,.kml,.mvt,.wfs,.binary,.wms,.xyz,.wmts,.json"
+          />
+        </Box>
+      )}
+    </>
+  );
+};
+
+const useStyles = makeStyles({ name: { DropFieldFileInput } })((theme) => ({
+  dropZone: {
+    border: `1px dashed ${theme.colors.palette.dark.main}30 `,
+    borderRadius: 4,
+    padding: theme.spacing(4),
+    textAlign: "center",
+    cursor: "pointer",
+  },
+  fileInput: {
+    display: "none",
+  },
+  iconWrapper: {
+    display: "flex",
+    justifyContent: "center",
+  },
+  icon: {
+    margin: "8px",
+  },
+  textMessage: {
+    display: "flex",
+    justifyContent: "center",
+    gap: theme.spacing(1),
+    margin: `${theme.spacing(2)}px 0px`,
+  },
+  supportedFormat: {
+    fontSize: "13px",
+    lineHeight: "14.4px",
+    textAlign: "left",
+    width: "248px",
+  },
+}));
+
+export default DropFieldFileInput;
diff --git a/app/client-v2/packages/ui/components/Icon/IconBase.ts b/app/client-v2/packages/ui/components/Icon/IconBase.ts
deleted file mode 100644
index c28087e10..000000000
--- a/app/client-v2/packages/ui/components/Icon/IconBase.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import DescriptionIcon from "@mui/icons-material/Description";
-import HelpIcon from "@mui/icons-material/Help";
-import HomeIcon from "@mui/icons-material/Home";
-
-import { createIcon } from "./Icon";
-
-export const { Icon } = createIcon({
-  help: HelpIcon,
-  home: HomeIcon,
-  file: DescriptionIcon,
-});
diff --git a/app/client-v2/packages/ui/components/Icon/index.ts b/app/client-v2/packages/ui/components/Icon/index.ts
deleted file mode 100644
index 62cbf816a..000000000
--- a/app/client-v2/packages/ui/components/Icon/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./Icon";
-export * from "./IconBase";
diff --git a/app/client-v2/packages/ui/components/Inputs/Autocomplete.tsx b/app/client-v2/packages/ui/components/Inputs/Autocomplete.tsx
new file mode 100644
index 000000000..5aedb79cd
--- /dev/null
+++ b/app/client-v2/packages/ui/components/Inputs/Autocomplete.tsx
@@ -0,0 +1,100 @@
+import CheckBoxIcon from "@mui/icons-material/CheckBox";
+import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
+import Autocomplete from "@mui/material/Autocomplete";
+import TextField from "@mui/material/TextField";
+import * as React from "react";
+
+import { makeStyles } from "../../lib/ThemeProvider";
+import { Checkbox } from "../Checkbox";
+
+type Option = {
+  label: string;
+  value: string;
+} & {
+  [key: string]: string | number | boolean;
+};
+
+interface CustomMultiAutocompleteProps {
+  options: Option[];
+}
+
+const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
+const checkedIcon = <CheckBoxIcon fontSize="small" />;
+
+interface AutoComplete {
+  className?: string;
+  label?: string;
+  size: "small" | "medium";
+  options?: { label: React.ReactNode; value: string }[];
+  multiple?: boolean;
+  setSelected?: (value: Option[]) => void;
+  selectedOptions?: Option[];
+}
+
+export function AutoComplete(props: AutoComplete) {
+  const {
+    className,
+    label = "",
+    size = "small",
+    options = [],
+    multiple = false,
+    setSelected,
+    selectedOptions,
+  } = props;
+
+  const inputRef = React.useRef<HTMLInputElement | null>(null);
+
+  const handleChange = (event: React.SyntheticEvent, value: Option[]) => {
+    if (setSelected) {
+      setSelected([
+        ...value.map((val) => {
+          const newVal = val;
+          newVal.selected = true;
+          return newVal;
+        }),
+      ]);
+    }
+  };
+
+  // Create a function to get the selected options based on the selectedOptionValues
+  const getSelectedOptions = () =>
+    options.filter(
+      (option) => selectedOptions && selectedOptions.some((vendor) => vendor.label === option.label)
+    );
+
+  return (
+    <>
+      <Autocomplete
+        className={className}
+        multiple={multiple}
+        options={options}
+        disableCloseOnSelect
+        size={size}
+        renderOption={(props, option, { selected }) => (
+          <li {...props}>
+            <Checkbox checked={selected} icon={icon} checkedIcon={checkedIcon} />
+            {option.label}
+          </li>
+        )}
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            variant="outlined"
+            label={label}
+            placeholder="Select Options"
+            inputRef={inputRef}
+          />
+        )}
+        onChange={handleChange}
+        value={getSelectedOptions()}
+        renderTags={() => null}
+      />
+    </>
+  );
+}
+
+const useStyles = makeStyles({ name: { AutoComplete } })((theme) => ({
+  checkbox: {
+    marginRight: 8,
+  },
+}));
diff --git a/app/client-v2/packages/ui/components/Inputs/DatePicker.tsx b/app/client-v2/packages/ui/components/Inputs/DatePicker.tsx
new file mode 100644
index 000000000..b6315d5c5
--- /dev/null
+++ b/app/client-v2/packages/ui/components/Inputs/DatePicker.tsx
@@ -0,0 +1,44 @@
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import { DatePicker as MUIDatePicker } from "@mui/x-date-pickers/DatePicker";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { DemoContainer } from "@mui/x-date-pickers/internals/demo";
+import dayjs from "dayjs";
+import type { Dayjs } from "dayjs";
+
+import { makeStyles } from "../../lib/ThemeProvider";
+
+interface DatePickerProps {
+  onChange: (value: Dayjs | null) => void;
+  value: Dayjs | null;
+  label?: string;
+  ClassName?: string;
+  size?: "small" | "medium";
+}
+
+/**
+ * A custom DatePicker component that renders a Material-UI DatePicker with additional features.
+ * @param {DatePickerProps} props - The props for the DatePicker component.
+ * @returns The rendered DatePicker component.
+ */
+
+export function DatePicker(props: DatePickerProps) {
+  const { onChange, value = dayjs("2022-04-17"), label, ClassName, size = "medium" } = props;
+
+  const { classes, cx } = useStyles();
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DemoContainer components={["MUIDatePicker"]}>
+        <MUIDatePicker
+          slotProps={{ textField: { size: size } }}
+          className={ClassName}
+          label={label}
+          value={value}
+          onChange={(newValue) => onChange(newValue)}
+        />
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+}
+
+const useStyles = makeStyles({ name: { DatePicker } })((theme) => ({}));
diff --git a/app/client-v2/packages/ui/components/Inputs/RadioInput.tsx b/app/client-v2/packages/ui/components/Inputs/RadioInput.tsx
new file mode 100644
index 000000000..03e58bbba
--- /dev/null
+++ b/app/client-v2/packages/ui/components/Inputs/RadioInput.tsx
@@ -0,0 +1,36 @@
+import Radio from "@mui/material/Radio";
+import * as React from "react";
+
+interface RadioProps {
+  value: string;
+  onCheck?: (value: string) => void;
+  selectedValue?: string;
+}
+
+/**
+ * A radio input component that allows users to select a single option from a group.
+ * @param {RadioProps} props - The props for the radio input component.
+ * @returns The rendered radio input component.
+ */
+
+export function RadioInput(props: RadioProps) {
+  const { value, onCheck, selectedValue } = props;
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (onCheck) {
+      onCheck(event.target.value);
+    }
+  };
+
+  return (
+    <div>
+      <Radio
+        checked={selectedValue === value}
+        onChange={handleChange}
+        value={value}
+        name="radio-buttons"
+        inputProps={{ "aria-label": value }}
+      />
+    </div>
+  );
+}
diff --git a/app/client-v2/packages/ui/components/SelectField.tsx b/app/client-v2/packages/ui/components/Inputs/SelectField.tsx
similarity index 58%
rename from app/client-v2/packages/ui/components/SelectField.tsx
rename to app/client-v2/packages/ui/components/Inputs/SelectField.tsx
index 2fae644a4..5ee7c4d98 100644
--- a/app/client-v2/packages/ui/components/SelectField.tsx
+++ b/app/client-v2/packages/ui/components/Inputs/SelectField.tsx
@@ -10,58 +10,79 @@ import * as React from "react";
 import type { Equals } from "tsafe";
 import { assert } from "tsafe/assert";
 
-import { makeStyles } from "../lib/ThemeProvider";
+import { makeStyles } from "../../lib/ThemeProvider";
+import { Checkbox } from "../Checkbox";
 
 export type SelectFieldProps = {
   className?: string;
-  updateChange?: (value: string) => void;
-  options: { name: string; value: string }[];
-  defaultValue: string;
+  updateChange?: (value: string | string[]) => void;
+  options: { name: React.ReactNode; value: string }[];
+  defaultValue?: string;
   label: string;
   size: "small" | "medium";
+  multiple?: boolean;
+  checkbox?: boolean;
 };
 
+/**
+ * A memoized functional component that renders a select field.
+ * @param {SelectFieldProps} props - The props for the select field.
+ * @param {React.Ref<any>} ref - The ref for the select field.
+ * @returns The rendered select field component.
+ */
+
 export const SelectField = memo(
   forwardRef<any, SelectFieldProps>((props, ref) => {
     const {
       className,
       updateChange,
       options,
-      defaultValue,
       label,
       size = "medium",
+      multiple = false,
+      checkbox = false,
+      defaultValue = "",
       //For the forwarding, rest should be empty (typewise)
       ...rest
     } = props;
-    const [values, setValues] = React.useState("");
+    const { classes, cx } = useStyles();
+
+    // Component State
+    const [values, setValues] = React.useState<string | string[]>(multiple ? [] : "");
 
     //For the forwarding, rest should be empty (typewise),
     // eslint-disable-next-line @typescript-eslint/ban-types
     assert<Equals<typeof rest, {}>>();
 
-    const { classes, cx } = useStyles();
-
+    // functions
     const handleChange = (event: SelectChangeEvent) => {
-      if (updateChange) {
+      if (updateChange && !multiple) {
         updateChange(event.target.value as string);
+      } else if (updateChange && multiple) {
+        const value = event.target.value as string;
+        const valueArr = value.split(", ");
+        updateChange(valueArr);
       }
       setValues(event.target.value as string);
     };
 
     return (
       <>
-        <Box sx={{ minWidth: 120 }}>
-          <FormControl fullWidth>
+        <Box sx={{ minWidth: 120 }} className={className}>
+          <FormControl fullWidth size={size}>
             <InputLabel id="demo-simple-select-label">{label}</InputLabel>
             <Select
               labelId="demo-simple-select-label"
               id="demo-simple-select"
               value={values ? values : defaultValue}
               label={label}
-              size={size}
+              multiple={multiple}
+              // MenuProps={multiple ? MenuProps : undefined}
+              renderValue={multiple ? (selected) => [selected].flat().join(", ") : (value) => value}
               onChange={handleChange}>
               {options.map((option) => (
                 <MenuItem value={option.value} key={option.value}>
+                  {checkbox ? <Checkbox checked={values.indexOf(option.value) > -1} /> : null}
                   {option.name}
                 </MenuItem>
               ))}
diff --git a/app/client-v2/packages/ui/components/Inputs/Switch.tsx b/app/client-v2/packages/ui/components/Inputs/Switch.tsx
new file mode 100644
index 000000000..5f9eabd02
--- /dev/null
+++ b/app/client-v2/packages/ui/components/Inputs/Switch.tsx
@@ -0,0 +1,32 @@
+import { Switch as MUISwitch } from "@mui/material";
+import * as React from "react";
+
+interface SwitchProps {
+  defaultChecked?: boolean;
+  elementName?: string;
+  checked: boolean;
+  onChecked: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean, elementName?: string) => void;
+  disabled?: boolean;
+}
+
+/**
+ * A custom switch component.
+ * @param {SwitchProps} props - The props for the switch component.
+ * @returns The switch component.
+ */
+
+export const Switch = (props: SwitchProps) => {
+  const { defaultChecked = false, checked, onChecked, elementName, disabled = false } = props;
+
+  return (
+    <MUISwitch
+      checked={checked}
+      disabled={disabled}
+      onChange={(event: React.ChangeEvent<HTMLInputElement>, checked: boolean) =>
+        onChecked(event, checked, elementName ? elementName : "")
+      }
+      aria-label="Switch demo"
+      defaultChecked={defaultChecked}
+    />
+  );
+};
diff --git a/app/client-v2/packages/ui/components/Text/TextField.tsx b/app/client-v2/packages/ui/components/Inputs/TextField.tsx
similarity index 93%
rename from app/client-v2/packages/ui/components/Text/TextField.tsx
rename to app/client-v2/packages/ui/components/Inputs/TextField.tsx
index a08ffb24f..6b45679ed 100644
--- a/app/client-v2/packages/ui/components/Text/TextField.tsx
+++ b/app/client-v2/packages/ui/components/Inputs/TextField.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 // Copyright (c) 2020 GitHub user u/garronej
 
 /* eslint-disable react-hooks/exhaustive-deps */
@@ -25,12 +23,10 @@ import { assert } from "tsafe/assert";
 import { makeStyles } from "../../lib/ThemeProvider";
 import { useNonPostableEvtLike } from "../../tools/useNonPostableEvtLike";
 import { CircularProgress } from "../CircularProgress";
-import { createIcon } from "../Icon/Icon";
-import { createIconButton } from "../Icon/IconButton";
-import { Tooltip } from "../Tooltip";
+import { createIcon, createIconButton, Tooltip } from "../DataDisplay";
 import type { IconId } from "../theme";
 import { Icon as NormalIcon } from "../theme";
-import { Text } from "./TextBase";
+import { Text } from "../theme";
 
 export type AttributeOption = string | { value: string; label: string };
 export type AttributeOptions = AttributeOption[];
@@ -42,6 +38,9 @@ export type TextFieldProps = {
   /** Default text */
   type?: "text" | "password" | "email";
   size?: "small" | "medium";
+  InputPropsClass?: {
+    className?: string;
+  };
   /** Will overwrite value when updated */
   defaultValue?: string;
   inputProps_ref?: RefObject<HTMLInputElement>;
@@ -89,6 +88,7 @@ export type TextFieldProps = {
   isCircularProgressShown?: boolean;
   placeholder?: string;
   filled?: boolean;
+  hiddenLabel?: boolean;
   selectAllTextOnFocus?: boolean;
   /** Default false */
   doRenderAsTextArea?: boolean;
@@ -178,6 +178,7 @@ export const TextField = memo((props: TextFieldProps) => {
     iconId,
     placeholder,
     filled = false,
+    hiddenLabel = false,
     type = "text",
     size = "medium",
     isCircularProgressShown = false,
@@ -186,6 +187,7 @@ export const TextField = memo((props: TextFieldProps) => {
     name,
     selectAllTextOnFocus,
     isSubmitAllowed = true,
+    InputPropsClass,
     inputProps_ref,
     "inputProps_aria-label": inputProps_ariaLabel,
     inputProps_tabIndex,
@@ -343,6 +345,7 @@ export const TextField = memo((props: TextFieldProps) => {
 
   const inputProps = useMemo(
     () => ({
+      className: InputPropsClass?.className,
       ref: inputProps_ref,
       "aria-label": inputProps_ariaLabel,
       tabIndex: inputProps_tabIndex,
@@ -399,10 +402,13 @@ export const TextField = memo((props: TextFieldProps) => {
   return (
     <MuiTextField
       className={cx(classes.muiTextField, className)}
-      sx={{ borderBottom: "none" }}
+      sx={{
+        borderBottom: "none",
+      }}
       multiline={doRenderAsTextArea}
       rows={!doRenderAsTextArea ? undefined : rows}
       ref={ref}
+      hiddenLabel={hiddenLabel}
       variant={filled ? "filled" : "outlined"}
       type={type !== "password" ? type : isPasswordShown ? "text" : "password"}
       value={value}
@@ -476,31 +482,15 @@ const useStyles = makeStyles<{
     "& .MuiInput-underline:after": {
       borderBottomWidth: filled ? 0 : 1,
     },
-    "& .css-1oemyht-MuiInputBase-root-MuiFilledInput-root:before": {
-      border: "none",
-    },
-    "& .css-1wmvkxj-MuiInputBase-root-MuiFilledInput-root:before": {
+    "& .mui-1ab69dk-MuiInputBase-root-MuiFilledInput-root:before": {
       border: "none",
     },
-    "& .css-1oemyht-MuiInputBase-root-MuiFilledInput-root:after": {
+    "& .mui-1ab69dk-MuiInputBase-root-MuiFilledInput-root:hover:not(.Mui-disabled, .Mui-error):before": {
       border: "none",
     },
-    "& .css-1wmvkxj-MuiInputBase-root-MuiFilledInput-root:after": {
+    "& .mui-1ab69dk-MuiInputBase-root-MuiFilledInput-root:after": {
       border: "none",
     },
-    "& .css-1leu81r-MuiInputBase-input-MuiFilledInput-input": {
-      paddingTop: "6px",
-      paddingBottom: "6px",
-    },
-    "& .css-p1g58z-MuiInputBase-input-MuiFilledInput-input": {
-      paddingTop: "6px",
-      paddingBottom: "6px",
-    },
-    ".css-1ohy0c1-MuiInputAdornment-root.MuiInputAdornment-positionStart.css-1ohy0c1-MuiInputAdornment-root:not(.MuiInputAdornment-hiddenLabel)":
-      {
-        margin: "0",
-        marginRight: theme.spacing(2),
-      },
   },
   helperText: {
     color: hasError
diff --git a/app/client-v2/packages/ui/components/Inputs/index.ts b/app/client-v2/packages/ui/components/Inputs/index.ts
new file mode 100644
index 000000000..d9d50b41b
--- /dev/null
+++ b/app/client-v2/packages/ui/components/Inputs/index.ts
@@ -0,0 +1,6 @@
+export * from "./SelectField";
+export * from "./TextField";
+export * from "./Switch";
+export * from "./DatePicker";
+export * from "./RadioInput";
+export * from "./Autocomplete";
diff --git a/app/client-v2/packages/ui/components/LinearProgress.tsx b/app/client-v2/packages/ui/components/LinearProgress.tsx
new file mode 100644
index 000000000..ada1ad9c0
--- /dev/null
+++ b/app/client-v2/packages/ui/components/LinearProgress.tsx
@@ -0,0 +1,41 @@
+import { LinearProgress as MUILinearProgress } from "@mui/material";
+import Box from "@mui/material/Box";
+import * as React from "react";
+
+interface LinearProgress {
+  finished: (value: boolean) => void;
+  defaultValue?: number;
+}
+
+export default function LinearProgress(props: LinearProgress) {
+  const { finished, defaultValue } = props;
+
+  // Component States
+  const [progress, setProgress] = React.useState<number>(0);
+
+  React.useEffect(() => {
+    if (!defaultValue) {
+      const timer = setInterval(() => {
+        setProgress((oldProgress) => {
+          const diff = Math.random() * 10;
+          if (oldProgress === 100) {
+            finished(true);
+          }
+          return Math.min(oldProgress + diff, 100);
+        });
+      }, 500);
+
+      return () => {
+        clearInterval(timer);
+      };
+    } else {
+      setProgress(defaultValue);
+    }
+  }, []);
+
+  return (
+    <Box sx={{ width: "100%" }}>
+      <MUILinearProgress variant="determinate" value={progress} />
+    </Box>
+  );
+}
diff --git a/app/client-v2/packages/ui/components/Lists/ChipList.tsx b/app/client-v2/packages/ui/components/Lists/ChipList.tsx
index 6faa0bc18..7b7d7355e 100644
--- a/app/client-v2/packages/ui/components/Lists/ChipList.tsx
+++ b/app/client-v2/packages/ui/components/Lists/ChipList.tsx
@@ -4,16 +4,26 @@ import { Chip } from "@mui/material";
 import { forwardRef, memo, useEffect, useRef } from "react";
 
 import { makeStyles } from "../../lib/ThemeProvider";
-import { Text } from "../Text/TextBase";
+import { Text } from "../theme";
 
 export type ChipListProps = {
   className?: string;
   chips: string[];
 };
 
+/**
+ * A memoized functional component that renders a list of chips.
+ * @param {ChipListProps} props - The component props.
+ * @param {React.Ref<any>} ref - The ref object for the component.
+ * @returns The rendered component.
+ */
 export const ChipList = memo(
   forwardRef<any, ChipListProps>((props, ref) => {
     const { className, chips } = props;
+
+    const { classes, cx } = useStyles();
+
+    // refs
     const containerRef = useRef<HTMLDivElement | null>(null);
 
     useEffect(() => {
@@ -46,8 +56,6 @@ export const ChipList = memo(
       };
     }, []);
 
-    const { classes, cx } = useStyles();
-
     return (
       <div className={className} ref={containerRef} style={{ overflowX: "auto" }}>
         <div style={{ display: "flex" }} className={classes.chips}>
diff --git a/app/client-v2/packages/ui/components/Modal.tsx b/app/client-v2/packages/ui/components/Modal.tsx
index 67ec25cea..d0b8c9811 100644
--- a/app/client-v2/packages/ui/components/Modal.tsx
+++ b/app/client-v2/packages/ui/components/Modal.tsx
@@ -17,8 +17,10 @@ export type ModalProps = {
 const Modal = memo(
   forwardRef<HTMLElement, ModalProps>((props, ref) => {
     const { className, width, children, open, changeOpen, header, action, ...rest } = props;
+
     const { classes, cx } = useStyles({ width });
-    // const handleOpen = () => setOpen(true);
+
+    // Functions
     const handleClose = () => changeOpen(false);
 
     return (
@@ -42,6 +44,7 @@ const useStyles = makeStyles<{ width: string }>({
 })((theme, { width }) => ({
   box: {
     position: "absolute",
+    borderRadius: theme.spacing(1),
     top: "50%",
     left: "50%",
     transform: "translate(-50%, -50%)",
diff --git a/app/client-v2/packages/ui/components/DashboardSidebar.tsx b/app/client-v2/packages/ui/components/Navigation/DashboardSidebar.tsx
similarity index 100%
rename from app/client-v2/packages/ui/components/DashboardSidebar.tsx
rename to app/client-v2/packages/ui/components/Navigation/DashboardSidebar.tsx
diff --git a/app/client-v2/packages/ui/components/Footer.tsx b/app/client-v2/packages/ui/components/Navigation/Footer.tsx
similarity index 92%
rename from app/client-v2/packages/ui/components/Footer.tsx
rename to app/client-v2/packages/ui/components/Navigation/Footer.tsx
index 7a2cb6121..585f7a846 100644
--- a/app/client-v2/packages/ui/components/Footer.tsx
+++ b/app/client-v2/packages/ui/components/Navigation/Footer.tsx
@@ -2,26 +2,25 @@
 
 import React, { forwardRef, memo } from "react";
 
-import { makeStyles } from "../lib/ThemeProvider";
-import P4BLogo from "./P4BLogo";
-import { Text, Icon } from "./theme";
-import type { IconId } from "./theme";
+import { makeStyles } from "../../lib/ThemeProvider";
+import P4BLogo from "../P4BLogo";
+import { Text, Icon } from "../theme";
+import type { IconId } from "../theme";
 
 export type FooterProps = {
   className?: string;
-  children?: React.ReactNode;
   links: { header: string; links: { name: string; underline?: boolean; icon?: IconId }[] }[];
   text: string;
 };
 
 const Footer = memo(
   forwardRef<any, FooterProps>((props, ref) => {
-    const { className, children, links, text } = props;
+    const { className, links, text } = props;
 
     const { classes, cx } = useStyles();
 
     return (
-      <div className={classes.root}>
+      <div className={cx(classes.root, className)}>
         <div className={classes.info}>
           <P4BLogo width={100} />
           <Text typo="caption" className={classes.footerText}>
diff --git a/app/client-v2/packages/ui/components/Tabs.tsx b/app/client-v2/packages/ui/components/Navigation/Tabs.tsx
similarity index 90%
rename from app/client-v2/packages/ui/components/Tabs.tsx
rename to app/client-v2/packages/ui/components/Navigation/Tabs.tsx
index ef46fc085..d7ea29be3 100644
--- a/app/client-v2/packages/ui/components/Tabs.tsx
+++ b/app/client-v2/packages/ui/components/Navigation/Tabs.tsx
@@ -6,7 +6,7 @@ import React, { useState } from "react";
 import type { Equals } from "tsafe";
 import { assert } from "tsafe/assert";
 
-import { makeStyles } from "./../lib/ThemeProvider";
+import { makeStyles } from "../../lib/ThemeProvider";
 
 export type SlideShowProps = {
   className?: string;
@@ -25,20 +25,22 @@ export const Tabs = memo(
       ...rest
     } = props;
 
+    const { classes } = useStyles();
+
     //For the forwarding, rest should be empty (typewise),
     // eslint-disable-next-line @typescript-eslint/ban-types
     assert<Equals<typeof rest, {}>>();
 
+    // Component States
     const [value, setValue] = useState("1");
 
+    // functions
     const handleChange = (event: React.SyntheticEvent, newValue: string) => {
       setValue(newValue);
     };
 
-    const { classes } = useStyles();
-
     return (
-      <Box sx={{ width: "100%", typography: "body1" }} className={className}>
+      <Box sx={{ width: "100%", typography: "14px" }} className={className}>
         <TabContext initialSelectedIndex="1" value={value}>
           <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
             <TabList onChange={handleChange} aria-label="lab API tabs example">
@@ -61,6 +63,7 @@ export const Tabs = memo(
 const useStyles = makeStyles({ name: { Tabs } })((theme) => ({
   tab: {
     padding: theme.spacing(2),
+    fontSize: "14px",
   },
   tabPandel: {
     padding: "0",
diff --git a/app/client-v2/packages/ui/components/Navigation/ToggleTabs.tsx b/app/client-v2/packages/ui/components/Navigation/ToggleTabs.tsx
new file mode 100644
index 000000000..865243050
--- /dev/null
+++ b/app/client-v2/packages/ui/components/Navigation/ToggleTabs.tsx
@@ -0,0 +1,64 @@
+// Copyright (c) 2020 GitHub user u/garronej
+import ToggleButton from "@mui/material/ToggleButton";
+import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
+import { forwardRef, memo } from "react";
+import React, { useState } from "react";
+import type { Equals } from "tsafe";
+import { assert } from "tsafe/assert";
+
+import { makeStyles } from "../../lib/ThemeProvider";
+import { Icon } from "../theme";
+import type { IconId } from "../theme";
+
+export type ToggleTabsProps = {
+  className?: string;
+  onResultChange: (value: string | null) => void;
+  defaultValue: string | null;
+  tabs: {
+    iconId: IconId;
+    value: string;
+  }[];
+};
+
+export const ToggleTabs = memo(
+  forwardRef<HTMLElement, ToggleTabsProps>((props, ref) => {
+    const {
+      className,
+      tabs,
+      defaultValue,
+      onResultChange,
+      //For the forwarding, rest should be empty (typewise)
+      ...rest
+    } = props;
+
+    const { classes } = useStyles();
+
+    //For the forwarding, rest should be empty (typewise),
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    assert<Equals<typeof rest, {}>>();
+
+    // Component States
+    const [value, setValue] = useState("1");
+
+    // Functions
+    const handleChange = (event: React.SyntheticEvent, newValue: string) => {
+      onResultChange(newValue);
+    };
+
+    return (
+      <ToggleButtonGroup value={defaultValue ? defaultValue : ""} exclusive onChange={handleChange}>
+        {tabs.map((tab, index) => (
+          <ToggleButton key={index} value={tab.value} aria-label="list">
+            <Icon iconVariant="gray" iconId={tab.iconId} />
+          </ToggleButton>
+        ))}
+      </ToggleButtonGroup>
+    );
+  })
+);
+
+const useStyles = makeStyles({ name: { ToggleTabs } })((theme) => ({
+  root: {
+    padding: theme.spacing(2),
+  },
+}));
diff --git a/app/client-v2/packages/ui/components/Toolbar.tsx b/app/client-v2/packages/ui/components/Navigation/Toolbar.tsx
similarity index 77%
rename from app/client-v2/packages/ui/components/Toolbar.tsx
rename to app/client-v2/packages/ui/components/Navigation/Toolbar.tsx
index 1401727c1..7b29d39ad 100644
--- a/app/client-v2/packages/ui/components/Toolbar.tsx
+++ b/app/client-v2/packages/ui/components/Navigation/Toolbar.tsx
@@ -1,8 +1,8 @@
 import { Link, Stack } from "@mui/material";
 
-import { GOATLogoGreenSvg } from "../assets/svg/GOATLogoGreen";
-import { makeStyles } from "../lib/ThemeProvider";
-import { TextField } from "./Text/TextField";
+import { GOATLogoGreenSvg } from "../../assets/svg/GOATLogoGreen";
+import { makeStyles } from "../../lib/ThemeProvider";
+import { TextField } from "../Inputs/TextField";
 
 export type ToolbarProps = {
   items: { link: string; icon: () => JSX.Element }[];
@@ -16,14 +16,16 @@ export function Toolbar(props: ToolbarProps) {
   return (
     <Stack className={cx(classes.root)} direction="row" justifyContent="space-between" alignItems="center">
       <GOATLogoGreenSvg className={classes.logoSize} />
-      <TextField
-        size="small"
-        iconId="search"
-        placeholder="Search..."
-        className={classes.searchInput}
-        filled={true}
-        sx={{ paddingY: "6px" }}
-      />
+      <div>
+        <TextField
+          size="small"
+          iconId="search"
+          hiddenLabel={true}
+          placeholder="Search..."
+          className={classes.searchInput}
+          filled={true}
+        />
+      </div>
       <Stack direction="row" alignItems="center" sx={{ paddingY: "6px" }}>
         {items?.map(({ link, icon }, index) => (
           <Link
@@ -42,7 +44,7 @@ const useStyles = (props: ToolbarProps) =>
   makeStyles({ name: { Toolbar } })((theme) => ({
     root: {
       position: "fixed",
-      backgroundColor: theme.muiTheme.palette.background.paper,
+      backgroundColor: theme.colors.useCases.surfaces.background,
       height: props.height,
       top: 0,
       left: 0,
@@ -56,6 +58,7 @@ const useStyles = (props: ToolbarProps) =>
       height: "36px",
     },
     searchInput: {
+      // paddingY: "6px",
       width: "440px",
       border: "none",
     },
diff --git a/app/client-v2/packages/ui/components/Navigation/index.ts b/app/client-v2/packages/ui/components/Navigation/index.ts
new file mode 100644
index 000000000..bffdb5c36
--- /dev/null
+++ b/app/client-v2/packages/ui/components/Navigation/index.ts
@@ -0,0 +1,5 @@
+export * from "./DashboardSidebar";
+export * from "./Footer";
+export * from "./Tabs";
+export * from "./ToggleTabs";
+export * from "./Toolbar";
diff --git a/app/client-v2/packages/ui/components/P4BLogo.tsx b/app/client-v2/packages/ui/components/P4BLogo.tsx
index 126fac21d..3aad42b71 100644
--- a/app/client-v2/packages/ui/components/P4BLogo.tsx
+++ b/app/client-v2/packages/ui/components/P4BLogo.tsx
@@ -1,5 +1,4 @@
 import { Box } from "@mui/material";
-import React from "react";
 
 interface P4BLogoProps {
   absolute?: boolean;
diff --git a/app/client-v2/packages/ui/components/SlideShow.tsx b/app/client-v2/packages/ui/components/SlideShow.tsx
index f6e884da0..56927871b 100644
--- a/app/client-v2/packages/ui/components/SlideShow.tsx
+++ b/app/client-v2/packages/ui/components/SlideShow.tsx
@@ -42,24 +42,28 @@ export const SlideShow = memo(
     // eslint-disable-next-line @typescript-eslint/ban-types
     assert<Equals<typeof rest, {}>>();
 
+    // Styling related
     const { classes, cx } = useStyles();
-
     const theme = useTheme();
-    const [activeStep, setActiveStep] = React.useState(0);
-    const maxSteps = images.length;
 
-    const handleNext = () => {
-      setActiveStep((prevActiveStep) => prevActiveStep + 1);
-    };
+    // Component States
+    const [activeStep, setActiveStep] = React.useState(0);
 
-    const handleBack = () => {
-      setActiveStep((prevActiveStep) => prevActiveStep - 1);
-    };
+    const maxSteps = images.length;
 
+    // Functions
     const handleStepChange = (step: number) => {
       setActiveStep(step);
     };
 
+    // const handleNext = () => {
+    //   setActiveStep((prevActiveStep) => prevActiveStep + 1);
+    // };
+
+    // const handleBack = () => {
+    //   setActiveStep((prevActiveStep) => prevActiveStep - 1);
+    // };
+
     return (
       <Box sx={{ width: width, height: height, flexGrow: 1, position: "relative", marginBottom: "57px" }}>
         <AutoPlaySwipeableViews
diff --git a/app/client-v2/packages/ui/components/Stepper.tsx b/app/client-v2/packages/ui/components/Stepper.tsx
new file mode 100644
index 000000000..e382c476e
--- /dev/null
+++ b/app/client-v2/packages/ui/components/Stepper.tsx
@@ -0,0 +1,157 @@
+import { Stepper as MUIStepper } from "@mui/material";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Step from "@mui/material/Step";
+import StepButton from "@mui/material/StepButton";
+import Typography from "@mui/material/Typography";
+import { useImperativeHandle } from "react";
+import * as React from "react";
+import { forwardRef } from "react";
+
+import { makeStyles } from "../lib/ThemeProvider";
+
+type Steps = { label: string; child: React.ReactNode };
+interface StepperProps {
+  className?: string;
+  steps: Steps[];
+  customActions?: React.ReactNode;
+}
+// React.forwardRef(({ actionButtons, ...props }, ref)
+const Stepper = forwardRef((props: StepperProps, ref) => {
+  const { className, steps, customActions } = props;
+  const { classes } = useStyles();
+
+  // Component States
+  const [activeStep, setActiveStep] = React.useState(0);
+  const [completed, setCompleted] = React.useState<{
+    [k: number]: boolean;
+  }>({});
+
+  // Functions
+  const handleNext = () => {
+    const newActiveStep =
+      isLastStep(activeStep, steps) && !allStepsCompleted(completed, steps)
+        ? // It's the last step, but not all steps have been completed,
+          // find the first step that has been completed
+          steps.findIndex((step, i) => !(i in completed))
+        : activeStep + 1;
+
+    if (isPrevCompleted(completed, activeStep)) {
+      setActiveStep(newActiveStep);
+    }
+  };
+
+  const handleBack = () => {
+    setActiveStep((prevActiveStep) => prevActiveStep - 1);
+  };
+
+  const handleStep = (step: number) => () => {
+    if (isPrevCompleted(completed, activeStep) || completed[step]) {
+      setActiveStep(step);
+    }
+  };
+
+  const handleComplete = () => {
+    const newCompleted = completed;
+    newCompleted[activeStep] = true;
+    setCompleted(newCompleted);
+    handleNext();
+  };
+
+  const handleReset = () => {
+    setActiveStep(0);
+    setCompleted({});
+  };
+
+  useImperativeHandle(ref, () => ({
+    handleComplete,
+  }));
+
+  return (
+    <Box sx={{ width: "100%" }}>
+      <MUIStepper nonLinear activeStep={activeStep} className={className}>
+        {steps.map((step, index) => (
+          <Step className={classes.root} key={index} completed={completed[index]}>
+            <StepButton color="inherit" onClick={handleStep(index)}>
+              <p style={{ fontSize: "14px", margin: "0" }}>{step.label}</p>
+            </StepButton>
+          </Step>
+        ))}
+      </MUIStepper>
+      <div>
+        {allStepsCompleted(completed, steps) ? (
+          <React.Fragment>
+            <Typography sx={{ mt: 2, mb: 1 }}>All steps completed - you&apos;re finished</Typography>
+            <Box sx={{ display: "flex", flexDirection: "row", pt: 2 }}>
+              <Box sx={{ flex: "1 1 auto" }} />
+              <Button onClick={handleReset}>Reset</Button>
+            </Box>
+          </React.Fragment>
+        ) : (
+          <React.Fragment>
+            <Box>{steps[activeStep].child}</Box>
+            {!customActions ? (
+              <Box sx={{ display: "flex", flexDirection: "row", pt: 2 }}>
+                <Button color="inherit" disabled={activeStep === 0} onClick={handleBack} sx={{ mr: 1 }}>
+                  Back
+                </Button>
+                <Box sx={{ flex: "1 1 auto" }} />
+                <Button onClick={handleNext} sx={{ mr: 1 }}>
+                  Next
+                </Button>
+                {activeStep !== steps.length &&
+                  (completed[activeStep] ? (
+                    <Typography variant="caption" sx={{ display: "inline-block" }}>
+                      Step {activeStep + 1} already completed
+                    </Typography>
+                  ) : (
+                    <Button onClick={handleComplete}>
+                      {completedSteps(completed) === totalSteps(steps) - 1 ? "Finish" : "Complete Step"}
+                    </Button>
+                  ))}
+              </Box>
+            ) : (
+              customActions
+            )}
+          </React.Fragment>
+        )}
+      </div>
+    </Box>
+  );
+});
+
+const useStyles = makeStyles({ name: { Stepper } })((theme) => ({
+  root: {
+    "& .css-1e7c4pk-MuiStepIcon-text": {
+      fill: "#fff",
+    },
+  },
+}));
+
+// helper functions
+const totalSteps = (steps: Steps[]) => {
+  return steps.length;
+};
+
+const completedSteps = (completed: { [k: number]: boolean }) => {
+  return Object.keys(completed).length;
+};
+
+const isLastStep = (activeStep: number, steps: Steps[]) => {
+  return activeStep === totalSteps(steps) - 1;
+};
+
+const allStepsCompleted = (completed: { [k: number]: boolean }, steps: Steps[]) => {
+  return completedSteps(completed) === totalSteps(steps);
+};
+
+const isPrevCompleted = (completed: { [k: number]: boolean }, activeStep: number) => {
+  if (completed[activeStep]) {
+    return true;
+  }
+  return false;
+};
+
+Stepper.displayName = "Stepper";
+
+export default Stepper;
diff --git a/app/client-v2/packages/ui/components/Banner.tsx b/app/client-v2/packages/ui/components/Surfaces/Banner.tsx
similarity index 65%
rename from app/client-v2/packages/ui/components/Banner.tsx
rename to app/client-v2/packages/ui/components/Surfaces/Banner.tsx
index 2f9435998..3b1ea03e6 100644
--- a/app/client-v2/packages/ui/components/Banner.tsx
+++ b/app/client-v2/packages/ui/components/Surfaces/Banner.tsx
@@ -1,7 +1,8 @@
 import React, { forwardRef, memo } from "react";
 
-import { makeStyles } from "../lib/ThemeProvider";
-import { Card } from "./Card";
+import { Card } from ".";
+import { GOATLogoGreenSvg } from "../../assets/svg/GOATLogoGreen";
+import { makeStyles } from "../../lib/ThemeProvider";
 
 export type BannerProps = {
   className?: string;
@@ -14,16 +15,7 @@ export type BannerProps = {
 
 const Banner = memo(
   forwardRef<any, BannerProps>((props, ref) => {
-    const {
-      className,
-      children,
-      imageSide = "right",
-      content,
-      image,
-      actions,
-
-      ...rest
-    } = props;
+    const { className, children, imageSide = "right", content, image, actions, ...rest } = props;
 
     const { classes, cx } = useStyles({
       imageSide,
@@ -32,8 +24,6 @@ const Banner = memo(
 
     return (
       <Card className={classes.card} width="100%" noHover={true}>
-        {" "}
-        {/* Hug (210px) */}
         <div className={classes.bannerCard}>
           {imageSide !== "full" ? (
             <>
@@ -42,15 +32,26 @@ const Banner = memo(
                 <div>{actions}</div>
               </div>
               {imageSide === "fullBehind" ? (
-                <div className={classes.overlay} />
+                <div />
               ) : (
                 <div className={classes.image}>
-                  <div className={classes.overlay} />
+                  <span
+                    style={{
+                      position: "absolute",
+                      width: "100%",
+                      height: "100%",
+                      display: "flex",
+                      justifyContent: "center",
+                      alignItems: "center",
+                    }}>
+                    <GOATLogoGreenSvg height={100} width={200} opacity={1} />
+                  </span>
+                  <div />
                 </div>
               )}
             </>
           ) : (
-            <div className={classes.overlay} />
+            <div />
           )}
         </div>
       </Card>
@@ -76,7 +77,7 @@ const useStyles = makeStyles<{
   name: { Banner },
 })((theme, { imageSide, image }) => ({
   card: {
-    backgroundColor: theme.colors.palette.dark.light,
+    backgroundColor: theme.colors.palette.dark.main,
     position: "relative",
   },
   bannerCard: {
@@ -95,11 +96,8 @@ const useStyles = makeStyles<{
       top: "0",
       width: "100%",
       height: "100%",
-      backgroundImage:
-        image && imageSide && !["full", "fullBehind"].includes(imageSide) ? `url("${image}")` : "",
-      "-webkit-filter": "grayscale(90%)" /* Safari 6.0 - 9.0 */,
-      filter: "grayscale(90%)",
-      backgroundPosition: "7% 30%",
+      background:
+        "radial-gradient(50% 50% at 50% 50%, rgba(40,54,72,0.8) 0%, rgba(40,54,72,0.9) 100%), url(https://assets.plan4better.de/img/login/artwork_1.png) no-repeat center",
     },
   },
   container: {
@@ -111,14 +109,14 @@ const useStyles = makeStyles<{
     color: "white",
     zIndex: "100",
   },
-  overlay: {
-    position: "absolute",
-    top: "0",
-    left: "0",
-    width: "100%",
-    height: "100%",
-    backgroundColor: "rgba(40, 54, 72, 0.8)",
-  },
+  // overlay: {
+  //   position: "absolute",
+  //   top: "0",
+  //   left: "0",
+  //   width: "100%",
+  //   height: "100%",
+  //   backgroundColor: "rgba(40, 54, 72, 0.8)",
+  // },
 }));
 
 export default Banner;
diff --git a/app/client-v2/packages/ui/components/Card/Card.tsx b/app/client-v2/packages/ui/components/Surfaces/Card.tsx
similarity index 97%
rename from app/client-v2/packages/ui/components/Card/Card.tsx
rename to app/client-v2/packages/ui/components/Surfaces/Card.tsx
index 7d13ecc2b..6dd0beb62 100644
--- a/app/client-v2/packages/ui/components/Card/Card.tsx
+++ b/app/client-v2/packages/ui/components/Surfaces/Card.tsx
@@ -90,7 +90,7 @@ export const Card = memo(
 const useStyles = makeStyles<{ noHoverEffect: boolean }>({ name: { Card } })((theme, { noHoverEffect }) => ({
   root: {
     borderRadius: 4,
-    boxShadow: theme.shadows[1],
+    boxShadow: theme.shadows[8],
     backgroundColor: theme.colors.useCases.surfaces.surface1,
     "&:hover": {
       boxShadow: !noHoverEffect ? theme.shadows[6] : "",
@@ -102,8 +102,6 @@ const useStyles = makeStyles<{ noHoverEffect: boolean }>({ name: { Card } })((th
     boxSizing: "border-box",
   },
   belowDivider: {
-    // padding: theme.spacing(4),
-    // paddingTop: theme.spacing(3),
     flex: 1,
     display: "flex",
     flexDirection: "column",
diff --git a/app/client-v2/packages/ui/components/Card/CardContent.tsx b/app/client-v2/packages/ui/components/Surfaces/CardContent.tsx
similarity index 93%
rename from app/client-v2/packages/ui/components/Card/CardContent.tsx
rename to app/client-v2/packages/ui/components/Surfaces/CardContent.tsx
index 4ac1b910e..2340e3aea 100644
--- a/app/client-v2/packages/ui/components/Card/CardContent.tsx
+++ b/app/client-v2/packages/ui/components/Surfaces/CardContent.tsx
@@ -49,7 +49,14 @@ export const CardContent = memo(
         <div className={classes.iconTitle}>
           {icon ? (
             <span className={classes.icon}>
-              <Icon iconId={icon} wrapped="circle" size="default" bgVariant="focus" iconVariant="focus" />
+              <Icon
+                iconId={icon}
+                wrapped="circle"
+                size="small"
+                bgVariant="focus"
+                iconVariant="white"
+                bgOpacity={0.5}
+              />
             </span>
           ) : null}
           <Text typo="body 1" color="primary">
diff --git a/app/client-v2/packages/ui/components/Card/CardMedia.tsx b/app/client-v2/packages/ui/components/Surfaces/CardMedia.tsx
similarity index 100%
rename from app/client-v2/packages/ui/components/Card/CardMedia.tsx
rename to app/client-v2/packages/ui/components/Surfaces/CardMedia.tsx
diff --git a/app/client-v2/packages/ui/components/Card/index.ts b/app/client-v2/packages/ui/components/Surfaces/index.ts
similarity index 76%
rename from app/client-v2/packages/ui/components/Card/index.ts
rename to app/client-v2/packages/ui/components/Surfaces/index.ts
index a83ac576e..04143249b 100644
--- a/app/client-v2/packages/ui/components/Card/index.ts
+++ b/app/client-v2/packages/ui/components/Surfaces/index.ts
@@ -1,3 +1,4 @@
 export * from "./Card";
+export * from "./Banner";
 export * from "./CardContent";
 export * from "./CardMedia";
diff --git a/app/client-v2/packages/ui/components/Text/TextBase.ts b/app/client-v2/packages/ui/components/Text/TextBase.ts
deleted file mode 100644
index 917bb9555..000000000
--- a/app/client-v2/packages/ui/components/Text/TextBase.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { useStyles } from "../../lib/ThemeProvider";
-import { createText } from "./Text";
-
-function useTheme() {
-  const { theme } = useStyles();
-  return theme;
-}
-
-export const { Text } = createText({ useTheme });
diff --git a/app/client-v2/packages/ui/components/Text/index.ts b/app/client-v2/packages/ui/components/Text/index.ts
deleted file mode 100644
index 22e10b675..000000000
--- a/app/client-v2/packages/ui/components/Text/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./Text";
diff --git a/app/client-v2/packages/ui/components/temporary/contentManagement/ContentManagement.tsx b/app/client-v2/packages/ui/components/temporary/contentManagement/ContentManagement.tsx
new file mode 100644
index 000000000..605c0f9f0
--- /dev/null
+++ b/app/client-v2/packages/ui/components/temporary/contentManagement/ContentManagement.tsx
@@ -0,0 +1,466 @@
+import { useState } from "react";
+
+import { makeStyles } from "../../../lib/ThemeProvider";
+import { FileManagementTable, Chip } from "../../DataDisplay";
+import Dialog from "../../Dialog";
+import Modal from "../../Modal";
+import { Card } from "../../Surfaces";
+import { Icon, Text, IconButton, Button } from "../../theme";
+import DashboardLayout from "../DashboardLayout";
+import ContentInfoModal from "./components/ContentInfoModal";
+import HeaderCard from "./components/HeaderCard";
+import MoreMenu from "./components/MoreMenu";
+import TreeViewFilter from "./components/TreeViewFilter";
+
+const ContentManagement = () => {
+  return (
+    <DashboardLayout>
+      <ContentManagementComponent />
+    </DashboardLayout>
+  );
+};
+
+const ContentManagementComponent = () => {
+  const { classes } = useStyles();
+  const [modalContent, setModalContent] = useState<object | null>(null);
+  const [dialogContent, setDialogContent] = useState<{
+    name: React.ReactNode;
+    type: React.ReactNode;
+    modified: string;
+    size: string;
+  } | null>(null);
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+
+  // Dumb Data
+  // These are the rows of the table, it is only temporary for now
+  const rows = [
+    {
+      name: (
+        <Text className={classes.folder} typo="body 2">
+          <span className={classes.icon}>
+            <Icon iconId="folder" />
+          </span>
+          Report_Final_Version
+        </Text>
+      ),
+      type: <Chip className={classes.chip} label="Layer" textDesign="italic" variant="Border" />,
+      modified: "23 Jun 19",
+      size: "30 kb",
+      path: ["home"],
+      stringName: "Report_Final_Version",
+      files: [
+        {
+          name: "Project_XYZ_Conclusion",
+          type: <Chip className={classes.chip} label="Project" textDesign="italic" variant="Border" />,
+          modified: "23 Jun 19",
+          size: "30 kb",
+          path: ["home", "Report_Final_Version"],
+        },
+        {
+          name: "Data_Analysis_2023_Q1",
+          type: <Chip className={classes.chip} label="Image" textDesign="italic" variant="Border" />,
+          modified: "23 Jun 19",
+          size: "30 kb",
+          path: ["home", "Report_Final_Version"],
+        },
+        {
+          name: "Experiment_Results_Phase2",
+          type: <Chip className={classes.chip} label="Report" textDesign="italic" variant="Border" />,
+          modified: "23 Jun 19",
+          size: "30 kb",
+          path: ["home", "Report_Final_Version"],
+        },
+      ],
+    },
+    {
+      name: (
+        <Text className={classes.folder} typo="body 2">
+          <span className={classes.icon}>
+            <Icon iconId="folder" />
+          </span>
+          plan_4_better
+        </Text>
+      ),
+      type: <Chip className={classes.chip} label="Layer" textDesign="italic" variant="Border" />,
+      modified: "23 Jun 19",
+      size: "30 kb",
+      path: ["home"],
+      stringName: "plan_4_better",
+      files: [
+        {
+          name: "Project_XYZ_Conclusion",
+          type: <Chip className={classes.chip} label="Project" textDesign="italic" variant="Border" />,
+          modified: "23 Jun 19",
+          size: "30 kb",
+          path: ["home", "plan_4_better"],
+        },
+        {
+          name: "Data_Analysis_2023_Q1",
+          type: <Chip className={classes.chip} label="Image" textDesign="italic" variant="Border" />,
+          modified: "23 Jun 19",
+          size: "30 kb",
+          path: ["home", "plan_4_better"],
+        },
+        {
+          name: "Experiment_Results_Phase2",
+          type: <Chip className={classes.chip} label="Report" textDesign="italic" variant="Border" />,
+          modified: "23 Jun 19",
+          size: "30 kb",
+          path: ["home", "plan_4_better"],
+        },
+      ],
+    },
+    {
+      name: (
+        <Text className={classes.folder} typo="body 2">
+          <span className={classes.icon}>
+            <Icon iconId="folder" />
+          </span>
+          example_proj
+        </Text>
+      ),
+      type: <Chip className={classes.chip} label="Layer" textDesign="italic" variant="Border" />,
+      modified: "23 Jun 19",
+      size: "30 kb",
+      path: ["home"],
+      stringName: "example_proj",
+      files: [
+        {
+          name: "Project_XYZ_Conclusion",
+          type: <Chip className={classes.chip} label="Project" textDesign="italic" variant="Border" />,
+          modified: "23 Jun 19",
+          size: "30 kb",
+          path: ["home", "example_proj"],
+        },
+        {
+          name: (
+            <Text className={classes.folder} typo="body 2">
+              <span className={classes.icon}>
+                <Icon iconId="folder" />
+              </span>
+              april_2023
+            </Text>
+          ),
+          type: <Chip className={classes.chip} label="Layer" textDesign="italic" variant="Border" />,
+          modified: "23 Jun 19",
+          size: "30 kb",
+          path: ["home", "example_proj"],
+          stringName: "april_2023",
+          files: [
+            {
+              name: "Project_XYZ_Conclusion",
+              type: <Chip className={classes.chip} label="Project" textDesign="italic" variant="Border" />,
+              modified: "23 Jun 19",
+              size: "30 kb",
+              path: ["home", "example_proj", "april_2023"],
+            },
+            {
+              name: "Data_Analysis_2023_Q1",
+              type: <Chip className={classes.chip} label="Image" textDesign="italic" variant="Border" />,
+              modified: "23 Jun 19",
+              size: "30 kb",
+              path: ["home", "example_proj", "april_2023"],
+            },
+            {
+              name: "Experiment_Results_Phase2",
+              type: <Chip className={classes.chip} label="Report" textDesign="italic" variant="Border" />,
+              modified: "23 Jun 19",
+              size: "30 kb",
+              path: ["home", "example_proj", "april_2023"],
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: "Report_Final_Version",
+      type: <Chip className={classes.chip} label="Layer" textDesign="italic" variant="Border" />,
+      modified: "23 Jun 19",
+      path: ["home"],
+      size: "30 kb",
+    },
+    {
+      name: "Project_XYZ_Conclusion",
+      type: <Chip className={classes.chip} label="Project" textDesign="italic" variant="Border" />,
+      modified: "23 Jun 19",
+      path: ["home"],
+      size: "30 kb",
+    },
+    {
+      name: "Data_Analysis_2023_Q1",
+      type: <Chip className={classes.chip} label="Image" textDesign="italic" variant="Border" />,
+      modified: "23 Jun 19",
+      path: ["home"],
+      size: "30 kb",
+    },
+    {
+      name: "Experiment_Results_Phase2",
+      type: <Chip className={classes.chip} label="Report" textDesign="italic" variant="Border" />,
+      modified: "23 Jun 19",
+      path: ["home"],
+      size: "30 kb",
+    },
+    {
+      name: "Report_Final_Version",
+      type: <Chip className={classes.chip} label="Layer" textDesign="italic" variant="Border" />,
+      modified: "23 Jun 19",
+      path: ["home"],
+      size: "30 kb",
+    },
+    {
+      name: "Project_XYZ_Conclusion",
+      type: <Chip className={classes.chip} label="Project" textDesign="italic" variant="Border" />,
+      modified: "23 Jun 19",
+      path: ["home"],
+      size: "30 kb",
+    },
+    {
+      name: "Data_Analysis_2023_Q1",
+      type: <Chip className={classes.chip} label="Image" textDesign="italic" variant="Border" />,
+      modified: "23 Jun 19",
+      path: ["home"],
+      size: "30 kb",
+    },
+    {
+      name: "Experiment_Results_Phase2",
+      type: <Chip className={classes.chip} label="Report" textDesign="italic" variant="Border" />,
+      modified: "23 Jun 19",
+      path: ["home"],
+      size: "30 kb",
+    },
+  ];
+
+  const columnNames = [
+    {
+      id: "name",
+      label: "Name",
+      numeric: false,
+    },
+    {
+      id: "type",
+      label: "Type",
+      numeric: false,
+    },
+    {
+      id: "modified",
+      label: "Modified",
+      numeric: false,
+    },
+    {
+      id: "size",
+      label: "Size",
+      numeric: false,
+    },
+  ];
+
+  const sampleModalData = [
+    {
+      tag: "Owner",
+      data: "User name owner",
+    },
+    {
+      tag: "Shared with",
+      data: "team name, team name, ...",
+    },
+    {
+      tag: "Type",
+      data: "Datat table",
+    },
+    {
+      tag: "Modified",
+      data: "30.02.2022 20:30",
+    },
+    {
+      tag: "Size",
+      data: "30Kb",
+    },
+    {
+      tag: "Location",
+      data: "content/project/folderx",
+    },
+  ];
+
+  const ContainingProjects = [
+    {
+      name: "Proposal_Budget_Revision",
+      link: "/home",
+    },
+    {
+      name: "FINAL_Project1",
+      link: "/home",
+    },
+    {
+      name: "Revision123",
+      link: "/home",
+    },
+  ];
+
+  const [path, setPath] = useState<string[]>(["home"]);
+
+  // this is the Info Modal
+  const modal = modalContent
+    ? {
+        header: (
+          <div className={classes.modalHeader}>
+            <Text typo="section heading" className={classes.modalHeadertext}>
+              Info
+            </Text>
+            <IconButton onClick={() => setModalContent(null)} iconId="close" />
+          </div>
+        ),
+        body: <ContentInfoModal containingProjects={ContainingProjects} sampleModalData={sampleModalData} />,
+        action: (
+          <div className={classes.buttons}>
+            <Button variant="noBorder">VIEW</Button>
+            <Button variant="noBorder" onClick={() => setModalContent(null)}>
+              CANCEL
+            </Button>
+          </div>
+        ),
+      }
+    : null;
+
+  // this is the MoreMenu Dialog
+  const dialog = {
+    width: "133px",
+    body: <MoreMenu rowInfo={dialogContent} />,
+  };
+
+  function closeTablePopover() {
+    setAnchorEl(null);
+    setDialogContent(null);
+  }
+
+  return (
+    <>
+      <HeaderCard path={path} setPath={setPath} />
+      <div className={classes.container}>
+        <TreeViewFilter />
+        <Card noHover={true} className={classes.tableCard}>
+          <FileManagementTable
+            hover={true}
+            columnNames={columnNames}
+            rows={rows}
+            modal={modal}
+            setDialogAnchor={setAnchorEl}
+            openDialog={setDialogContent}
+            openModal={setModalContent}
+            currPath={path}
+            setPath={setPath}
+          />
+          {anchorEl ? (
+            <Dialog
+              anchorEl={anchorEl}
+              className={classes.moreInfoDialog}
+              onClick={closeTablePopover}
+              // title={dialog ? dialog.title : undefined}
+              width={dialog?.width ? dialog.width : "444px"}
+              direction="right"
+              // action={dialog?.action}
+            >
+              {dialog ? dialog.body : ""}
+            </Dialog>
+          ) : null}
+          {modal && modalContent ? (
+            <Modal
+              width="444px"
+              open={modalContent ? true : false}
+              changeOpen={() => setModalContent(null)}
+              header={modal.header}
+              action={modal.action}>
+              {modal.body}
+            </Modal>
+          ) : null}
+        </Card>
+      </div>
+    </>
+  );
+};
+
+const useStyles = makeStyles({ name: { DashboardLayout } })((theme) => ({
+  container: {
+    display: "flex",
+    gap: theme.spacing(3),
+  },
+  buttonTable: {
+    fontSize: "12px",
+    padding: "2px",
+  },
+  treeView: {
+    padding: theme.spacing(3),
+  },
+  tableCard: {
+    flexGrow: "1",
+    padding: theme.spacing(3),
+  },
+  folder: {
+    display: "flex",
+    gap: theme.spacing(2),
+  },
+  icon: {
+    opacity: 0.5,
+  },
+  modalHeader: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  modalHeadertext: {
+    fontWeight: "500",
+  },
+  modalListItem: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(2),
+    paddingBottom: theme.spacing(3),
+  },
+  modalListItemTitle: {
+    fontWeight: "800",
+  },
+  modalListItemData: {
+    color: `${theme.colors.palette[theme.isDarkModeEnabled ? "light" : "dark"].main}80`,
+  },
+  modalSectionTitle: {
+    fontWeight: "800",
+    paddingBottom: theme.spacing(3),
+  },
+  divider: {
+    margin: `0px 0px ${theme.spacing(3)}px 0px`,
+  },
+  projectText: {
+    padding: `0px ${theme.spacing(3)}px`,
+    paddingBottom: theme.spacing(3),
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  openLink: {
+    textDecoration: "none",
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(2),
+  },
+  inputModal: {
+    "&.css-1umu3ji-MuiInputBase-input-MuiOutlinedInput-input": {
+      padding: "0px",
+    },
+  },
+  buttons: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "end",
+    gap: theme.spacing(2),
+  },
+  moreInfoDialog: {
+    padding: "0px",
+  },
+  chip: {
+    height: "auto",
+    fontSize: "12px",
+    "& .css-6od3lo-MuiChip-label": {
+      padding: "0px 6px",
+    },
+  },
+}));
+
+export default ContentManagement;
diff --git a/app/client-v2/packages/ui/components/temporary/contentManagement/components/AccessSettings.tsx b/app/client-v2/packages/ui/components/temporary/contentManagement/components/AccessSettings.tsx
new file mode 100644
index 000000000..8f5ddfc85
--- /dev/null
+++ b/app/client-v2/packages/ui/components/temporary/contentManagement/components/AccessSettings.tsx
@@ -0,0 +1,213 @@
+import React from "react";
+import { useState } from "react";
+
+import { makeStyles } from "../../../../lib/ThemeProvider";
+import { Avatar } from "../../../Avatar";
+import { Divider } from "../../../DataDisplay";
+import { RadioInput, SelectField } from "../../../Inputs";
+import { Text, Icon, Button } from "../../../theme";
+import type { IconId } from "../../../theme";
+
+interface AccessSettingsProps {
+  changeState: (value: { name: string; icon: React.ReactNode; value: string } | null) => void;
+  setModalView: (value: number) => void;
+}
+
+const AccessSettings = (props: AccessSettingsProps) => {
+  const { changeState, setModalView } = props;
+
+  const { classes } = useStyles();
+
+  // Component States
+  const [settingChecked, setSettingChecked] = useState<string>("private");
+
+  //dumb data
+  const organizationPermissions = [
+    {
+      name: <div>View</div>,
+      value: "view",
+    },
+    {
+      name: <div>Edit</div>,
+      value: "edit",
+    },
+    {
+      name: <div>Download</div>,
+      value: "download",
+    },
+  ];
+
+  const teams = [
+    {
+      name: (
+        <div className={classes.teamName}>
+          {" "}
+          <Avatar label="TN" size={24} />
+          <Text typo="body 2">Team 1</Text>
+        </div>
+      ),
+      value: "team1",
+      permission: "",
+    },
+    {
+      name: (
+        <div className={classes.teamName}>
+          <Avatar label="TN" size={24} />
+          <Text typo="body 2">Team 2</Text>
+        </div>
+      ),
+      value: "team2",
+      permission: "",
+    },
+    {
+      name: (
+        <div className={classes.teamName}>
+          <Avatar label="TN" size={24} />
+          <Text typo="body 2">Team 3</Text>
+        </div>
+      ),
+      value: "team3",
+      permission: "",
+    },
+  ];
+
+  const accessSettings: {
+    name: string;
+    value: string;
+    icon: IconId;
+    description: string;
+    child: React.ReactNode;
+  }[] = [
+    {
+      name: "Private",
+      value: "private",
+      icon: "lock",
+      description: "Only you have access",
+      child: <></>,
+    },
+    {
+      name: "Organization",
+      value: "organization",
+      icon: "coorperate",
+      description: "Everyone within your organization have access",
+      child: (
+        <div className={classes.SettingInputWrapper}>
+          <Text typo="body 2">@Organization_name</Text>
+          <SelectField
+            className={classes.selectField}
+            options={organizationPermissions}
+            multiple={true}
+            checkbox={true}
+            label="Permissions"
+            size="small"
+          />
+        </div>
+      ),
+    },
+    {
+      name: "Teams",
+      value: "teams",
+      icon: "team",
+      description: "Set permission by teams",
+      child: (
+        <div>
+          <Divider width="100%" color="gray" />
+          {teams.map((team) => (
+            <>
+              <div className={classes.SettingInputWrapper}>
+                <Text typo="body 2">{team.name}</Text>
+                <SelectField
+                  className={classes.selectField}
+                  options={organizationPermissions}
+                  multiple={true}
+                  checkbox={true}
+                  label="Permissions"
+                  size="small"
+                />
+              </div>
+              <Divider width="100%" className={classes.divider} color="gray" />
+            </>
+          ))}
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <div>
+      <div style={{ paddingBottom: "23px" }}>
+        {accessSettings.map((setting, index) => (
+          <>
+            <div key={index} className={classes.visibilitySettings}>
+              <div className={classes.visibility}>
+                <Icon iconId={setting.icon} size="small" />
+                <div>
+                  <Text typo="body 2">{setting.name}</Text>
+                  {settingChecked === setting.value ? (
+                    <Text typo="body 3" className={classes.italic} color="secondary">
+                      {setting.description}
+                    </Text>
+                  ) : null}
+                </div>
+              </div>
+              <RadioInput value={setting.value} onCheck={setSettingChecked} selectedValue={settingChecked} />
+            </div>
+            {settingChecked === setting.value ? setting.child : null}
+            {index !== accessSettings.length - 1 ? <Divider width="100%" color="gray" /> : null}
+          </>
+        ))}
+      </div>
+      <div className={classes.buttons}>
+        <Button variant="noBorder" onClick={() => changeState(null)}>
+          CANCEL
+        </Button>
+        <Button variant="noBorder" onClick={() => setModalView(0)}>
+          APPLY
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+const useStyles = makeStyles({ name: { AccessSettings } })((theme) => ({
+  italic: {
+    fontStyle: "italic",
+  },
+  buttons: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "end",
+    gap: theme.spacing(2),
+    marginTop: theme.spacing(3),
+  },
+  visibilitySettings: {
+    display: "flex",
+    marginTop: theme.spacing(3),
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  visibility: {
+    display: "flex",
+    gap: theme.spacing(1),
+  },
+  SettingInputWrapper: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: theme.spacing(3),
+    marginTop: theme.spacing(3),
+  },
+  teamName: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(3),
+  },
+  selectField: {
+    flexGrow: "1",
+  },
+  divider: {
+    padding: "0",
+  },
+}));
+
+export default AccessSettings;
diff --git a/app/client-v2/packages/ui/components/temporary/contentManagement/components/ContentInfoModal.tsx b/app/client-v2/packages/ui/components/temporary/contentManagement/components/ContentInfoModal.tsx
new file mode 100644
index 000000000..1a13d7b33
--- /dev/null
+++ b/app/client-v2/packages/ui/components/temporary/contentManagement/components/ContentInfoModal.tsx
@@ -0,0 +1,157 @@
+import React, { useState } from "react";
+
+import { makeStyles } from "../../../../lib/ThemeProvider";
+import { Divider } from "../../../DataDisplay";
+import { TextField } from "../../../Inputs";
+import { Icon, Text, IconButton } from "../../../theme";
+
+interface ContentInfoModalProps {
+  sampleModalData: {
+    tag: string;
+    data: string;
+  }[];
+  containingProjects: {
+    name: string;
+    link: string;
+  }[];
+}
+
+const ContentInfoModal = (props: ContentInfoModalProps) => {
+  const { sampleModalData, containingProjects } = props;
+
+  const { classes } = useStyles();
+
+  // Component States
+  const [editMode, setEditMode] = useState(false);
+
+  return (
+    <div>
+      <div className={classes.modalListItem} style={{ paddingBottom: "4px" }}>
+        {editMode ? (
+          <>
+            <span style={{ display: "flex", alignItems: "center" }}>
+              <TextField
+                label=""
+                defaultValue="Study1_3994"
+                size="small"
+                className={classes.inputWrapper}
+                InputPropsClass={{
+                  className: classes.inputModal,
+                }}
+              />
+              .xml
+            </span>
+            <span>
+              <IconButton
+                onClick={() => setEditMode(!editMode)}
+                type="submit"
+                iconId="noBgCheck"
+                size="small"
+                className={classes.icon}
+                iconVariant="focus"
+              />
+              <IconButton
+                onClick={() => setEditMode(!editMode)}
+                type="submit"
+                iconId="close"
+                size="small"
+                iconVariant="error"
+              />
+            </span>
+          </>
+        ) : (
+          <>
+            <Text typo="body 2" className={classes.modalListItemTitle}>
+              Study1_3994.xml{" "}
+            </Text>
+            <IconButton onClick={() => setEditMode(!editMode)} type="submit" iconId="edit" size="small" />
+          </>
+        )}
+      </div>
+      <Divider width="100%" color="gray" className={classes.divider} />
+      {sampleModalData.map((data, indx) => (
+        <div className={classes.modalListItem} key={indx}>
+          <Text typo="body 2" className={classes.modalListItemTitle}>
+            {data.tag}:{" "}
+          </Text>
+          <Text typo="body 2" className={classes.modalListItemData}>
+            {data.data}
+          </Text>
+        </div>
+      ))}
+      <Divider width="100%" color="gray" className={classes.divider} />
+      <Text typo="body 2" className={classes.modalSectionTitle}>
+        Containing Projects
+      </Text>
+      {containingProjects.map((data) => (
+        <>
+          <div className={classes.projectText}>
+            <Text typo="body 2">{data.name}</Text>
+            <a href={data.link} className={classes.openLink}>
+              <Text typo="body 2" color="focus">
+                Open
+              </Text>
+              <Icon iconId="open" size="small" />
+            </a>
+          </div>
+          <Divider width="100%" color="gray" className={classes.divider} />
+        </>
+      ))}
+    </div>
+  );
+};
+
+const useStyles = makeStyles({ name: { ContentInfoModal } })((theme) => ({
+  modalHeader: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  modalListItem: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(2),
+    paddingBottom: theme.spacing(3),
+  },
+  modalListItemTitle: {
+    fontWeight: "800",
+  },
+  modalListItemData: {
+    color: `${theme.colors.palette[theme.isDarkModeEnabled ? "light" : "dark"].main}80`,
+  },
+  modalSectionTitle: {
+    fontWeight: "800",
+    paddingBottom: theme.spacing(3),
+  },
+  divider: {
+    margin: `0px 0px ${theme.spacing(3)}px 0px`,
+  },
+  projectText: {
+    padding: `0px ${theme.spacing(3)}px`,
+    paddingBottom: theme.spacing(3),
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  openLink: {
+    textDecoration: "none",
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(2),
+  },
+  inputModal: {
+    "&.MuiInputBase-input": {
+      padding: `0px ${theme.spacing(2)}px`,
+    },
+    width: "150px",
+  },
+  inputWrapper: {
+    marginRight: theme.spacing(1),
+  },
+  icon: {
+    color: "green",
+  },
+  iconWrapper: {},
+}));
+
+export default ContentInfoModal;
diff --git a/app/client-v2/packages/ui/components/temporary/contentManagement/components/CreateContent.tsx b/app/client-v2/packages/ui/components/temporary/contentManagement/components/CreateContent.tsx
new file mode 100644
index 000000000..8b2181bed
--- /dev/null
+++ b/app/client-v2/packages/ui/components/temporary/contentManagement/components/CreateContent.tsx
@@ -0,0 +1,275 @@
+import React, { useEffect, useRef, useState } from "react";
+
+import { makeStyles } from "../../../../lib/ThemeProvider";
+import { Divider } from "../../../DataDisplay";
+import { FileUploadProgress } from "../../../DataDisplay";
+import DropFieldFileInput from "../../../DropFieldFileInput";
+import { SelectField, TextField } from "../../../Inputs";
+import Stepper from "../../../Stepper";
+import { Button, Text } from "../../../theme";
+
+interface CreateContentProps {
+  modalState: (value: boolean) => void;
+}
+
+const CreateContent = (props: CreateContentProps) => {
+  const { modalState } = props;
+
+  const { classes } = useStyles();
+
+  // refs
+  const stepperElem = useRef<{ handleComplete: () => void } | null>(null);
+
+  // Input related
+  const [uploadType, setUploadType] = useState<string | string[]>("");
+  const [urlValue, setUrlValue] = useState("");
+  const [saveFormat, setSaveFormat] = useState<string | string[]>("");
+  const [uploadFile, setUploadFile] = useState<FileList>();
+  const [progressUpload, setProgressUpload] = useState<boolean>(false);
+
+  // dumb data
+  const layerTypes = [
+    {
+      name: "URL",
+      value: "url",
+    },
+    {
+      name: "Shapefile",
+      value: "shapefile",
+    },
+    {
+      name: "Geopackage",
+      value: "geopackage",
+    },
+    {
+      name: "Geobuf",
+      value: "geobuf",
+    },
+    {
+      name: "CSV",
+      value: "csv",
+    },
+    {
+      name: "XLSX",
+      value: "xlsx",
+    },
+    {
+      name: "KML",
+      value: "kml",
+    },
+  ];
+
+  // Add Content steps in case the chosen layer type is URL
+  let steps = [
+    {
+      label: "Choose format",
+      status: "active",
+      child: (
+        <div>
+          <Text typo="body 1">Chose Layer Type:</Text>
+          <SelectField
+            className={classes.selectInput}
+            options={layerTypes}
+            label="Chose Format"
+            size="small"
+            updateChange={setUploadType}
+          />
+          <Text color="secondary" typo="label 2" className={classes.descriptionText}>
+            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
+            massa. Cum sociis natoque penatibus et magnis{" "}
+          </Text>
+        </div>
+      ),
+    },
+    {
+      label: "Load content",
+      status: "active",
+      child: (
+        <div>
+          <Text typo="body 1">Paste the URL here:</Text>
+          <div className={classes.FormInputWrapper}>
+            <TextField
+              onValueBeingTypedChange={({ value }) => setUrlValue(value)}
+              size="small"
+              label=""
+              className={classes.FormInput}
+            />
+            <Button variant="noBorder" onClick={loadUrl} disabled={urlValue.length > 4 ? false : true}>
+              LOAD
+            </Button>
+          </div>
+          <Text color="secondary" typo="label 2" className={classes.descriptionText}>
+            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
+            massa. Cum sociis natoque penatibus et magnis{" "}
+          </Text>
+        </div>
+      ),
+    },
+    {
+      label: "Store",
+      status: "active",
+      child: (
+        <div>
+          <div className={classes.urlPreview}>
+            <img
+              src="https://i.postimg.cc/GpvYCgx9/geoportal-min.png"
+              alt="geoportal"
+              className={classes.image}
+            />
+            <Text typo="body 2">GeoPortal Title XYZ</Text>
+            <Text typo="label 2" className={classes.textLink} color="secondary">
+              {urlValue}
+            </Text>
+          </div>
+          <Divider width="100%" color="gray" />
+          <div>
+            <Text typo="body 1">Choose a storing format:</Text>
+            <SelectField
+              className={classes.selectInput}
+              options={layerTypes}
+              label="Chose Format"
+              size="small"
+              updateChange={setSaveFormat}
+            />
+            <Text color="secondary" typo="label 2" className={classes.descriptionText}>
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
+              Aenean massa. Cum sociis natoque penatibus et magnis{" "}
+            </Text>
+          </div>
+        </div>
+      ),
+    },
+  ];
+
+  // Add content steps in case we chose to import via local types (type !== url)
+  const uploadLocallySteps = [
+    {
+      label: "Choose format",
+      status: "active",
+      child: (
+        <div>
+          <Text typo="body 1">Chose Layer Type:</Text>
+          <SelectField
+            className={classes.selectInput}
+            options={layerTypes}
+            label="Chose Format"
+            size="small"
+            updateChange={setUploadType}
+          />
+          <Text color="secondary" typo="label 2" className={classes.descriptionText}>
+            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
+            massa. Cum sociis natoque penatibus et magnis{" "}
+          </Text>
+        </div>
+      ),
+    },
+    {
+      label: "Load content",
+      status: "active",
+      child: (
+        <div>
+          <DropFieldFileInput onContentAdded={setUploadFile} onUploadFinish={setProgressUpload} />
+        </div>
+      ),
+    },
+    {
+      label: "Store",
+      status: "active",
+      child: (
+        <div>
+          <FileUploadProgress onFinished={() => console.log("finished")} finished={true} />
+        </div>
+      ),
+    },
+  ];
+
+  useEffect(() => {
+    if (uploadType) {
+      if (uploadType !== "url") {
+        const newSteps = steps.slice(0, -2);
+        steps = [...newSteps, ...uploadLocallySteps];
+      }
+      completeStep();
+    }
+  }, [uploadType, progressUpload]);
+
+  //functions
+  const simpleActions = (
+    <div className={classes.buttons}>
+      <Button variant="noBorder" onClick={() => modalState(false)}>
+        CANCEL
+      </Button>
+      {saveFormat.length || progressUpload ? (
+        <Button variant="noBorder" onClick={() => modalState(false)}>
+          ADD
+        </Button>
+      ) : null}
+    </div>
+  );
+
+  function loadUrl() {
+    if (urlValue) {
+      completeStep();
+    }
+  }
+
+  function completeStep() {
+    if (stepperElem.current !== null && stepperElem.current !== undefined) {
+      stepperElem.current.handleComplete();
+    }
+  }
+
+  return (
+    <div>
+      <Stepper
+        steps={uploadType === "url" ? steps : uploadLocallySteps}
+        ref={stepperElem}
+        customActions={simpleActions}
+        className={classes.stepper}
+      />
+    </div>
+  );
+};
+
+const useStyles = makeStyles({ name: { Stepper } })((theme) => ({
+  stepper: {
+    paddingBottom: theme.spacing(3),
+  },
+  buttons: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "end",
+    gap: theme.spacing(2),
+  },
+  selectInput: {
+    margin: `${theme.spacing(3)}px 0px`,
+  },
+  stepText: {
+    fontSize: "14px",
+  },
+  descriptionText: {
+    fontStyle: "italic",
+  },
+  FormInputWrapper: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(2),
+  },
+  FormInput: {
+    flexGrow: "1",
+    margin: `${theme.spacing(3)}px 0px`,
+  },
+  image: {
+    boxShadow: theme.shadows[2],
+  },
+  textLink: {
+    fontStyle: "italic",
+  },
+  urlPreview: {
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(3),
+  },
+}));
+
+export default CreateContent;
diff --git a/app/client-v2/packages/ui/components/temporary/contentManagement/components/DownloadModal.tsx b/app/client-v2/packages/ui/components/temporary/contentManagement/components/DownloadModal.tsx
new file mode 100644
index 000000000..6b28a4457
--- /dev/null
+++ b/app/client-v2/packages/ui/components/temporary/contentManagement/components/DownloadModal.tsx
@@ -0,0 +1,90 @@
+import { makeStyles } from "../../../../lib/ThemeProvider";
+import { SelectField } from "../../../Inputs";
+import { Text, Button } from "../../../theme";
+
+interface DownloadModalProps {
+  name: React.ReactNode;
+  changeState: (value: { name: string; icon: React.ReactNode; value: string } | null) => void;
+}
+
+const DownloadModal = (props: DownloadModalProps) => {
+  const { name, changeState } = props;
+
+  const { classes } = useStyles();
+
+  // Dumb Data
+  // options to put in the select
+  const staticData = [
+    {
+      name: "URL",
+      value: "url",
+    },
+    {
+      name: "Shapefile",
+      value: "shapefile",
+    },
+    {
+      name: "Geopackage",
+      value: "geopackage",
+    },
+    {
+      name: "Geobuf",
+      value: "geobuf",
+    },
+    {
+      name: "CSV",
+      value: "csv",
+    },
+    {
+      name: "XLSX",
+      value: "xlsx",
+    },
+    {
+      name: "KML",
+      value: "kml",
+    },
+  ];
+
+  return (
+    <div>
+      <Text typo="body 1" className={classes.bold}>
+        {name ? name : ""}
+      </Text>
+      <SelectField
+        className={classes.selectInput}
+        options={staticData}
+        size="small"
+        label="Download Format"
+      />
+      <Text typo="label 2">
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
+        massa. Cum sociis natoque penatibus et magnis{" "}
+      </Text>
+      <div className={classes.buttons}>
+        <Button variant="noBorder" onClick={() => changeState(null)}>
+          CANCEL
+        </Button>
+        <Button variant="noBorder">DOWNLOAD</Button>
+      </div>
+    </div>
+  );
+};
+const useStyles = makeStyles({ name: { DownloadModal } })((theme) => ({
+  selectInput: {
+    margin: `${theme.spacing(3)}px 0px`,
+  },
+  bold: {
+    fontWeight: 800,
+  },
+  italic: {
+    fontStyle: "italic",
+  },
+  buttons: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "end",
+    gap: theme.spacing(2),
+    marginTop: theme.spacing(3),
+  },
+}));
+export default DownloadModal;
diff --git a/app/client-v2/packages/ui/components/temporary/contentManagement/components/HeaderCard.tsx b/app/client-v2/packages/ui/components/temporary/contentManagement/components/HeaderCard.tsx
new file mode 100644
index 000000000..374596a5c
--- /dev/null
+++ b/app/client-v2/packages/ui/components/temporary/contentManagement/components/HeaderCard.tsx
@@ -0,0 +1,147 @@
+import { useState } from "react";
+
+import { makeStyles } from "../../../../lib/ThemeProvider";
+import Modal from "../../../Modal";
+import { ToggleTabs } from "../../../Navigation/ToggleTabs";
+import { Card } from "../../../Surfaces";
+import { Button, Text, IconButton } from "../../../theme";
+import DashboardLayout from "../../DashboardLayout";
+import CreateContent from "./CreateContent";
+
+interface HeaderCardProps {
+  path: string[];
+  setPath: (value: string[]) => void;
+}
+
+const HeaderCard = (props: HeaderCardProps) => {
+  const { path, setPath } = props;
+
+  const { classes } = useStyles();
+  const [value, setValue] = useState<string | null>("formatLeft");
+  const [addContent, setAddContent] = useState(false);
+
+  function handlePathChange(indx: number) {
+    const newPath = [...path];
+    setPath(newPath.slice(0, indx + 1));
+  }
+
+  return (
+    <Card noHover={true} width="100%" className={classes.headerCard}>
+      <div className={classes.headerContainer}>
+        <div className={classes.headerPath}>
+          <Text typo="section heading" className={classes.headerText}>
+            Content
+          </Text>
+          <span style={{ display: "flex", alignItems: "center" }}>
+            <span className={classes.path}>
+              {path.map((singlePath, indx) => (
+                <span key={indx} className={classes.path}>
+                  <Text
+                    typo="body 2"
+                    className={classes.pathFile}
+                    color={indx === path.length - 1 ? "primary" : "secondary"}>
+                    <span onClick={() => handlePathChange(indx)}>{singlePath}</span>
+                  </Text>
+                  {indx !== path.length - 1 ? <Text typo="body 2">/</Text> : null}
+                </span>
+              ))}
+            </span>
+          </span>
+        </div>
+        <div className={classes.headerActions}>
+          <span style={{ display: "flex", gap: "10px" }}>
+            <Button variant="noBorder" startIcon="newFolder">
+              New folder
+            </Button>
+            <Button
+              variant="noBorder"
+              className={classes.headerText}
+              onClick={() => setAddContent(true)}
+              startIcon="newFile">
+              Add content
+            </Button>
+          </span>
+          <ToggleTabs
+            defaultValue={value}
+            onResultChange={setValue}
+            tabs={[
+              {
+                iconId: "formatLeft",
+                value: "formatLeft",
+              },
+              {
+                iconId: "viewModul",
+                value: "viewModul",
+              },
+            ]}
+          />
+        </div>
+      </div>
+      <Modal
+        width="444px"
+        open={addContent}
+        changeOpen={() => setAddContent(false)}
+        header={
+          <div className={classes.modalHeader}>
+            <Text typo="section heading" className={classes.modalHeadertext}>
+              Add content
+            </Text>
+            <IconButton onClick={() => setAddContent(false)} iconId="close" />
+          </div>
+        }>
+        <CreateContent modalState={setAddContent} />
+      </Modal>
+    </Card>
+  );
+};
+
+const useStyles = makeStyles({ name: { DashboardLayout } })((theme) => ({
+  headerCard: {
+    marginBottom: theme.spacing(3),
+  },
+  headerContainer: {
+    padding: `${theme.spacing(2)}px ${theme.spacing(3)}px`,
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    width: "100%",
+  },
+  headerText: {
+    fontWeight: 800,
+    // width: "fit-content",
+  },
+  headerPath: {
+    width: "60%",
+    display: "flex",
+    alignItems: "center",
+    gap: "100px",
+  },
+  path: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(2),
+  },
+  pathFile: {
+    cursor: "pointer",
+  },
+  headerActions: {
+    width: "40%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "end",
+    gap: theme.spacing(5) + theme.spacing(3),
+  },
+  icon: {
+    marginRight: "10px",
+  },
+  modalHeadertext: {
+    fontWeight: "500",
+  },
+  modalHeader: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+}));
+
+export default HeaderCard;
diff --git a/app/client-v2/packages/ui/components/temporary/contentManagement/components/MoreMenu.tsx b/app/client-v2/packages/ui/components/temporary/contentManagement/components/MoreMenu.tsx
new file mode 100644
index 000000000..36ec973a1
--- /dev/null
+++ b/app/client-v2/packages/ui/components/temporary/contentManagement/components/MoreMenu.tsx
@@ -0,0 +1,164 @@
+import React, { useState, useEffect } from "react";
+
+import { makeStyles } from "../../../../lib/ThemeProvider";
+import Modal from "../../../Modal";
+import { Icon, Text, IconButton } from "../../../theme";
+import DownloadModal from "./DownloadModal";
+import MoveModal from "./MoveModal";
+import ShareModal from "./ShareModal";
+
+interface MoreMenuProps {
+  rowInfo: { name: React.ReactNode; type: React.ReactNode; modified: string; size: string } | null;
+}
+
+const MoreMenu = (props: MoreMenuProps) => {
+  const { rowInfo } = props;
+
+  const { classes, cx } = useStyles();
+
+  // Component States
+  const [selectedOption, setSelectedOption] = useState<{
+    name: string;
+    icon: React.ReactNode;
+    value: string;
+  } | null>(null);
+
+  // Options to show in the More Menu
+  const defaultOptions = [
+    [
+      {
+        value: "Info",
+        name: "Info",
+        icon: <Icon size="small" iconId="info" className={classes.icon} />,
+      },
+      {
+        value: "View",
+        name: "View",
+        icon: <Icon size="small" iconId="view" className={classes.icon} />,
+      },
+    ],
+    [
+      {
+        value: "Duplicate",
+        name: "Duplicate",
+        icon: <Icon size="small" iconId="duplicate" className={classes.icon} />,
+      },
+      {
+        value: "Move",
+        name: "Move",
+        icon: <Icon size="small" iconId="moveFile" className={classes.icon} />,
+      },
+      {
+        value: "Delete",
+        name: "Delete",
+        icon: <Icon size="small" iconId="delete" className={classes.icon} />,
+      },
+    ],
+    [
+      {
+        value: "Share",
+        name: "Share",
+        icon: <Icon size="small" iconId="reply" className={classes.icon} />,
+      },
+      {
+        value: "Download",
+        name: "Download",
+        icon: <Icon size="small" iconId="download" className={classes.icon} />,
+      },
+    ],
+  ];
+
+  useEffect(() => {
+    console.log(selectedOption);
+  }, [selectedOption]);
+
+  interface ComponentOptions {
+    [key: string]: React.ReactElement<any, any>;
+  }
+
+  /**
+   * Defines a componentOptions object that contains different modals for various actions.
+   * @param {ComponentOptions} componentOptions - The options for different modals.
+   * @returns None
+   */
+  const componentOptions: ComponentOptions = {
+    Download: <DownloadModal name={rowInfo ? rowInfo.name : ""} changeState={setSelectedOption} />,
+    Share: (
+      <ShareModal
+        name={rowInfo ? rowInfo.name : ""}
+        changeState={setSelectedOption}
+        modalState={selectedOption}
+      />
+    ),
+    Move: <MoveModal changeState={setSelectedOption} />,
+  };
+
+  return (
+    <div>
+      {defaultOptions.map((options, index) => (
+        <div key={index} className={classes.section}>
+          {options.map((option, indx) => (
+            <div key={indx} className={classes.option} onClick={() => setSelectedOption(option)}>
+              {/* <span className={classes.icon}>{option.icon}</span> */}
+              {option.icon}
+              <Text typo="label 2">{option.name}</Text>
+            </div>
+          ))}
+        </div>
+      ))}
+      <Modal
+        width="444px"
+        header={
+          <div className={classes.modalHeader}>
+            <Text typo="section heading" className={classes.headerText}>
+              {selectedOption ? selectedOption.name : ""}
+            </Text>
+            <IconButton onClick={() => setSelectedOption(null)} iconId="close" />
+          </div>
+        }
+        open={selectedOption ? true : false}
+        changeOpen={() => setSelectedOption(null)}>
+        {
+          componentOptions[
+            selectedOption !== null && ["Download", "Share", "Move"].includes(selectedOption.value)
+              ? selectedOption.value
+              : "Download"
+          ]
+        }
+      </Modal>
+    </div>
+  );
+};
+
+const useStyles = makeStyles({ name: { MoreMenu } })((theme) => ({
+  option: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(2),
+    padding: `${theme.spacing(1)}px ${theme.spacing(3)}px`,
+    cursor: "pointer",
+    "&:hover": {
+      backgroundColor: `${theme.colors.palette[theme.isDarkModeEnabled ? "dark" : "light"].greyVariant1}80`,
+    },
+  },
+  icon: {
+    opacity: 0.5,
+  },
+  section: {
+    margin: `${theme.spacing(2)}px 0px`,
+  },
+  goatIconSize: {
+    width: "20px",
+    height: "20px",
+  },
+  modalHeader: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  headerText: {
+    fontWeight: "normal",
+  },
+}));
+
+export default MoreMenu;
diff --git a/app/client-v2/packages/ui/components/temporary/contentManagement/components/MoveModal.tsx b/app/client-v2/packages/ui/components/temporary/contentManagement/components/MoveModal.tsx
new file mode 100644
index 000000000..a5e69c889
--- /dev/null
+++ b/app/client-v2/packages/ui/components/temporary/contentManagement/components/MoveModal.tsx
@@ -0,0 +1,127 @@
+import React from "react";
+
+import { makeStyles } from "../../../../lib/ThemeProvider";
+import { TreeView } from "../../../DataDisplay";
+import { Icon } from "../../../theme";
+import { Button } from "../../../theme";
+
+interface MoveModalProps {
+  changeState: (value: { name: string; icon: React.ReactNode; value: string } | null) => void;
+}
+
+const MoveModal = (props: MoveModalProps) => {
+  const { changeState } = props;
+
+  const { classes } = useStyles();
+
+  // Dumb Temporary Data
+  const treeData = [
+    {
+      id: "node_1",
+      name: (
+        <div className={classes.folder}>
+          <Icon iconId="folder" />
+          Report_Final_Version
+        </div>
+      ),
+    },
+    {
+      id: "node_2",
+      name: (
+        <div className={classes.folder}>
+          <Icon iconId="folder" />
+          plan_4_better
+        </div>
+      ),
+    },
+    {
+      id: "node_3",
+      name: (
+        <div className={classes.folder}>
+          <Icon iconId="folder" />
+          example_proj
+        </div>
+      ),
+      children: [
+        {
+          id: "node_3_1",
+          name: (
+            <div className={classes.folder}>
+              <Icon iconId="folder" />
+              april_2023
+            </div>
+          ),
+        },
+      ],
+    },
+    {
+      id: "node_4",
+      name: (
+        <div className={classes.folder}>
+          <Icon iconId="folder" />
+          Report_Final_Version
+        </div>
+      ),
+    },
+    {
+      id: "node_5",
+      name: (
+        <div className={classes.folder}>
+          <Icon iconId="folder" />
+          plan_4_better
+        </div>
+      ),
+    },
+    {
+      id: "node_6",
+      name: (
+        <div className={classes.folder}>
+          <Icon iconId="folder" />
+          example_proj
+        </div>
+      ),
+      children: [
+        {
+          id: "node_6_1",
+          name: (
+            <div className={classes.folder}>
+              <Icon iconId="folder" />
+              april_2023
+            </div>
+          ),
+        },
+      ],
+    },
+  ];
+
+  return (
+    <div>
+      <TreeView nodes={treeData} />
+      <div className={classes.buttons}>
+        <Button variant="noBorder" onClick={() => changeState(null)}>
+          MOVE HERE
+        </Button>
+        <Button variant="noBorder" onClick={() => changeState(null)}>
+          CANCEL
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+const useStyles = makeStyles({ name: { TreeView } })((theme) => ({
+  folder: {
+    display: "flex",
+    gap: theme.spacing(2),
+    padding: `6px 0px`,
+  },
+  buttons: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "end",
+    gap: theme.spacing(2),
+    marginTop: theme.spacing(3),
+  },
+}));
+
+export default MoveModal;
diff --git a/app/client-v2/packages/ui/components/temporary/contentManagement/components/ShareModal.tsx b/app/client-v2/packages/ui/components/temporary/contentManagement/components/ShareModal.tsx
new file mode 100644
index 000000000..f1103962c
--- /dev/null
+++ b/app/client-v2/packages/ui/components/temporary/contentManagement/components/ShareModal.tsx
@@ -0,0 +1,171 @@
+import type { Dayjs } from "dayjs";
+import React from "react";
+import { useState } from "react";
+
+import { makeStyles } from "../../../../lib/ThemeProvider";
+import { Divider } from "../../../DataDisplay";
+import { Switch, DatePicker, TextField } from "../../../Inputs";
+import { Text, Icon, IconButton, Button } from "../../../theme";
+import AccessSettings from "./AccessSettings";
+
+interface ShareModalProps {
+  name?: React.ReactNode;
+  changeState: (value: { name: string; icon: React.ReactNode; value: string } | null) => void;
+  modalState: { name: string; icon: React.ReactNode; value: string } | null;
+}
+
+const ShareModal = (props: ShareModalProps) => {
+  const { name, changeState, modalState } = props;
+
+  const { classes } = useStyles();
+
+  // Component States
+  const [checked, setChecked] = useState<boolean>(false);
+  const [linkShareStatus, setLinkShareStatus] = useState<boolean>(true);
+  const [date, setDate] = useState<Dayjs | null>(null);
+  const [password, setPassword] = useState<string | null>(null);
+  const [modalView, setModalView] = useState<number>(0);
+
+  // Functions
+  function handleSwitch(event: React.ChangeEvent<HTMLInputElement>, checked: boolean) {
+    setChecked(checked);
+  }
+
+  function handleLinkSHareStatus(event: React.ChangeEvent<HTMLInputElement>, checked: boolean) {
+    setLinkShareStatus(checked);
+  }
+
+  function enterAccessSettings() {
+    setModalView(1);
+    if (modalState) {
+      const newState = modalState;
+      newState.name = "Access Settings";
+      changeState({
+        name: "Access Settings",
+        icon: newState.icon,
+        value: newState.value,
+      });
+    }
+  }
+
+  return (
+    <div>
+      {modalView === 0 ? (
+        <div>
+          <Text typo="body 2" className={classes.italic}>
+            {name ? name : ""}
+          </Text>
+          <div className={classes.visibilitySettings}>
+            <div className={classes.visibility}>
+              <Icon iconId="lock" size="small" />
+              <div>
+                <Text typo="body 2">Private</Text>
+                <Text typo="body 3" className={classes.italic} color="secondary">
+                  Only you have access
+                </Text>
+              </div>
+            </div>
+            <IconButton iconId="edit" type="submit" iconVariant="focus" onClick={enterAccessSettings} />
+          </div>
+          <Divider width="100%" color="gray" />
+          <div className={classes.switcher}>
+            <Switch checked={linkShareStatus} onChecked={handleLinkSHareStatus} />
+            <Text typo="body 1">Allow link sharing</Text>
+          </div>
+          <div className={classes.switcher}>
+            <Switch checked={checked} onChecked={handleSwitch} />
+            <Text typo="body 1">Protected by password</Text>
+          </div>
+          {checked ? (
+            <div style={{ marginTop: "8px" }}>
+              <TextField
+                label="Set Password"
+                size="small"
+                className={classes.shareInput}
+                onValueBeingTypedChange={({ value }) => setPassword(value)}
+              />
+            </div>
+          ) : null}
+          <Divider width="100%" color="gray" />
+          <div style={{ paddingBottom: "23px" }}>
+            <Text typo="body 1">Set expiration date:</Text>
+            <DatePicker
+              ClassName={classes.dateInput}
+              onChange={setDate}
+              value={date}
+              label="DD/MM/YY"
+              size="small"
+            />
+          </div>
+          <Divider width="100%" color="gray" />
+          <div className={classes.shareInputWrapper}>
+            <TextField
+              defaultValue="https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?type=design&node-id=12355-135723&mode=design&t=0W9nCyQtk2pQyAUU-0"
+              size="small"
+              className={classes.shareInput}
+            />
+            <Button>Copy</Button>
+          </div>
+          <div className={classes.buttons}>
+            <Button variant="noBorder" onClick={() => changeState(null)}>
+              CANCEL
+            </Button>
+            <Button variant="noBorder" onClick={() => changeState(null)}>
+              SAVE
+            </Button>
+          </div>
+        </div>
+      ) : (
+        <AccessSettings changeState={changeState} setModalView={setModalView} />
+      )}
+    </div>
+  );
+};
+
+const useStyles = makeStyles({ name: { ShareModal } })((theme) => ({
+  selectInput: {
+    margin: `${theme.spacing(3)}px 0px`,
+  },
+  bold: {
+    fontWeight: 800,
+  },
+  italic: {
+    fontStyle: "italic",
+  },
+  buttons: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "end",
+    gap: theme.spacing(2),
+    marginTop: theme.spacing(3),
+  },
+  visibilitySettings: {
+    display: "flex",
+    marginTop: theme.spacing(3),
+    justifyContent: "space-between",
+  },
+  visibility: {
+    display: "flex",
+    gap: theme.spacing(1),
+  },
+  switcher: {
+    display: "flex",
+    alignItems: "center",
+    // gap: theme.spacing(1),
+  },
+  dateInput: {
+    width: "100%",
+  },
+  shareInput: {
+    width: "100%",
+  },
+  shareInputWrapper: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: theme.spacing(3),
+    paddingBottom: "23px",
+  },
+}));
+
+export default ShareModal;
diff --git a/app/client-v2/packages/ui/components/temporary/contentManagement/components/TreeViewFilter.tsx b/app/client-v2/packages/ui/components/temporary/contentManagement/components/TreeViewFilter.tsx
new file mode 100644
index 000000000..fb15285c7
--- /dev/null
+++ b/app/client-v2/packages/ui/components/temporary/contentManagement/components/TreeViewFilter.tsx
@@ -0,0 +1,89 @@
+import React, { useState } from "react";
+
+import { makeStyles } from "../../../../lib/ThemeProvider";
+import { TreeViewWithCheckboxes } from "../../../DataDisplay";
+import { Card } from "../../../Surfaces";
+import { Button } from "../../../theme";
+
+const TreeViewFilter = () => {
+  const { classes } = useStyles();
+
+  // Component States
+  const [selectedFilters, setSelectedFilters] = useState<string[]>([]);
+
+  const treeData = [
+    {
+      id: "layers",
+      name: "Layers",
+      count: "(100)",
+      children: [
+        {
+          id: "feature",
+          name: "Feature",
+          count: "(72)",
+        },
+        {
+          id: "imagery",
+          name: "Imagery",
+          count: "(28)",
+        },
+      ],
+    },
+    {
+      id: "reports",
+      name: "Reports",
+      count: "(43)",
+    },
+    {
+      id: "projects",
+      name: "Projects",
+      count: "(10)",
+      children: [
+        {
+          id: "project_one",
+          name: "Project_one",
+          count: "(6)",
+          children: [
+            {
+              id: "project_two",
+              name: "Project_Twosadddsadsdfsaad",
+              count: "(4)",
+            },
+          ],
+        },
+      ],
+    },
+  ];
+
+  // Functions
+  function clearFilters() {
+    setSelectedFilters([]);
+  }
+
+  return (
+    <Card className={classes.treeView} noHover={true} width="280px">
+      <div className={classes.wrapper}>
+        <TreeViewWithCheckboxes
+          selected={selectedFilters}
+          changeSelected={setSelectedFilters}
+          treeData={treeData}
+        />
+        {selectedFilters.length ? <Button onClick={clearFilters}>Clear Filters</Button> : null}
+      </div>
+    </Card>
+  );
+};
+
+const useStyles = makeStyles({ name: { TreeViewFilter } })((theme) => ({
+  treeView: {
+    padding: theme.spacing(3),
+  },
+  wrapper: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-between",
+    height: "100%",
+  },
+}));
+
+export default TreeViewFilter;
diff --git a/app/client-v2/packages/ui/components/temporary/settings/Settings.tsx b/app/client-v2/packages/ui/components/temporary/settings/Settings.tsx
new file mode 100644
index 000000000..cd2d1e865
--- /dev/null
+++ b/app/client-v2/packages/ui/components/temporary/settings/Settings.tsx
@@ -0,0 +1,112 @@
+import { useState } from "react";
+
+import { makeStyles } from "../../../lib/ThemeProvider";
+import { Divider } from "../../DataDisplay/Divider";
+import { Text } from "../../theme";
+import DashboardLayout from "../DashboardLayout";
+import Organization from "./organization/Organization";
+import PrivacyPreferences from "./privacyPreferences/PrivacyPreferences";
+import SubscriptionSettings from "./subscription/SubscriptionSettings";
+
+const Settings = () => {
+  const [currentSetting, setCurrentSetting] = useState<{ children: React.ReactNode; value: string }>({
+    children: <Organization />,
+    value: "Organization",
+  });
+
+  const { classes, cx } = useStyles();
+
+  return (
+    <DashboardLayout>
+      <div className={classes.wrapper}>
+        <div className={classes.sideBarSection}>
+          <span
+            onClick={() =>
+              setCurrentSetting({
+                children: <Organization />,
+                value: "Organization",
+              })
+            }>
+            <Text
+              typo="body 2"
+              className={
+                currentSetting.value === "Organization" ? classes.selectedSidebarText : classes.SidebarText
+              }>
+              Organization
+            </Text>
+          </span>
+          <Divider width="100%" color="main" className={classes.hr} />
+          <span
+            onClick={() =>
+              setCurrentSetting({
+                children: <SubscriptionSettings />,
+                value: "Subscription",
+              })
+            }>
+            <Text
+              typo="body 2"
+              className={
+                currentSetting.value === "Subscription" ? classes.selectedSidebarText : classes.SidebarText
+              }>
+              Subscription
+            </Text>
+          </span>
+          <Divider width="100%" color="main" className={classes.hr} />
+          <span
+            onClick={() =>
+              setCurrentSetting({
+                children: <PrivacyPreferences />,
+                value: "Privacy preferences",
+              })
+            }>
+            <Text
+              typo="body 2"
+              className={
+                currentSetting.value === "Privacy preferences"
+                  ? classes.selectedSidebarText
+                  : classes.SidebarText
+              }>
+              Privacy preferences
+            </Text>
+          </span>
+          <Divider width="100%" color="main" className={classes.hr} />
+        </div>
+        <div className={classes.mainSection}>{currentSetting.children}</div>
+      </div>
+    </DashboardLayout>
+  );
+};
+
+const useStyles = makeStyles({ name: { Settings } })((theme) => ({
+  wrapper: {
+    display: "flex",
+    gap: theme.spacing(4),
+  },
+  SidebarText: {
+    // padding: theme.spacing(1) theme.spacing(4),
+    padding: `${theme.spacing(1)}px ${theme.spacing(4)}px`,
+    cursor: "pointer",
+    "&:hover": {
+      backgroundColor: theme.colors.palette[theme.isDarkModeEnabled ? "dark" : "light"].greyVariant2 + "50",
+    },
+  },
+  selectedSidebarText: {
+    padding: `${theme.spacing(1)}px ${theme.spacing(4)}px`,
+    cursor: "pointer",
+    backgroundColor: theme.colors.palette.focus.main + "14",
+  },
+  hr: {
+    margin: `${theme.spacing(1)}px 0`,
+  },
+  mainSection: {
+    flexGrow: "1",
+  },
+  sideBarSection: {
+    minWidth: "268px",
+    "@media (max-width: 1268px)": {
+      minWidth: "168px",
+    },
+  },
+}));
+
+export default Settings;
diff --git a/app/client-v2/packages/ui/components/theme.ts b/app/client-v2/packages/ui/components/theme.ts
index 1d116f655..ed06bafdd 100644
--- a/app/client-v2/packages/ui/components/theme.ts
+++ b/app/client-v2/packages/ui/components/theme.ts
@@ -1,33 +1,50 @@
+import CheckIcon from "@mui/icons-material/Check";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 import CloseIcon from "@mui/icons-material/Close";
 import CorporateFareIcon from "@mui/icons-material/CorporateFare";
+import CreateNewFolderIcon from "@mui/icons-material/CreateNewFolder";
+import DeleteIcon from "@mui/icons-material/Delete";
 import DirectionsBusIcon from "@mui/icons-material/DirectionsBus";
 import DirectionsRunIcon from "@mui/icons-material/DirectionsRun";
+import DownloadIcon from "@mui/icons-material/Download";
+import DriveFileMoveIcon from "@mui/icons-material/DriveFileMove";
+import EditIcon from "@mui/icons-material/Edit";
 import EmailIcon from "@mui/icons-material/Email";
 import ErrorIcon from "@mui/icons-material/Error";
 import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
+import FileCopyIcon from "@mui/icons-material/FileCopy";
 import FilterListIcon from "@mui/icons-material/FilterList";
 import FolderIcon from "@mui/icons-material/Folder";
+import FormatAlignLeftIcon from "@mui/icons-material/FormatAlignLeft";
+import GroupsIcon from "@mui/icons-material/Groups";
 import HelpIcon from "@mui/icons-material/Help";
 import HomeIcon from "@mui/icons-material/Home";
+import InfoIcon from "@mui/icons-material/Info";
 import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile";
 import LocalPhoneIcon from "@mui/icons-material/LocalPhone";
+import LockIcon from "@mui/icons-material/Lock";
+import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
 import MoreVertIcon from "@mui/icons-material/MoreVert";
+import NoteAddIcon from "@mui/icons-material/NoteAdd";
+import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 import PersonIcon from "@mui/icons-material/Person";
 import PowerSettingsNewIcon from "@mui/icons-material/PowerSettingsNew";
+import ReplyIcon from "@mui/icons-material/Reply";
 import RocketLaunchIcon from "@mui/icons-material/RocketLaunch";
 import RoomIcon from "@mui/icons-material/Room";
 import SearchIcon from "@mui/icons-material/Search";
 import SettingsIcon from "@mui/icons-material/Settings";
 import SettingsSuggestIcon from "@mui/icons-material/SettingsSuggest";
+import ViewModuleIcon from "@mui/icons-material/ViewModule";
+import VisibilityIcon from "@mui/icons-material/Visibility";
 import type { Param0 } from "tsafe";
 
 import "../assets/fonts/mulish/font.css";
 import { createButton } from "../components/Button";
-import { createIcon } from "../components/Icon/Icon";
-import { createIconButton } from "../components/Icon/IconButton";
-import { createText } from "../components/Text";
 import { createThemeProvider, defaultGetTypographyDesc } from "../lib";
+import { createIcon } from "./DataDisplay/Icon";
+import { createIconButton } from "./DataDisplay/IconButton";
+import { createText } from "./DataDisplay/Text";
 
 export const { ThemeProvider, StoryProvider, useTheme } = createThemeProvider({
   isReactStrictModeEnabled: false,
@@ -53,6 +70,7 @@ export const { Icon } = createIcon({
   folder: FolderIcon,
   settings: SettingsIcon,
   moreVert: MoreVertIcon,
+  moreHorizontal: MoreHorizIcon,
   warn: ErrorIcon,
   warnOutlined: ErrorOutlineIcon,
   check: CheckCircleIcon,
@@ -61,6 +79,22 @@ export const { Icon } = createIcon({
   settingsSuggested: SettingsSuggestIcon,
   phone: LocalPhoneIcon,
   marker: RoomIcon,
+  viewModul: ViewModuleIcon,
+  formatLeft: FormatAlignLeftIcon,
+  newFolder: CreateNewFolderIcon,
+  newFile: NoteAddIcon,
+  edit: EditIcon,
+  open: OpenInNewIcon,
+  noBgCheck: CheckIcon,
+  view: VisibilityIcon,
+  info: InfoIcon,
+  duplicate: FileCopyIcon,
+  moveFile: DriveFileMoveIcon,
+  delete: DeleteIcon,
+  reply: ReplyIcon,
+  download: DownloadIcon,
+  lock: LockIcon,
+  team: GroupsIcon,
 });
 
 export type IconId = Param0<typeof Icon>["iconId"];
diff --git a/app/client-v2/packages/ui/lib/color.ts b/app/client-v2/packages/ui/lib/color.ts
index 4c313eab7..58742e2d0 100644
--- a/app/client-v2/packages/ui/lib/color.ts
+++ b/app/client-v2/packages/ui/lib/color.ts
@@ -17,21 +17,22 @@ export type CreateColorUseCase<
 export const defaultPalette = {
   focus: {
     main: "#2BB381",
-    light: "#2BB381",
+    light: "#80D1B3",
     light2: "#60D3A2",
+    dark: "#1A6B4D",
   },
   dark: {
     main: "#283648",
-    light: "#314157",
-    greyVariant1: "#1c2b3b",
+    light: "#647183",
+    greyVariant1: "#18202B",
     greyVariant2: "#1E2F41",
     greyVariant3: "#425066",
     greyVariant4: "#6A7C91",
   },
   light: {
-    main: "#F8F7F3",
-    light: "#FDFDFC",
-    greyVariant1: "#E6E6E6",
+    main: "#FAFAFA",
+    light: "#fafafa",
+    greyVariant1: "#f2f2f3",
     greyVariant2: "#C9C9C9",
     greyVariant3: "#9E9E9E",
     greyVariant4: "#747474",
@@ -41,7 +42,7 @@ export const defaultPalette = {
     light: "#FEECEB",
   },
   greenSuccess: {
-    main: "#29CC2F",
+    main: "#2E7D32",
     light: "#EEFAEE",
   },
   orangeWarning: {
@@ -134,6 +135,7 @@ export function createMuiPaletteOptions(params: {
     primary: {
       main: palette.focus[isDarkModeEnabled ? "light" : "main"],
       light: palette.focus.light2,
+      dark: palette.focus.dark,
     },
     secondary: {
       main: useCases.typography.textPrimary,
diff --git a/app/client-v2/packages/ui/lib/shadows.ts b/app/client-v2/packages/ui/lib/shadows.ts
index 3018b6565..4564a5664 100644
--- a/app/client-v2/packages/ui/lib/shadows.ts
+++ b/app/client-v2/packages/ui/lib/shadows.ts
@@ -14,4 +14,6 @@ export const shadows = [
   "0px 6px 10px 0px rgba(0,0,0,0.14)",
   /** Dialog **/
   "0px 8px 10px -7px rgba(0,0,0,0.07)",
+  /** Card Sections */
+  "0px 2px 4px -1px #0000001F",
 ] as const;
diff --git a/app/client-v2/packages/ui/lib/spacing.ts b/app/client-v2/packages/ui/lib/spacing.ts
index 6c12aa5b5..2e52c787b 100644
--- a/app/client-v2/packages/ui/lib/spacing.ts
+++ b/app/client-v2/packages/ui/lib/spacing.ts
@@ -51,15 +51,15 @@ export const defaultSpacingConfig: SpacingConfig = ({ factorOrExplicitNumberOfPx
         case 1:
           return 0.25;
         case 2:
-          return 0.25;
-        case 3:
           return 0.5;
-        case 4:
+        case 3:
           return 1;
+        case 4:
+          return 1.5;
         case 5:
-          return 1;
+          return 2;
         case 6:
-          return 1.5;
+          return 2.875;
       }
 
       assert(false);
diff --git a/app/client-v2/packages/ui/lib/typography.ts b/app/client-v2/packages/ui/lib/typography.ts
index 8ae7bbc46..bd52a0f0a 100644
--- a/app/client-v2/packages/ui/lib/typography.ts
+++ b/app/client-v2/packages/ui/lib/typography.ts
@@ -106,8 +106,8 @@ export const defaultGetTypographyDesc: GetTypographyDesc<never> = () => ({
       fontWeight: id<TypographyDesc.FontWeightProperty>("normal"),
       ...(() => {
         return {
-          fontSizeRem: 1.75,
-          lineHeightRem: 2.25,
+          fontSizeRem: 1.25,
+          lineHeightRem: 1.475,
         };
       })(),
     },
@@ -166,8 +166,8 @@ export const defaultGetTypographyDesc: GetTypographyDesc<never> = () => ({
       fontWeight: id<TypographyDesc.FontWeightProperty>("normal"),
       ...(() => {
         return {
-          fontSizeRem: 1.063,
-          lineHeightRem: 1.625,
+          fontSizeRem: 1,
+          lineHeightRem: 1.313,
         };
       })(),
     },
@@ -176,8 +176,8 @@ export const defaultGetTypographyDesc: GetTypographyDesc<never> = () => ({
       fontWeight: id<TypographyDesc.FontWeightProperty>("normal"),
       ...(() => {
         return {
-          fontSizeRem: 1,
-          lineHeightRem: 1.5,
+          fontSizeRem: 0.875,
+          lineHeightRem: 1.125,
         };
       })(),
     },
@@ -186,8 +186,8 @@ export const defaultGetTypographyDesc: GetTypographyDesc<never> = () => ({
       fontWeight: "normal",
       ...(() => {
         return {
-          fontSizeRem: 0.875,
-          lineHeightRem: 1.313,
+          fontSizeRem: 0.688,
+          lineHeightRem: 0.69,
         };
       })(),
     },
diff --git a/app/client-v2/packages/ui/package.json b/app/client-v2/packages/ui/package.json
index d7b14d8f5..6ea66f8ed 100644
--- a/app/client-v2/packages/ui/package.json
+++ b/app/client-v2/packages/ui/package.json
@@ -16,15 +16,23 @@
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.11.16",
+    "@mui/lab": "5.0.0-alpha.132",
     "@mui/material": "^5.13.0",
+    "@mui/utils": "^5.13.7",
     "@mui/x-data-grid": "^6.7.0",
+    "@mui/x-date-pickers": "^6.9.2",
+    "@reduxjs/toolkit": "^1.9.5",
+    "@types/react-swipeable-views": "^0.13.2",
+    "@types/react-swipeable-views-utils": "^0.13.4",
     "color": "^4.2.3",
     "config": "^3.3.9",
+    "dayjs": "^1.11.9",
     "evt": "^2.4.15",
     "memoizee": "^0.4.15",
     "minimal-polyfills": "^2.2.2",
     "powerhooks": "^0.26.8",
     "react": "^18.2.0",
+    "react-redux": "^8.1.1",
     "react-swipeable-views": "^0.14.0",
     "react-swipeable-views-utils": "^0.14.0",
     "run-exclusive": "^2.2.18",
diff --git a/app/client-v2/packages/ui/stories/components/CircularProgress.stories.tsx b/app/client-v2/packages/ui/stories/components/CircularProgress.stories.tsx
index 299622b61..c3c8c4864 100644
--- a/app/client-v2/packages/ui/stories/components/CircularProgress.stories.tsx
+++ b/app/client-v2/packages/ui/stories/components/CircularProgress.stories.tsx
@@ -42,3 +42,10 @@ export const Secondary: Story = {
     color: "textPrimary",
   },
 };
+
+export const CustomSize: Story = {
+  args: {
+    color: "primary",
+    size: 20,
+  },
+};
diff --git a/app/client-v2/packages/ui/stories/components/ContentManagement.stories.tsx b/app/client-v2/packages/ui/stories/components/ContentManagement.stories.tsx
new file mode 100644
index 000000000..48fb13845
--- /dev/null
+++ b/app/client-v2/packages/ui/stories/components/ContentManagement.stories.tsx
@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from "@storybook/react/dist";
+
+import ContentManagement from "../../components/temporary/contentManagement/ContentManagement";
+import { ThemeProvider } from "../theme";
+
+const meta: Meta<typeof ContentManagement> = {
+  component: ContentManagement,
+  tags: ["autodocs"],
+  title: "Pages/Dashboard/ContentManagement",
+  argTypes: {},
+  decorators: [
+    (Story) => (
+      <ThemeProvider>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof ContentManagement>;
+
+export const Warning: Story = {
+  args: {},
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?node-id=12355%3A135723&mode=dev",
+    },
+  },
+};
diff --git a/app/client-v2/packages/ui/stories/components/Data Display/Chip.stories.tsx b/app/client-v2/packages/ui/stories/components/Data Display/Chip.stories.tsx
new file mode 100644
index 000000000..49cef8ed0
--- /dev/null
+++ b/app/client-v2/packages/ui/stories/components/Data Display/Chip.stories.tsx	
@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from "@storybook/react/dist";
+
+import { Chip } from "../../../components/DataDisplay";
+import { ThemeProvider } from "../../theme";
+
+const meta: Meta<typeof Chip> = {
+  component: Chip,
+  tags: ["autodocs"],
+  argTypes: {},
+  args: {},
+  decorators: [
+    (Story) => (
+      <ThemeProvider>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof Chip>;
+
+export const Filled: Story = {
+  args: {
+    label: "Filled",
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?type=design&node-id=10520-71026&t=wp26gbfVi2Dqh0qt-0",
+    },
+  },
+};
+
+export const FilledWithBorder: Story = {
+  args: {
+    label: "Filled",
+    variant: "filledWithBorder",
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?type=design&node-id=10520-71026&t=wp26gbfVi2Dqh0qt-0",
+    },
+  },
+};
+
+export const Bordered: Story = {
+  args: {
+    label: "Bordered",
+    variant: "Border",
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?type=design&node-id=10520-71026&t=wp26gbfVi2Dqh0qt-0",
+    },
+  },
+};
+
+export const BorderedItalic: Story = {
+  args: {
+    label: "Italic",
+    variant: "Border",
+    textDesign: "italic",
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?type=design&node-id=10520-71026&t=wp26gbfVi2Dqh0qt-0",
+    },
+  },
+};
+
+export const FilledNormal: Story = {
+  args: {
+    label: "Normal",
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?type=design&node-id=10520-71026&t=wp26gbfVi2Dqh0qt-0",
+    },
+  },
+};
diff --git a/app/client-v2/packages/ui/stories/components/Divider.stories.tsx b/app/client-v2/packages/ui/stories/components/Data Display/Divider.stories.tsx
similarity index 82%
rename from app/client-v2/packages/ui/stories/components/Divider.stories.tsx
rename to app/client-v2/packages/ui/stories/components/Data Display/Divider.stories.tsx
index 3c3e28e0e..7b876f8b4 100644
--- a/app/client-v2/packages/ui/stories/components/Divider.stories.tsx
+++ b/app/client-v2/packages/ui/stories/components/Data Display/Divider.stories.tsx	
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react/dist";
 
-import { Divider } from "../../components/Divider";
-import { ThemeProvider } from "../theme";
+import { Divider } from "../../../components/DataDisplay/Divider";
+import { ThemeProvider } from "../../theme";
 
 const meta: Meta<typeof Divider> = {
   component: Divider,
@@ -39,7 +39,7 @@ export const Warning: Story = {
   parameters: {
     design: {
       type: "figma",
-      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?type=design&node-id=6595-48211&t=m1TtlHDKRmJk5wCK-0",
+      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?node-id=6589%3A48662&mode=dev",
     },
   },
 };
diff --git a/app/client-v2/packages/ui/stories/components/Icon Components/Icon.stories.tsx b/app/client-v2/packages/ui/stories/components/Data Display/Icon.stories.tsx
similarity index 100%
rename from app/client-v2/packages/ui/stories/components/Icon Components/Icon.stories.tsx
rename to app/client-v2/packages/ui/stories/components/Data Display/Icon.stories.tsx
diff --git a/app/client-v2/packages/ui/stories/components/Icon Components/IconButton.stories.tsx b/app/client-v2/packages/ui/stories/components/Data Display/IconButton.stories.tsx
similarity index 100%
rename from app/client-v2/packages/ui/stories/components/Icon Components/IconButton.stories.tsx
rename to app/client-v2/packages/ui/stories/components/Data Display/IconButton.stories.tsx
diff --git a/app/client-v2/packages/ui/stories/components/Data Display/Table.stories.tsx b/app/client-v2/packages/ui/stories/components/Data Display/Table.stories.tsx
new file mode 100644
index 000000000..d4b4a79e0
--- /dev/null
+++ b/app/client-v2/packages/ui/stories/components/Data Display/Table.stories.tsx	
@@ -0,0 +1,561 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { EnhancedTable, Chip, FileManagementTable } from "../../../components/DataDisplay";
+import Table from "../../../components/DataDisplay/Table";
+import { ThemeProvider } from "../../theme";
+import { Icon } from "../../theme";
+
+// import { EnhancedTable } from '../../../components/DataDisplay/EnhancedTable';
+
+const meta: Meta<typeof Table> = {
+  component: Table,
+  tags: ["autodocs"],
+  argTypes: {},
+  decorators: [
+    (Story) => (
+      <ThemeProvider>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof Table>;
+
+export const SimpleTable: Story = {
+  args: {
+    columnNames: ["Name", "E-mail", "Role", "Status", "Added"],
+    rows: [
+      {
+        name: "John William Silva",
+        email: "john.wloremipsum@gmail.com",
+        role: "Admin",
+        status: "Active",
+        Added: "23 Jun 19",
+      },
+      {
+        name: "John William Silva",
+        email: "john.wloremipsum@gmail.com",
+        role: "Admin",
+        status: "Active",
+        Added: "23 Jun 19",
+      },
+      {
+        name: "John William Silva",
+        email: "john.wloremipsum@gmail.com",
+        role: "Admin",
+        status: "Active",
+        Added: "23 Jun 19",
+      },
+      {
+        name: "John William Silva",
+        email: "john.wloremipsum@gmail.com",
+        role: "Admin",
+        status: "Active",
+        Added: "23 Jun 19",
+      },
+      {
+        name: "John William Silva",
+        email: "john.wloremipsum@gmail.com",
+        role: "Admin",
+        status: "Active",
+        Added: "23 Jun 19",
+      },
+      {
+        name: "John William Silva",
+        email: "john.wloremipsum@gmail.com",
+        role: "Admin",
+        status: "Active",
+        Added: "23 Jun 19",
+      },
+    ],
+  },
+};
+
+export const EnhancedTableSimple: Story = () => {
+  return (
+    <EnhancedTable
+      columnNames={[
+        {
+          id: "name",
+          label: "Name",
+          numeric: false,
+        },
+        {
+          id: "email",
+          label: "Email",
+          numeric: false,
+        },
+        {
+          id: "role",
+          label: "Role",
+          numeric: false,
+        },
+        {
+          id: "status",
+          label: "Status",
+          numeric: false,
+        },
+        {
+          id: "added",
+          label: "Added",
+          numeric: false,
+        },
+      ]}
+      rows={[
+        {
+          name: "Luca William Silva",
+          email: "john.wloremipsum@gmail.com",
+          role: "Admin",
+          status: "Active",
+          Added: "23 Jun 19",
+        },
+        {
+          name: "Fenix William Silva",
+          email: "john.wloremipsum@gmail.com",
+          role: "Admin",
+          status: "Active",
+          Added: "23 Jun 19",
+        },
+        {
+          name: "Adam William Silva",
+          email: "john.wloremipsum@gmail.com",
+          role: "Admin",
+          status: "Active",
+          Added: "23 Jun 19",
+        },
+        {
+          name: "John William Silva",
+          email: "john.wloremipsum@gmail.com",
+          role: "Admin",
+          status: "Active",
+          Added: "23 Jun 19",
+        },
+        {
+          name: "John William Silva",
+          email: "john.wloremipsum@gmail.com",
+          role: "Admin",
+          status: "Active",
+          Added: "23 Jun 19",
+        },
+        {
+          name: "John William Silva",
+          email: "john.wloremipsum@gmail.com",
+          role: "Admin",
+          status: "Active",
+          Added: "23 Jun 19",
+        },
+      ]}
+      dense={false}
+      alternativeColors={true}
+    />
+  );
+};
+
+EnhancedTableSimple.args = {};
+EnhancedTableSimple.parameters = {
+  design: {
+    type: "figma",
+    url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?node-id=6594%3A46294&mode=dev",
+  },
+};
+
+export const EnhancedTableWithoutCheckbox: Story = () => {
+  return (
+    <EnhancedTable
+      columnNames={[
+        {
+          id: "name",
+          label: "Name",
+          numeric: false,
+        },
+        {
+          id: "email",
+          label: "Email",
+          numeric: false,
+        },
+        {
+          id: "role",
+          label: "Role",
+          numeric: false,
+        },
+        {
+          id: "status",
+          label: "Status",
+          numeric: false,
+        },
+        {
+          id: "added",
+          label: "Added",
+          numeric: false,
+        },
+      ]}
+      rows={[
+        {
+          name: "Luca William Silva",
+          email: "john.wloremipsum@gmail.com",
+          role: "Admin",
+          status: "Active",
+          Added: "23 Jun 19",
+        },
+        {
+          name: "Fenix William Silva",
+          email: "john.wloremipsum@gmail.com",
+          role: "Admin",
+          status: "Active",
+          Added: "23 Jun 19",
+        },
+        {
+          name: "Adam William Silva",
+          email: "john.wloremipsum@gmail.com",
+          role: "Admin",
+          status: "Active",
+          Added: "23 Jun 19",
+        },
+        {
+          name: "John William Silva",
+          email: "john.wloremipsum@gmail.com",
+          role: "Admin",
+          status: "Active",
+          Added: "23 Jun 19",
+        },
+        {
+          name: "John William Silva",
+          email: "john.wloremipsum@gmail.com",
+          role: "Admin",
+          status: "Active",
+          Added: "23 Jun 19",
+        },
+        {
+          name: "John William Silva",
+          email: "john.wloremipsum@gmail.com",
+          role: "Admin",
+          status: "Active",
+          Added: "23 Jun 19",
+        },
+      ]}
+      dense={false}
+      alternativeColors={true}
+      checkbox={false}
+    />
+  );
+};
+
+EnhancedTableWithoutCheckbox.args = {};
+EnhancedTableWithoutCheckbox.parameters = {
+  design: {
+    type: "figma",
+    url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?node-id=6594%3A46294&mode=dev",
+  },
+};
+
+export const EnhancedTableWithoutMoreButton: Story = () => {
+  return (
+    <EnhancedTable
+      columnNames={[
+        {
+          id: "name",
+          label: "Name",
+          numeric: false,
+        },
+        {
+          id: "email",
+          label: "Email",
+          numeric: false,
+        },
+        {
+          id: "role",
+          label: "Role",
+          numeric: false,
+        },
+        {
+          id: "status",
+          label: "Status",
+          numeric: false,
+        },
+        {
+          id: "added",
+          label: "Added",
+          numeric: false,
+        },
+      ]}
+      rows={[
+        {
+          name: "Luca William Silva",
+          email: "john.wloremipsum@gmail.com",
+          role: "Admin",
+          status: "Active",
+          Added: "23 Jun 19",
+        },
+        {
+          name: "Fenix William Silva",
+          email: "john.wloremipsum@gmail.com",
+          role: "Admin",
+          status: "Active",
+          Added: "23 Jun 19",
+        },
+        {
+          name: "Adam William Silva",
+          email: "john.wloremipsum@gmail.com",
+          role: "Admin",
+          status: "Active",
+          Added: "23 Jun 19",
+        },
+        {
+          name: "John William Silva",
+          email: "john.wloremipsum@gmail.com",
+          role: "Admin",
+          status: "Active",
+          Added: "23 Jun 19",
+        },
+        {
+          name: "John William Silva",
+          email: "john.wloremipsum@gmail.com",
+          role: "Admin",
+          status: "Active",
+          Added: "23 Jun 19",
+        },
+        {
+          name: "John William Silva",
+          email: "john.wloremipsum@gmail.com",
+          role: "Admin",
+          status: "Active",
+          Added: "23 Jun 19",
+        },
+      ]}
+      dense={false}
+      alternativeColors={true}
+      more={false}
+    />
+  );
+};
+
+EnhancedTableWithoutMoreButton.args = {};
+EnhancedTableWithoutMoreButton.parameters = {
+  design: {
+    type: "figma",
+    url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?node-id=6594%3A46294&mode=dev",
+  },
+};
+
+export const EnhancedTableWithoutCheckboxesAndMoreButton: Story = () => {
+  return (
+    <EnhancedTable
+      columnNames={[
+        {
+          id: "name",
+          label: "Name",
+          numeric: false,
+        },
+        {
+          id: "email",
+          label: "Email",
+          numeric: false,
+        },
+        {
+          id: "role",
+          label: "Role",
+          numeric: false,
+        },
+        {
+          id: "status",
+          label: "Status",
+          numeric: false,
+        },
+        {
+          id: "added",
+          label: "Added",
+          numeric: false,
+        },
+      ]}
+      rows={[
+        {
+          name: "Luca William Silva",
+          email: "john.wloremipsum@gmail.com",
+          role: "Admin",
+          status: "Active",
+          Added: "23 Jun 19",
+        },
+        {
+          name: "Fenix William Silva",
+          email: "john.wloremipsum@gmail.com",
+          role: "Admin",
+          status: "Active",
+          Added: "23 Jun 19",
+        },
+        {
+          name: "Adam William Silva",
+          email: "john.wloremipsum@gmail.com",
+          role: "Admin",
+          status: "Active",
+          Added: "23 Jun 19",
+        },
+        {
+          name: "John William Silva",
+          email: "john.wloremipsum@gmail.com",
+          role: "Admin",
+          status: "Active",
+          Added: "23 Jun 19",
+        },
+        {
+          name: "John William Silva",
+          email: "john.wloremipsum@gmail.com",
+          role: "Admin",
+          status: "Active",
+          Added: "23 Jun 19",
+        },
+        {
+          name: "John William Silva",
+          email: "john.wloremipsum@gmail.com",
+          role: "Admin",
+          status: "Active",
+          Added: "23 Jun 19",
+        },
+      ]}
+      dense={false}
+      alternativeColors={true}
+      more={false}
+      checkbox={false}
+    />
+  );
+};
+
+EnhancedTableWithoutCheckboxesAndMoreButton.args = {};
+EnhancedTableWithoutCheckboxesAndMoreButton.parameters = {
+  design: {
+    type: "figma",
+    url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?node-id=6594%3A46294&mode=dev",
+  },
+};
+
+export const TableForFileManagement: Story = () => {
+  const rows = [
+    {
+      name: (
+        <span style={{ display: "flex", gap: "8px" }}>
+          <span style={{ opacity: 0.5 }}>
+            <Icon iconId="folder" />
+          </span>
+          Actions_files
+        </span>
+      ),
+      type: <Chip label="Layer" textDesign="italic" variant="Border" />,
+      modified: "23 Jun 19",
+      size: "30 kb",
+    },
+    {
+      name: "Project_XYZ_Conclusion",
+      type: <Chip label="Project" textDesign="italic" variant="Border" />,
+      modified: "23 Jun 19",
+      size: "30 kb",
+    },
+    {
+      name: "Data_Analysis_2023_Q1",
+      type: <Chip label="Image" textDesign="italic" variant="Border" />,
+      modified: "23 Jun 19",
+      size: "30 kb",
+    },
+    {
+      name: "Experiment_Results_Phase2",
+      type: <Chip label="Report" textDesign="italic" variant="Border" />,
+      modified: "23 Jun 19",
+      size: "30 kb",
+    },
+    {
+      name: "Report_Final_Version",
+      type: <Chip label="Layer" textDesign="italic" variant="Border" />,
+      modified: "23 Jun 19",
+      size: "30 kb",
+    },
+    {
+      name: "Project_XYZ_Conclusion",
+      type: <Chip label="Project" textDesign="italic" variant="Border" />,
+      modified: "23 Jun 19",
+      size: "30 kb",
+    },
+    {
+      name: "Data_Analysis_2023_Q1",
+      type: <Chip label="Image" textDesign="italic" variant="Border" />,
+      modified: "23 Jun 19",
+      size: "30 kb",
+    },
+    {
+      name: "Experiment_Results_Phase2",
+      type: <Chip label="Report" textDesign="italic" variant="Border" />,
+      modified: "23 Jun 19",
+      size: "30 kb",
+    },
+    {
+      name: "Report_Final_Version",
+      type: <Chip label="Layer" textDesign="italic" variant="Border" />,
+      modified: "23 Jun 19",
+      size: "30 kb",
+    },
+    {
+      name: "Project_XYZ_Conclusion",
+      type: <Chip label="Project" textDesign="italic" variant="Border" />,
+      modified: "23 Jun 19",
+      size: "30 kb",
+    },
+    {
+      name: "Data_Analysis_2023_Q1",
+      type: <Chip label="Image" textDesign="italic" variant="Border" />,
+      modified: "23 Jun 19",
+      size: "30 kb",
+    },
+    {
+      name: "Experiment_Results_Phase2",
+      type: <Chip label="Report" textDesign="italic" variant="Border" />,
+      modified: "23 Jun 19",
+      size: "30 kb",
+    },
+  ];
+
+  const columnNames = [
+    {
+      id: "name",
+      label: "Name",
+      numeric: false,
+    },
+    {
+      id: "type",
+      label: "Type",
+      numeric: false,
+    },
+    {
+      id: "modified",
+      label: "Modified",
+      numeric: false,
+    },
+    {
+      id: "size",
+      label: "Size",
+      numeric: false,
+    },
+  ];
+
+  let currPath = ["home"];
+
+  function setPath(value: string[]) {
+    currPath = value;
+  }
+
+  return (
+    <FileManagementTable
+      currPath={currPath}
+      setPath={setPath}
+      hover={true}
+      columnNames={columnNames}
+      rows={rows}
+    />
+  );
+};
+
+TableForFileManagement.args = {};
+TableForFileManagement.parameters = {
+  design: {
+    type: "figma",
+    url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?node-id=6594%3A46294&mode=dev",
+  },
+};
diff --git a/app/client-v2/packages/ui/stories/components/Text Component/Text.stories.tsx b/app/client-v2/packages/ui/stories/components/Data Display/Text.stories.tsx
similarity index 100%
rename from app/client-v2/packages/ui/stories/components/Text Component/Text.stories.tsx
rename to app/client-v2/packages/ui/stories/components/Data Display/Text.stories.tsx
diff --git a/app/client-v2/packages/ui/stories/components/Tooltip.stories.tsx b/app/client-v2/packages/ui/stories/components/Data Display/Tooltip.stories.tsx
similarity index 90%
rename from app/client-v2/packages/ui/stories/components/Tooltip.stories.tsx
rename to app/client-v2/packages/ui/stories/components/Data Display/Tooltip.stories.tsx
index e537b11e3..95ffcd551 100644
--- a/app/client-v2/packages/ui/stories/components/Tooltip.stories.tsx
+++ b/app/client-v2/packages/ui/stories/components/Data Display/Tooltip.stories.tsx	
@@ -1,8 +1,8 @@
 import { Typography } from "@mui/material";
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Tooltip } from "../../components/Tooltip";
-import { ThemeProvider } from "../theme";
+import { Tooltip } from "../../../components/DataDisplay";
+import { ThemeProvider } from "../../theme";
 
 const meta: Meta<typeof Tooltip> = {
   component: Tooltip,
diff --git a/app/client-v2/packages/ui/stories/components/Data Display/TreeView.stories.tsx b/app/client-v2/packages/ui/stories/components/Data Display/TreeView.stories.tsx
new file mode 100644
index 000000000..b62c13764
--- /dev/null
+++ b/app/client-v2/packages/ui/stories/components/Data Display/TreeView.stories.tsx	
@@ -0,0 +1,155 @@
+import type { Meta, StoryObj } from "@storybook/react/dist";
+
+import { TreeViewWithCheckboxes } from "../../../components/DataDisplay";
+import { TreeView } from "../../../components/DataDisplay";
+import { makeStyles } from "../../../lib/ThemeProvider";
+import { ThemeProvider } from "../../theme";
+import { Icon } from "../../theme";
+
+const meta: Meta<typeof TreeViewWithCheckboxes> = {
+  component: TreeViewWithCheckboxes,
+  tags: ["autodocs"],
+  argTypes: {},
+  decorators: [
+    (Story) => (
+      <ThemeProvider>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof TreeViewWithCheckboxes>;
+
+export const BasicTreeView: Story = () => {
+  const treeData = [
+    {
+      id: "root",
+      name: "Parent",
+      children: [
+        {
+          id: "1",
+          name: "Child - 1",
+        },
+        {
+          id: "3",
+          name: "Child - 3",
+          children: [
+            {
+              id: "4",
+              name: "Child - 4",
+            },
+          ],
+        },
+      ],
+    },
+  ];
+
+  return <TreeView nodes={treeData} />;
+};
+
+export const FileTreeView: Story = () => {
+  const { classes } = useStyles();
+
+  const treeData = [
+    {
+      id: "node_1",
+      name: (
+        <div className={classes.folder}>
+          <Icon iconId="folder" />
+          Report_Final_Version
+        </div>
+      ),
+    },
+    {
+      id: "node_2",
+      name: (
+        <div className={classes.folder}>
+          <Icon iconId="folder" />
+          plan_4_better
+        </div>
+      ),
+    },
+    {
+      id: "node_3",
+      name: (
+        <div className={classes.folder}>
+          <Icon iconId="folder" />
+          example_proj
+        </div>
+      ),
+      children: [
+        {
+          id: "node_3_1",
+          name: (
+            <div className={classes.folder}>
+              <Icon iconId="folder" />
+              april_2023
+            </div>
+          ),
+        },
+      ],
+    },
+  ];
+
+  return <TreeView nodes={treeData} />;
+};
+
+BasicTreeView.args = {};
+FileTreeView.args = {};
+
+export const TheTreeViewWithCheckboxes: Story = {
+  args: {
+    treeData: [
+      {
+        id: "node1",
+        name: "Node 1",
+        children: [
+          {
+            id: "node1-1",
+            name: "Node 1.1",
+          },
+          {
+            id: "node1-2",
+            name: "Node 1.2",
+          },
+        ],
+      },
+      {
+        id: "node2",
+        name: "Node 2",
+      },
+      {
+        id: "node3",
+        name: "Node 3",
+        children: [
+          {
+            id: "node3-1",
+            name: "Node 3.1",
+            children: [
+              {
+                id: "node3-1-1",
+                name: "Node 3.1.1",
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?node-id=6601%3A51109&mode=dev",
+    },
+  },
+};
+
+const useStyles = makeStyles({ name: { TreeView } })((theme) => ({
+  folder: {
+    display: "flex",
+    gap: theme.spacing(2),
+    padding: `6px 0px`,
+  },
+}));
diff --git a/app/client-v2/packages/ui/stories/components/Dialog.stories.tsx b/app/client-v2/packages/ui/stories/components/Dialog.stories.tsx
index 6fe6882f6..ec6e4e6ca 100644
--- a/app/client-v2/packages/ui/stories/components/Dialog.stories.tsx
+++ b/app/client-v2/packages/ui/stories/components/Dialog.stories.tsx
@@ -108,3 +108,16 @@ export const DialogOnRight: Story = () => {
 
 DialogOnLeft.args = {};
 DialogOnRight.args = {};
+
+DialogOnLeft.parameters = {
+  design: {
+    type: "figma",
+    url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?node-id=6586%3A47137&mode=dev",
+  },
+};
+DialogOnRight.parameters = {
+  design: {
+    type: "figma",
+    url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?node-id=6586%3A47137&mode=dev",
+  },
+};
diff --git a/app/client-v2/packages/ui/stories/components/DropFieldFileInput.stories.tsx b/app/client-v2/packages/ui/stories/components/DropFieldFileInput.stories.tsx
new file mode 100644
index 000000000..b2f17d6fe
--- /dev/null
+++ b/app/client-v2/packages/ui/stories/components/DropFieldFileInput.stories.tsx
@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import DropFieldFileInput from "../../components/DropFieldFileInput";
+import { ThemeProvider } from "../theme";
+
+const meta: Meta<typeof DropFieldFileInput> = {
+  component: DropFieldFileInput,
+  tags: ["autodocs"],
+  argTypes: {},
+  decorators: [
+    (Story) => (
+      <ThemeProvider>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof DropFieldFileInput>;
+
+export const Primary: Story = {
+  args: {},
+};
diff --git a/app/client-v2/packages/ui/stories/components/EnhancedTable.stories.tsx b/app/client-v2/packages/ui/stories/components/EnhancedTable.stories.tsx
deleted file mode 100644
index 36d8f14e5..000000000
--- a/app/client-v2/packages/ui/stories/components/EnhancedTable.stories.tsx
+++ /dev/null
@@ -1,328 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-
-import EnhancedTable from "../../components/EnhancedTable";
-import { ThemeProvider } from "../theme";
-
-const meta: Meta<typeof EnhancedTable> = {
-  component: EnhancedTable,
-  tags: ["autodocs"],
-  argTypes: {},
-  decorators: [
-    (Story) => (
-      <ThemeProvider>
-        <Story />
-      </ThemeProvider>
-    ),
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof EnhancedTable>;
-
-export const EnhancedTableFullOption: Story = {
-  args: {
-    columnNames: [
-      {
-        id: "name",
-        numeric: false,
-        label: "Name",
-      },
-      {
-        id: "email",
-        numeric: false,
-        label: "Email",
-      },
-      {
-        id: "role",
-        numeric: false,
-        label: "Role",
-      },
-      {
-        id: "status",
-        numeric: false,
-        label: "Status",
-      },
-      {
-        id: "added",
-        numeric: false,
-        label: "Added",
-      },
-    ],
-    rows: [
-      {
-        name: "Luca William Silva",
-        email: "john.wloremipsum@gmail.com",
-        role: "Admin",
-        status: "Active",
-        Added: "23 Jun 19",
-      },
-      {
-        name: "Fenix William Silva",
-        email: "john.wloremipsum@gmail.com",
-        role: "Admin",
-        status: "Active",
-        Added: "23 Jun 19",
-      },
-      {
-        name: "Adam William Silva",
-        email: "john.wloremipsum@gmail.com",
-        role: "Admin",
-        status: "Active",
-        Added: "23 Jun 19",
-      },
-      {
-        name: "John William Silva",
-        email: "john.wloremipsum@gmail.com",
-        role: "Admin",
-        status: "Active",
-        Added: "23 Jun 19",
-      },
-      {
-        name: "John William Silva",
-        email: "john.wloremipsum@gmail.com",
-        role: "Admin",
-        status: "Active",
-        Added: "23 Jun 19",
-      },
-      {
-        name: "John William Silva",
-        email: "john.wloremipsum@gmail.com",
-        role: "Admin",
-        status: "Active",
-        Added: "23 Jun 19",
-      },
-    ],
-  },
-};
-
-export const EnhancedTableWithoutCheckbox: Story = {
-  args: {
-    checkbox: false,
-    columnNames: [
-      {
-        id: "name",
-        numeric: false,
-        label: "Name",
-      },
-      {
-        id: "email",
-        numeric: false,
-        label: "Email",
-      },
-      {
-        id: "role",
-        numeric: false,
-        label: "Role",
-      },
-      {
-        id: "status",
-        numeric: false,
-        label: "Status",
-      },
-      {
-        id: "added",
-        numeric: false,
-        label: "Added",
-      },
-    ],
-    rows: [
-      {
-        name: "Luca William Silva",
-        email: "john.wloremipsum@gmail.com",
-        role: "Admin",
-        status: "Active",
-        Added: "23 Jun 19",
-      },
-      {
-        name: "Fenix William Silva",
-        email: "john.wloremipsum@gmail.com",
-        role: "Admin",
-        status: "Active",
-        Added: "23 Jun 19",
-      },
-      {
-        name: "Adam William Silva",
-        email: "john.wloremipsum@gmail.com",
-        role: "Admin",
-        status: "Active",
-        Added: "23 Jun 19",
-      },
-      {
-        name: "John William Silva",
-        email: "john.wloremipsum@gmail.com",
-        role: "Admin",
-        status: "Active",
-        Added: "23 Jun 19",
-      },
-      {
-        name: "John William Silva",
-        email: "john.wloremipsum@gmail.com",
-        role: "Admin",
-        status: "Active",
-        Added: "23 Jun 19",
-      },
-      {
-        name: "John William Silva",
-        email: "john.wloremipsum@gmail.com",
-        role: "Admin",
-        status: "Active",
-        Added: "23 Jun 19",
-      },
-    ],
-  },
-};
-
-export const EnhancedTableWithoutMoreIcon: Story = {
-  args: {
-    more: false,
-    columnNames: [
-      {
-        id: "name",
-        numeric: false,
-        label: "Name",
-      },
-      {
-        id: "email",
-        numeric: false,
-        label: "Email",
-      },
-      {
-        id: "role",
-        numeric: false,
-        label: "Role",
-      },
-      {
-        id: "status",
-        numeric: false,
-        label: "Status",
-      },
-      {
-        id: "added",
-        numeric: false,
-        label: "Added",
-      },
-    ],
-    rows: [
-      {
-        name: "Luca William Silva",
-        email: "john.wloremipsum@gmail.com",
-        role: "Admin",
-        status: "Active",
-        Added: "23 Jun 19",
-      },
-      {
-        name: "Fenix William Silva",
-        email: "john.wloremipsum@gmail.com",
-        role: "Admin",
-        status: "Active",
-        Added: "23 Jun 19",
-      },
-      {
-        name: "Adam William Silva",
-        email: "john.wloremipsum@gmail.com",
-        role: "Admin",
-        status: "Active",
-        Added: "23 Jun 19",
-      },
-      {
-        name: "John William Silva",
-        email: "john.wloremipsum@gmail.com",
-        role: "Admin",
-        status: "Active",
-        Added: "23 Jun 19",
-      },
-      {
-        name: "John William Silva",
-        email: "john.wloremipsum@gmail.com",
-        role: "Admin",
-        status: "Active",
-        Added: "23 Jun 19",
-      },
-      {
-        name: "John William Silva",
-        email: "john.wloremipsum@gmail.com",
-        role: "Admin",
-        status: "Active",
-        Added: "23 Jun 19",
-      },
-    ],
-  },
-};
-
-export const EnhancedTableWithoutMoreIconAndCheckbox: Story = {
-  args: {
-    more: false,
-    checkbox: false,
-    columnNames: [
-      {
-        id: "name",
-        numeric: false,
-        label: "Name",
-      },
-      {
-        id: "email",
-        numeric: false,
-        label: "Email",
-      },
-      {
-        id: "role",
-        numeric: false,
-        label: "Role",
-      },
-      {
-        id: "status",
-        numeric: false,
-        label: "Status",
-      },
-      {
-        id: "added",
-        numeric: false,
-        label: "Added",
-      },
-    ],
-    rows: [
-      {
-        name: "Luca William Silva",
-        email: "john.wloremipsum@gmail.com",
-        role: "Admin",
-        status: "Active",
-        Added: "23 Jun 19",
-      },
-      {
-        name: "Fenix William Silva",
-        email: "john.wloremipsum@gmail.com",
-        role: "Admin",
-        status: "Active",
-        Added: "23 Jun 19",
-      },
-      {
-        name: "Adam William Silva",
-        email: "john.wloremipsum@gmail.com",
-        role: "Admin",
-        status: "Active",
-        Added: "23 Jun 19",
-      },
-      {
-        name: "John William Silva",
-        email: "john.wloremipsum@gmail.com",
-        role: "Admin",
-        status: "Active",
-        Added: "23 Jun 19",
-      },
-      {
-        name: "John William Silva",
-        email: "john.wloremipsum@gmail.com",
-        role: "Admin",
-        status: "Active",
-        Added: "23 Jun 19",
-      },
-      {
-        name: "John William Silva",
-        email: "john.wloremipsum@gmail.com",
-        role: "Admin",
-        status: "Active",
-        Added: "23 Jun 19",
-      },
-    ],
-  },
-};
diff --git a/app/client-v2/packages/ui/stories/components/Inputs/DatePicker.stories.tsx b/app/client-v2/packages/ui/stories/components/Inputs/DatePicker.stories.tsx
new file mode 100644
index 000000000..5fc692f3c
--- /dev/null
+++ b/app/client-v2/packages/ui/stories/components/Inputs/DatePicker.stories.tsx
@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from "@storybook/react/dist";
+
+import { DatePicker } from "../../../components/Inputs";
+import { ThemeProvider } from "../../theme";
+
+const meta: Meta<typeof DatePicker> = {
+  component: DatePicker,
+  tags: ["autodocs"],
+  argTypes: {},
+  args: {},
+  decorators: [
+    (Story) => (
+      <ThemeProvider>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof DatePicker>;
+
+export const Small: Story = {
+  args: {
+    size: "small",
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?node-id=6569%3A39888&mode=dev",
+    },
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    size: "medium",
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?node-id=6569%3A39888&mode=dev",
+    },
+  },
+};
diff --git a/app/client-v2/packages/ui/stories/components/Inputs/RadioInput.stories.tsx b/app/client-v2/packages/ui/stories/components/Inputs/RadioInput.stories.tsx
new file mode 100644
index 000000000..33178ce6e
--- /dev/null
+++ b/app/client-v2/packages/ui/stories/components/Inputs/RadioInput.stories.tsx
@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from "@storybook/react/dist";
+
+import { RadioInput } from "../../../components/Inputs";
+import { ThemeProvider } from "../../theme";
+
+const meta: Meta<typeof RadioInput> = {
+  component: RadioInput,
+  tags: ["autodocs"],
+  argTypes: {},
+  args: {},
+  decorators: [
+    (Story) => (
+      <ThemeProvider>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof RadioInput>;
+
+export const Small: Story = {
+  args: {},
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?node-id=6569%3A39888&mode=dev",
+    },
+  },
+};
diff --git a/app/client-v2/packages/ui/stories/components/SelectField.stories.tsx b/app/client-v2/packages/ui/stories/components/Inputs/SelectField.stories.tsx
similarity index 83%
rename from app/client-v2/packages/ui/stories/components/SelectField.stories.tsx
rename to app/client-v2/packages/ui/stories/components/Inputs/SelectField.stories.tsx
index 6242edf9f..f82c321c7 100644
--- a/app/client-v2/packages/ui/stories/components/SelectField.stories.tsx
+++ b/app/client-v2/packages/ui/stories/components/Inputs/SelectField.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react/dist";
 
-import { SelectField } from "../../components/SelectField";
-import { ThemeProvider } from "../theme";
+import { SelectField } from "../../../components/Inputs/SelectField";
+import { ThemeProvider } from "../../theme";
 
 const meta: Meta<typeof SelectField> = {
   component: SelectField,
@@ -34,7 +34,7 @@ export const Small: Story = {
   parameters: {
     design: {
       type: "figma",
-      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?type=design&node-id=11533-159301&t=HR0djJcCsGmFmiKK-0",
+      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?node-id=6569%3A39888&mode=dev",
     },
   },
 };
@@ -52,7 +52,7 @@ export const Medium: Story = {
   parameters: {
     design: {
       type: "figma",
-      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?type=design&node-id=11533-159301&t=HR0djJcCsGmFmiKK-0",
+      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?node-id=6569%3A39888&mode=dev",
     },
   },
 };
diff --git a/app/client-v2/packages/ui/stories/components/Inputs/Switch.stories.tsx b/app/client-v2/packages/ui/stories/components/Inputs/Switch.stories.tsx
new file mode 100644
index 000000000..39e618e0d
--- /dev/null
+++ b/app/client-v2/packages/ui/stories/components/Inputs/Switch.stories.tsx
@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Switch } from "../../../components/Inputs";
+import { ThemeProvider } from "../../theme";
+
+const meta: Meta<typeof Switch> = {
+  component: Switch,
+  tags: ["autodocs"],
+  argTypes: {},
+  decorators: [
+    (Story) => (
+      <ThemeProvider>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof Switch>;
+
+export const SimpleSwitch: Story = {
+  args: {},
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?node-id=6570%3A46740&mode=dev",
+    },
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?node-id=6570%3A46740&mode=dev",
+    },
+  },
+};
+
+export const DefaultChecked: Story = {
+  args: {
+    defaultChecked: true,
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?node-id=6570%3A46740&mode=dev",
+    },
+  },
+};
diff --git a/app/client-v2/packages/ui/stories/components/Text Component/TextField.stories.tsx b/app/client-v2/packages/ui/stories/components/Inputs/TextField.stories.tsx
similarity index 83%
rename from app/client-v2/packages/ui/stories/components/Text Component/TextField.stories.tsx
rename to app/client-v2/packages/ui/stories/components/Inputs/TextField.stories.tsx
index c0f818730..3dd189118 100644
--- a/app/client-v2/packages/ui/stories/components/Text Component/TextField.stories.tsx	
+++ b/app/client-v2/packages/ui/stories/components/Inputs/TextField.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { TextField } from "../../../components/Text/TextField";
+import { TextField } from "../../../components/Inputs/TextField";
 import { ThemeProvider } from "../../theme";
 
 const meta: Meta<typeof TextField> = {
@@ -35,7 +35,7 @@ export const Small: Story = {
   parameters: {
     design: {
       type: "figma",
-      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?type=design&node-id=6570-48313&t=m1TtlHDKRmJk5wCK-0",
+      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?node-id=6570%3A46740&mode=dev",
     },
   },
 };
@@ -49,7 +49,7 @@ export const Secondary: Story = {
   parameters: {
     design: {
       type: "figma",
-      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?type=design&node-id=6570-48313&t=m1TtlHDKRmJk5wCK-0",
+      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?node-id=6570%3A46740&mode=dev",
     },
   },
 };
@@ -64,7 +64,7 @@ export const InputWithSearch: Story = {
   parameters: {
     design: {
       type: "figma",
-      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?type=design&node-id=6570-48313&t=m1TtlHDKRmJk5wCK-0",
+      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?node-id=6570%3A46740&mode=dev",
     },
   },
 };
diff --git a/app/client-v2/packages/ui/stories/components/Footer.stories.tsx b/app/client-v2/packages/ui/stories/components/Navigation/Footer.stories.tsx
similarity index 92%
rename from app/client-v2/packages/ui/stories/components/Footer.stories.tsx
rename to app/client-v2/packages/ui/stories/components/Navigation/Footer.stories.tsx
index b15bf1acc..f6f8c63b0 100644
--- a/app/client-v2/packages/ui/stories/components/Footer.stories.tsx
+++ b/app/client-v2/packages/ui/stories/components/Navigation/Footer.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react/dist";
 
-import Footer from "../../components/Footer";
-import { ThemeProvider } from "../theme";
+import Footer from "../../../components/Navigation/Footer";
+import { ThemeProvider } from "../../theme";
 
 const meta: Meta<typeof Footer> = {
   component: Footer,
@@ -85,7 +85,7 @@ export const Warning: Story = {
   parameters: {
     design: {
       type: "figma",
-      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?type=design&node-id=6595-48211&t=m1TtlHDKRmJk5wCK-0",
+      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?node-id=12355%3A135782&mode=dev",
     },
   },
 };
diff --git a/app/client-v2/packages/ui/stories/components/Navigation/Sidebar.stories.tsx b/app/client-v2/packages/ui/stories/components/Navigation/Sidebar.stories.tsx
new file mode 100644
index 000000000..1c7c963f9
--- /dev/null
+++ b/app/client-v2/packages/ui/stories/components/Navigation/Sidebar.stories.tsx
@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { DashboardSidebar } from "../../../components/Navigation/DashboardSidebar";
+import { ThemeProvider } from "../../theme";
+
+const meta: Meta<typeof DashboardSidebar> = {
+  component: DashboardSidebar,
+  decorators: [
+    (Story) => (
+      <ThemeProvider>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof DashboardSidebar>;
+
+export const Default: Story = {
+  args: {
+    items: [
+      {
+        link: "https://google.com",
+        icon: "home",
+        placeholder: "Home",
+      },
+      {
+        link: "https://google.com",
+        icon: "folder",
+        placeholder: "Content",
+      },
+      {
+        link: "https://google.com",
+        icon: "settingsSuggested",
+        placeholder: "Settings",
+      },
+      {
+        link: "https://google.com",
+        icon: "help",
+        placeholder: "Help",
+      },
+    ],
+    width: 60,
+    extended_width: 200,
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?node-id=12355%3A135784&mode=dev",
+    },
+  },
+};
diff --git a/app/client-v2/packages/ui/stories/components/Tabs.stories.tsx b/app/client-v2/packages/ui/stories/components/Navigation/Tabs.stories.tsx
similarity index 73%
rename from app/client-v2/packages/ui/stories/components/Tabs.stories.tsx
rename to app/client-v2/packages/ui/stories/components/Navigation/Tabs.stories.tsx
index b726aee8e..5c01a3a53 100644
--- a/app/client-v2/packages/ui/stories/components/Tabs.stories.tsx
+++ b/app/client-v2/packages/ui/stories/components/Navigation/Tabs.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Tabs } from "../../components/Tabs";
-import { ThemeProvider } from "../theme";
+import { Tabs } from "../../../components/Navigation/Tabs";
+import { ThemeProvider } from "../../theme";
 
 const meta: Meta<typeof Tabs> = {
   component: Tabs,
@@ -45,4 +45,10 @@ export const Primary: Story = {
       },
     ],
   },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?node-id=6579%3A45052&mode=dev",
+    },
+  },
 };
diff --git a/app/client-v2/packages/ui/stories/components/Navigation/ToggleTab.stories.tsx b/app/client-v2/packages/ui/stories/components/Navigation/ToggleTab.stories.tsx
new file mode 100644
index 000000000..80bf4dcce
--- /dev/null
+++ b/app/client-v2/packages/ui/stories/components/Navigation/ToggleTab.stories.tsx
@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from "@storybook/react/dist";
+
+import { ToggleTabs } from "../../../components/Navigation/ToggleTabs";
+import { ThemeProvider } from "../../theme";
+
+const meta: Meta<typeof ToggleTabs> = {
+  component: ToggleTabs,
+  tags: ["autodocs"],
+  argTypes: {},
+  decorators: [
+    (Story) => (
+      <ThemeProvider>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof ToggleTabs>;
+
+export const Simple: Story = {
+  args: {
+    tabs: [
+      {
+        iconId: "formatLeft",
+        value: "formatLeft",
+      },
+      {
+        iconId: "viewModul",
+        value: "viewModul",
+      },
+    ],
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?node-id=6601%3A50950&mode=dev",
+    },
+  },
+};
diff --git a/app/client-v2/packages/ui/stories/components/Toolbar.stories.tsx b/app/client-v2/packages/ui/stories/components/Navigation/Toolbar.stories.tsx
similarity index 70%
rename from app/client-v2/packages/ui/stories/components/Toolbar.stories.tsx
rename to app/client-v2/packages/ui/stories/components/Navigation/Toolbar.stories.tsx
index 91837993c..44f454046 100644
--- a/app/client-v2/packages/ui/stories/components/Toolbar.stories.tsx
+++ b/app/client-v2/packages/ui/stories/components/Navigation/Toolbar.stories.tsx
@@ -2,9 +2,9 @@ import AccountCircleIcon from "@mui/icons-material/AccountCircle";
 import ForwardIcon from "@mui/icons-material/Forward";
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { createIcon } from "../../components/Icon/Icon";
-import { Toolbar } from "../../components/Toolbar";
-import { ThemeProvider } from "../theme";
+import { createIcon } from "../../../components/DataDisplay";
+import { Toolbar } from "../../../components/Navigation/Toolbar";
+import { ThemeProvider } from "../../theme";
 
 const { Icon } = createIcon({
   info: ForwardIcon,
@@ -33,4 +33,10 @@ export const Default: Story = {
     ],
     height: 52,
   },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?node-id=12355%3A135783&mode=dev",
+    },
+  },
 };
diff --git a/app/client-v2/packages/ui/stories/components/SlideShow.stories.tsx b/app/client-v2/packages/ui/stories/components/SlideShow.stories.tsx
index 1f644eff4..9e7022217 100644
--- a/app/client-v2/packages/ui/stories/components/SlideShow.stories.tsx
+++ b/app/client-v2/packages/ui/stories/components/SlideShow.stories.tsx
@@ -69,7 +69,7 @@ export const Slideshow: Story = {
   parameters: {
     design: {
       type: "figma",
-      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?type=design&node-id=11533-159301&t=HR0djJcCsGmFmiKK-0",
+      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?node-id=12355%3A135730&mode=dev",
     },
   },
 };
@@ -104,7 +104,7 @@ export const OnlyTitle: Story = {
   parameters: {
     design: {
       type: "figma",
-      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?type=design&node-id=11533-159301&t=HR0djJcCsGmFmiKK-0",
+      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?node-id=12355%3A135730&mode=dev",
     },
   },
 };
@@ -143,7 +143,7 @@ export const OnlyDescription: Story = {
   parameters: {
     design: {
       type: "figma",
-      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?type=design&node-id=11533-159301&t=HR0djJcCsGmFmiKK-0",
+      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?node-id=12355%3A135730&mode=dev",
     },
   },
 };
@@ -174,7 +174,7 @@ export const PlainSlideshow: Story = {
   parameters: {
     design: {
       type: "figma",
-      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?type=design&node-id=11533-159301&t=HR0djJcCsGmFmiKK-0",
+      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?node-id=12355%3A135730&mode=dev",
     },
   },
 };
diff --git a/app/client-v2/packages/ui/stories/components/Stepper.stories.tsx b/app/client-v2/packages/ui/stories/components/Stepper.stories.tsx
new file mode 100644
index 000000000..68ef39669
--- /dev/null
+++ b/app/client-v2/packages/ui/stories/components/Stepper.stories.tsx
@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/react/dist";
+
+import Stepper from "../../components/Stepper";
+import { ThemeProvider } from "../theme";
+
+const meta: Meta<typeof Stepper> = {
+  component: Stepper,
+  tags: ["autodocs"],
+  argTypes: {},
+  args: {},
+  decorators: [
+    (Story) => (
+      <ThemeProvider>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof Stepper>;
+
+export const Simple: Story = {
+  args: {
+    steps: [
+      {
+        label: "Select campaign settings",
+        child: <div>first</div>,
+      },
+      {
+        label: "Create an ad group",
+        child: <div>second</div>,
+      },
+      {
+        label: "Create an ad",
+        child: <div>third</div>,
+      },
+    ],
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?node-id=12598%3A134645&mode=dev",
+    },
+  },
+};
diff --git a/app/client-v2/packages/ui/stories/components/Banner.stories.tsx b/app/client-v2/packages/ui/stories/components/Surfaces/Banner.stories.tsx
similarity index 90%
rename from app/client-v2/packages/ui/stories/components/Banner.stories.tsx
rename to app/client-v2/packages/ui/stories/components/Surfaces/Banner.stories.tsx
index 7b993b785..4514b481a 100644
--- a/app/client-v2/packages/ui/stories/components/Banner.stories.tsx
+++ b/app/client-v2/packages/ui/stories/components/Surfaces/Banner.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import Banner from "../../components/Banner";
-import { ThemeProvider } from "../theme";
+import Banner from "../../../components/Surfaces/Banner";
+import { ThemeProvider } from "../../theme";
 
 const meta: Meta<typeof Banner> = {
   component: Banner,
@@ -30,7 +30,7 @@ export const ImageLeft: Story = {
   parameters: {
     design: {
       type: "figma",
-      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?type=design&node-id=6543-36744&t=m1TtlHDKRmJk5wCK-0",
+      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?node-id=12044%3A133253&mode=dev",
     },
   },
 };
@@ -46,7 +46,7 @@ export const ImageRight: Story = {
   parameters: {
     design: {
       type: "figma",
-      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?type=design&node-id=6543-36744&t=m1TtlHDKRmJk5wCK-0",
+      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?node-id=12044%3A133253&mode=dev",
     },
   },
 };
@@ -62,7 +62,7 @@ export const ImageAsBackground: Story = {
   parameters: {
     design: {
       type: "figma",
-      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?type=design&node-id=6543-36744&t=m1TtlHDKRmJk5wCK-0",
+      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?node-id=12044%3A133253&mode=dev",
     },
   },
 };
@@ -76,7 +76,7 @@ export const EntireBannerAsImage: Story = {
   parameters: {
     design: {
       type: "figma",
-      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?type=design&node-id=6543-36744&t=m1TtlHDKRmJk5wCK-0",
+      url: "https://www.figma.com/file/tu6pPILBRSUuy3Hbu8Lphk/Goat-3.0?node-id=12044%3A133253&mode=dev",
     },
   },
 };
diff --git a/app/client-v2/packages/ui/stories/components/Card Components/Card.stories.tsx b/app/client-v2/packages/ui/stories/components/Surfaces/Card.stories.tsx
similarity index 92%
rename from app/client-v2/packages/ui/stories/components/Card Components/Card.stories.tsx
rename to app/client-v2/packages/ui/stories/components/Surfaces/Card.stories.tsx
index dcabc99e8..f096c483d 100644
--- a/app/client-v2/packages/ui/stories/components/Card Components/Card.stories.tsx	
+++ b/app/client-v2/packages/ui/stories/components/Surfaces/Card.stories.tsx
@@ -2,12 +2,10 @@ import { Box } from "@mui/material";
 import type { Meta, StoryObj } from "@storybook/react/dist";
 import type { ReactNode } from "react";
 
-import { Card } from "../../../components/Card";
-import { CardContent } from "../../../components/Card";
-import { CardMedia } from "../../../components/Card";
-import { Text } from "../../../components/Text/TextBase";
-import { Button } from "../../theme";
-import { ThemeProvider } from "../../theme";
+import { Card } from "../../../components/Surfaces";
+import { CardContent } from "../../../components/Surfaces";
+import { CardMedia } from "../../../components/Surfaces";
+import { Text, Button, ThemeProvider } from "../../theme";
 
 const meta: Meta<typeof Card> = {
   component: Card,
diff --git a/app/client-v2/packages/ui/stories/components/Card Components/CardContent.stories.tsx b/app/client-v2/packages/ui/stories/components/Surfaces/CardContent.stories.tsx
similarity index 95%
rename from app/client-v2/packages/ui/stories/components/Card Components/CardContent.stories.tsx
rename to app/client-v2/packages/ui/stories/components/Surfaces/CardContent.stories.tsx
index 9bbf06d7a..74559ed9d 100644
--- a/app/client-v2/packages/ui/stories/components/Card Components/CardContent.stories.tsx	
+++ b/app/client-v2/packages/ui/stories/components/Surfaces/CardContent.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { CardContent } from "../../../components/Card";
+import { CardContent } from "../../../components/Surfaces";
 import { ThemeProvider } from "../../theme";
 
 const meta: Meta<typeof CardContent> = {
diff --git a/app/client-v2/packages/ui/stories/components/Card Components/CardMedia.stories.tsx b/app/client-v2/packages/ui/stories/components/Surfaces/CardMedia.stories.tsx
similarity index 94%
rename from app/client-v2/packages/ui/stories/components/Card Components/CardMedia.stories.tsx
rename to app/client-v2/packages/ui/stories/components/Surfaces/CardMedia.stories.tsx
index fae411b46..21a911a7e 100644
--- a/app/client-v2/packages/ui/stories/components/Card Components/CardMedia.stories.tsx	
+++ b/app/client-v2/packages/ui/stories/components/Surfaces/CardMedia.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { CardMedia } from "../../../components/Card";
+import { CardMedia } from "../../../components/Surfaces";
 import { ThemeProvider } from "../../theme";
 
 const meta: Meta<typeof CardMedia> = {
diff --git a/app/client-v2/packages/ui/stories/components/Table.stories.tsx b/app/client-v2/packages/ui/stories/components/Table.stories.tsx
deleted file mode 100644
index e5acd749d..000000000
--- a/app/client-v2/packages/ui/stories/components/Table.stories.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-
-import Table from "../../components/Table";
-import { ThemeProvider } from "../theme";
-
-const meta: Meta<typeof Table> = {
-  component: Table,
-  decorators: [
-    (Story) => (
-      <ThemeProvider>
-        <Story />
-      </ThemeProvider>
-    ),
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof Table>;
-
-export const Default: Story = {
-  args: {
-    columnNames: ["Name", "E-mail", "Role", "Status", "Added"],
-    rows: [
-      {
-        name: "John William Silva",
-        email: "john.wloremipsum@gmail.com",
-        role: "Admin",
-        status: "Active",
-        Added: "23 Jun 19",
-      },
-      {
-        name: "John William Silva",
-        email: "john.wloremipsum@gmail.com",
-        role: "Admin",
-        status: "Active",
-        Added: "23 Jun 19",
-      },
-      {
-        name: "John William Silva",
-        email: "john.wloremipsum@gmail.com",
-        role: "Admin",
-        status: "Active",
-        Added: "23 Jun 19",
-      },
-      {
-        name: "John William Silva",
-        email: "john.wloremipsum@gmail.com",
-        role: "Admin",
-        status: "Active",
-        Added: "23 Jun 19",
-      },
-      {
-        name: "John William Silva",
-        email: "john.wloremipsum@gmail.com",
-        role: "Admin",
-        status: "Active",
-        Added: "23 Jun 19",
-      },
-      {
-        name: "John William Silva",
-        email: "john.wloremipsum@gmail.com",
-        role: "Admin",
-        status: "Active",
-        Added: "23 Jun 19",
-      },
-    ],
-  },
-};
diff --git a/app/client-v2/packages/ui/stories/theme.ts b/app/client-v2/packages/ui/stories/theme.ts
index fb4106d3a..df27411db 100644
--- a/app/client-v2/packages/ui/stories/theme.ts
+++ b/app/client-v2/packages/ui/stories/theme.ts
@@ -1,32 +1,47 @@
+import CheckIcon from "@mui/icons-material/Check";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 import CloseIcon from "@mui/icons-material/Close";
 import CorporateFareIcon from "@mui/icons-material/CorporateFare";
+import CreateNewFolderIcon from "@mui/icons-material/CreateNewFolder";
+import DeleteIcon from "@mui/icons-material/Delete";
 import DirectionsBusIcon from "@mui/icons-material/DirectionsBus";
 import DirectionsRunIcon from "@mui/icons-material/DirectionsRun";
+import DownloadIcon from "@mui/icons-material/Download";
+import DriveFileMoveIcon from "@mui/icons-material/DriveFileMove";
+import EditIcon from "@mui/icons-material/Edit";
 import EmailIcon from "@mui/icons-material/Email";
 import ErrorIcon from "@mui/icons-material/Error";
 import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
+import FileCopyIcon from "@mui/icons-material/FileCopy";
 import FilterListIcon from "@mui/icons-material/FilterList";
 import FolderIcon from "@mui/icons-material/Folder";
+import FormatAlignLeftIcon from "@mui/icons-material/FormatAlignLeft";
+import GroupsIcon from "@mui/icons-material/Groups";
 import HelpIcon from "@mui/icons-material/Help";
 import HomeIcon from "@mui/icons-material/Home";
+import InfoIcon from "@mui/icons-material/Info";
 import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile";
 import LocalPhoneIcon from "@mui/icons-material/LocalPhone";
+import LockIcon from "@mui/icons-material/Lock";
+import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
 import MoreVertIcon from "@mui/icons-material/MoreVert";
+import NoteAddIcon from "@mui/icons-material/NoteAdd";
+import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 import PersonIcon from "@mui/icons-material/Person";
 import PowerSettingsNewIcon from "@mui/icons-material/PowerSettingsNew";
+import ReplyIcon from "@mui/icons-material/Reply";
 import RocketLaunchIcon from "@mui/icons-material/RocketLaunch";
 import RoomIcon from "@mui/icons-material/Room";
 import SearchIcon from "@mui/icons-material/Search";
 import SettingsIcon from "@mui/icons-material/Settings";
 import SettingsSuggestIcon from "@mui/icons-material/SettingsSuggest";
+import ViewModuleIcon from "@mui/icons-material/ViewModule";
+import VisibilityIcon from "@mui/icons-material/Visibility";
 import type { Param0 } from "tsafe";
 
 import "../assets/fonts/mulish/font.css";
 import { createButton } from "../components/Button";
-import { createIcon } from "../components/Icon/Icon";
-import { createIconButton } from "../components/Icon/IconButton";
-import { createText } from "../components/Text";
+import { createIcon, createIconButton, createText } from "../components/DataDisplay";
 import { createThemeProvider, defaultGetTypographyDesc } from "../lib";
 
 export const { ThemeProvider, StoryProvider, useTheme } = createThemeProvider({
@@ -52,6 +67,7 @@ export const { Icon } = createIcon({
   folder: FolderIcon,
   settings: SettingsIcon,
   moreVert: MoreVertIcon,
+  moreHorizontal: MoreHorizIcon,
   warn: ErrorIcon,
   warnOutlined: ErrorOutlineIcon,
   check: CheckCircleIcon,
@@ -60,6 +76,22 @@ export const { Icon } = createIcon({
   settingsSuggested: SettingsSuggestIcon,
   phone: LocalPhoneIcon,
   marker: RoomIcon,
+  viewModul: ViewModuleIcon,
+  formatLeft: FormatAlignLeftIcon,
+  newFolder: CreateNewFolderIcon,
+  newFile: NoteAddIcon,
+  edit: EditIcon,
+  open: OpenInNewIcon,
+  noBgCheck: CheckIcon,
+  view: VisibilityIcon,
+  info: InfoIcon,
+  duplicate: FileCopyIcon,
+  moveFile: DriveFileMoveIcon,
+  delete: DeleteIcon,
+  reply: ReplyIcon,
+  download: DownloadIcon,
+  lock: LockIcon,
+  team: GroupsIcon,
 });
 
 export type IconId = Param0<typeof Icon>["iconId"];
diff --git a/app/client-v2/pnpm-lock.yaml b/app/client-v2/pnpm-lock.yaml
index 52ee9917e..7fda3803a 100644
--- a/app/client-v2/pnpm-lock.yaml
+++ b/app/client-v2/pnpm-lock.yaml
@@ -138,7 +138,7 @@ importers:
     dependencies:
       '@mui/lab':
         specifier: 5.0.0-alpha.132
-        version: 5.0.0-alpha.132(@mui/material@5.14.0)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)
+        version: 5.0.0-alpha.132(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@mui/material@5.14.0)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)
       '@p4b/keycloak-theme':
         specifier: workspace:*
         version: link:../../packages/keycloak-theme
@@ -375,18 +375,39 @@ importers:
       '@mui/icons-material':
         specifier: ^5.11.16
         version: 5.14.0(@mui/material@5.14.0)(@types/react@18.2.14)(react@18.2.0)
+      '@mui/lab':
+        specifier: 5.0.0-alpha.132
+        version: 5.0.0-alpha.132(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@mui/material@5.14.0)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)
       '@mui/material':
         specifier: ^5.13.0
         version: 5.14.0(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)
+      '@mui/utils':
+        specifier: ^5.13.7
+        version: 5.13.7(react@18.2.0)
       '@mui/x-data-grid':
         specifier: ^6.7.0
-        version: 6.9.2(@mui/material@5.14.0)(@mui/system@5.14.0)(react-dom@18.2.0)(react@18.2.0)
+        version: 6.9.2(@mui/material@5.14.0)(@mui/system@5.14.1)(react-dom@18.2.0)(react@18.2.0)
+      '@mui/x-date-pickers':
+        specifier: ^6.9.2
+        version: 6.9.2(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@mui/base@5.0.0-beta.8)(@mui/material@5.14.0)(@mui/system@5.14.1)(dayjs@1.11.9)(react-dom@18.2.0)(react@18.2.0)
+      '@reduxjs/toolkit':
+        specifier: ^1.9.5
+        version: 1.9.5(react-redux@8.1.1)(react@18.2.0)
+      '@types/react-swipeable-views':
+        specifier: ^0.13.2
+        version: 0.13.2
+      '@types/react-swipeable-views-utils':
+        specifier: ^0.13.4
+        version: 0.13.4
       color:
         specifier: ^4.2.3
         version: 4.2.3
       config:
         specifier: ^3.3.9
         version: 3.3.9
+      dayjs:
+        specifier: ^1.11.9
+        version: 1.11.9
       evt:
         specifier: ^2.4.15
         version: 2.4.22
@@ -402,6 +423,9 @@ importers:
       react:
         specifier: ^18.2.0
         version: 18.2.0
+      react-redux:
+        specifier: ^8.1.1
+        version: 8.1.1(@types/react-dom@18.2.7)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)(redux@4.2.1)
       react-swipeable-views:
         specifier: ^0.14.0
         version: 0.14.0(react@18.2.0)
@@ -4197,7 +4221,11 @@ packages:
       rw: 1.3.3
       sort-object: 3.0.3
     dev: false
-
+  /@material-ui/types@4.1.1:
+    resolution: {integrity: sha512-AN+GZNXytX9yxGi0JOfxHrRTbhFybjUJ05rnsBVjcB+16e466Z0Xe5IxawuOayVZgTBNDxmPKo5j4V6OnMtaSQ==}
+    dependencies:
+      '@types/react': 18.2.14
+    dev: false
   /@mdx-js/react@2.3.0(react@18.2.0):
     resolution: {integrity: sha512-zQH//gdOmuu7nt2oJR29vFhDv88oGPmVw6BggmrHeMI+xgEkp1B2dX9/bMBSYtK0dyLX/aOmesKS09g222K1/g==}
     peerDependencies:
@@ -4246,7 +4274,7 @@ packages:
       '@babel/runtime': 7.22.6
       '@emotion/is-prop-valid': 1.2.1
       '@mui/types': 7.2.4(@types/react@18.2.14)
-      '@mui/utils': 5.13.7(react@18.2.0)
+      '@mui/utils': 5.14.1(react@18.2.0)
       '@popperjs/core': 2.11.8
       '@types/react': 18.2.14
       clsx: 1.2.1
@@ -4256,10 +4284,37 @@ packages:
       react-is: 18.2.0
     dev: false
 
+  /@mui/base@5.0.0-beta.8(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-b4vVjMZx5KzzEMf4arXKoeV5ZegAMOoPwoy1vfUBwhvXc2QtaaAyBp50U7OA2L06Leubc1A+lEp3eqwZoFn87g==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      '@types/react': ^17.0.0 || ^18.0.0
+      react: ^17.0.0 || ^18.0.0
+      react-dom: ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.6
+      '@emotion/is-prop-valid': 1.2.1
+      '@mui/types': 7.2.4(@types/react@18.2.14)
+      '@mui/utils': 5.14.1(react@18.2.0)
+      '@popperjs/core': 2.11.8
+      '@types/react': 18.2.14
+      clsx: 1.2.1
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-is: 18.2.0
+    dev: false
   /@mui/core-downloads-tracker@5.14.0:
     resolution: {integrity: sha512-SYBOVCatVDUf/lbrLGah09bHhX5WfUXg7kSskfLILr6SvKRni0NLp0aonxQ0SMALVVK3Qwa6cW4CdWuwS0gC1w==}
     dev: false
 
+  /@mui/core-downloads-tracker@5.14.1:
+    resolution: {integrity: sha512-mIa1WmDmNr1LoupV1Rbxt9bTFKMbIn10RHG1bnZ/FJCkAYpuU/D4n+R+ttiycgcZNngU++zyh/OQeJblzbQPzg==}
+    dev: false
+
   /@mui/icons-material@5.14.0(@mui/material@5.14.0)(@types/react@18.2.14)(react@18.2.0):
     resolution: {integrity: sha512-z7lYNteDi1GMkF9JP/m2RWuCYK1M/FlaeBSUK7/IhIYzIXNhAVjfD8jRq5vFBV31qkEi2aGBS2z5SfLXwH6U0A==}
     engines: {node: '>=12.0.0'}
@@ -4277,7 +4332,24 @@ packages:
       react: 18.2.0
     dev: false
 
-  /@mui/lab@5.0.0-alpha.132(@mui/material@5.14.0)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0):
+  /@mui/icons-material@5.14.1(@mui/material@5.14.1)(@types/react@18.2.14)(react@18.2.0):
+    resolution: {integrity: sha512-xV/f26muQqtWzerzOIdGPrXoxp/OKaE2G2Wp9gnmG47mHua5Slup/tMc3fA4ZYUreGGrK6+tT81TEvt1Wsng8Q==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      '@mui/material': ^5.0.0
+      '@types/react': ^17.0.0 || ^18.0.0
+      react: ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.6
+      '@mui/material': 5.14.1(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)
+      '@types/react': 18.2.14
+      react: 18.2.0
+    dev: false
+
+  /@mui/lab@5.0.0-alpha.132(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@mui/material@5.14.0)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-MCkQlZZSsRumgCD1rDhtkyaJmCHg20zaneJhSB55X4Rr6dA9p4vK70HvCEQKQibK3RqvEuWuRUYNKWD5SlFVww==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
@@ -4296,6 +4368,8 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.22.6
+      '@emotion/react': 11.11.1(@types/react@18.2.14)(react@18.2.0)
+      '@emotion/styled': 11.11.0(@emotion/react@11.11.1)(@types/react@18.2.14)(react@18.2.0)
       '@mui/base': 5.0.0-beta.3(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)
       '@mui/material': 5.14.0(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)
       '@mui/system': 5.14.0(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.14)(react@18.2.0)
@@ -4335,6 +4409,40 @@ packages:
       '@mui/types': 7.2.4(@types/react@18.2.14)
       '@mui/utils': 5.13.7(react@18.2.0)
       '@types/react': 18.2.14
+      clsx: 1.2.1
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-is: 18.2.0
+      react-transition-group: 4.4.5(react-dom@18.2.0)(react@18.2.0)
+    dev: false
+
+  /@mui/material@5.14.1(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-WtsgYuageTunLfxH3Ri+o1RuQTFImtRHxMcVNyD0Hhd2/znjW6KODNz0XfjvLRnNCAynBxZNiflcoIBW40h9PQ==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      '@emotion/react': ^11.5.0
+      '@emotion/styled': ^11.3.0
+      '@types/react': ^17.0.0 || ^18.0.0
+      react: ^17.0.0 || ^18.0.0
+      react-dom: ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@emotion/react':
+        optional: true
+      '@emotion/styled':
+        optional: true
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.6
+      '@emotion/react': 11.11.1(@types/react@18.2.14)(react@18.2.0)
+      '@emotion/styled': 11.11.0(@emotion/react@11.11.1)(@types/react@18.2.14)(react@18.2.0)
+      '@mui/base': 5.0.0-beta.8(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)
+      '@mui/core-downloads-tracker': 5.14.1
+      '@mui/system': 5.14.1(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.14)(react@18.2.0)
+      '@mui/types': 7.2.4(@types/react@18.2.14)
+      '@mui/utils': 5.14.1(react@18.2.0)
+      '@types/react': 18.2.14
       '@types/react-transition-group': 4.4.6
       clsx: 1.2.1
       csstype: 3.1.2
@@ -4356,7 +4464,7 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.22.6
-      '@mui/utils': 5.13.7(react@18.2.0)
+      '@mui/utils': 5.14.1(react@18.2.0)
       '@types/react': 18.2.14
       prop-types: 15.8.1
       react: 18.2.0
@@ -4406,7 +4514,37 @@ packages:
       '@mui/private-theming': 5.13.7(@types/react@18.2.14)(react@18.2.0)
       '@mui/styled-engine': 5.13.2(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(react@18.2.0)
       '@mui/types': 7.2.4(@types/react@18.2.14)
-      '@mui/utils': 5.13.7(react@18.2.0)
+      '@mui/utils': 5.14.1(react@18.2.0)
+      '@types/react': 18.2.14
+      clsx: 1.2.1
+      csstype: 3.1.2
+      prop-types: 15.8.1
+      react: 18.2.0
+    dev: false
+
+  /@mui/system@5.14.1(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.14)(react@18.2.0):
+    resolution: {integrity: sha512-u+xlsU34Jdkgx1CxmBnIC4Y08uPdVX5iEd3S/1dggDFtOGp+Lj8xmKRJAQ8PJOOJLOh8pDwaZx4AwXikL4l1QA==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      '@emotion/react': ^11.5.0
+      '@emotion/styled': ^11.3.0
+      '@types/react': ^17.0.0 || ^18.0.0
+      react: ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@emotion/react':
+        optional: true
+      '@emotion/styled':
+        optional: true
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.6
+      '@emotion/react': 11.11.1(@types/react@18.2.14)(react@18.2.0)
+      '@emotion/styled': 11.11.0(@emotion/react@11.11.1)(@types/react@18.2.14)(react@18.2.0)
+      '@mui/private-theming': 5.13.7(@types/react@18.2.14)(react@18.2.0)
+      '@mui/styled-engine': 5.13.2(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(react@18.2.0)
+      '@mui/types': 7.2.4(@types/react@18.2.14)
+      '@mui/utils': 5.14.1(react@18.2.0)
       '@types/react': 18.2.14
       clsx: 1.2.1
       csstype: 3.1.2
@@ -4439,7 +4577,21 @@ packages:
       react-is: 18.2.0
     dev: false
 
-  /@mui/x-data-grid@6.9.2(@mui/material@5.14.0)(@mui/system@5.14.0)(react-dom@18.2.0)(react@18.2.0):
+  /@mui/utils@5.14.1(react@18.2.0):
+    resolution: {integrity: sha512-39KHKK2JeqRmuUcLDLwM+c2XfVC136C5/yUyQXmO2PVbOb2Bol4KxtkssEqCbTwg87PSCG3f1Tb0keRsK7cVGw==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      react: ^17.0.0 || ^18.0.0
+    dependencies:
+      '@babel/runtime': 7.22.6
+      '@types/prop-types': 15.7.5
+      '@types/react-is': 18.2.1
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-is: 18.2.0
+    dev: false
+
+  /@mui/x-data-grid@6.9.2(@mui/material@5.14.0)(@mui/system@5.14.1)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-hrjVq3FrbUpioi2GYSWJtU4NR3V4bPwLbXngw07+I21TGOWV1TKeTslkPI+FGVYU3gMjGSSJRFN8gehPlh5Evw==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
@@ -4450,7 +4602,7 @@ packages:
     dependencies:
       '@babel/runtime': 7.22.6
       '@mui/material': 5.14.0(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)
-      '@mui/system': 5.14.0(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.14)(react@18.2.0)
+      '@mui/system': 5.14.1(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.14)(react@18.2.0)
       '@mui/utils': 5.13.7(react@18.2.0)
       clsx: 1.2.1
       prop-types: 15.8.1
@@ -4459,6 +4611,60 @@ packages:
       reselect: 4.1.8
     dev: false
 
+  /@mui/x-date-pickers@6.9.2(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@mui/base@5.0.0-beta.8)(@mui/material@5.14.0)(@mui/system@5.14.1)(dayjs@1.11.9)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-WoXRBUwb/nN/Hg+rArefkuRe30eVTN29dbjTN/vTydBFoNIp8vCaSeqRIEP6Zq2NaDHFWW9FMGChuuFEdROxWA==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@emotion/react': ^11.9.0
+      '@emotion/styled': ^11.8.1
+      '@mui/base': ^5.0.0-alpha.87
+      '@mui/material': ^5.8.6
+      '@mui/system': ^5.8.0
+      date-fns: ^2.25.0
+      date-fns-jalali: ^2.13.0-0
+      dayjs: ^1.10.7
+      luxon: ^3.0.2
+      moment: ^2.29.4
+      moment-hijri: ^2.1.2
+      moment-jalaali: ^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0
+      react: ^17.0.0 || ^18.0.0
+      react-dom: ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@emotion/react':
+        optional: true
+      '@emotion/styled':
+        optional: true
+      date-fns:
+        optional: true
+      date-fns-jalali:
+        optional: true
+      dayjs:
+        optional: true
+      luxon:
+        optional: true
+      moment:
+        optional: true
+      moment-hijri:
+        optional: true
+      moment-jalaali:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.6
+      '@emotion/react': 11.11.1(@types/react@18.2.14)(react@18.2.0)
+      '@emotion/styled': 11.11.0(@emotion/react@11.11.1)(@types/react@18.2.14)(react@18.2.0)
+      '@mui/base': 5.0.0-beta.8(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)
+      '@mui/material': 5.14.0(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)
+      '@mui/system': 5.14.1(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.14)(react@18.2.0)
+      '@mui/utils': 5.13.7(react@18.2.0)
+      '@types/react-transition-group': 4.4.6
+      clsx: 1.2.1
+      dayjs: 1.11.9
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-transition-group: 4.4.5(react-dom@18.2.0)(react@18.2.0)
+    dev: false
+
   /@ndelangen/get-tarball@3.0.9:
     resolution: {integrity: sha512-9JKTEik4vq+yGosHYhZ1tiH/3WpUS0Nh0kej4Agndhox8pAdWhEx5knFVRcb/ya9knCRCs1rPxNrSXTDdfVqpA==}
     dependencies:
@@ -6493,6 +6699,20 @@ packages:
       '@types/react': 18.2.14
     dev: false
 
+  /@types/react-swipeable-views-utils@0.13.4:
+    resolution: {integrity: sha512-v0nDk6mMIPAu/kaEnqQpDz2Z7O8ewqy2in7xwobcAAkUKKsdw3MSWFW1BkQ+dPgTrBnj/KXUzx3ZIS6UYviwyA==}
+    dependencies:
+      '@material-ui/types': 4.1.1
+      '@types/react': 18.2.14
+      '@types/react-swipeable-views': 0.13.2
+    dev: false
+
+  /@types/react-swipeable-views@0.13.2:
+    resolution: {integrity: sha512-FiszBm9M0JicAgzO/IwDqpfHQRUEjPZA88UexYsVD6qHJBf5LrbGjR5Mw4+yZbf8ZxJneNqOsZbe4WGjOYG7iQ==}
+    dependencies:
+      '@types/react': 18.2.14
+    dev: false
+
   /@types/react-transition-group@4.4.6:
     resolution: {integrity: sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==}
     dependencies:
@@ -8551,6 +8771,14 @@ packages:
     resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
     dev: true
 
+  /cross-env@7.0.3:
+    resolution: {integrity: sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==}
+    engines: {node: '>=10.14', npm: '>=6', yarn: '>=1'}
+    hasBin: true
+    dependencies:
+      cross-spawn: 7.0.3
+    dev: false
+
   /cross-spawn@6.0.5:
     resolution: {integrity: sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==}
     engines: {node: '>=4.8'}
@@ -8882,6 +9110,10 @@ packages:
       '@babel/runtime': 7.22.6
     dev: true
 
+  /dayjs@1.11.9:
+    resolution: {integrity: sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA==}
+    dev: false
+
   /debug@2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
     peerDependencies:
@@ -10577,6 +10809,16 @@ packages:
     engines: {node: '>=0.4.0'}
     dev: true
 
+  /follow-redirects@1.15.2:
+    resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+    dev: false
+
   /follow-redirects@1.15.2(debug@4.3.4):
     resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
     engines: {node: '>=4.0'}
@@ -10587,6 +10829,7 @@ packages:
         optional: true
     dependencies:
       debug: 4.3.4
+    dev: true
 
   /for-each@0.3.3:
     resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
@@ -13737,6 +13980,49 @@ packages:
       - '@babel/core'
       - babel-plugin-macros
 
+  /next@13.4.10-canary.8(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-DlNcKii+sD9snodax14lHhkn4zu5ZXYzH8bect66G1jElJN/k2Yp1Dmb2ecTpg2DO4ETb2MHc/RsarLPg8I1rg==}
+    engines: {node: '>=16.8.0'}
+    hasBin: true
+    peerDependencies:
+      '@opentelemetry/api': ^1.1.0
+      fibers: '>= 3.1.0'
+      react: ^18.2.0
+      react-dom: ^18.2.0
+      sass: ^1.3.0
+    peerDependenciesMeta:
+      '@opentelemetry/api':
+        optional: true
+      fibers:
+        optional: true
+      sass:
+        optional: true
+    dependencies:
+      '@next/env': 13.4.10-canary.8
+      '@swc/helpers': 0.5.1
+      busboy: 1.6.0
+      caniuse-lite: 1.0.30001515
+      postcss: 8.4.14
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      styled-jsx: 5.1.1(@babel/core@7.22.9)(react@18.2.0)
+      watchpack: 2.4.0
+      zod: 3.21.4
+    optionalDependencies:
+      '@next/swc-darwin-arm64': 13.4.10-canary.8
+      '@next/swc-darwin-x64': 13.4.10-canary.8
+      '@next/swc-linux-arm64-gnu': 13.4.10-canary.8
+      '@next/swc-linux-arm64-musl': 13.4.10-canary.8
+      '@next/swc-linux-x64-gnu': 13.4.10-canary.8
+      '@next/swc-linux-x64-musl': 13.4.10-canary.8
+      '@next/swc-win32-arm64-msvc': 13.4.10-canary.8
+      '@next/swc-win32-ia32-msvc': 13.4.10-canary.8
+      '@next/swc-win32-x64-msvc': 13.4.10-canary.8
+    transitivePeerDependencies:
+      - '@babel/core'
+      - babel-plugin-macros
+    dev: false
+
   /nice-try@1.0.5:
     resolution: {integrity: sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==}
     dev: true
@@ -17235,6 +17521,23 @@ packages:
       client-only: 0.0.1
       react: 18.2.0
 
+  /styled-jsx@5.1.1(react@18.2.0):
+    resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==}
+    engines: {node: '>= 12.0.0'}
+    peerDependencies:
+      '@babel/core': '*'
+      babel-plugin-macros: '*'
+      react: '>= 16.8.0 || 17.x.x || ^18.0.0-0'
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      babel-plugin-macros:
+        optional: true
+    dependencies:
+      client-only: 0.0.1
+      react: 18.2.0
+    dev: false
+
   /stylehacks@5.1.1(postcss@8.4.25):
     resolution: {integrity: sha512-sBpcd5Hx7G6seo7b1LkpttvTz7ikD0LlH5RmdcBNb6fFR0Fl7LQwHDFr300q4cwUqi+IYrFGmsIHieMBfnN/Bw==}
     engines: {node: ^10 || ^12 || >=14.0}