diff --git a/src/components/Agents/Add/AddAgentForm.tsx b/src/components/Agents/Add/AddAgentForm.tsx
index 108ef3086..a9c6ab4d1 100644
--- a/src/components/Agents/Add/AddAgentForm.tsx
+++ b/src/components/Agents/Add/AddAgentForm.tsx
@@ -8,7 +8,7 @@ import {
   useUpdateAgentMutations
 } from "../../../api/query-hooks/mutations/useUpsertAgentMutations";
 import { GenerateAgent, GeneratedAgent } from "../../../api/services/agents";
-import { Button } from "../../../ui/Button";
+import { Button } from "../../../ui/Buttons/Button";
 import { Modal } from "../../../ui/Modal";
 import FormikAutocompleteDropdown from "../../Forms/Formik/FormikAutocompleteDropdown";
 import FormikKeyValueMapField from "../../Forms/Formik/FormikKeyValueMapField";
diff --git a/src/components/Agents/AgentName.tsx b/src/components/Agents/AgentName.tsx
index 46fe6723a..1a7aa54bb 100644
--- a/src/components/Agents/AgentName.tsx
+++ b/src/components/Agents/AgentName.tsx
@@ -1,8 +1,8 @@
+import { getAgentByID, Local } from "@flanksource-ui/api/services/agents";
+import { AgentItem } from "@flanksource-ui/api/types/common";
+import { Badge } from "@flanksource-ui/ui/Badge/Badge";
 import { useQuery } from "@tanstack/react-query";
 import { ComponentProps } from "react";
-import { getAgentByID, Local } from "../../api/services/agents";
-import { AgentItem } from "../../api/types/common";
-import { Badge } from "../../ui/Badge";
 
 type TopologyCardAgentProps = {
   agent?: AgentItem;
diff --git a/src/components/Agents/DeleteAgentButton.tsx b/src/components/Agents/DeleteAgentButton.tsx
index 8954c50ee..e27ef6469 100644
--- a/src/components/Agents/DeleteAgentButton.tsx
+++ b/src/components/Agents/DeleteAgentButton.tsx
@@ -2,7 +2,7 @@ import { useCallback, useState } from "react";
 import { FaCircleNotch, FaTrash } from "react-icons/fa";
 import { useDeleteAgentMutations } from "../../api/query-hooks/mutations/useUpsertAgentMutations";
 import { ConfirmationPromptDialog } from "../../ui/AlertDialog/ConfirmationPromptDialog";
-import { Button } from "../../ui/Button";
+import { Button } from "../../ui/Buttons/Button";
 import { toastError, toastSuccess } from "../Toast/toast";
 
 type DeleteAgentButtonProps = {
diff --git a/src/components/Agents/InstalAgentInstruction/InstallAgentModal.tsx b/src/components/Agents/InstalAgentInstruction/InstallAgentModal.tsx
index b6a382548..4c10073f5 100644
--- a/src/components/Agents/InstalAgentInstruction/InstallAgentModal.tsx
+++ b/src/components/Agents/InstalAgentInstruction/InstallAgentModal.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { GeneratedAgent } from "../../../api/services/agents";
-import { Button } from "../../../ui/Button";
+import { Button } from "../../../ui/Buttons/Button";
 import { Modal } from "../../../ui/Modal";
 import { Tab, Tabs } from "../../Tabs/Tabs";
 import { AgentFormValues } from "../Add/AddAgentForm";
diff --git a/src/components/Canary/CanaryPopup/CheckDetails.tsx b/src/components/Canary/CanaryPopup/CheckDetails.tsx
index 4a2d51564..e74dab35b 100644
--- a/src/components/Canary/CanaryPopup/CheckDetails.tsx
+++ b/src/components/Canary/CanaryPopup/CheckDetails.tsx
@@ -1,18 +1,18 @@
+import { useCanaryGraphQuery } from "@flanksource-ui/api/query-hooks/health";
+import { HealthCheck } from "@flanksource-ui/api/types/health";
+import { isCanaryUI } from "@flanksource-ui/context/Environment";
+import { Age } from "@flanksource-ui/ui/Age";
+import { Badge } from "@flanksource-ui/ui/Badge/Badge";
+import { Stat } from "@flanksource-ui/ui/stats";
+import {
+  capitalizeFirstLetter,
+  toFixedIfNecessary
+} from "@flanksource-ui/utils/common";
+import mixins from "@flanksource-ui/utils/mixins.module.css";
 import { useAtom } from "jotai";
 import React, { Suspense, useEffect, useMemo, useRef } from "react";
 import { useMediaQuery } from "react-responsive";
 import { useSearchParams } from "react-router-dom";
-import { useCanaryGraphQuery } from "../../../api/query-hooks/health";
-import { HealthCheck } from "../../../api/types/health";
-import { isCanaryUI } from "../../../context/Environment";
-import { Age } from "../../../ui/Age";
-import { Badge } from "../../../ui/Badge";
-import { Stat } from "../../../ui/stats";
-import {
-  capitalizeFirstLetter,
-  toFixedIfNecessary
-} from "../../../utils/common";
-import mixins from "../../../utils/mixins.module.css";
 import { DropdownStandaloneWrapper } from "../../Dropdown/StandaloneWrapper";
 import { TimeRange, timeRanges } from "../../Dropdown/TimeRange";
 import { Head } from "../../Head/Head";
diff --git a/src/components/Canary/CanaryPopup/CheckRunNow.tsx b/src/components/Canary/CanaryPopup/CheckRunNow.tsx
index eecacc098..5e9e5c6a2 100644
--- a/src/components/Canary/CanaryPopup/CheckRunNow.tsx
+++ b/src/components/Canary/CanaryPopup/CheckRunNow.tsx
@@ -4,7 +4,7 @@ import {
 } from "@flanksource-ui/api/services/topology";
 import { HealthCheck } from "@flanksource-ui/api/types/health";
 import { useUserAccessStateContext } from "@flanksource-ui/context/UserAccessContext/UserAccessContext";
-import { Button } from "@flanksource-ui/ui/Button";
+import { Button } from "@flanksource-ui/ui/Buttons/Button";
 import { useMutation } from "@tanstack/react-query";
 import { FaSpinner } from "react-icons/fa";
 import { VscDebugRerun } from "react-icons/vsc";
diff --git a/src/components/Canary/CanaryPopup/CheckTitle.tsx b/src/components/Canary/CanaryPopup/CheckTitle.tsx
index 55916eef0..c8f2bb27b 100644
--- a/src/components/Canary/CanaryPopup/CheckTitle.tsx
+++ b/src/components/Canary/CanaryPopup/CheckTitle.tsx
@@ -1,7 +1,7 @@
+import { HealthCheck } from "@flanksource-ui/api/types/health";
+import { Badge } from "@flanksource-ui/ui/Badge/Badge";
 import clsx from "clsx";
 import React from "react";
-import { HealthCheck } from "../../../api/types/health";
-import { Badge } from "../../../ui/Badge";
 import AgentName from "../../Agents/AgentName";
 import { Icon } from "../../Icon";
 
diff --git a/src/components/Canary/Columns/index.tsx b/src/components/Canary/Columns/index.tsx
index 3fa3cf393..fcafdde1f 100644
--- a/src/components/Canary/Columns/index.tsx
+++ b/src/components/Canary/Columns/index.tsx
@@ -1,8 +1,8 @@
+import { HealthCheck } from "@flanksource-ui/api/types/health";
+import { Badge } from "@flanksource-ui/ui/Badge/Badge";
 import { CellContext } from "@tanstack/react-table";
 import clsx from "clsx";
 import dayjs from "dayjs";
-import { HealthCheck } from "../../../api/types/health";
-import { Badge } from "../../../ui/Badge";
 import { Status } from "../../Status";
 import { GetName } from "../data";
 import style from "../index.module.css";
diff --git a/src/components/Configs/ConfigDetailsSelectedLinesControls.tsx b/src/components/Configs/ConfigDetailsSelectedLinesControls.tsx
index dd994249b..27cac77ff 100644
--- a/src/components/Configs/ConfigDetailsSelectedLinesControls.tsx
+++ b/src/components/Configs/ConfigDetailsSelectedLinesControls.tsx
@@ -1,4 +1,4 @@
-import { Button } from "../../ui/Button";
+import { Button } from "../../ui/Buttons/Button";
 
 type Props = {
   selectedCount: number;
diff --git a/src/components/Configs/ConfigList/ConfigListColumn.tsx b/src/components/Configs/ConfigList/ConfigListColumn.tsx
index 4decaf4b2..c51d4f540 100644
--- a/src/components/Configs/ConfigList/ConfigListColumn.tsx
+++ b/src/components/Configs/ConfigList/ConfigListColumn.tsx
@@ -1,5 +1,5 @@
 import { Status } from "@flanksource-ui/components/Status";
-import { Badge } from "@flanksource-ui/ui/Badge";
+import { Badge } from "@flanksource-ui/ui/Badge/Badge";
 import { CellContext, ColumnDef, Row } from "@tanstack/react-table";
 import React from "react";
 import { FaTrash } from "react-icons/fa";
diff --git a/src/components/Configs/ConfigSummary/ConfigSummaryList.tsx b/src/components/Configs/ConfigSummary/ConfigSummaryList.tsx
index 21e1bd889..2de5358c9 100644
--- a/src/components/Configs/ConfigSummary/ConfigSummaryList.tsx
+++ b/src/components/Configs/ConfigSummary/ConfigSummaryList.tsx
@@ -3,7 +3,7 @@ import {
   StatusInfo,
   StatusLine
 } from "@flanksource-ui/components/StatusLine/StatusLine";
-import { Badge } from "@flanksource-ui/ui/Badge";
+import { Badge } from "@flanksource-ui/ui/Badge/Badge";
 import { CountBadge } from "@flanksource-ui/ui/Badge/CountBadge";
 import { DataTable } from "@flanksource-ui/ui/DataTable";
 import { CellContext, ColumnDef, Row } from "@tanstack/react-table";
diff --git a/src/components/Configs/ConfigTabsLinks.tsx b/src/components/Configs/ConfigTabsLinks.tsx
index 222983e58..a9ab6b7f5 100644
--- a/src/components/Configs/ConfigTabsLinks.tsx
+++ b/src/components/Configs/ConfigTabsLinks.tsx
@@ -1,4 +1,4 @@
-import { Badge } from "@flanksource-ui/ui/Badge";
+import { Badge } from "@flanksource-ui/ui/Badge/Badge";
 import { useParams } from "react-router-dom";
 import { ConfigItem } from "../../api/types/configs";
 
diff --git a/src/components/Configs/Graph/ConfigIntermediaryNodeReactFlowNode.tsx b/src/components/Configs/Graph/ConfigIntermediaryNodeReactFlowNode.tsx
index 2a91da365..ddbda5647 100644
--- a/src/components/Configs/Graph/ConfigIntermediaryNodeReactFlowNode.tsx
+++ b/src/components/Configs/Graph/ConfigIntermediaryNodeReactFlowNode.tsx
@@ -1,4 +1,4 @@
-import { Badge } from "@flanksource-ui/ui/Badge";
+import { Badge } from "@flanksource-ui/ui/Badge/Badge";
 import clsx from "clsx";
 import { HiOutlineMinusCircle, HiOutlinePlusCircle } from "react-icons/hi";
 import { Handle, NodeProps } from "reactflow";
diff --git a/src/components/Configs/Graph/ConfigItemReactFlowNode.tsx b/src/components/Configs/Graph/ConfigItemReactFlowNode.tsx
index be437236e..f80b7b936 100644
--- a/src/components/Configs/Graph/ConfigItemReactFlowNode.tsx
+++ b/src/components/Configs/Graph/ConfigItemReactFlowNode.tsx
@@ -1,5 +1,5 @@
 import { Status } from "@flanksource-ui/components/Status";
-import { Badge } from "@flanksource-ui/ui/Badge";
+import { Badge } from "@flanksource-ui/ui/Badge/Badge";
 import clsx from "clsx";
 import { FaTrash } from "react-icons/fa";
 import { Link } from "react-router-dom";
diff --git a/src/components/Configs/Sidebar/ConfigActionBar.tsx b/src/components/Configs/Sidebar/ConfigActionBar.tsx
index a3f0076ad..68756d703 100644
--- a/src/components/Configs/Sidebar/ConfigActionBar.tsx
+++ b/src/components/Configs/Sidebar/ConfigActionBar.tsx
@@ -1,10 +1,10 @@
+import { useGetConfigByIdQuery } from "@flanksource-ui/api/query-hooks";
+import { EvidenceType } from "@flanksource-ui/api/types/evidence";
+import { usePartialUpdateSearchParams } from "@flanksource-ui/hooks/usePartialUpdateSearchParams";
+import { ActionLink } from "@flanksource-ui/ui/Buttons/ActionLink";
 import clsx from "clsx";
 import React, { useEffect, useMemo, useState } from "react";
 import { MdAlarmAdd } from "react-icons/md";
-import { useGetConfigByIdQuery } from "../../../api/query-hooks";
-import { EvidenceType } from "../../../api/types/evidence";
-import { usePartialUpdateSearchParams } from "../../../hooks/usePartialUpdateSearchParams";
-import { ActionLink } from "../../../ui/ActionLink/ActionLink";
 import AttachAsEvidenceButton from "../../Incidents/AttachEvidenceDialog/AttachAsEvidenceDialogButton";
 import PlaybooksDropdownMenu from "../../Playbooks/Runs/Submit/PlaybooksDropdownMenu";
 
diff --git a/src/components/Configs/Sidebar/ConfigSidebar.tsx b/src/components/Configs/Sidebar/ConfigSidebar.tsx
index 40b38585b..9f72c916e 100644
--- a/src/components/Configs/Sidebar/ConfigSidebar.tsx
+++ b/src/components/Configs/Sidebar/ConfigSidebar.tsx
@@ -1,4 +1,4 @@
-import { Button } from "@flanksource-ui/ui/Button";
+import { Button } from "@flanksource-ui/ui/Buttons/Button";
 import FloatableSlidingSideBar from "@flanksource-ui/ui/SlidingSideBar/FloatableSlidingSideBar";
 import { useState } from "react";
 import { MdMenu } from "react-icons/md";
diff --git a/src/components/Configs/Sidebar/ConfigsPanel.tsx b/src/components/Configs/Sidebar/ConfigsPanel.tsx
index 1353da727..73dd18553 100644
--- a/src/components/Configs/Sidebar/ConfigsPanel.tsx
+++ b/src/components/Configs/Sidebar/ConfigsPanel.tsx
@@ -1,5 +1,5 @@
 import { ConfirmationPromptDialog } from "@flanksource-ui/ui/AlertDialog/ConfirmationPromptDialog";
-import { Badge } from "@flanksource-ui/ui/Badge";
+import { Badge } from "@flanksource-ui/ui/Badge/Badge";
 import CollapsiblePanel from "@flanksource-ui/ui/CollapsiblePanel/CollapsiblePanel";
 import clsx from "clsx";
 import { useAtom } from "jotai";
@@ -9,10 +9,10 @@ import { VscJson } from "react-icons/vsc";
 import { Tooltip } from "react-tooltip";
 import { useComponentConfigRelationshipQuery } from "../../../api/query-hooks/useComponentConfigRelationshipQuery";
 import { removeManualComponentConfigRelationship } from "../../../api/services/configs";
+import { IconButton } from "../../../ui/Buttons/IconButton";
 import TextSkeletonLoader from "../../../ui/SkeletonLoader/TextSkeletonLoader";
 import { refreshButtonClickedTrigger } from "../../../ui/SlidingSideBar/SlidingSideBar";
 import EmptyState from "../../EmptyState";
-import { IconButton } from "../../IconButton";
 import Title from "../../Title/title";
 import { toastError, toastSuccess } from "../../Toast/toast";
 import TopologyConfigsActionsDropdown from "../../Topology/Sidebar/Utils/TopologyConfigsActionsDropdown";
diff --git a/src/components/Connections/ConnectionForm.tsx b/src/components/Connections/ConnectionForm.tsx
index 20c830cd1..80f7f6058 100644
--- a/src/components/Connections/ConnectionForm.tsx
+++ b/src/components/Connections/ConnectionForm.tsx
@@ -3,7 +3,7 @@ import { Form, Formik } from "formik";
 import { mapValues, method } from "lodash";
 import { useMemo } from "react";
 import { FaSpinner, FaTrash } from "react-icons/fa";
-import { Button } from "../../ui/Button";
+import { Button } from "../../ui/Buttons/Button";
 import { Connection } from "./ConnectionFormModal";
 import RenderConnectionFormFields from "./RenderConnectionFormFields";
 import { TestConnection } from "./TestConnection";
diff --git a/src/components/FeatureFlags/FeatureFlagForm.tsx b/src/components/FeatureFlags/FeatureFlagForm.tsx
index 2d9f36a16..741554fee 100644
--- a/src/components/FeatureFlags/FeatureFlagForm.tsx
+++ b/src/components/FeatureFlags/FeatureFlagForm.tsx
@@ -1,5 +1,5 @@
 import { PropertyDBObject } from "@flanksource-ui/services/permissions/permissionsService";
-import { Button } from "@flanksource-ui/ui/Button";
+import { Button } from "@flanksource-ui/ui/Buttons/Button";
 import { Modal } from "@flanksource-ui/ui/Modal";
 import clsx from "clsx";
 import { Form, Formik } from "formik";
diff --git a/src/components/Forms/Configs/ConfigRentionSpec.tsx b/src/components/Forms/Configs/ConfigRentionSpec.tsx
index 86c427b88..9ae994995 100644
--- a/src/components/Forms/Configs/ConfigRentionSpec.tsx
+++ b/src/components/Forms/Configs/ConfigRentionSpec.tsx
@@ -2,7 +2,7 @@ import { FieldArray, useFormikContext } from "formik";
 import { get } from "lodash";
 import { useMemo } from "react";
 import { FaPlus, FaTrash } from "react-icons/fa";
-import { Button } from "../../../ui/Button";
+import { Button } from "../../../ui/Buttons/Button";
 import FormikCheckboxFieldsGroup from "../Formik/FormikCheckboxFieldsGroup";
 import FormikTextInput from "../Formik/FormikTextInput";
 
diff --git a/src/components/Forms/Formik/FormikConfigEnvVarFieldsArray.tsx b/src/components/Forms/Formik/FormikConfigEnvVarFieldsArray.tsx
index 0380e46f8..2cdd71f0e 100644
--- a/src/components/Forms/Formik/FormikConfigEnvVarFieldsArray.tsx
+++ b/src/components/Forms/Formik/FormikConfigEnvVarFieldsArray.tsx
@@ -2,7 +2,7 @@ import { FieldArray, useFormikContext } from "formik";
 import { get } from "lodash";
 import { useMemo } from "react";
 import { FaPlus, FaTrash } from "react-icons/fa";
-import { Button } from "../../../ui/Button";
+import { Button } from "../../../ui/Buttons/Button";
 import FormikConfigEnvVarFields from "./FormikConfigEnvVarFields";
 
 type ConfigFormFieldProps = {
diff --git a/src/components/Forms/Formik/FormikConfigFormFieldsArray.tsx b/src/components/Forms/Formik/FormikConfigFormFieldsArray.tsx
index af0ac99e8..92764e2f4 100644
--- a/src/components/Forms/Formik/FormikConfigFormFieldsArray.tsx
+++ b/src/components/Forms/Formik/FormikConfigFormFieldsArray.tsx
@@ -2,7 +2,7 @@ import { FieldArray, useFormikContext } from "formik";
 import { get } from "lodash";
 import React, { useMemo } from "react";
 import { FaPlus, FaTrash } from "react-icons/fa";
-import { Button } from "../../../ui/Button";
+import { Button } from "../../../ui/Buttons/Button";
 
 type ConfigFormFieldProps = {
   label: string;
diff --git a/src/components/Forms/Formik/FormikConfigFormFormsArray.tsx b/src/components/Forms/Formik/FormikConfigFormFormsArray.tsx
index 7ff0a462a..573224ee9 100644
--- a/src/components/Forms/Formik/FormikConfigFormFormsArray.tsx
+++ b/src/components/Forms/Formik/FormikConfigFormFormsArray.tsx
@@ -2,7 +2,7 @@ import { FieldArray, useFormikContext } from "formik";
 import { get } from "lodash";
 import React, { useMemo } from "react";
 import { FaPlus, FaTrash } from "react-icons/fa";
-import { Button } from "../../../ui/Button";
+import { Button } from "../../../ui/Buttons/Button";
 
 type FormikConfigFormFormsArrayProps = {
   name: string;
diff --git a/src/components/Forms/Formik/FormikKeyValueMapField.tsx b/src/components/Forms/Formik/FormikKeyValueMapField.tsx
index 5813ee6f8..76a16de0c 100644
--- a/src/components/Forms/Formik/FormikKeyValueMapField.tsx
+++ b/src/components/Forms/Formik/FormikKeyValueMapField.tsx
@@ -1,4 +1,4 @@
-import { Button } from "@flanksource-ui/ui/Button";
+import { Button } from "@flanksource-ui/ui/Buttons/Button";
 import { useFormikContext } from "formik";
 import { get, set } from "lodash";
 import { useCallback, useEffect, useState } from "react";
diff --git a/src/components/Forms/SpecEditorForm.tsx b/src/components/Forms/SpecEditorForm.tsx
index 76dbc2529..67564ddcd 100644
--- a/src/components/Forms/SpecEditorForm.tsx
+++ b/src/components/Forms/SpecEditorForm.tsx
@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import { Form, Formik } from "formik";
 import { useCallback, useMemo, useRef, useState } from "react";
-import { Button } from "../../ui/Button";
+import { Button } from "../../ui/Buttons/Button";
 import DeleteResource from "../SchemaResourcePage/Delete/DeleteResource";
 import {
   SchemaResourceType,
diff --git a/src/components/Incidents/AttachEvidenceDialog/AttachAsEvidenceDialogButton.tsx b/src/components/Incidents/AttachEvidenceDialog/AttachAsEvidenceDialogButton.tsx
index a8c0e6aa2..5c1e14167 100644
--- a/src/components/Incidents/AttachEvidenceDialog/AttachAsEvidenceDialogButton.tsx
+++ b/src/components/Incidents/AttachEvidenceDialog/AttachAsEvidenceDialogButton.tsx
@@ -2,7 +2,7 @@ import React, { ComponentProps, useMemo, useState } from "react";
 import { AttachEvidenceDialog } from ".";
 import { useFeatureFlagsContext } from "../../../context/FeatureFlagsContext";
 import { features } from "../../../services/permissions/features";
-import { Button } from "../../../ui/Button";
+import { Button } from "../../../ui/Buttons/Button";
 
 type AttachAsEvidenceButtonProps = Omit<
   ComponentProps<typeof AttachEvidenceDialog>,
diff --git a/src/components/Incidents/Changelog/IncidentHistoryItemTypeContent.tsx b/src/components/Incidents/Changelog/IncidentHistoryItemTypeContent.tsx
index 37968b44b..eba2e3d14 100644
--- a/src/components/Incidents/Changelog/IncidentHistoryItemTypeContent.tsx
+++ b/src/components/Incidents/Changelog/IncidentHistoryItemTypeContent.tsx
@@ -1,12 +1,12 @@
-import { FaComment } from "react-icons/fa";
 import {
   IncidentHistory,
   IncidentHistoryType,
   IncidentStatus
-} from "../../../api/types/incident";
-import { hypothesisStatusIconMap } from "../../../constants/hypothesisStatusOptions";
-import { Avatar } from "../../../ui/Avatar";
-import { Badge } from "../../../ui/Badge";
+} from "@flanksource-ui/api/types/incident";
+import { hypothesisStatusIconMap } from "@flanksource-ui/constants/hypothesisStatusOptions";
+import { Avatar } from "@flanksource-ui/ui/Avatar";
+import { Badge } from "@flanksource-ui/ui/Badge/Badge";
+import { FaComment } from "react-icons/fa";
 import { incidentStatusItems } from "../data";
 import EvidenceChangelogContent from "./EvidenceChangelogContent";
 
diff --git a/src/components/Incidents/Hypothesis/EvidenceSection/index.tsx b/src/components/Incidents/Hypothesis/EvidenceSection/index.tsx
index 906c07775..e9fa44ba8 100644
--- a/src/components/Incidents/Hypothesis/EvidenceSection/index.tsx
+++ b/src/components/Incidents/Hypothesis/EvidenceSection/index.tsx
@@ -21,7 +21,7 @@ import { LogsTable } from "@flanksource-ui/components/Logs/Table/LogsTable";
 import { TopologyCard } from "@flanksource-ui/components/Topology/TopologyCard";
 import { Size, ViewType } from "@flanksource-ui/types";
 import { Age } from "@flanksource-ui/ui/Age";
-import { Button } from "@flanksource-ui/ui/Button";
+import { Button } from "@flanksource-ui/ui/Buttons/Button";
 import { Modal } from "@flanksource-ui/ui/Modal";
 import {
   sanitizeHTMLContent,
diff --git a/src/components/Incidents/Hypothesis/HypothesisBarMenu/index.tsx b/src/components/Incidents/Hypothesis/HypothesisBarMenu/index.tsx
index c84a840b9..acb592586 100644
--- a/src/components/Incidents/Hypothesis/HypothesisBarMenu/index.tsx
+++ b/src/components/Incidents/Hypothesis/HypothesisBarMenu/index.tsx
@@ -5,8 +5,8 @@ import { BsTrash } from "react-icons/bs";
 import { createIncidentQueryKey } from "../../../../api/query-hooks";
 import { deleteHypothesis } from "../../../../api/services/hypothesis";
 import { Hypothesis } from "../../../../api/types/hypothesis";
+import { IconButton } from "../../../../ui/Buttons/IconButton";
 import { Menu } from "../../../../ui/Menu";
-import { IconButton } from "../../../IconButton";
 import { HypothesisDeleteDialog } from "../HypothesisDeleteDialog";
 
 interface IProps {
diff --git a/src/components/Incidents/Hypothesis/ResponseLine/index.tsx b/src/components/Incidents/Hypothesis/ResponseLine/index.tsx
index 247961c54..487abefac 100644
--- a/src/components/Incidents/Hypothesis/ResponseLine/index.tsx
+++ b/src/components/Incidents/Hypothesis/ResponseLine/index.tsx
@@ -8,10 +8,10 @@ import { Comment } from "../../../../api/types/incident";
 import { UserWithTeam } from "../../../../api/types/users";
 import { Age } from "../../../../ui/Age";
 import { Avatar } from "../../../../ui/Avatar";
+import { IconButton } from "../../../../ui/Buttons/IconButton";
 import { Menu } from "../../../../ui/Menu";
 import { CommentText } from "../../../Comment";
 import { Icon } from "../../../Icon";
-import { IconButton } from "../../../IconButton";
 import { EvidenceItem } from "../EvidenceSection";
 
 interface IProps {
diff --git a/src/components/Incidents/IncidentCreate/index.tsx b/src/components/Incidents/IncidentCreate/index.tsx
index f443ba786..3020cbb31 100644
--- a/src/components/Incidents/IncidentCreate/index.tsx
+++ b/src/components/Incidents/IncidentCreate/index.tsx
@@ -16,7 +16,7 @@ import {
 } from "../../../api/types/incident";
 import { useUser } from "../../../context";
 import { Events, sendAnalyticEvent } from "../../../services/analytics";
-import { Button } from "../../../ui/Button";
+import { Button } from "../../../ui/Buttons/Button";
 import SelectDropdown from "../../Dropdown/SelectDropdown";
 import { TextInput } from "../../TextInput";
 import { toastError } from "../../Toast/toast";
diff --git a/src/components/Incidents/IncidentDetails/DefinitionOfDone/EvidenceView/index.tsx b/src/components/Incidents/IncidentDetails/DefinitionOfDone/EvidenceView/index.tsx
index b5cbc2429..bf6183b8f 100644
--- a/src/components/Incidents/IncidentDetails/DefinitionOfDone/EvidenceView/index.tsx
+++ b/src/components/Incidents/IncidentDetails/DefinitionOfDone/EvidenceView/index.tsx
@@ -1,18 +1,18 @@
+import {
+  useComponentNameQuery,
+  useConfigNameQuery,
+  useTopologyQuery
+} from "@flanksource-ui/api/query-hooks";
+import { getCanaries } from "@flanksource-ui/api/services/topology";
+import { Evidence, EvidenceType } from "@flanksource-ui/api/types/evidence";
+import { Size, ViewType } from "@flanksource-ui/types";
+import { Badge } from "@flanksource-ui/ui/Badge/Badge";
+import TextSkeletonLoader from "@flanksource-ui/ui/SkeletonLoader/TextSkeletonLoader";
 import { useQuery } from "@tanstack/react-query";
 import clsx from "clsx";
 import { useMemo } from "react";
 import { BsFillCircleFill, BsPersonFill } from "react-icons/bs";
 import { Link } from "react-router-dom";
-import {
-  useComponentNameQuery,
-  useConfigNameQuery,
-  useTopologyQuery
-} from "../../../../../api/query-hooks";
-import { getCanaries } from "../../../../../api/services/topology";
-import { Evidence, EvidenceType } from "../../../../../api/types/evidence";
-import { Size, ViewType } from "../../../../../types";
-import { Badge } from "../../../../../ui/Badge";
-import TextSkeletonLoader from "../../../../../ui/SkeletonLoader/TextSkeletonLoader";
 import { Icon } from "../../../../Icon";
 import { ConfigIcon } from "../../../../Icon/ConfigIcon";
 import { StatusStyles } from "../../../../Topology/TopologyCard";
diff --git a/src/components/Incidents/IncidentDetails/DefinitionOfDone/IncidentsDefinitionOfDoneItem.tsx b/src/components/Incidents/IncidentDetails/DefinitionOfDone/IncidentsDefinitionOfDoneItem.tsx
index 4503f58f6..5a7329d57 100644
--- a/src/components/Incidents/IncidentDetails/DefinitionOfDone/IncidentsDefinitionOfDoneItem.tsx
+++ b/src/components/Incidents/IncidentDetails/DefinitionOfDone/IncidentsDefinitionOfDoneItem.tsx
@@ -15,7 +15,7 @@ import { AiFillCheckCircle } from "react-icons/ai";
 import { BsHourglassSplit, BsTrash } from "react-icons/bs";
 import { FaEdit } from "react-icons/fa";
 import { MdRefresh } from "react-icons/md";
-import { IconButton } from "../../../IconButton";
+import { IconButton } from "../../../../ui/Buttons/IconButton";
 import EditEvidenceDefinitionOfDoneComment from "./EditEvidenceDefinitionOfDoneComment";
 import EditEvidenceDefinitionOfDoneScript from "./EditEvidenceDefinitionOfDoneScript";
 import { EvidenceView } from "./EvidenceView";
diff --git a/src/components/Incidents/IncidentDetails/EditableIncidentTitleBreadcrumb.tsx b/src/components/Incidents/IncidentDetails/EditableIncidentTitleBreadcrumb.tsx
index 7589ea811..5e6252710 100644
--- a/src/components/Incidents/IncidentDetails/EditableIncidentTitleBreadcrumb.tsx
+++ b/src/components/Incidents/IncidentDetails/EditableIncidentTitleBreadcrumb.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { MdModeEditOutline } from "react-icons/md";
 import { Incident } from "../../../api/types/incident";
-import { IconButton } from "../../IconButton";
+import { IconButton } from "../../../ui/Buttons/IconButton";
 import { EditIncidentTitleForm } from "./EditIncidentTitleForm";
 
 type EditableIncidentTitleBreadcrumbProps = {
diff --git a/src/components/Incidents/IncidentDetails/Responders.tsx b/src/components/Incidents/IncidentDetails/Responders.tsx
index b7687486a..b9c977b5d 100644
--- a/src/components/Incidents/IncidentDetails/Responders.tsx
+++ b/src/components/Incidents/IncidentDetails/Responders.tsx
@@ -8,7 +8,7 @@ import clsx from "clsx";
 import { useState } from "react";
 import { BsTrash } from "react-icons/bs";
 import { FaSpinner } from "react-icons/fa";
-import { IconButton } from "../../IconButton";
+import { IconButton } from "../../../ui/Buttons/IconButton";
 import { toastError, toastSuccess } from "../../Toast/toast";
 import { AddResponder } from "./AddResponders/AddResponder";
 import { IncidentDetailsRow } from "./IncidentDetailsRow";
diff --git a/src/components/Integrations/Add/steps/MissionControlRegistryOptions.tsx b/src/components/Integrations/Add/steps/MissionControlRegistryOptions.tsx
index 229eb8896..ce29d4a31 100644
--- a/src/components/Integrations/Add/steps/MissionControlRegistryOptions.tsx
+++ b/src/components/Integrations/Add/steps/MissionControlRegistryOptions.tsx
@@ -1,5 +1,5 @@
 import { FormikCodeEditor } from "@flanksource-ui/components/Forms/Formik/FormikCodeEditor";
-import { Button } from "@flanksource-ui/ui/Button";
+import { Button } from "@flanksource-ui/ui/Buttons/Button";
 import clsx from "clsx";
 import { Form, Formik } from "formik";
 import FormikTextInput from "../../../Forms/Formik/FormikTextInput";
diff --git a/src/components/Integrations/Topology/TopologyResourceForm.tsx b/src/components/Integrations/Topology/TopologyResourceForm.tsx
new file mode 100644
index 000000000..2af96f96a
--- /dev/null
+++ b/src/components/Integrations/Topology/TopologyResourceForm.tsx
@@ -0,0 +1,174 @@
+import clsx from "clsx";
+import { Form, Formik } from "formik";
+import { useCallback, useMemo } from "react";
+import { FaSpinner } from "react-icons/fa";
+import { useNavigate } from "react-router-dom";
+import {
+  useSettingsCreateResource,
+  useSettingsUpdateResource
+} from "../../../api/query-hooks/mutations/useSettingsResourcesMutations";
+import { Button } from "../../../ui/Buttons/Button";
+import { FormikCodeEditor } from "../../Forms/Formik/FormikCodeEditor";
+import FormikKeyValueMapField from "../../Forms/Formik/FormikKeyValueMapField";
+import FormikTextInput from "../../Forms/Formik/FormikTextInput";
+import DeleteResource from "../../SchemaResourcePage/Delete/DeleteResource";
+
+const resourceInfo = {
+  name: "Topology",
+  api: "incident-commander",
+  table: "topologies"
+} as const;
+
+export type TopologyResource = {
+  id: string;
+  name: string;
+  namespace: string;
+  labels: Record<string, string>;
+  source: string;
+  spec: Record<string, any>;
+};
+
+type TopologyResourceFormProps = {
+  topology?: TopologyResource;
+  onBack?: () => void;
+  onCancel?: () => void;
+  footerClassName?: string;
+  onSuccess?: () => void;
+  isModal?: boolean;
+};
+
+export default function TopologyResourceForm({
+  topology,
+  onBack,
+  footerClassName = "bg-gray-100 p-4",
+  onSuccess = () => {},
+  onCancel = () => {},
+  isModal = false
+}: TopologyResourceFormProps) {
+  const navigate = useNavigate();
+
+  const { mutate: createResource, isLoading: isCreatingResource } =
+    useSettingsCreateResource(resourceInfo, onSuccess);
+
+  const { mutate: updateResource, isLoading: isUpdatingResource } =
+    useSettingsUpdateResource(resourceInfo!, topology, {
+      onSuccess: () => {
+        navigate(`/settings/integrations`);
+      }
+    });
+
+  const isLoading = isCreatingResource || isUpdatingResource;
+
+  const initialValues: Omit<Partial<TopologyResource>, "id"> & {
+    id?: string;
+  } = useMemo(() => {
+    if (topology) {
+      return topology;
+    }
+    return {
+      namespace: "default",
+      source: "UI"
+    };
+  }, [topology]);
+
+  const handleSubmit = useCallback(
+    (
+      values: Omit<Partial<TopologyResource>, "id"> & {
+        id?: string;
+      }
+    ) => {
+      if (topology) {
+        updateResource(values);
+      } else {
+        createResource(values);
+      }
+    },
+    [createResource, topology, updateResource]
+  );
+
+  const saveButtonText = useMemo(() => {
+    if (topology) {
+      return isLoading ? "Updating" : "Update";
+    }
+    return isLoading ? "Saving" : "Save";
+  }, [isLoading, topology]);
+
+  return (
+    <div className="flex flex-col gap-2 overflow-y-auto h-full">
+      <Formik
+        initialValues={initialValues}
+        onSubmit={(values) => handleSubmit(values)}
+      >
+        {({ isValid, handleSubmit }) => (
+          <Form
+            onSubmit={handleSubmit}
+            className="flex flex-col flex-1 overflow-y-auto"
+          >
+            <div className="flex flex-col gap-4 p-4 overflow-y-auto flex-1">
+              <FormikTextInput label="Name" name="name" />
+              <FormikTextInput
+                label="Namespace"
+                name="namespace"
+                placeholder="Namespace"
+                defaultValue={"default"}
+              />
+              <FormikKeyValueMapField label="Labels" name="labels" outputJson />
+              <FormikCodeEditor
+                className={clsx(
+                  "flex flex-col",
+                  isModal ? "h-[400px]" : "min-h-[400px] flex-1"
+                )}
+                label="Spec"
+                fieldName="spec"
+                format="yaml"
+              />
+            </div>
+            <div className={`flex flex-col ${footerClassName}`}>
+              <div className="flex flex-1 flex-row items-center space-x-4 justify-end">
+                {!topology?.id && (
+                  <div className="flex flex-1 flex-row">
+                    <Button
+                      type="button"
+                      text="Back"
+                      className="btn-default btn-btn-secondary-base btn-secondary"
+                      onClick={onBack}
+                    />
+                  </div>
+                )}
+                {!!topology?.id && (
+                  <>
+                    <Button
+                      onClick={onCancel}
+                      text="Cancel"
+                      className="btn-secondary"
+                    />
+                    <div className="flex-1" />
+                    <DeleteResource
+                      resourceId={topology?.id}
+                      resourceInfo={resourceInfo}
+                      onDeleted={() => {
+                        navigate(`/settings/integrations`);
+                      }}
+                    />
+                  </>
+                )}
+
+                <Button
+                  disabled={!isValid}
+                  type="submit"
+                  icon={
+                    isLoading ? (
+                      <FaSpinner className="animate-spin" />
+                    ) : undefined
+                  }
+                  text={saveButtonText}
+                  className={clsx("btn-primary")}
+                />
+              </div>
+            </div>
+          </Form>
+        )}
+      </Formik>
+    </div>
+  );
+}
diff --git a/src/components/Layout/SearchLayout.tsx b/src/components/Layout/SearchLayout.tsx
index ab3175615..2e059a2e6 100644
--- a/src/components/Layout/SearchLayout.tsx
+++ b/src/components/Layout/SearchLayout.tsx
@@ -1,6 +1,6 @@
+import { RefreshButton } from "../../ui/Buttons/RefreshButton";
 import { HelpDropdown } from "../../ui/MenuBar/HelpDropdown";
 import DashboardErrorBoundary from "../Errors/DashboardErrorBoundary";
-import { RefreshButton } from "../RefreshButton";
 import { UserProfileDropdown } from "../Users/UserProfile/UserProfile";
 
 interface IProps {
diff --git a/src/components/LogBackends/LogBackendsForm.tsx b/src/components/LogBackends/LogBackendsForm.tsx
index 5d27f58c0..c25a99042 100644
--- a/src/components/LogBackends/LogBackendsForm.tsx
+++ b/src/components/LogBackends/LogBackendsForm.tsx
@@ -4,7 +4,7 @@ import {
   useSettingsCreateResource,
   useSettingsUpdateResource
 } from "../../api/query-hooks/mutations/useSettingsResourcesMutations";
-import { Button } from "../../ui/Button";
+import { Button } from "../../ui/Buttons/Button";
 import { FormikCodeEditor } from "../Forms/Formik/FormikCodeEditor";
 import FormikKeyValueMapField from "../Forms/Formik/FormikKeyValueMapField";
 import FormikTextInput from "../Forms/Formik/FormikTextInput";
diff --git a/src/components/Notifications/NotificationsForm.tsx b/src/components/Notifications/NotificationsForm.tsx
index f3fdf53a6..f69f03c4e 100644
--- a/src/components/Notifications/NotificationsForm.tsx
+++ b/src/components/Notifications/NotificationsForm.tsx
@@ -1,5 +1,5 @@
 import { Form, Formik } from "formik";
-import { Button } from "../../ui/Button";
+import { Button } from "../../ui/Buttons/Button";
 import { FormikCodeEditor } from "../Forms/Formik/FormikCodeEditor";
 import FormikNotificationEventsDropdown from "../Forms/Formik/FormikNotificationEventsDropdown";
 import FormikNotificationsTemplateField from "../Forms/Formik/FormikNotificationsTemplateField";
diff --git a/src/components/Notifications/notificationsTableColumns.tsx b/src/components/Notifications/notificationsTableColumns.tsx
index d63d3622a..07c0e4017 100644
--- a/src/components/Notifications/notificationsTableColumns.tsx
+++ b/src/components/Notifications/notificationsTableColumns.tsx
@@ -1,12 +1,12 @@
+import { Team, User } from "@flanksource-ui/api/types/users";
+import { Avatar } from "@flanksource-ui/ui/Avatar";
+import { Badge } from "@flanksource-ui/ui/Badge/Badge";
+import { DateCell } from "@flanksource-ui/ui/table";
 import { formatDuration } from "@flanksource-ui/utils/date";
 import { CellContext, ColumnDef } from "@tanstack/react-table";
 import { atom, useAtom } from "jotai";
 import { useState } from "react";
 import { Tooltip } from "react-tooltip";
-import { Team, User } from "../../api/types/users";
-import { Avatar } from "../../ui/Avatar";
-import { Badge } from "../../ui/Badge";
-import { DateCell } from "../../ui/table";
 import { Icon } from "../Icon";
 import JobHistoryStatusColumn from "../JobsHistory/JobHistoryStatusColumn";
 import { JobsHistoryDetails } from "../JobsHistory/JobsHistoryDetails";
diff --git a/src/components/Playbooks/Runs/Actions/ShowParamaters/ShowPlaybookRunsParams.tsx b/src/components/Playbooks/Runs/Actions/ShowParamaters/ShowPlaybookRunsParams.tsx
index 3187d68c2..426d64838 100644
--- a/src/components/Playbooks/Runs/Actions/ShowParamaters/ShowPlaybookRunsParams.tsx
+++ b/src/components/Playbooks/Runs/Actions/ShowParamaters/ShowPlaybookRunsParams.tsx
@@ -1,5 +1,5 @@
 import { PlaybookRunWithActions } from "@flanksource-ui/api/types/playbooks";
-import { Button } from "@flanksource-ui/ui/Button";
+import { Button } from "@flanksource-ui/ui/Buttons/Button";
 import { useMemo, useState } from "react";
 import ViewPlaybookParamsModal from "./ViewPlaybookParamsModal";
 
diff --git a/src/components/Playbooks/Runs/Filter/PlaybookRunsFilterBar.tsx b/src/components/Playbooks/Runs/Filter/PlaybookRunsFilterBar.tsx
index b703687ef..3d58e226f 100644
--- a/src/components/Playbooks/Runs/Filter/PlaybookRunsFilterBar.tsx
+++ b/src/components/Playbooks/Runs/Filter/PlaybookRunsFilterBar.tsx
@@ -1,5 +1,5 @@
 import { PlaybookSpec } from "@flanksource-ui/api/types/playbooks";
-import { Button } from "@flanksource-ui/ui/Button";
+import { Button } from "@flanksource-ui/ui/Buttons/Button";
 import { TimeRangePicker } from "@flanksource-ui/ui/TimeRangePicker";
 import useTimeRangeParams from "@flanksource-ui/ui/TimeRangePicker/useTimeRangeParams";
 import { useState } from "react";
diff --git a/src/components/Playbooks/Runs/Submit/SubmitPlaybookRunForm.tsx b/src/components/Playbooks/Runs/Submit/SubmitPlaybookRunForm.tsx
index 65be2aba7..0e5db6d51 100644
--- a/src/components/Playbooks/Runs/Submit/SubmitPlaybookRunForm.tsx
+++ b/src/components/Playbooks/Runs/Submit/SubmitPlaybookRunForm.tsx
@@ -1,6 +1,6 @@
 import { useSubmitPlaybookRunMutation } from "@flanksource-ui/api/query-hooks/playbooks";
 import { PlaybookSpec } from "@flanksource-ui/api/types/playbooks";
-import { Button } from "@flanksource-ui/ui/Button";
+import { Button } from "@flanksource-ui/ui/Buttons/Button";
 import { Modal, ModalSize } from "@flanksource-ui/ui/Modal";
 import { AxiosError } from "axios";
 import { Form, Formik } from "formik";
diff --git a/src/components/Playbooks/Settings/PlaybookCardMenu.tsx b/src/components/Playbooks/Settings/PlaybookCardMenu.tsx
index 73779d2c0..5a407a55f 100644
--- a/src/components/Playbooks/Settings/PlaybookCardMenu.tsx
+++ b/src/components/Playbooks/Settings/PlaybookCardMenu.tsx
@@ -3,7 +3,7 @@ import { Menu } from "@headlessui/react";
 import { DotsVerticalIcon } from "@heroicons/react/solid";
 import { BsTrash } from "react-icons/bs";
 import { MdEdit } from "react-icons/md";
-import { IconButton } from "../../IconButton";
+import { IconButton } from "../../../ui/Buttons/IconButton";
 
 type PlaybookCardMenuDropdownProps = {
   onDeletePlaybook?: () => void;
diff --git a/src/components/Playbooks/Settings/PlaybookSpecCard.tsx b/src/components/Playbooks/Settings/PlaybookSpecCard.tsx
index c8b5296c5..bca977d95 100644
--- a/src/components/Playbooks/Settings/PlaybookSpecCard.tsx
+++ b/src/components/Playbooks/Settings/PlaybookSpecCard.tsx
@@ -4,7 +4,7 @@ import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { deletePlaybookSpec } from "../../../api/services/playbooks";
 import { PlaybookNames } from "../../../api/types/playbooks";
-import { Button } from "../../../ui/Button";
+import { Button } from "../../../ui/Buttons/Button";
 import { Icon } from "../../Icon";
 import { toastError, toastSuccess } from "../../Toast/toast";
 import SubmitPlaybookRunForm from "../Runs/Submit/SubmitPlaybookRunForm";
diff --git a/src/components/Playbooks/Settings/PlaybookSpecsForm.tsx b/src/components/Playbooks/Settings/PlaybookSpecsForm.tsx
index 7bd4f2e40..8edb747e0 100644
--- a/src/components/Playbooks/Settings/PlaybookSpecsForm.tsx
+++ b/src/components/Playbooks/Settings/PlaybookSpecsForm.tsx
@@ -13,7 +13,7 @@ import {
   UpdatePlaybookSpec
 } from "../../../api/types/playbooks";
 import { useUser } from "../../../context";
-import { Button } from "../../../ui/Button";
+import { Button } from "../../../ui/Buttons/Button";
 import { Modal } from "../../../ui/Modal";
 import { FormikCodeEditor } from "../../Forms/Formik/FormikCodeEditor";
 import FormikTextInput from "../../Forms/Formik/FormikTextInput";
diff --git a/src/components/SchemaResourcePage/Delete/DeleteResource.tsx b/src/components/SchemaResourcePage/Delete/DeleteResource.tsx
index d88cb0efd..3545afe0d 100644
--- a/src/components/SchemaResourcePage/Delete/DeleteResource.tsx
+++ b/src/components/SchemaResourcePage/Delete/DeleteResource.tsx
@@ -1,6 +1,6 @@
 import { useSettingsDeleteResource } from "@flanksource-ui/api/query-hooks/mutations/useSettingsResourcesMutations";
 import { ConfirmationPromptDialog } from "@flanksource-ui/ui/AlertDialog/ConfirmationPromptDialog";
-import { Button } from "@flanksource-ui/ui/Button";
+import { Button } from "@flanksource-ui/ui/Buttons/Button";
 import { useCallback, useState } from "react";
 import { FaCircleNotch, FaTrash } from "react-icons/fa";
 import { toastSuccess } from "../../Toast/toast";
diff --git a/src/components/SchemaResourcePage/SchemaResourceEdit.tsx b/src/components/SchemaResourcePage/SchemaResourceEdit.tsx
index 6831db917..8f82346c2 100644
--- a/src/components/SchemaResourcePage/SchemaResourceEdit.tsx
+++ b/src/components/SchemaResourcePage/SchemaResourceEdit.tsx
@@ -1,6 +1,6 @@
 import { SchemaResourceI } from "@flanksource-ui/api/schemaResources";
 import AutoCompleteDropdown from "@flanksource-ui/ui/AutoCompleteDropdown/AutoCompleteDropdown";
-import { Button } from "@flanksource-ui/ui/Button";
+import { Button } from "@flanksource-ui/ui/Buttons/Button";
 import clsx from "clsx";
 import { identity, pickBy } from "lodash";
 import dynamic from "next/dynamic";
diff --git a/src/components/SpecEditor/SpecEditor.tsx b/src/components/SpecEditor/SpecEditor.tsx
index 1fe410a51..976a38004 100644
--- a/src/components/SpecEditor/SpecEditor.tsx
+++ b/src/components/SpecEditor/SpecEditor.tsx
@@ -1,4 +1,4 @@
-import { Button } from "@flanksource-ui/ui/Button";
+import { Button } from "@flanksource-ui/ui/Buttons/Button";
 import { modalHelpLinkAtom } from "@flanksource-ui/ui/Modal";
 import { useAtom } from "jotai";
 import React, { useEffect, useState } from "react";
diff --git a/src/components/TeamMembers/TeamMembers.tsx b/src/components/TeamMembers/TeamMembers.tsx
index 77999a0ff..8aacfe290 100644
--- a/src/components/TeamMembers/TeamMembers.tsx
+++ b/src/components/TeamMembers/TeamMembers.tsx
@@ -11,11 +11,11 @@ import { getPersons } from "../../api/services/users";
 import { User } from "../../api/types/users";
 import { useLoader } from "../../hooks";
 import { Avatar } from "../../ui/Avatar";
+import { IconButton } from "../../ui/Buttons/IconButton";
 import { Menu } from "../../ui/Menu";
 import { Modal } from "../../ui/Modal";
 import TableSkeletonLoader from "../../ui/SkeletonLoader/TableSkeletonLoader";
 import EmptyState from "../EmptyState";
-import { IconButton } from "../IconButton";
 import MultiSelectList from "../MultiSelectList/MultiSelectList";
 import { toastError, toastSuccess } from "../Toast/toast";
 
diff --git a/src/components/Topology/Settings/StepsForms/TopologyResourceForm.tsx b/src/components/Topology/Settings/StepsForms/TopologyResourceForm.tsx
index 859640896..fe59434c4 100644
--- a/src/components/Topology/Settings/StepsForms/TopologyResourceForm.tsx
+++ b/src/components/Topology/Settings/StepsForms/TopologyResourceForm.tsx
@@ -10,7 +10,7 @@ import {
   useSettingsCreateResource,
   useSettingsUpdateResource
 } from "../../../../api/query-hooks/mutations/useSettingsResourcesMutations";
-import { Button } from "../../../../ui/Button";
+import { Button } from "../../../../ui/Buttons/Button";
 import FormSkeletonLoader from "../../../../ui/SkeletonLoader/FormSkeletonLoader";
 import { FormikCodeEditor } from "../../../Forms/Formik/FormikCodeEditor";
 import FormikKeyValueMapField from "../../../Forms/Formik/FormikKeyValueMapField";
diff --git a/src/components/Topology/Sidebar/TopologyActionBar.tsx b/src/components/Topology/Sidebar/TopologyActionBar.tsx
index 6b3cae416..095122148 100644
--- a/src/components/Topology/Sidebar/TopologyActionBar.tsx
+++ b/src/components/Topology/Sidebar/TopologyActionBar.tsx
@@ -1,15 +1,15 @@
+import useUpdateComponentMutation from "@flanksource-ui/api/query-hooks/mutations/useUpdateComponentMutation";
+import { EvidenceType } from "@flanksource-ui/api/types/evidence";
+import { Topology } from "@flanksource-ui/api/types/topology";
+import { useFeatureFlagsContext } from "@flanksource-ui/context/FeatureFlagsContext";
+import { features } from "@flanksource-ui/services/permissions/features";
+import { ActionLink } from "@flanksource-ui/ui/Buttons/ActionLink";
 import React, { useMemo, useState } from "react";
 import { IconType } from "react-icons";
 import { BiHide, BiLink, BiShow, BiZoomIn } from "react-icons/bi";
 import { ImTree } from "react-icons/im";
 import { MdAlarmAdd, MdTableRows } from "react-icons/md";
 import { useNavigate } from "react-router-dom";
-import useUpdateComponentMutation from "../../../api/query-hooks/mutations/useUpdateComponentMutation";
-import { EvidenceType } from "../../../api/types/evidence";
-import { Topology } from "../../../api/types/topology";
-import { useFeatureFlagsContext } from "../../../context/FeatureFlagsContext";
-import { features } from "../../../services/permissions/features";
-import { ActionLink } from "../../../ui/ActionLink/ActionLink";
 import { AttachEvidenceDialog } from "../../Incidents/AttachEvidenceDialog";
 import PlaybooksDropdownMenu from "../../Playbooks/Runs/Submit/PlaybooksDropdownMenu";
 import TopologySnapshotModal from "../TopologyCard/TopologySnapshotModal";
diff --git a/src/components/Topology/Sidebar/TopologySidebar.tsx b/src/components/Topology/Sidebar/TopologySidebar.tsx
index 0b2fdcaa5..b94bdd979 100644
--- a/src/components/Topology/Sidebar/TopologySidebar.tsx
+++ b/src/components/Topology/Sidebar/TopologySidebar.tsx
@@ -1,4 +1,4 @@
-import { Button } from "@flanksource-ui/ui/Button";
+import { Button } from "@flanksource-ui/ui/Buttons/Button";
 import SlidingSideBar from "@flanksource-ui/ui/SlidingSideBar/SlidingSideBar";
 import { useCallback, useState } from "react";
 import { MdMenu } from "react-icons/md";
diff --git a/src/components/Users/UserList/index.tsx b/src/components/Users/UserList/index.tsx
index 4234de0ae..8b1d9c187 100644
--- a/src/components/Users/UserList/index.tsx
+++ b/src/components/Users/UserList/index.tsx
@@ -10,8 +10,8 @@ import { CellContext } from "@tanstack/table-core";
 import clsx from "clsx";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { BsTrash } from "react-icons/bs";
+import { IconButton } from "../../../ui/Buttons/IconButton";
 import { withAccessCheck } from "../../Authentication/AccessCheck/AccessCheck";
-import { IconButton } from "../../IconButton";
 
 type UserListProps = {
   data: any[];
diff --git a/src/components/index.js b/src/components/index.js
index ee4c9ff95..6ad629b2f 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,5 +1,5 @@
-import { Badge } from "@flanksource-ui/ui/Badge";
-import { Button } from "@flanksource-ui/ui/Button";
+import { Badge } from "@flanksource-ui/ui/Badge/Badge";
+import { Button } from "@flanksource-ui/ui/Buttons/Button";
 import { DataTable } from "@flanksource-ui/ui/DataTable";
 import { Modal } from "@flanksource-ui/ui/Modal";
 import { Canary } from "./Canary";
diff --git a/src/ui/AlertDialog/AlertMessageDialog.tsx b/src/ui/AlertDialog/AlertMessageDialog.tsx
index be4475f9a..9d7efa158 100644
--- a/src/ui/AlertDialog/AlertMessageDialog.tsx
+++ b/src/ui/AlertDialog/AlertMessageDialog.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Button } from "../Button";
+import { Button } from "../Buttons/Button";
 import { Modal } from "../Modal";
 
 type AlertMessageDialogProps = {
diff --git a/src/ui/Badge/Badge.stories.tsx b/src/ui/Badge/Badge.stories.tsx
index 222812e2f..c2a52cf48 100644
--- a/src/ui/Badge/Badge.stories.tsx
+++ b/src/ui/Badge/Badge.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentStory } from "@storybook/react";
-import { Badge } from "./index";
+import { Badge } from "./Badge";
 
 export default {
   title: "Badge",
diff --git a/src/ui/Badge/index.tsx b/src/ui/Badge/Badge.tsx
similarity index 96%
rename from src/ui/Badge/index.tsx
rename to src/ui/Badge/Badge.tsx
index aa2a23473..843ea8e0b 100644
--- a/src/ui/Badge/index.tsx
+++ b/src/ui/Badge/Badge.tsx
@@ -12,7 +12,7 @@ type BadgeProps = {
   roundedClass?: string;
 };
 
-export const Badge = React.memo(function ({
+export function Badge({
   text,
   value,
   size = "sm",
@@ -52,4 +52,4 @@ export const Badge = React.memo(function ({
       {value != null && `: ${value}`}
     </>
   );
-});
+}
diff --git a/src/ui/ActionLink/ActionLink.tsx b/src/ui/Buttons/ActionLink.tsx
similarity index 91%
rename from src/ui/ActionLink/ActionLink.tsx
rename to src/ui/Buttons/ActionLink.tsx
index 2e5951600..a4972dc46 100644
--- a/src/ui/ActionLink/ActionLink.tsx
+++ b/src/ui/Buttons/ActionLink.tsx
@@ -1,4 +1,4 @@
-import { Button } from "../Button";
+import { Button } from "./Button";
 
 type ActionLinkProps = {
   onClick?: () => void;
diff --git a/src/ui/Button/Button.stories.tsx b/src/ui/Buttons/Button.stories.tsx
similarity index 94%
rename from src/ui/Button/Button.stories.tsx
rename to src/ui/Buttons/Button.stories.tsx
index d9af4a1cf..508223487 100644
--- a/src/ui/Button/Button.stories.tsx
+++ b/src/ui/Buttons/Button.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentStory } from "@storybook/react";
-import { Button } from "./index";
+import { Button } from "./Button";
 
 export default {
   title: "Button",
diff --git a/src/ui/Button/index.tsx b/src/ui/Buttons/Button.tsx
similarity index 100%
rename from src/ui/Button/index.tsx
rename to src/ui/Buttons/Button.tsx
diff --git a/src/components/IconButton/IconButton.stories.tsx b/src/ui/Buttons/IconButton.stories.tsx
similarity index 94%
rename from src/components/IconButton/IconButton.stories.tsx
rename to src/ui/Buttons/IconButton.stories.tsx
index 05dbed51d..57d5433bb 100644
--- a/src/components/IconButton/IconButton.stories.tsx
+++ b/src/ui/Buttons/IconButton.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from "@storybook/react";
 import { BsTrash } from "react-icons/bs";
-import { IconButton } from "./index";
+import { IconButton } from "./IconButton";
 
 export default {
   title: "IconButton",
diff --git a/src/components/IconButton/index.tsx b/src/ui/Buttons/IconButton.tsx
similarity index 100%
rename from src/components/IconButton/index.tsx
rename to src/ui/Buttons/IconButton.tsx
diff --git a/src/components/RefreshButton/RefreshButton.stories.tsx b/src/ui/Buttons/RefreshButton.stories.tsx
similarity index 88%
rename from src/components/RefreshButton/RefreshButton.stories.tsx
rename to src/ui/Buttons/RefreshButton.stories.tsx
index c8a4c8c41..413df8820 100644
--- a/src/components/RefreshButton/RefreshButton.stories.tsx
+++ b/src/ui/Buttons/RefreshButton.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentStory } from "@storybook/react";
-import { RefreshButton } from "./index";
+import { RefreshButton } from "./RefreshButton";
 
 export default {
   title: "RefreshButton",
diff --git a/src/components/RefreshButton/index.tsx b/src/ui/Buttons/RefreshButton.tsx
similarity index 92%
rename from src/components/RefreshButton/index.tsx
rename to src/ui/Buttons/RefreshButton.tsx
index d86bdefdd..0edcb890b 100644
--- a/src/components/RefreshButton/index.tsx
+++ b/src/ui/Buttons/RefreshButton.tsx
@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import { HiOutlineRefresh } from "react-icons/hi";
-import { ClickableSvg } from "../../ui/ClickableSvg/ClickableSvg";
+import { ClickableSvg } from "../ClickableSvg/ClickableSvg";
 
 interface IProps extends React.ComponentPropsWithoutRef<"button"> {
   onClick: () => void;
diff --git a/src/ui/CodeBlock/CodeBlock.tsx b/src/ui/CodeBlock/CodeBlock.tsx
index 3fcc4fdca..b8d6176d7 100644
--- a/src/ui/CodeBlock/CodeBlock.tsx
+++ b/src/ui/CodeBlock/CodeBlock.tsx
@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import { FaCopy } from "react-icons/fa";
 import { useCopyToClipboard } from "../../components/Hooks/useCopyToClipboard";
-import { Button } from "../Button";
+import { Button } from "../Buttons/Button";
 
 type Props = {
   code: string;
diff --git a/src/ui/DataTable/DataTableRow.tsx b/src/ui/DataTable/DataTableRow.tsx
index 14934fb53..3847664e3 100644
--- a/src/ui/DataTable/DataTableRow.tsx
+++ b/src/ui/DataTable/DataTableRow.tsx
@@ -2,7 +2,7 @@ import { flexRender } from "@tanstack/react-table";
 import { Row, RowData } from "@tanstack/table-core";
 import { useCallback } from "react";
 import { IoChevronForwardOutline } from "react-icons/io5";
-import { Badge } from "../Badge";
+import { Badge } from "../Badge/Badge";
 
 type DataTableRowProps<TableColumns extends RowData> = {
   row: Row<TableColumns>;
diff --git a/src/ui/JSONViewer/index.tsx b/src/ui/JSONViewer/index.tsx
index bd57bb708..525c3fdcf 100644
--- a/src/ui/JSONViewer/index.tsx
+++ b/src/ui/JSONViewer/index.tsx
@@ -3,7 +3,7 @@ import { ComponentProps, useMemo } from "react";
 import { GoCopy } from "react-icons/go";
 import { parse, stringify } from "yaml";
 import { useCopyToClipboard } from "../../components/Hooks/useCopyToClipboard";
-import { Button } from "../Button";
+import { Button } from "../Buttons/Button";
 import theme from "./theme";
 
 type RenderProps = Parameters<