diff --git a/dashboard/legacy/main/home/cluster-dashboard/DashboardRouter.tsx b/dashboard/legacy/main/home/cluster-dashboard/DashboardRouter.tsx
deleted file mode 100644
index 9ef3a949e4..0000000000
--- a/dashboard/legacy/main/home/cluster-dashboard/DashboardRouter.tsx
+++ /dev/null
@@ -1,185 +0,0 @@
-import React, { useContext, useEffect, useState } from "react";
-import loadable from "@loadable/component";
-import { RouteComponentProps, withRouter } from "react-router";
-import { Route, Switch } from "react-router-dom";
-import styled from "styled-components";
-
-import Loading from "components/Loading";
-
-import api from "shared/api";
-import { withAuth, WithAuthProps } from "shared/auth/AuthorizationHoc";
-import GuardedRoute from "shared/auth/RouteGuard";
-import { Context } from "shared/Context";
-import { getQueryParam, PorterUrl, pushQueryParams } from "shared/routing";
-import { ClusterType } from "shared/types";
-
-import AppDashboard from "./apps/AppDashboard.ts";
-import DashboardRoutes from "./dashboard/Routes.ts";
-import EnvGroupDashboard from "./env-groups/EnvGroupDashboard.ts";
-import ExpandedEnvGroupDashboard from "./env-groups/ExpandedEnvGroupDashboard.ts";
-import ExpandedChartWrapper from "./expanded-chart/ExpandedChartWrapper.ts";
-import JobDashboard from "./jobs/JobDashboard.ts";
-
-const LazyPreviewEnvironmentsRoutes = loadable(
-  // @ts-ignore
-  () => import("./preview-environments/routes.tsx"),
-  {
-    fallback: <Loading />,
-  }
-);
-
-const LazyStackRoutes = loadable(
-  // @ts-ignore
-  () => import("./stacks/routes.tsx"),
-  {
-    fallback: <Loading />,
-  }
-);
-
-type Props = RouteComponentProps &
-  WithAuthProps & {
-    currentCluster: ClusterType;
-    setSidebar: (x: boolean) => void;
-    currentView: PorterUrl;
-  };
-
-// TODO: should try to maintain single source of truth b/w router and context/state (ex: namespace -> being managed in parallel right now so highly inextensible and routing is fragile)
-const DashboardRouter: React.FC<Props> = ({
-  setSidebar,
-  currentView,
-  ...props
-}) => {
-  const { currentProject, currentCluster } = useContext(Context);
-  const [namespace, setNamespace] = useState(null);
-  const [sortType, setSortType] = useState(
-    localStorage.getItem("SortType") || "Newest"
-  );
-  const [currentChart, setCurrentChart] = useState(null);
-  const [isMetricsInstalled, setIsMetricsInstalled] = useState(false);
-
-  useEffect(() => {
-    // Don't add cluster as query param if present in path
-    const { cluster } = props.match?.params as any;
-    if (!cluster) {
-      pushQueryParams(props, { cluster: currentCluster.name });
-    }
-    api
-      .getPrometheusIsInstalled(
-        "<token>",
-        {},
-        {
-          id: currentProject.id,
-          cluster_id: currentCluster.id,
-        }
-      )
-      .then((res) => {
-        setIsMetricsInstalled(true);
-      })
-      .catch(() => {
-        setIsMetricsInstalled(false);
-      });
-  }, []);
-
-  // Reset namespace filter and close expanded chart on cluster change
-  useEffect(() => {
-    let namespace = "default";
-    let localStorageNamespace = localStorage.getItem(
-      `${currentProject.id}-${currentCluster.id}-namespace`
-    );
-    if (localStorageNamespace) {
-      namespace = localStorageNamespace;
-    }
-    setNamespace(namespace);
-    setSortType(localStorage.getItem("SortType") || "Newest");
-    setCurrentChart(null);
-
-    // ret2
-    pushQueryParams(props, { namespace });
-  }, [currentCluster]);
-
-  useEffect(() => {
-    let { currentNamespace } =
-      currentProject?.simplified_view_enabled &&
-      currentProject?.capi_provisioner_enabled
-        ? "porter-env-group"
-        : (props.match?.params as any);
-    if (!currentNamespace) {
-      currentNamespace =
-        currentProject?.simplified_view_enabled &&
-        currentProject?.capi_provisioner_enabled
-          ? "porter-env-group"
-          : getQueryParam(props, "namespace");
-    }
-    setSortType("Newest");
-    setCurrentChart(null);
-    setNamespace(currentNamespace || "default");
-    pushQueryParams(props, { namespace: currentNamespace || "default" });
-  }, [currentView]);
-
-  return (
-    <Switch>
-      <Route path={"/stacks"}>
-        <LazyStackRoutes />
-      </Route>
-      <Route path={"/preview-environments"}>
-        <LazyPreviewEnvironmentsRoutes />
-      </Route>
-      <Route path="/:baseRoute/:clusterName+/:namespace/:chartName">
-        <ExpandedChartWrapper
-          setSidebar={setSidebar}
-          isMetricsInstalled={isMetricsInstalled}
-        />
-      </Route>
-      <GuardedRoute
-        path={"/applications"}
-        scope="application"
-        resource=""
-        verb={["get", "list"]}
-      >
-        <AppDashboard
-          currentView={currentView}
-          namespace={namespace}
-          setNamespace={setNamespace}
-          sortType={sortType}
-          setSortType={setSortType}
-        />
-      </GuardedRoute>
-      <GuardedRoute
-        path={"/jobs"}
-        scope="job"
-        resource=""
-        verb={["get", "list"]}
-      >
-        <JobDashboard
-          currentView={currentView}
-          namespace={namespace}
-          setNamespace={setNamespace}
-          sortType={sortType}
-        />
-      </GuardedRoute>
-      <GuardedRoute
-        path={"/env-groups/:name"}
-        scope="env_group"
-        resource=""
-        verb={["get", "list"]}
-      >
-        <ExpandedEnvGroupDashboard currentCluster={currentCluster} />
-      </GuardedRoute>
-      <GuardedRoute
-        path={"/env-groups"}
-        scope="env_group"
-        resource=""
-        verb={["get", "list"]}
-      >
-        <EnvGroupDashboard currentCluster={currentCluster} />
-      </GuardedRoute>
-      <Route path={["/cluster-dashboard"]}>
-        <DashboardRoutes />
-      </Route>
-    </Switch>
-  );
-};
-
-export default withRouter(withAuth(DashboardRouter));
-
-const StyledTemplateComponent = styled.div``;
diff --git a/dashboard/src/assets/GithubIcon.tsx b/dashboard/src/assets/GithubIcon.tsx
deleted file mode 100644
index e5739e1d54..0000000000
--- a/dashboard/src/assets/GithubIcon.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React, { Component } from "react";
-import styled from "styled-components";
-
-type PropsType = {};
-
-type StateType = {};
-
-export default class GHIcon extends Component<PropsType, StateType> {
-  render() {
-    return (
-      <Svg height="18" width="18" viewBox="0 0 16 16">
-        <path
-          fillRule="evenodd"
-          d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
-        />
-      </Svg>
-    );
-  }
-}
-
-const Svg = styled.svg`
-  fill: white;
-  margin-right: 6px;
-`;
diff --git a/dashboard/src/assets/code-branch-icon.tsx b/dashboard/src/assets/code-branch-icon.tsx
deleted file mode 100644
index 088daf7b9f..0000000000
--- a/dashboard/src/assets/code-branch-icon.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React, { SVGProps } from "react";
-
-function Icon(props: SVGProps<SVGElement>) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 448 512"
-      className={props.className}
-    >
-      <path d="M160 80c0 32.8-19.7 60.1-48 73.3v87.8c18.8-10.9 40.7-17.1 64-17.1h96c35.3 0 64-28.7 64-64v-6.7c-28.3-13.2-48-40.5-48-73.3 0-44.18 35.8-80 80-80s80 35.82 80 80c0 32.8-19.7 60.1-48 73.3v6.7c0 70.7-57.3 128-128 128h-96c-35.3 0-64 28.7-64 64v6.7c28.3 12.3 48 40.5 48 73.3 0 44.2-35.8 80-80 80-44.18 0-80-35.8-80-80 0-32.8 19.75-61 48-73.3V153.3C19.75 140.1 0 112.8 0 80 0 35.82 35.82 0 80 0c44.2 0 80 35.82 80 80zm-80 24c13.25 0 24-10.75 24-24S93.25 56 80 56 56 66.75 56 80s10.75 24 24 24zm288-48c-13.3 0-24 10.75-24 24s10.7 24 24 24 24-10.75 24-24-10.7-24-24-24zM80 456c13.25 0 24-10.7 24-24s-10.75-24-24-24-24 10.7-24 24 10.75 24 24 24z"></path>
-    </svg>
-  );
-}
-
-export default Icon;
diff --git a/dashboard/src/assets/command-line-icon.tsx b/dashboard/src/assets/command-line-icon.tsx
deleted file mode 100644
index 1cac5e78a0..0000000000
--- a/dashboard/src/assets/command-line-icon.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React, { SVGProps } from "react";
-import styled from "styled-components";
-
-function CommandLineIcon(props: SVGProps<SVGElement>) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      x="0"
-      y="0"
-      version="1.1"
-      viewBox="0 0 24 24"
-      xmlSpace="preserve"
-      className={props.className}
-      onClick={props.onClick}
-    >
-      <linearGradient
-        x1="825.344"
-        x2="825.344"
-        y1="-528.502"
-        y2="-529.502"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop offset="0" stopColor="#656565"></stop>
-        <stop offset="0.618" stopColor="#1b1b1b"></stop>
-        <stop offset="0.629" stopColor="#545454"></stop>
-        <stop offset="0.983" stopColor="#3e3e3e"></stop>
-      </linearGradient>
-      <path d="M3.2 17.3L2 15.9c-.2-.2-.2-.6.1-.7l5.4-4.5c.3-.2.3-.6 0-.8L2 5.4c-.2-.2-.2-.5 0-.8l1.2-1.5c.2-.1.5-.2.7 0l7.6 6.3c.5.4.5 1.3 0 1.7l-7.6 6.3c-.2.2-.5.2-.7-.1zM21.6 21H9.4c-.3 0-.6-.2-.6-.5v-1.9c0-.3.2-.5.6-.5h12.2c.3 0 .6.2.6.5v1.9c-.1.3-.3.5-.6.5z"></path>
-    </svg>
-  );
-}
-
-export default CommandLineIcon;
-
-const SVG = styled.svg``;
diff --git a/dashboard/src/components/CheckboxList.tsx b/dashboard/src/components/CheckboxList.tsx
deleted file mode 100644
index 39c125d816..0000000000
--- a/dashboard/src/components/CheckboxList.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import React, { useEffect } from "react";
-import styled from "styled-components";
-
-type PropsType = {
-  label?: string;
-  options: { disabled?: boolean; value: any; label: string }[];
-  selected: { value: any; label: string }[];
-  setSelected: (x: { value: any; label: string }[]) => void;
-};
-
-const arraysEqual = (a: any, b: any) => {
-  if (a === b) return true;
-  if (a == null || b == null) return false;
-  if (a.length !== b.length) return false;
-
-  // If you don't care about the order of the elements inside
-  // the array, you should sort both arrays here.
-  // Please note that calling sort on an array will modify that array.
-  // you might want to clone your array first.
-
-  for (var i = 0; i < a.length; ++i) {
-    if (a[i] !== b[i]) return false;
-  }
-  return true;
-};
-
-const CheckboxList = ({ label, options, selected, setSelected }: PropsType) => {
-  let onSelectOption = (option: { value: any; label: string }) => {
-    const tmp = [...selected];
-    if (
-      tmp.filter(
-        (e) => e.value === option.value || arraysEqual(e.value, option.value)
-      ).length === 0
-    ) {
-      setSelected([...tmp, option]);
-    } else {
-      tmp.forEach((x, i) => {
-        if (x.value === option.value || arraysEqual(x.value, option.value)) {
-          tmp.splice(i, 1);
-        }
-      });
-      setSelected(tmp);
-    }
-  };
-
-  return (
-    <StyledCheckboxList>
-      {label && <Label>{label}</Label>}
-      {options.map((option: { value: any; label: string }, i: number) => {
-        return (
-          <CheckboxOption
-            isLast={i === options.length - 1}
-            onClick={() => onSelectOption(option)}
-            key={i}
-          >
-            <Checkbox
-              checked={
-                selected.filter(
-                  (e) =>
-                    e.value === option.value ||
-                    arraysEqual(e.value, option.value)
-                ).length > 0
-              }
-            >
-              <i className="material-icons">done</i>
-            </Checkbox>
-            <Text>{option.label}</Text>
-          </CheckboxOption>
-        );
-      })}
-    </StyledCheckboxList>
-  );
-};
-export default CheckboxList;
-
-const Text = styled.div`
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  word-break: anywhere;
-  margin-right: 10px;
-`;
-
-const Checkbox = styled.div`
-  width: 14px;
-  height: 14px;
-  min-width: 14px;
-  border: 1px solid #ffffff55;
-  margin: 1px 10px 0px 1px;
-  border-radius: 3px;
-  background: ${(props: { checked: boolean }) =>
-    props.checked ? "#ffffff22" : "#ffffff11"};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  > i {
-    font-size: 12px;
-    padding-left: 0px;
-    display: ${(props: { checked: boolean }) => (props.checked ? "" : "none")};
-  }
-`;
-
-const CheckboxOption = styled.div<{ isLast: boolean }>`
-  width: 100%;
-  height: 35px;
-  padding-left: 10px;
-  display: flex;
-  cursor: pointer;
-  align-items: center;
-  font-size: 13px;
-
-  :hover {
-    background: #ffffff18;
-  }
-`;
-
-const Label = styled.div`
-  color: #ffffff;
-  margin-bottom: 10px;
-`;
-
-const StyledCheckboxList = styled.div`
-  border-radius: 3px;
-  padding: 0;
-`;
diff --git a/dashboard/src/components/Dropdown.tsx b/dashboard/src/components/Dropdown.tsx
deleted file mode 100644
index 8503928132..0000000000
--- a/dashboard/src/components/Dropdown.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-import React, { useState } from "react";
-import styled from "styled-components";
-
-type Option = {
-  value: unknown;
-  label: string;
-};
-
-type DropdownProps = {
-  options: Array<Option>;
-  selectedOption: Option;
-  onSelect?: (selectedOption: Option) => unknown;
-  selectLabel?: (currentLabel: string) => void;
-  selectValue?: (currentValue: any) => void;
-};
-
-const Dropdown: React.FunctionComponent<DropdownProps> = ({
-  options,
-  selectedOption,
-  selectLabel,
-  selectValue,
-  onSelect,
-}) => {
-  const [isDropdownExpanded, setIsDropdownExpanded] = useState(false);
-
-  const handleSelectOption = (option: Option) => {
-    if (selectedOption.label === option.label) {
-      return;
-    }
-    onSelect(option);
-    typeof selectLabel === "function" && selectLabel(option.label);
-    typeof selectValue === "function" && selectValue(option.value);
-  };
-
-  const renderDropdown = () => {
-    if (isDropdownExpanded) {
-      return (
-        <>
-          <DropdownOverlay onClick={() => setIsDropdownExpanded(false)} />
-          <OptionWrapper
-            dropdownWidth="230px"
-            dropdownMaxHeight="200px"
-            onClick={() => setIsDropdownExpanded(false)}
-          >
-            {renderOptionList()}
-          </OptionWrapper>
-        </>
-      );
-    }
-  };
-
-  const renderOptionList = () => {
-    return options.map((option, i, originalArray) => {
-      return (
-        <Option
-          key={i}
-          selected={option.label === selectedOption.label}
-          onClick={() => handleSelectOption(option)}
-          lastItem={i === originalArray.length - 1}
-        >
-          {option.label}
-        </Option>
-      );
-    });
-  };
-
-  return (
-    <DropdownSelector
-      onClick={() => setIsDropdownExpanded(!isDropdownExpanded)}
-    >
-      <DropdownLabel>{selectedOption?.label}</DropdownLabel>
-      <i className="material-icons">arrow_drop_down</i>
-      {renderDropdown()}
-    </DropdownSelector>
-  );
-};
-
-export default Dropdown;
-
-const DropdownSelector = styled.div`
-  font-size: 13px;
-  font-weight: 500;
-  position: relative;
-  color: #ffffff;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  border-radius: 5px;
-  :hover {
-    > i {
-      background: #ffffff22;
-    }
-  }
-
-  > i {
-    border-radius: 20px;
-    font-size: 20px;
-    margin-left: 10px;
-  }
-`;
-
-const DropdownLabel = styled.div`
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  max-width: 200px;
-`;
-
-const DropdownOverlay = styled.div`
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  z-index: 10;
-  left: 0px;
-  top: 0px;
-  cursor: default;
-`;
-
-const OptionWrapper = styled.div`
-  position: absolute;
-  left: 0;
-  top: calc(100% + 10px);
-  background: #26282f;
-  width: ${(props: { dropdownWidth: string; dropdownMaxHeight: string }) =>
-    props.dropdownWidth};
-  max-height: ${(props: { dropdownWidth: string; dropdownMaxHeight: string }) =>
-    props.dropdownMaxHeight || "300px"};
-  border-radius: 3px;
-  z-index: 999;
-  overflow-y: auto;
-  margin-bottom: 20px;
-  box-shadow: 0px 4px 10px 0px #00000088;
-`;
-
-const Option = styled.div`
-  width: 100%;
-  border-top: 1px solid #00000000;
-  border-bottom: 1px solid
-    ${(props: { selected: boolean; lastItem: boolean }) =>
-      props.lastItem ? "#ffffff00" : "#ffffff15"};
-  height: 37px;
-  font-size: 13px;
-  padding-top: 9px;
-  align-items: center;
-  padding-left: 15px;
-  cursor: pointer;
-  padding-right: 10px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  background: ${(props: { selected: boolean; lastItem: boolean }) =>
-    props.selected ? "#ffffff11" : ""};
-
-  :hover {
-    background: #ffffff22;
-  }
-`;
diff --git a/dashboard/src/components/Helper.tsx b/dashboard/src/components/Helper.tsx
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/dashboard/src/components/InfoTooltip.tsx b/dashboard/src/components/InfoTooltip.tsx
deleted file mode 100644
index 20d267cd36..0000000000
--- a/dashboard/src/components/InfoTooltip.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React, { Component } from "react";
-import styled from "styled-components";
-
-type PropsType = {
-  text: string;
-};
-
-type StateType = {
-  showTooltip: boolean;
-};
-
-export default class InfoTooltip extends Component<PropsType, StateType> {
-  state = {
-    showTooltip: false,
-  };
-
-  render() {
-    return (
-      <StyledInfoTooltip>
-        <i className="material-icons">help_outline</i>
-      </StyledInfoTooltip>
-    );
-  }
-}
-
-const StyledInfoTooltip = styled.div`
-  display: inline-block;
-  position: relative;
-  width: 26px;
-  margin-right: 2px;
-
-  > i {
-    display: flex;
-    align-items: center;
-    position: absolute;
-    top: -14px;
-    font-size: 18px;
-    right: -1px;
-    color: #858faaaa;
-    cursor: pointer;
-    :hover {
-      color: #aaaabb;
-    }
-  }
-`;
diff --git a/dashboard/src/components/LineGraph.tsx b/dashboard/src/components/LineGraph.tsx
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/dashboard/src/components/NoClusterPlaceHolder.tsx b/dashboard/src/components/NoClusterPlaceHolder.tsx
deleted file mode 100644
index eacb416c7a..0000000000
--- a/dashboard/src/components/NoClusterPlaceHolder.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React, { useEffect, useState, useContext } from "react";
-import styled from "styled-components";
-import { RouteComponentProps, withRouter } from "react-router";
-import { pushFiltered } from "shared/routing";
-
-import loading from "assets/loading.gif";
-
-import { Context } from "shared/Context";
-import Heading from "components/form-components/Heading";
-import Helper from "components/form-components/Helper";
-import Text from "./porter/Text";
-import Spacer from "./porter/Spacer";
-
-type Props = {};
-
-const NoClusterPlaceholder: React.FC<RouteComponentProps> = (props) => {
-  const { currentCluster } = useContext(Context);
-
-  return (
-    <ClusterPlaceholder>
-      <Text size={16}>No Cluster Provisioned</Text>
-      <Spacer height="15px" />
-      <Text color="helper">Finish provisioning a cluster to continue</Text>
-    </ClusterPlaceholder>
-  );
-};
-
-export default withRouter(NoClusterPlaceholder);
-
-const Link = styled.a`
-  text-decoration: underline;
-  position: relative;
-  cursor: pointer;
-  > i {
-    color: #aaaabb;
-    font-size: 15px;
-    position: absolute;
-    right: -17px;
-    top: 1px;
-  }
-`;
-
-const Img = styled.img`
-  height: 15px;
-  margin-right: 15px;
-`;
-
-const ClusterPlaceholder = styled.div`
-  padding: 25px;
-  border-radius: 5px;
-  background: ${(props) => props.theme.fg};
-  border: 1px solid #494b4f;
-  padding-bottom: 35px;
-`;
diff --git a/dashboard/src/components/OptionsDropdown.tsx b/dashboard/src/components/OptionsDropdown.tsx
deleted file mode 100644
index a9805822cc..0000000000
--- a/dashboard/src/components/OptionsDropdown.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import React, { useState } from "react";
-import styled from "styled-components";
-
-export const OptionsDropdown: React.FC<{
-  expandIcon?: string;
-  shrinkIcon?: string;
-}> = ({ children, expandIcon = "expand_more", shrinkIcon = "expand_less" }) => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const handleClick = (e: any) => {
-    e.stopPropagation();
-    e.preventDefault();
-    setIsOpen(!isOpen);
-  };
-
-  const handleOnBlur = () => {
-    setIsOpen(false);
-  };
-
-  return (
-    <OptionsButton onClick={handleClick} onBlur={handleOnBlur}>
-      <i className="material-icons">{isOpen ? shrinkIcon : expandIcon}</i>
-      {isOpen && <DropdownMenu>{children}</DropdownMenu>}
-    </OptionsButton>
-  );
-};
-
-const OptionsButton = styled.button`
-  position: relative;
-  border: none;
-  background: none;
-  color: white;
-  padding: 5px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 50%;
-  color: #ffffff44;
-  :hover {
-    background: #32343a;
-    cursor: pointer;
-  }
-
-  > i {
-    font-size: 20px;
-  }
-`;
-
-const DropdownMenu = styled.div`
-  position: absolute;
-  right: 12px;
-  top: 30px;
-  overflow: hidden;
-  width: 120px;
-  height: auto;
-  background: #26282f;
-  box-shadow: 0 8px 20px 0px #00000088;
-  color: white;
-  overflow: hidden;
-  border-radius: 5px;
-`;
-
-const DropdownOption = styled.div`
-  width: 100%;
-  height: 37px;
-  font-size: 13px;
-  cursor: pointer;
-  padding-left: 10px;
-  padding-right: 10px;
-  font-weight: 500;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  :hover {
-    background: #ffffff22;
-  }
-  :not(:first-child) {
-    border-top: 1px solid #00000000;
-  }
-
-  :not(:last-child) {
-    border-bottom: 1px solid #ffffff15;
-  }
-
-  > i {
-    margin-right: 7px;
-    font-size: 16px;
-  }
-`;
-
-export default {
-  Dropdown: OptionsDropdown,
-  Option: DropdownOption,
-};
diff --git a/dashboard/src/components/PageNotFound.tsx b/dashboard/src/components/PageNotFound.tsx
deleted file mode 100644
index e1bb1994b7..0000000000
--- a/dashboard/src/components/PageNotFound.tsx
+++ /dev/null
@@ -1,188 +0,0 @@
-import React, { Component } from "react";
-import styled from "styled-components";
-import { RouteComponentProps, withRouter } from "react-router";
-
-import { pushFiltered } from "shared/routing";
-
-type PropsType = RouteComponentProps & {};
-
-type StateType = {};
-
-class PageNotFound extends Component<PropsType, StateType> {
-  state = {};
-
-  render() {
-    let { pathname } = this.props.location;
-    let params = this.props.match.params as any;
-    let { baseRoute } = params;
-    if (baseRoute === "applications") {
-      return (
-        <StyledPageNotFound>
-          <Mega>
-            404
-            <Inside>Application Not Found</Inside>
-          </Mega>
-          <Flex>
-            <BackButton
-              width="140px"
-              onClick={() =>
-                pushFiltered(this.props, "/applications", ["project_id"])
-              }
-            >
-              <i className="material-icons">arrow_back</i>
-              Applications
-            </BackButton>
-            {pathname && (
-              <>
-                <Splitter>|</Splitter>
-                <Helper>Could not find "{pathname}"</Helper>
-              </>
-            )}
-          </Flex>
-        </StyledPageNotFound>
-      );
-    } else if (baseRoute === "jobs") {
-      return (
-        <StyledPageNotFound>
-          <Mega>
-            404
-            <Inside>Job Not Found</Inside>
-          </Mega>
-          <Flex>
-            <BackButton
-              width="90px"
-              onClick={() => pushFiltered(this.props, "/jobs", ["project_id"])}
-            >
-              <i className="material-icons">arrow_back</i>
-              Jobs
-            </BackButton>
-            {pathname && (
-              <>
-                <Splitter>|</Splitter>
-                <Helper>Could not find "{pathname}"</Helper>
-              </>
-            )}
-          </Flex>
-        </StyledPageNotFound>
-      );
-    }
-    return (
-      <StyledPageNotFound>
-        <Mega>
-          404
-          <Inside>Page Not Found</Inside>
-        </Mega>
-        <Flex>
-          <BackButton
-            width="145px"
-            onClick={() =>
-              pushFiltered(this.props, "/dashboard", ["project_id"])
-            }
-          >
-            <i className="material-icons">home</i>
-            Return Home
-          </BackButton>
-          {pathname && (
-            <>
-              <Splitter>|</Splitter>
-              <Helper>Could not find "{pathname}"</Helper>
-            </>
-          )}
-        </Flex>
-      </StyledPageNotFound>
-    );
-  }
-}
-
-export default withRouter(PageNotFound);
-
-const Splitter = styled.div`
-  margin: 0 20px;
-  font-size: 27px;
-  font-weight: 200;
-  color: #ffffff15;
-`;
-
-const Flex = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
-const Helper = styled.div`
-  font-size: 15px;
-  max-width: 550px;
-  margin-right: -50px;
-`;
-
-const BackButton = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  cursor: pointer;
-  font-size: 13px;
-  height: 35px;
-  padding: 5px 16px;
-  padding-right: 15px;
-  border: 1px solid #ffffff55;
-  border-radius: 100px;
-  width: ${(props: { width: string }) => props.width};
-  color: white;
-  background: #ffffff11;
-
-  :hover {
-    background: #ffffff22;
-  }
-
-  > i {
-    color: white;
-    font-size: 16px;
-    margin-right: 6px;
-    margin-left: -2px;
-  }
-`;
-
-const StyledPageNotFound = styled.div`
-  color: #6f6f6f;
-  font-size: 16px;
-  user-select: none;
-  margin-top: -80px;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-`;
-
-const Mega = styled.div`
-  font-size: 200px;
-  color: #ffffff06;
-  position: relative;
-  font-weight: bold;
-  text-align: center;
-
-  > i {
-    font-size: 23px;
-    margin-right: 12px;
-  }
-`;
-
-const Inside = styled.div`
-  position: absolute;
-  color: #6f6f6f;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 400;
-  font-size: 20px;
-
-  > i {
-    font-size: 23px;
-    margin-right: 12px;
-  }
-`;
diff --git a/dashboard/src/components/RadioFilter.tsx b/dashboard/src/components/RadioFilter.tsx
deleted file mode 100644
index c7d2c1d65d..0000000000
--- a/dashboard/src/components/RadioFilter.tsx
+++ /dev/null
@@ -1,257 +0,0 @@
-import React, { useEffect, useState, useRef } from "react";
-
-import styled from "styled-components";
-import arrow from "assets/arrow-down.svg";
-
-type Props = {
-  name: string;
-  icon?: any;
-  options: { value: any; label: string }[];
-  selected: any;
-  setSelected: any;
-  noMargin?: boolean;
-  dropdownAlignRight?: boolean;
-};
-
-const RadioFilter: React.FC<Props> = (props) => {
-  const [expanded, setExpanded] = useState(false);
-
-  const wrapperRef = useRef<HTMLInputElement>(null);
-  const parentRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    document.addEventListener("mousedown", handleClickOutside.bind(this));
-    return () =>
-      document.removeEventListener("mousedown", handleClickOutside.bind(this));
-  }, []);
-
-  const handleClickOutside = (event: any) => {
-    if (
-      wrapperRef &&
-      wrapperRef.current &&
-      !wrapperRef.current.contains(event.target) &&
-      parentRef &&
-      parentRef.current &&
-      !parentRef.current.contains(event.target)
-    ) {
-      setExpanded(false);
-    }
-  };
-
-  const getLabel = (value: string): any => {
-    let tgt = props.options.find(
-      (element: { value: string; label: string }) => element.value === value
-    );
-    if (tgt) {
-      return tgt.label;
-    }
-  };
-
-  const renderDropdown = () => {
-    let { options } = props;
-    if (expanded) {
-      return (
-        <DropdownWrapper dropdownAlignRight={props.dropdownAlignRight}>
-          <Dropdown ref={wrapperRef}>
-            {options?.length > 0 ? (
-              <ScrollableWrapper>
-                {options.map(
-                  (option: { value: any; label: string }, i: number) => {
-                    return (
-                      <OptionRow
-                        isLast={i === options.length - 1}
-                        onClick={() => {
-                          props.setSelected(option.value);
-                          setExpanded(false);
-                        }}
-                        key={i}
-                        selected={props.selected === option.value}
-                      >
-                        <Text>{option.label}</Text>
-                      </OptionRow>
-                    );
-                  }
-                )}
-              </ScrollableWrapper>
-            ) : (
-              <Placeholder>No options found</Placeholder>
-            )}
-          </Dropdown>
-        </DropdownWrapper>
-      );
-    }
-  };
-
-  return (
-    <Relative>
-      <StyledRadioFilter
-        onClick={() => {
-          setExpanded(!expanded);
-        }}
-        ref={parentRef}
-        noMargin={props.noMargin}
-      >
-        {props.icon && <FilterIcon src={props.icon} />}
-        <TextAlt>{props.name}</TextAlt>
-        <Bar />
-        <Selected>
-          {props.selected != null
-            ? props.selected === ""
-              ? "All"
-              : getLabel(props.selected)
-            : ""}
-        </Selected>
-        <DropdownIcon src={arrow} />
-      </StyledRadioFilter>
-      {renderDropdown()}
-    </Relative>
-  );
-};
-
-export default RadioFilter;
-
-const Bar = styled.div`
-  width: 1px;
-  height: calc(18px);
-  background: #494b4f;
-  margin: 0 8px;
-  margin-left: 0;
-`;
-
-const Selected = styled.div`
-  color: #aaaaaa;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  max-width: 120px;
-`;
-
-const DimmedText = styled.div`
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  word-break: anywhere;
-  margin-right: 10px;
-  color: #999;
-`;
-
-const Text = styled.div`
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  word-break: anywhere;
-  margin-right: 10px;
-`;
-
-const TextAlt = styled(Text)`
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  word-break: anywhere;
-`;
-
-const OptionRow = styled.div<{ isLast: boolean; selected?: boolean }>`
-  width: 100%;
-  height: 35px;
-  padding-left: 10px;
-  display: flex;
-  cursor: pointer;
-  align-items: center;
-  font-size: 13px;
-  background: ${(props) => (props.selected ? "#ffffff11" : "")};
-
-  :hover {
-    background: #ffffff18;
-  }
-`;
-
-const Placeholder = styled.div`
-  color: #aaaabb88;
-  font-size: 12px;
-  width: 100%;
-  height: 50px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
-const ScrollableWrapper = styled.div`
-  overflow-y: auto;
-  max-height: 350px;
-
-  ::-webkit-scrollbar {
-    width: 5px;
-    :horizontal {
-      height: 8px;
-    }
-  }
-
-  ::-webkit-scrollbar-corner {
-    width: 10px;
-    background: #ffffff11;
-    color: white;
-  }
-
-  ::-webkit-scrollbar-track {
-    width: 10px;
-    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-    border-radius: 5px;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background-color: darkgrey;
-    outline: 1px solid slategrey;
-    border-radius: 5px;
-  }
-`;
-
-const Relative = styled.div`
-  position: relative;
-`;
-
-const DropdownWrapper = styled.div<{ dropdownAlignRight?: boolean }>`
-  position: absolute;
-  left: ${(props) => (props.dropdownAlignRight ? "" : "0")};
-  right: ${(props) => (props.dropdownAlignRight ? "0" : "")};
-  z-index: 1;
-  top: calc(100% + 5px);
-`;
-
-const Dropdown = styled.div`
-  width: 260px;
-  border-radius: 3px;
-  z-index: 999;
-  overflow-y: auto;
-  background: #2f3135;
-  padding: 0;
-  border-radius: 5px;
-  border: 1px solid #aaaabb33;
-`;
-
-const DropdownIcon = styled.img`
-  width: 8px;
-  margin-left: 12px;
-`;
-
-const FilterIcon = styled.img`
-  width: 14px;
-  margin-right: 9px;
-`;
-
-const StyledRadioFilter = styled.div<{ noMargin?: boolean }>`
-  height: 30px;
-  font-size: 13px;
-  position: relative;
-  padding: 10px;
-  background: ${(props) => props.theme.fg};
-  border-radius: 5px;
-  display: flex;
-  align-items: center;
-  margin-right: ${(props) => (props.noMargin ? "" : "10px")};
-  cursor: pointer;
-  border: 1px solid #494b4f;
-  :hover {
-    border: 1px solid #7a7b80;
-  }
-`;
diff --git a/dashboard/src/components/SearchSelector.tsx b/dashboard/src/components/SearchSelector.tsx
deleted file mode 100644
index 4b2ba5e64b..0000000000
--- a/dashboard/src/components/SearchSelector.tsx
+++ /dev/null
@@ -1,247 +0,0 @@
-import _ from "lodash";
-import React, { useMemo, useState } from "react";
-import styled from "styled-components";
-import Loading from "./Loading";
-
-type Props<T = any> = {
-  options: T[];
-  onSelect: (option: T) => void;
-  label?: string;
-  dropdownLabel?: string;
-  getOptionLabel?: (option: T) => string;
-  filterBy?: ((option: T) => string) | string;
-  noOptionsText?: string;
-  dropdownMaxHeight?: string;
-  renderAddButton?: any;
-  className?: string;
-  renderOptionIcon?: (option: T) => React.ReactNode;
-  placeholder?: string;
-  showLoading?: boolean;
-};
-
-function SearchSelector<O = any>({
-  options,
-  onSelect,
-  label,
-  dropdownLabel,
-  getOptionLabel,
-  filterBy,
-  noOptionsText,
-  dropdownMaxHeight,
-  renderAddButton,
-  className,
-  renderOptionIcon,
-  placeholder = "Find or add a tag...", // legacy value to not break existing code
-  showLoading = false,
-}: Props<O>) {
-  const [isExpanded, setIsExpanded] = useState(false);
-  const [filter, setFilter] = useState("");
-
-  const handleOptionClick = (e: any, option: any) => {
-    setIsExpanded(false);
-    onSelect(option);
-    setFilter("");
-  };
-
-  const getLabel = (option: any) => {
-    if (typeof getOptionLabel === "function") {
-      return getOptionLabel(option);
-    }
-
-    return React.isValidElement(option) ? option : "";
-  };
-
-  const filteredOptions = useMemo(() => {
-    if (typeof filterBy === "function") {
-      return options.filter((option) => filterBy(option).includes(filter));
-    }
-
-    if (typeof filterBy === "string") {
-      return options.filter((option) =>
-        _.get(option, filterBy).includes(filter)
-      );
-    }
-
-    return options.filter((option) =>
-      typeof option === "string" ? option.includes(filter) : true
-    );
-  }, [filter, options]);
-
-  if (showLoading) {
-    return (
-      <>
-        {label?.length ? <Label>{label}</Label> : null}
-        <InputWrapper className={className}>
-          <Loading />
-        </InputWrapper>
-      </>
-    );
-  }
-
-  return (
-    <>
-      {label?.length ? <Label>{label}</Label> : null}
-      <InputWrapper
-        onBlur={() => {
-          setIsExpanded(false);
-        }}
-        className={className}
-      >
-        <Input
-          value={filter}
-          placeholder={placeholder}
-          onClick={(e) => {
-            setIsExpanded(false);
-            e.stopPropagation();
-            setIsExpanded(true);
-          }}
-          onChange={(e) => setFilter(e.target.value)}
-        />
-        {isExpanded ? (
-          <DropdownWrapper>
-            <Dropdown dropdownMaxHeight={dropdownMaxHeight}>
-              {!filteredOptions.length ? (
-                <>
-                  {!renderAddButton ? (
-                    <DropdownLabel>
-                      {noOptionsText || "No options available for this filter"}
-                    </DropdownLabel>
-                  ) : (
-                    <div
-                      onMouseDown={(e) => {
-                        e.stopPropagation();
-                        e.preventDefault();
-                        setFilter("");
-                      }}
-                    >
-                      {renderAddButton()}
-                    </div>
-                  )}
-                </>
-              ) : (
-                <>
-                  {renderAddButton && (
-                    <div
-                      onMouseDown={(e) => {
-                        e.stopPropagation();
-                        e.preventDefault();
-                        setFilter("");
-                      }}
-                    >
-                      {renderAddButton()}
-                    </div>
-                  )}
-                  {!renderAddButton && dropdownLabel && (
-                    <DropdownLabel>{dropdownLabel}</DropdownLabel>
-                  )}
-                  {filteredOptions.map((option, i) => (
-                    <Option
-                      key={i}
-                      onMouseDown={(e) => {
-                        e.stopPropagation();
-                        e.preventDefault();
-                      }}
-                      onClick={(e) => handleOptionClick(e, option)}
-                    >
-                      {typeof renderOptionIcon === "function"
-                        ? renderOptionIcon(option)
-                        : null}
-                      {getLabel(option)}
-                    </Option>
-                  ))}
-                </>
-              )}
-            </Dropdown>
-          </DropdownWrapper>
-        ) : null}
-      </InputWrapper>
-    </>
-  );
-}
-
-export default SearchSelector;
-
-const InputWrapper = styled.div`
-  display: flex;
-  margin-bottom: -1px;
-  align-items: center;
-  border: 1px solid #ffffff55;
-  border-radius: 3px;
-  background: #ffffff11;
-  position: relative;
-  width: 100%;
-  min-height: 37px;
-`;
-
-const Input = styled.input`
-  outline: none;
-  border: none;
-  font-size: 13px;
-  background: none;
-  color: #ffffff;
-  padding: 5px 10px;
-  min-height: 35px;
-  max-height: 45px;
-  width: 100%;
-`;
-
-const Label = styled.div`
-  color: #ffffff;
-  margin-bottom: 10px;
-  display: flex;
-  align-items: center;
-  font-size: 13px;
-  font-family: "Work Sans", sans-serif;
-`;
-
-const DropdownWrapper = styled.div`
-  position: absolute;
-  width: 100%;
-  right: 0;
-  z-index: 9999;
-  top: calc(100% + 5px);
-`;
-
-const Dropdown = styled.div`
-  background: #26282f;
-
-  max-height: ${(props: { dropdownMaxHeight: string }) =>
-    props.dropdownMaxHeight || "300px"};
-  border-radius: 3px;
-  z-index: 999;
-  overflow-y: auto;
-  margin-bottom: 20px;
-  box-shadow: 0 8px 20px 0px #00000088;
-`;
-
-const DropdownLabel = styled.div`
-  font-size: 13px;
-  color: #ffffff44;
-  font-weight: 500;
-  margin: 10px 13px;
-`;
-
-const Option = styled.div`
-  width: 100%;
-  border-top: 1px solid #00000000;
-  border-bottom: 1px solid #ffffff15;
-  min-height: 35px;
-  font-size: 13px;
-  align-items: center;
-  display: flex;
-  align-items: center;
-  padding-left: 15px;
-  cursor: pointer;
-  padding-right: 10px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-
-  :last-child {
-    border-bottom: 1px solid #ffffff00;
-  }
-
-  :hover {
-    background: #ffffff22;
-  }
-`;
diff --git a/dashboard/src/components/StatusIndicator.tsx b/dashboard/src/components/StatusIndicator.tsx
deleted file mode 100644
index f516e73ea9..0000000000
--- a/dashboard/src/components/StatusIndicator.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import React, { Component } from "react";
-import styled from "styled-components";
-import loading from "assets/loading.gif";
-
-type PropsType = {
-  status: string;
-  controllers: Record<string, Record<string, any>>;
-  margin_left: string;
-};
-
-type StateType = {};
-
-// Manages a tab selector and renders the associated view
-export default class StatusIndicator extends Component<PropsType, StateType> {
-  renderStatus = (status: string) => {
-    if (status == "loading") {
-      return (
-        <div>
-          <Spinner src={loading} />
-        </div>
-      );
-    }
-
-    return (
-      <div>
-        <StatusColor status={status} />
-      </div>
-    );
-  };
-
-  getChartStatus = (chartStatus: string) => {
-    if (chartStatus === "deployed") {
-      for (var uid in this.props.controllers) {
-        let value = this.props.controllers[uid];
-        let available = this.getAvailability(value.metadata.kind, value);
-        let progressing = true;
-
-        this.props.controllers[uid]?.status?.conditions?.forEach(
-          (condition: any) => {
-            if (
-              condition.type == "Progressing" &&
-              condition.status == "False" &&
-              condition.reason == "ProgressDeadlineExceeded"
-            ) {
-              progressing = false;
-            }
-          }
-        );
-
-        if (!available && progressing) {
-          return "loading";
-        } else if (!available && !progressing) {
-          return "failed";
-        }
-      }
-      return "deployed";
-    }
-    return chartStatus;
-  };
-
-  getAvailability = (kind: string, c: any) => {
-    switch (kind?.toLowerCase()) {
-      case "deployment":
-      case "replicaset":
-        return c.status.availableReplicas == c.status.replicas;
-      case "statefulset":
-        return c.status.readyReplicas == c.status.replicas;
-      case "daemonset":
-        return c.status.numberAvailable == c.status.desiredNumberScheduled;
-      case "cronjob":
-        return 1;
-    }
-  };
-
-  render() {
-    let status = this.getChartStatus(this.props.status);
-    return (
-      <Status margin_left={this.props.margin_left}>
-        {this.renderStatus(status)}
-        {status}
-      </Status>
-    );
-  }
-}
-
-const Spinner = styled.img`
-  width: 15px;
-  height: 15px;
-  margin-right: 15px;
-  margin-bottom: -3px;
-`;
-
-const StatusColor = styled.div`
-  margin-top: 1px;
-  width: 8px;
-  height: 8px;
-  background: ${(props: { status: string }) =>
-    props.status === "deployed"
-      ? "#4797ff"
-      : props.status === "failed"
-      ? "#ed5f85"
-      : props.status === "completed"
-      ? "#00d12a"
-      : "#f5cb42"};
-  border-radius: 20px;
-  margin-left: 3px;
-  margin-right: 16px;
-`;
-
-const Status = styled.div`
-  display: flex;
-  height: 20px;
-  font-size: 13px;
-  flex-direction: row;
-  text-transform: capitalize;
-  align-items: center;
-  font-family: "Work Sans", sans-serif;
-  color: #aaaabb;
-  animation: fadeIn 0.5s;
-  margin-left: ${(props: { margin_left: string }) => props.margin_left};
-
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-`;
diff --git a/dashboard/src/components/StatusSection.tsx b/dashboard/src/components/StatusSection.tsx
deleted file mode 100644
index 9b1728eb84..0000000000
--- a/dashboard/src/components/StatusSection.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import React, { Component } from "react";
-import styled from "styled-components";
-import loading from "assets/loading.gif";
-
-type PropsType = {
-  status: string;
-};
-
-type StateType = {};
-
-// TODO: replace StatusIndicator
-export default class StatusSection extends Component<PropsType, StateType> {
-  renderIndicator = (status: string) => {
-    if (status == "loading") {
-      return (
-        <div>
-          <Spinner src={loading} />
-        </div>
-      );
-    }
-
-    return (
-      <div>
-        <StatusColor status={status} />
-      </div>
-    );
-  };
-
-  render() {
-    return (
-      <Status>
-        {this.renderIndicator(this.props.status)}
-        {this.props.status}
-      </Status>
-    );
-  }
-}
-
-const Spinner = styled.img`
-  width: 15px;
-  height: 15px;
-  margin-right: 15px;
-  margin-bottom: -3px;
-`;
-
-const StatusColor = styled.div`
-  margin-top: 1px;
-  max-width: 8px;
-  max-height: 8px;
-  min-width: 8px;
-  min-height: 8px;
-  width: 8px;
-  height: 8px;
-  background: ${(props: { status: string }) =>
-    props.status === "deployed" || props.status === "healthy"
-      ? "#4797ff"
-      : props.status === "failed"
-      ? "#ed5f85"
-      : props.status === "completed"
-      ? "#00d12a"
-      : "#f5cb42"};
-  border-radius: 4px;
-  margin-left: 3px;
-  margin-right: 16px;
-`;
-
-const Status = styled.div`
-  display: flex;
-  height: 20px;
-  font-size: 13px;
-  flex-direction: row;
-  text-transform: capitalize;
-  align-items: center;
-  font-family: "Work Sans", sans-serif;
-  color: #aaaabb;
-  animation: fadeIn 0.5s;
-
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-`;
diff --git a/dashboard/src/components/Table.tsx b/dashboard/src/components/Table.tsx
deleted file mode 100644
index 3ac8f2d901..0000000000
--- a/dashboard/src/components/Table.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import Placeholder from "components/Placeholder";
-import React from "react";
-import {
-  Column,
-  Row,
-  useGlobalFilter,
-  usePagination,
-  useTable,
-} from "react-table";
-import {
-  StyledTd,
-  StyledTable,
-  StyledTHead,
-  StyledTh,
-  StyledTBody,
-} from "../main/home/cluster-dashboard/expanded-chart/events/styles";
-
-export type TableProps = {
-  columns: Column<any>[];
-  data: any[];
-  onRowClick?: (row: Row) => void;
-  placeholder?: string;
-};
-
-const Table: React.FC<TableProps> = ({
-  columns: columnsData,
-  data,
-  onRowClick,
-  placeholder,
-}) => {
-  if (!data || data.length == 0) {
-    return <Placeholder>{placeholder}</Placeholder>;
-  }
-
-  const {
-    rows,
-    getTableProps,
-    getTableBodyProps,
-    prepareRow,
-    headerGroups,
-  } = useTable(
-    {
-      columns: columnsData,
-      data,
-    },
-    useGlobalFilter,
-    usePagination
-  );
-
-  const renderRows = () => {
-    return (
-      <>
-        {rows.map((row: any) => {
-          prepareRow(row);
-
-          return (
-            <tr
-              {...row.getRowProps()}
-              onClick={() => onRowClick && onRowClick(row)}
-              selected={false}
-            >
-              {row.cells.map((cell: any) => {
-                return (
-                  <StyledTd
-                    {...cell.getCellProps()}
-                    style={{
-                      width: cell.column.totalWidth,
-                    }}
-                  >
-                    {cell.render("Cell")}
-                  </StyledTd>
-                );
-              })}
-            </tr>
-          );
-        })}
-      </>
-    );
-  };
-
-  return (
-    <>
-      <StyledTable {...getTableProps()}>
-        <StyledTHead>
-          {headerGroups.map((headerGroup) => (
-            <tr {...headerGroup.getHeaderGroupProps()}>
-              {headerGroup.headers.map((column) => (
-                <StyledTh {...column.getHeaderProps()}>
-                  {column.render("Header")}
-                </StyledTh>
-              ))}
-            </tr>
-          ))}
-        </StyledTHead>
-        <StyledTBody {...getTableBodyProps()}>{renderRows()}</StyledTBody>
-      </StyledTable>
-    </>
-  );
-};
-
-export default Table;
diff --git a/dashboard/src/components/TitleSectionStacks.tsx b/dashboard/src/components/TitleSectionStacks.tsx
deleted file mode 100644
index dc07484aac..0000000000
--- a/dashboard/src/components/TitleSectionStacks.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-
-interface Props {
-  children: React.ReactNode;
-  icon?: any;
-  iconWidth?: string;
-  capitalize?: boolean;
-  className?: string;
-  materialIconClass?: string;
-  handleNavBack?: () => void;
-  onClick?: any;
-}
-
-const TitleSectionStacks: React.FC<Props> = ({
-  children,
-  icon,
-  iconWidth,
-  capitalize,
-  handleNavBack,
-  className,
-  materialIconClass,
-  onClick,
-}) => {
-  return (
-    <StyledTitleSection className={className}>
-      {handleNavBack && (
-        <BackButton>
-          <i className="material-icons" onClick={handleNavBack}>
-            keyboard_backspace
-          </i>
-        </BackButton>
-      )}
-
-      {icon}
-
-      <StyledTitle capitalize={capitalize} onClick={onClick}>
-        {children}
-      </StyledTitle>
-    </StyledTitleSection>
-  );
-};
-
-export default TitleSectionStacks;
-
-const BackButton = styled.div`
-  > i {
-    cursor: pointer;
-    font-size: 24px;
-    color: #aaaabb;
-    margin-right: 10px;
-    padding: 3px;
-    margin-left: 0px;
-    border-radius: 100px;
-    :hover {
-      background: #ffffff11;
-    }
-  }
-`;
-
-const StyledTitleSection = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-const Icon = styled.span<{ disableMarginRight: boolean }>`
-  font-size: 24px;
-  margin-right: 10px;
-  ${(props) => {
-    if (!props.disableMarginRight) {
-      return "margin-right: 20px";
-    }
-  }}
-`;
-
-const StyledTitle = styled.div<{
-  capitalize: boolean;
-  onClick?: any;
-}>`
-  font-size: 21px;
-  user-select: text;
-  color: ${(props) => props.theme.text.primary};
-  text-transform: ${(props) => (props.capitalize ? "capitalize" : "")};
-  display: flex;
-  align-items: center;
-  cursor: ${(props) => (props.onClick ? "pointer" : "")};
-  :hover {
-    text-decoration: ${(props) => (props.onClick ? "underline" : "")};
-  }
-
-  > i {
-    margin-left: 10px;
-    cursor: pointer;
-    font-size: 18px;
-    color: #858faaaa;
-    padding: 5px;
-    border-radius: 100px;
-    :hover {
-      background: #ffffff11;
-    }
-    margin-bottom: -3px;
-  }
-
-  > a {
-    > i {
-      display: flex;
-      align-items: center;
-      margin-bottom: -2px;
-      font-size: 18px;
-      margin-left: 15px;
-      color: #858faaaa;
-      :hover {
-        color: #aaaabb;
-      }
-    }
-  }
-`;
diff --git a/dashboard/src/components/TooltipParent.tsx b/dashboard/src/components/TooltipParent.tsx
deleted file mode 100644
index 8495f94019..0000000000
--- a/dashboard/src/components/TooltipParent.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import React, { Component } from "react";
-import styled from "styled-components";
-
-type PropsType = {
-  tooltipText: string;
-};
-
-type StateType = {
-  showTooltip: boolean;
-};
-
-export default class TooltipParent extends Component<PropsType, StateType> {
-  state = {
-    showTooltip: false,
-  };
-
-  renderTooltip = (): JSX.Element | undefined => {
-    if (this.state.showTooltip) {
-      return <Tooltip>{this.props.tooltipText}</Tooltip>;
-    }
-  };
-
-  render() {
-    return (
-      <StyledTooltipParent
-        onMouseOver={() => {
-          this.setState({ showTooltip: true });
-        }}
-        onMouseOut={() => {
-          this.setState({ showTooltip: false });
-        }}
-      >
-        {this.props.children}
-        {this.renderTooltip()}
-      </StyledTooltipParent>
-    );
-  }
-}
-
-const Tooltip = styled.div`
-  position: absolute;
-  left: 10px;
-  top: 20px;
-  height: 18px;
-  padding: 2px 5px;
-  background: #383842dd;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 1;
-  color: white;
-  font-size: 12px;
-  font-family: "Work Sans", sans-serif;
-  outline: 1px solid #ffffff55;
-  opacity: 0;
-  animation: faded-in 0.2s 0.15s;
-  animation-fill-mode: forwards;
-  @keyframes faded-in {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-`;
-
-const StyledTooltipParent = styled.div`
-  position: relative;
-`;
diff --git a/dashboard/src/components/porter/ConfirmOverlay.tsx b/dashboard/src/components/porter/ConfirmOverlay.tsx
deleted file mode 100644
index 9fa69ab6b2..0000000000
--- a/dashboard/src/components/porter/ConfirmOverlay.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import Loading from "components/Loading";
-import React from "react";
-import { createPortal } from "react-dom";
-import styled from "styled-components";
-
-type Props = {
-  message: string;
-  onYes: React.MouseEventHandler;
-  onNo: React.MouseEventHandler;
-  loading?: boolean;
-};
-
-const ConfirmOverlay: React.FC<Props> = ({
-  message,
-  onYes,
-  onNo,
-  loading,
-}) => {
-  return (
-    <>
-      {
-        createPortal(
-          <StyledConfirmOverlay>
-            {loading ? (
-              <Loading />
-            ) : (
-              <>
-                {message}
-                <ButtonRow>
-                  <ConfirmButton onClick={onYes}>Yes</ConfirmButton>
-                  <ConfirmButton onClick={onNo}>No</ConfirmButton>
-                </ButtonRow>
-              </>
-            )}
-          </StyledConfirmOverlay>,
-          document.body
-        )
-      }
-    </>
-  );
-};
-
-export default ConfirmOverlay;
-
-const StyledConfirmOverlay = styled.div`
-  position: absolute;
-  top: 0px;
-  opacity: 100%;
-  left: 0px;
-  width: 100%;
-  height: 100%;
-  z-index: 999;
-  display: flex;
-  padding-bottom: 30px;
-  align-items: center;
-  justify-content: center;
-  font-family: "Work Sans", sans-serif;
-  font-size: 18px;
-  color: white;
-  flex-direction: column;
-  background: rgb(0, 0, 0, 0.55);
-  backdrop-filter: blur(5px);
-  animation: lindEnter 0.2s;
-  animation-fill-mode: forwards;
-
-  @keyframes lindEnter {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-`;
-
-const ButtonRow = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 140px;
-  margin-top: 30px;
-`;
-
-const ConfirmButton = styled.div`
-  outline: none;
-  height: 40px;
-  border: 1px solid white;
-  border-radius: 5px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 60px;
-  cursor: pointer;
-  opacity: 0;
-  font-family: "Work Sans", sans-serif;
-  font-size: 15px;
-  animation: linEnter 0.3s 0.1s;
-  animation-fill-mode: forwards;
-  @keyframes linEnter {
-    from {
-      transform: translateY(20px);
-      opacity: 0;
-    }
-    to {
-      transform: translateY(0px);
-      opacity: 1;
-    }
-  }
-  :hover {
-    background: white;
-    color: #232323;
-  }
-`;
diff --git a/dashboard/src/legacy/assets/GoogleIcon.tsx b/dashboard/src/legacy/assets/GoogleIcon.tsx
deleted file mode 100644
index 8f11dfd65c..0000000000
--- a/dashboard/src/legacy/assets/GoogleIcon.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import React, { Component } from "react";
-import styled from "styled-components";
-
-type PropsType = {};
-
-type StateType = {};
-
-export default class GHIcon extends Component<PropsType, StateType> {
-  render() {
-    return (
-      <Svg width="46px" height="46px" viewBox="0 0 46 46" {...this.props}>
-        <title>btn_google_light_normal_ios</title>
-        <desc>Created with Sketch.</desc>
-        <defs>
-          <filter
-            x="-50%"
-            y="-50%"
-            width="200%"
-            height="200%"
-            filterUnits="objectBoundingBox"
-            id="filter-1"
-          >
-            <feOffset
-              dx="0"
-              dy="1"
-              in="SourceAlpha"
-              result="shadowOffsetOuter1"
-            ></feOffset>
-            <feGaussianBlur
-              stdDeviation="0.5"
-              in="shadowOffsetOuter1"
-              result="shadowBlurOuter1"
-            ></feGaussianBlur>
-            <feColorMatrix
-              values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.168 0"
-              in="shadowBlurOuter1"
-              type="matrix"
-              result="shadowMatrixOuter1"
-            ></feColorMatrix>
-            <feOffset
-              dx="0"
-              dy="0"
-              in="SourceAlpha"
-              result="shadowOffsetOuter2"
-            ></feOffset>
-            <feGaussianBlur
-              stdDeviation="0.5"
-              in="shadowOffsetOuter2"
-              result="shadowBlurOuter2"
-            ></feGaussianBlur>
-            <feColorMatrix
-              values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.084 0"
-              in="shadowBlurOuter2"
-              type="matrix"
-              result="shadowMatrixOuter2"
-            ></feColorMatrix>
-            <feMerge>
-              <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
-              <feMergeNode in="shadowMatrixOuter2"></feMergeNode>
-              <feMergeNode in="SourceGraphic"></feMergeNode>
-            </feMerge>
-          </filter>
-          <rect id="path-2" x="0" y="0" width="40" height="40" rx="2"></rect>
-        </defs>
-        <g
-          id="Google-Button"
-          stroke="none"
-          stroke-width="1"
-          fill="none"
-          fill-rule="evenodd"
-        >
-          <g id="9-PATCH" transform="translate(-608.000000, -160.000000)"></g>
-          <g
-            id="btn_google_light_normal"
-            transform="translate(-1.000000, -1.000000)"
-          >
-            <g
-              id="button"
-              transform="translate(4.000000, 4.000000)"
-              filter="url(#filter-1)"
-            >
-              <g id="button-bg">
-                <use fill="#FFFFFF" fill-rule="evenodd"></use>
-                <use fill="none"></use>
-                <use fill="none"></use>
-                <use fill="none"></use>
-              </g>
-            </g>
-            <g
-              id="logo_googleg_48dp"
-              transform="translate(15.000000, 15.000000)"
-            >
-              <path
-                d="M17.64,9.20454545 C17.64,8.56636364 17.5827273,7.95272727 17.4763636,7.36363636 L9,7.36363636 L9,10.845 L13.8436364,10.845 C13.635,11.97 13.0009091,12.9231818 12.0477273,13.5613636 L12.0477273,15.8195455 L14.9563636,15.8195455 C16.6581818,14.2527273 17.64,11.9454545 17.64,9.20454545 L17.64,9.20454545 Z"
-                id="Shape"
-                fill="#4285F4"
-              ></path>
-              <path
-                d="M9,18 C11.43,18 13.4672727,17.1940909 14.9563636,15.8195455 L12.0477273,13.5613636 C11.2418182,14.1013636 10.2109091,14.4204545 9,14.4204545 C6.65590909,14.4204545 4.67181818,12.8372727 3.96409091,10.71 L0.957272727,10.71 L0.957272727,13.0418182 C2.43818182,15.9831818 5.48181818,18 9,18 L9,18 Z"
-                id="Shape"
-                fill="#34A853"
-              ></path>
-              <path
-                d="M3.96409091,10.71 C3.78409091,10.17 3.68181818,9.59318182 3.68181818,9 C3.68181818,8.40681818 3.78409091,7.83 3.96409091,7.29 L3.96409091,4.95818182 L0.957272727,4.95818182 C0.347727273,6.17318182 0,7.54772727 0,9 C0,10.4522727 0.347727273,11.8268182 0.957272727,13.0418182 L3.96409091,10.71 L3.96409091,10.71 Z"
-                id="Shape"
-                fill="#FBBC05"
-              ></path>
-              <path
-                d="M9,3.57954545 C10.3213636,3.57954545 11.5077273,4.03363636 12.4404545,4.92545455 L15.0218182,2.34409091 C13.4631818,0.891818182 11.4259091,0 9,0 C5.48181818,0 2.43818182,2.01681818 0.957272727,4.95818182 L3.96409091,7.29 C4.67181818,5.16272727 6.65590909,3.57954545 9,3.57954545 L9,3.57954545 Z"
-                id="Shape"
-                fill="#EA4335"
-              ></path>
-              <path d="M0,0 L18,0 L18,18 L0,18 L0,0 Z" id="Shape"></path>
-            </g>
-            <g id="handles_square"></g>
-          </g>
-        </g>
-      </Svg>
-    );
-  }
-}
-
-const Svg = styled.svg``;
diff --git a/dashboard/src/legacy/assets/code-branch-icon.tsx b/dashboard/src/legacy/assets/code-branch-icon.tsx
deleted file mode 100644
index 088daf7b9f..0000000000
--- a/dashboard/src/legacy/assets/code-branch-icon.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React, { SVGProps } from "react";
-
-function Icon(props: SVGProps<SVGElement>) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 448 512"
-      className={props.className}
-    >
-      <path d="M160 80c0 32.8-19.7 60.1-48 73.3v87.8c18.8-10.9 40.7-17.1 64-17.1h96c35.3 0 64-28.7 64-64v-6.7c-28.3-13.2-48-40.5-48-73.3 0-44.18 35.8-80 80-80s80 35.82 80 80c0 32.8-19.7 60.1-48 73.3v6.7c0 70.7-57.3 128-128 128h-96c-35.3 0-64 28.7-64 64v6.7c28.3 12.3 48 40.5 48 73.3 0 44.2-35.8 80-80 80-44.18 0-80-35.8-80-80 0-32.8 19.75-61 48-73.3V153.3C19.75 140.1 0 112.8 0 80 0 35.82 35.82 0 80 0c44.2 0 80 35.82 80 80zm-80 24c13.25 0 24-10.75 24-24S93.25 56 80 56 56 66.75 56 80s10.75 24 24 24zm288-48c-13.3 0-24 10.75-24 24s10.7 24 24 24 24-10.75 24-24-10.7-24-24-24zM80 456c13.25 0 24-10.7 24-24s-10.75-24-24-24-24 10.7-24 24 10.75 24 24 24z"></path>
-    </svg>
-  );
-}
-
-export default Icon;
diff --git a/dashboard/src/legacy/components/CheckboxList.tsx b/dashboard/src/legacy/components/CheckboxList.tsx
deleted file mode 100644
index 39c125d816..0000000000
--- a/dashboard/src/legacy/components/CheckboxList.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import React, { useEffect } from "react";
-import styled from "styled-components";
-
-type PropsType = {
-  label?: string;
-  options: { disabled?: boolean; value: any; label: string }[];
-  selected: { value: any; label: string }[];
-  setSelected: (x: { value: any; label: string }[]) => void;
-};
-
-const arraysEqual = (a: any, b: any) => {
-  if (a === b) return true;
-  if (a == null || b == null) return false;
-  if (a.length !== b.length) return false;
-
-  // If you don't care about the order of the elements inside
-  // the array, you should sort both arrays here.
-  // Please note that calling sort on an array will modify that array.
-  // you might want to clone your array first.
-
-  for (var i = 0; i < a.length; ++i) {
-    if (a[i] !== b[i]) return false;
-  }
-  return true;
-};
-
-const CheckboxList = ({ label, options, selected, setSelected }: PropsType) => {
-  let onSelectOption = (option: { value: any; label: string }) => {
-    const tmp = [...selected];
-    if (
-      tmp.filter(
-        (e) => e.value === option.value || arraysEqual(e.value, option.value)
-      ).length === 0
-    ) {
-      setSelected([...tmp, option]);
-    } else {
-      tmp.forEach((x, i) => {
-        if (x.value === option.value || arraysEqual(x.value, option.value)) {
-          tmp.splice(i, 1);
-        }
-      });
-      setSelected(tmp);
-    }
-  };
-
-  return (
-    <StyledCheckboxList>
-      {label && <Label>{label}</Label>}
-      {options.map((option: { value: any; label: string }, i: number) => {
-        return (
-          <CheckboxOption
-            isLast={i === options.length - 1}
-            onClick={() => onSelectOption(option)}
-            key={i}
-          >
-            <Checkbox
-              checked={
-                selected.filter(
-                  (e) =>
-                    e.value === option.value ||
-                    arraysEqual(e.value, option.value)
-                ).length > 0
-              }
-            >
-              <i className="material-icons">done</i>
-            </Checkbox>
-            <Text>{option.label}</Text>
-          </CheckboxOption>
-        );
-      })}
-    </StyledCheckboxList>
-  );
-};
-export default CheckboxList;
-
-const Text = styled.div`
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  word-break: anywhere;
-  margin-right: 10px;
-`;
-
-const Checkbox = styled.div`
-  width: 14px;
-  height: 14px;
-  min-width: 14px;
-  border: 1px solid #ffffff55;
-  margin: 1px 10px 0px 1px;
-  border-radius: 3px;
-  background: ${(props: { checked: boolean }) =>
-    props.checked ? "#ffffff22" : "#ffffff11"};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  > i {
-    font-size: 12px;
-    padding-left: 0px;
-    display: ${(props: { checked: boolean }) => (props.checked ? "" : "none")};
-  }
-`;
-
-const CheckboxOption = styled.div<{ isLast: boolean }>`
-  width: 100%;
-  height: 35px;
-  padding-left: 10px;
-  display: flex;
-  cursor: pointer;
-  align-items: center;
-  font-size: 13px;
-
-  :hover {
-    background: #ffffff18;
-  }
-`;
-
-const Label = styled.div`
-  color: #ffffff;
-  margin-bottom: 10px;
-`;
-
-const StyledCheckboxList = styled.div`
-  border-radius: 3px;
-  padding: 0;
-`;
diff --git a/dashboard/src/legacy/components/Helper.tsx b/dashboard/src/legacy/components/Helper.tsx
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/dashboard/src/legacy/components/InfoTooltip.tsx b/dashboard/src/legacy/components/InfoTooltip.tsx
deleted file mode 100644
index 20d267cd36..0000000000
--- a/dashboard/src/legacy/components/InfoTooltip.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React, { Component } from "react";
-import styled from "styled-components";
-
-type PropsType = {
-  text: string;
-};
-
-type StateType = {
-  showTooltip: boolean;
-};
-
-export default class InfoTooltip extends Component<PropsType, StateType> {
-  state = {
-    showTooltip: false,
-  };
-
-  render() {
-    return (
-      <StyledInfoTooltip>
-        <i className="material-icons">help_outline</i>
-      </StyledInfoTooltip>
-    );
-  }
-}
-
-const StyledInfoTooltip = styled.div`
-  display: inline-block;
-  position: relative;
-  width: 26px;
-  margin-right: 2px;
-
-  > i {
-    display: flex;
-    align-items: center;
-    position: absolute;
-    top: -14px;
-    font-size: 18px;
-    right: -1px;
-    color: #858faaaa;
-    cursor: pointer;
-    :hover {
-      color: #aaaabb;
-    }
-  }
-`;
diff --git a/dashboard/src/legacy/components/LineGraph.tsx b/dashboard/src/legacy/components/LineGraph.tsx
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/dashboard/src/legacy/components/MultiSelectFilter.tsx b/dashboard/src/legacy/components/MultiSelectFilter.tsx
deleted file mode 100644
index 7839e04b6e..0000000000
--- a/dashboard/src/legacy/components/MultiSelectFilter.tsx
+++ /dev/null
@@ -1,201 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import arrow from "legacy/assets/arrow-down.svg";
-import styled from "styled-components";
-
-import CheckboxList from "./CheckboxList";
-
-type Props = {
-  name: string;
-  icon?: any;
-  options: { value: any; label: string }[];
-  selected: any[];
-  setSelected: any;
-};
-
-export const MultiSelectFilter: React.FC<Props> = (props) => {
-  const [expanded, setExpanded] = useState(false);
-
-  const wrapperRef = useRef<HTMLInputElement>(null);
-  const parentRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    document.addEventListener("mousedown", handleClickOutside.bind(this));
-    return () =>
-      document.removeEventListener("mousedown", handleClickOutside.bind(this));
-  }, []);
-
-  const handleClickOutside = (event: any) => {
-    if (
-      wrapperRef &&
-      wrapperRef.current &&
-      !wrapperRef.current.contains(event.target) &&
-      parentRef &&
-      parentRef.current &&
-      !parentRef.current.contains(event.target)
-    ) {
-      setExpanded(false);
-    }
-  };
-
-  const renderOptions = () => {
-    return props.options.map(
-      (option: { value: any; label: string }, i: number) => {
-        return (
-          <Option key={i} onClick={() => alert("choise")}>
-            {option.label}
-          </Option>
-        );
-      }
-    );
-  };
-
-  const renderDropdown = () => {
-    if (expanded) {
-      return (
-        <DropdownWrapper>
-          <Dropdown ref={wrapperRef}>
-            {props.options.length > 0 ? (
-              <ScrollableWrapper>
-                <CheckboxList
-                  options={props.options}
-                  selected={props.selected}
-                  setSelected={props.setSelected}
-                />
-              </ScrollableWrapper>
-            ) : (
-              <Placeholder>No options found</Placeholder>
-            )}
-          </Dropdown>
-        </DropdownWrapper>
-      );
-    }
-  };
-
-  return (
-    <Relative>
-      <StyledMultiSelectFilter
-        onClick={() => setExpanded(!expanded)}
-        ref={parentRef}
-      >
-        {props.icon && <FilterIcon src={props.icon} />}
-        {props.name}
-        {props.selected.length > 0 && (
-          <FilterCount>{props.selected.length}</FilterCount>
-        )}
-        <DropdownIcon src={arrow} />
-      </StyledMultiSelectFilter>
-      {renderDropdown()}
-    </Relative>
-  );
-};
-
-const FilterCount = styled.div`
-  padding: 5px;
-  color: #ffffff;
-  background: #ffffff11;
-  margin-left: 7px;
-  font-size: 12px;
-  border-radius: 50px;
-  margin-right: -5px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 20px;
-`;
-
-const Placeholder = styled.div`
-  color: #aaaabb88;
-  font-size: 12px;
-  width: 100%;
-  height: 50px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
-const ScrollableWrapper = styled.div`
-  overflow-y: auto;
-  height: 100%;
-  max-height: 350px;
-`;
-
-const Label = styled.div`
-  height: 37px;
-  display: flex;
-  align-items: center;
-  margin-left: 10px;
-  font-size: 13px;
-`;
-
-const Option: any = styled.div`
-  width: 100%;
-  border-top: 1px solid #00000000;
-  height: 37px;
-  font-size: 13px;
-  align-items: center;
-  display: flex;
-  align-items: center;
-  padding-left: 15px;
-  cursor: pointer;
-  padding-right: 10px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  background: ${(props: any) => (props.selected ? "#ffffff11" : "")};
-
-  :hover {
-    background: #ffffff22;
-  }
-`;
-
-const Relative = styled.div`
-  position: relative;
-`;
-
-const DropdownWrapper = styled.div`
-  position: absolute;
-  width: 100%;
-  right: 0;
-  z-index: 1;
-  top: calc(100% + 5px);
-`;
-
-const Dropdown = styled.div`
-  width: 260px;
-  border-radius: 3px;
-  z-index: 999;
-  overflow-y: auto;
-  margin-bottom: 20px;
-  background: #2f3135;
-  padding: 0;
-  border-radius: 5px;
-  border: 1px solid #aaaabb33;
-`;
-
-const DropdownIcon = styled.img`
-  width: 8px;
-  margin-left: 12px;
-`;
-
-const FilterIcon = styled.img`
-  width: 14px;
-  margin-right: 7px;
-`;
-
-const StyledMultiSelectFilter = styled.div`
-  height: 30px;
-  font-size: 13px;
-  position: relative;
-  padding: 10px;
-  background: ${(props) => props.theme.fg};
-  border-radius: 5px;
-  border: 1px solid #aaaabb33;
-  display: flex;
-  align-items: center;
-  margin-right: 10px;
-  cursor: pointer;
-  :hover {
-    background: #ffffff11;
-  }
-`;
diff --git a/dashboard/src/legacy/components/PageNotFound.tsx b/dashboard/src/legacy/components/PageNotFound.tsx
deleted file mode 100644
index c244689a7c..0000000000
--- a/dashboard/src/legacy/components/PageNotFound.tsx
+++ /dev/null
@@ -1,187 +0,0 @@
-import React, { Component } from "react";
-import { pushFiltered } from "legacy/shared/routing";
-import { RouteComponentProps, withRouter } from "react-router";
-import styled from "styled-components";
-
-type PropsType = RouteComponentProps & {};
-
-type StateType = {};
-
-class PageNotFound extends Component<PropsType, StateType> {
-  state = {};
-
-  render() {
-    let { pathname } = this.props.location;
-    let params = this.props.match.params as any;
-    let { baseRoute } = params;
-    if (baseRoute === "applications") {
-      return (
-        <StyledPageNotFound>
-          <Mega>
-            404
-            <Inside>Application Not Found</Inside>
-          </Mega>
-          <Flex>
-            <BackButton
-              width="140px"
-              onClick={() =>
-                pushFiltered(this.props, "/applications", ["project_id"])
-              }
-            >
-              <i className="material-icons">arrow_back</i>
-              Applications
-            </BackButton>
-            {pathname && (
-              <>
-                <Splitter>|</Splitter>
-                <Helper>Could not find "{pathname}"</Helper>
-              </>
-            )}
-          </Flex>
-        </StyledPageNotFound>
-      );
-    } else if (baseRoute === "jobs") {
-      return (
-        <StyledPageNotFound>
-          <Mega>
-            404
-            <Inside>Job Not Found</Inside>
-          </Mega>
-          <Flex>
-            <BackButton
-              width="90px"
-              onClick={() => pushFiltered(this.props, "/jobs", ["project_id"])}
-            >
-              <i className="material-icons">arrow_back</i>
-              Jobs
-            </BackButton>
-            {pathname && (
-              <>
-                <Splitter>|</Splitter>
-                <Helper>Could not find "{pathname}"</Helper>
-              </>
-            )}
-          </Flex>
-        </StyledPageNotFound>
-      );
-    }
-    return (
-      <StyledPageNotFound>
-        <Mega>
-          404
-          <Inside>Page Not Found</Inside>
-        </Mega>
-        <Flex>
-          <BackButton
-            width="145px"
-            onClick={() =>
-              pushFiltered(this.props, "/dashboard", ["project_id"])
-            }
-          >
-            <i className="material-icons">home</i>
-            Return Home
-          </BackButton>
-          {pathname && (
-            <>
-              <Splitter>|</Splitter>
-              <Helper>Could not find "{pathname}"</Helper>
-            </>
-          )}
-        </Flex>
-      </StyledPageNotFound>
-    );
-  }
-}
-
-export default withRouter(PageNotFound);
-
-const Splitter = styled.div`
-  margin: 0 20px;
-  font-size: 27px;
-  font-weight: 200;
-  color: #ffffff15;
-`;
-
-const Flex = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
-const Helper = styled.div`
-  font-size: 15px;
-  max-width: 550px;
-  margin-right: -50px;
-`;
-
-const BackButton = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  cursor: pointer;
-  font-size: 13px;
-  height: 35px;
-  padding: 5px 16px;
-  padding-right: 15px;
-  border: 1px solid #ffffff55;
-  border-radius: 100px;
-  width: ${(props: { width: string }) => props.width};
-  color: white;
-  background: #ffffff11;
-
-  :hover {
-    background: #ffffff22;
-  }
-
-  > i {
-    color: white;
-    font-size: 16px;
-    margin-right: 6px;
-    margin-left: -2px;
-  }
-`;
-
-const StyledPageNotFound = styled.div`
-  color: #6f6f6f;
-  font-size: 16px;
-  user-select: none;
-  margin-top: -80px;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-`;
-
-const Mega = styled.div`
-  font-size: 200px;
-  color: #ffffff06;
-  position: relative;
-  font-weight: bold;
-  text-align: center;
-
-  > i {
-    font-size: 23px;
-    margin-right: 12px;
-  }
-`;
-
-const Inside = styled.div`
-  position: absolute;
-  color: #6f6f6f;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 400;
-  font-size: 20px;
-
-  > i {
-    font-size: 23px;
-    margin-right: 12px;
-  }
-`;
diff --git a/dashboard/src/legacy/components/TitleSectionStacks.tsx b/dashboard/src/legacy/components/TitleSectionStacks.tsx
deleted file mode 100644
index dc07484aac..0000000000
--- a/dashboard/src/legacy/components/TitleSectionStacks.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-
-interface Props {
-  children: React.ReactNode;
-  icon?: any;
-  iconWidth?: string;
-  capitalize?: boolean;
-  className?: string;
-  materialIconClass?: string;
-  handleNavBack?: () => void;
-  onClick?: any;
-}
-
-const TitleSectionStacks: React.FC<Props> = ({
-  children,
-  icon,
-  iconWidth,
-  capitalize,
-  handleNavBack,
-  className,
-  materialIconClass,
-  onClick,
-}) => {
-  return (
-    <StyledTitleSection className={className}>
-      {handleNavBack && (
-        <BackButton>
-          <i className="material-icons" onClick={handleNavBack}>
-            keyboard_backspace
-          </i>
-        </BackButton>
-      )}
-
-      {icon}
-
-      <StyledTitle capitalize={capitalize} onClick={onClick}>
-        {children}
-      </StyledTitle>
-    </StyledTitleSection>
-  );
-};
-
-export default TitleSectionStacks;
-
-const BackButton = styled.div`
-  > i {
-    cursor: pointer;
-    font-size: 24px;
-    color: #aaaabb;
-    margin-right: 10px;
-    padding: 3px;
-    margin-left: 0px;
-    border-radius: 100px;
-    :hover {
-      background: #ffffff11;
-    }
-  }
-`;
-
-const StyledTitleSection = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-const Icon = styled.span<{ disableMarginRight: boolean }>`
-  font-size: 24px;
-  margin-right: 10px;
-  ${(props) => {
-    if (!props.disableMarginRight) {
-      return "margin-right: 20px";
-    }
-  }}
-`;
-
-const StyledTitle = styled.div<{
-  capitalize: boolean;
-  onClick?: any;
-}>`
-  font-size: 21px;
-  user-select: text;
-  color: ${(props) => props.theme.text.primary};
-  text-transform: ${(props) => (props.capitalize ? "capitalize" : "")};
-  display: flex;
-  align-items: center;
-  cursor: ${(props) => (props.onClick ? "pointer" : "")};
-  :hover {
-    text-decoration: ${(props) => (props.onClick ? "underline" : "")};
-  }
-
-  > i {
-    margin-left: 10px;
-    cursor: pointer;
-    font-size: 18px;
-    color: #858faaaa;
-    padding: 5px;
-    border-radius: 100px;
-    :hover {
-      background: #ffffff11;
-    }
-    margin-bottom: -3px;
-  }
-
-  > a {
-    > i {
-      display: flex;
-      align-items: center;
-      margin-bottom: -2px;
-      font-size: 18px;
-      margin-left: 15px;
-      color: #858faaaa;
-      :hover {
-        color: #aaaabb;
-      }
-    }
-  }
-`;
diff --git a/dashboard/src/legacy/components/TooltipParent.tsx b/dashboard/src/legacy/components/TooltipParent.tsx
deleted file mode 100644
index 8495f94019..0000000000
--- a/dashboard/src/legacy/components/TooltipParent.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import React, { Component } from "react";
-import styled from "styled-components";
-
-type PropsType = {
-  tooltipText: string;
-};
-
-type StateType = {
-  showTooltip: boolean;
-};
-
-export default class TooltipParent extends Component<PropsType, StateType> {
-  state = {
-    showTooltip: false,
-  };
-
-  renderTooltip = (): JSX.Element | undefined => {
-    if (this.state.showTooltip) {
-      return <Tooltip>{this.props.tooltipText}</Tooltip>;
-    }
-  };
-
-  render() {
-    return (
-      <StyledTooltipParent
-        onMouseOver={() => {
-          this.setState({ showTooltip: true });
-        }}
-        onMouseOut={() => {
-          this.setState({ showTooltip: false });
-        }}
-      >
-        {this.props.children}
-        {this.renderTooltip()}
-      </StyledTooltipParent>
-    );
-  }
-}
-
-const Tooltip = styled.div`
-  position: absolute;
-  left: 10px;
-  top: 20px;
-  height: 18px;
-  padding: 2px 5px;
-  background: #383842dd;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 1;
-  color: white;
-  font-size: 12px;
-  font-family: "Work Sans", sans-serif;
-  outline: 1px solid #ffffff55;
-  opacity: 0;
-  animation: faded-in 0.2s 0.15s;
-  animation-fill-mode: forwards;
-  @keyframes faded-in {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-`;
-
-const StyledTooltipParent = styled.div`
-  position: relative;
-`;
diff --git a/dashboard/src/legacy/components/UnauthorizedPage.tsx b/dashboard/src/legacy/components/UnauthorizedPage.tsx
deleted file mode 100644
index 1326846ba9..0000000000
--- a/dashboard/src/legacy/components/UnauthorizedPage.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-
-const UnauthorizedPage: React.FunctionComponent = () => (
-  <StyledUnauthorizedPage>
-    <Mega>
-      401
-      <Inside>You're not authorized to access this page</Inside>
-    </Mega>
-  </StyledUnauthorizedPage>
-);
-
-export default UnauthorizedPage;
-
-const StyledUnauthorizedPage = styled.div`
-  font-family: "Work Sans", sans-serif;
-  color: #6f6f6f;
-  font-size: 16px;
-  user-select: none;
-  padding-bottom: 20px;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-`;
-
-const Mega = styled.div`
-  font-size: 200px;
-  color: #ffffff06;
-  position: relative;
-  font-weight: bold;
-  text-align: center;
-
-  > i {
-    font-size: 23px;
-    margin-right: 12px;
-  }
-`;
-
-const Inside = styled.div`
-  position: absolute;
-  color: #6f6f6f;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 400;
-  font-size: 20px;
-
-  > i {
-    font-size: 23px;
-    margin-right: 12px;
-  }
-`;
diff --git a/dashboard/src/legacy/main/CurrentError.tsx b/dashboard/src/legacy/main/CurrentError.tsx
deleted file mode 100644
index 8536e0bca7..0000000000
--- a/dashboard/src/legacy/main/CurrentError.tsx
+++ /dev/null
@@ -1,244 +0,0 @@
-import React, { Component } from "react";
-import close from "legacy/assets/close.png";
-import styled from "styled-components";
-
-import { Context } from "shared/Context";
-
-type PropsType = {
-  currentError: any;
-};
-
-type StateType = {};
-
-export default class CurrentError extends Component<PropsType, StateType> {
-  state = {
-    expanded: false,
-  };
-
-  componentDidUpdate(prevProps: PropsType) {
-    if (
-      prevProps.currentError !== this.props.currentError &&
-      this.props.currentError ===
-        "Provisioning failed. Check your credentials and try again."
-    ) {
-      this.setState({ expanded: true });
-    }
-  }
-
-  render() {
-    if (!this.props.currentError) {
-      return null;
-    }
-
-    // Check if it's an error from the API then retrieve the error message that we get from the API
-    let currentError =
-      this.props.currentError?.response?.data?.error || this.props.currentError;
-    if (!React.isValidElement(currentError)) {
-      currentError = String(currentError);
-    }
-
-    if (
-      currentError &&
-      currentError !== "" &&
-      currentError !== "{}" &&
-      currentError !== undefined &&
-      currentError.length > 3
-    ) {
-      if (!this.state.expanded) {
-        return (
-          <StyledCurrentError>
-            <ErrorText>Error: {currentError}</ErrorText>
-            <ExpandButton
-              onClick={() => {
-                this.setState({ expanded: true });
-              }}
-            >
-              <i className="material-icons">launch</i>
-            </ExpandButton>
-            <CloseButton
-              onClick={(e) => {
-                e.stopPropagation();
-
-                this.setState({ expanded: false }, () => {
-                  this.context.setCurrentError(null);
-                });
-              }}
-            >
-              <CloseButtonImg src={close} />
-            </CloseButton>
-          </StyledCurrentError>
-        );
-      }
-
-      return (
-        <Overlay>
-          <ExpandedError>
-            Porter encountered an error. Full error log:
-            <CodeBlock>{currentError}</CodeBlock>
-            <ExpandButtonAlt
-              onClick={() => {
-                this.setState({ expanded: false });
-              }}
-            >
-              <i className="material-icons">remove</i>
-            </ExpandButtonAlt>
-            <CloseButtonAlt
-              onClick={(e) => {
-                e.stopPropagation();
-
-                this.setState({ expanded: false }, () => {
-                  this.context.setCurrentError(null);
-                });
-              }}
-            >
-              <CloseButtonImg src={close} />
-            </CloseButtonAlt>
-          </ExpandedError>
-        </Overlay>
-      );
-    }
-
-    return null;
-  }
-}
-
-CurrentError.contextType = Context;
-
-const CloseButton = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 30px;
-  height: 30px;
-  border-radius: 50%;
-  cursor: pointer;
-  :hover {
-    background-color: #ffffff11;
-  }
-`;
-
-const CloseButtonAlt = styled(CloseButton)`
-  position: absolute;
-  top: 5px;
-  right: 5px;
-`;
-
-const CloseButtonImg = styled.img`
-  width: 10px;
-`;
-
-const ErrorText = styled.div`
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: calc(100% - 80px);
-`;
-
-const StyledCurrentError = styled.div`
-  position: fixed;
-  bottom: 22px;
-  width: 310px;
-  left: 20px;
-  padding: 15px;
-  padding-right: 0px;
-  font-family: "Work Sans", sans-serif;
-  height: 50px;
-  font-size: 13px;
-  border-radius: 3px;
-  background: #272731cc;
-  border: 1px solid #ffffff55;
-  display: flex;
-  align-items: center;
-  color: #ffffff;
-
-  > i {
-    font-size: 18px;
-    margin-right: 10px;
-  }
-
-  animation: floatIn 0.5s;
-  animation-fill-mode: forwards;
-
-  @keyframes floatIn {
-    from {
-      opacity: 0;
-      transform: translateY(20px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0px);
-    }
-  }
-`;
-
-const ExpandButton = styled(CloseButton)`
-  display: flex;
-  width: 30px;
-  height: 30px;
-  border-radius: 50%;
-  cursor: pointer;
-
-  :hover {
-    background-color: #ffffff11;
-  }
-
-  > i {
-    font-size: 16px;
-  }
-`;
-
-const ExpandButtonAlt = styled(ExpandButton)`
-  position: absolute;
-  top: 5px;
-  right: 34px;
-`;
-
-const Overlay = styled.div`
-  position: fixed;
-  margin: 0;
-  padding: 0;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.6);
-  z-index: 3;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
-const ExpandedError = styled.div`
-  position: fixed;
-  display: block;
-  width: 700px;
-  left: calc(50% - 350px);
-  height: auto;
-  max-height: 500px;
-  top: 50%;
-  transform: translateY(-50%);
-  padding: 20px;
-  overflow-y: auto;
-  background: #272731;
-  border: 1px solid #ffffff55;
-  font-family: "Work Sans", sans-serif;
-  font-size: 13px;
-  border-radius: 12px;
-`;
-
-const CodeBlock = styled.span`
-  display: block;
-  background-color: #1b1d26;
-  color: white;
-  border-radius: 5px;
-  font-family: monospace;
-  user-select: text;
-  max-height: 400px;
-  width: 90%;
-  margin-left: 5%;
-  margin-top: 20px;
-  overflow-x: hidden;
-  overflow-y: auto;
-  padding: 10px;
-  overflow-wrap: break-word;
-`;
diff --git a/dashboard/src/legacy/main/Main.tsx b/dashboard/src/legacy/main/Main.tsx
deleted file mode 100644
index d539581cc2..0000000000
--- a/dashboard/src/legacy/main/Main.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import React, { useContext, useEffect, useState } from "react";
-import Loading from "legacy/components/Loading";
-import api from "legacy/shared/api";
-import { PorterUrls, type PorterUrl } from "legacy/shared/routing";
-import { Redirect, Route, Switch } from "react-router-dom";
-
-import { Context } from "shared/Context";
-
-import { useAuthn } from "../shared/auth/AuthnContext";
-import CurrentError from "./CurrentError";
-import Home from "./home/Home";
-
-type PropsType = {};
-
-const Main: React.FC<PropsType> = () => {
-  const {
-    currentError,
-    setCurrentError,
-    setEdition,
-    setEnableGitlab,
-    currentProject,
-    currentCluster,
-  } = useContext(Context);
-  const { handleLogOut } = useAuthn();
-  const [version, setVersion] = useState("");
-
-  useEffect(() => {
-    // Get capabilities to case on user info requirements
-    api
-      .getMetadata("", {}, {})
-      .then((res) => {
-        setVersion(res.data?.version);
-      })
-      .catch(() => {});
-
-    const urlParams = new URLSearchParams(window.location.search);
-    const error = urlParams.get("error");
-    error && setCurrentError(error);
-
-    api
-      .getMetadata("", {}, {})
-      .then((res) => {
-        setEdition(res.data?.version);
-        setEnableGitlab(!!res.data?.gitlab);
-      })
-      .catch(() => {});
-  }, []);
-
-  const renderMain = (): JSX.Element => {
-    if (!version) {
-      return <Loading />;
-    }
-
-    return (
-      <Switch>
-        <Route
-          exact
-          path="/"
-          render={() => {
-            return <Redirect to="/dashboard" />;
-          }}
-        />
-        <Route
-          path={`/:baseRoute/:cluster?/:namespace?`}
-          render={(routeProps) => {
-            const baseRoute = routeProps.match.params.baseRoute;
-            if (PorterUrls.includes(baseRoute)) {
-              return (
-                <Home
-                  key="home"
-                  currentProject={currentProject}
-                  currentCluster={currentCluster}
-                  currentRoute={baseRoute as PorterUrl}
-                  logOut={handleLogOut}
-                />
-              );
-            } else {
-              return <Redirect to="/" />;
-            }
-          }}
-        />
-      </Switch>
-    );
-  };
-
-  return (
-    <>
-      {renderMain()}
-      <CurrentError currentError={currentError} />
-    </>
-  );
-};
-
-export default Main;
diff --git a/dashboard/src/legacy/main/MainWrapper.tsx b/dashboard/src/legacy/main/MainWrapper.tsx
deleted file mode 100644
index 33a28f81ea..0000000000
--- a/dashboard/src/legacy/main/MainWrapper.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from "react";
-import { IntlProvider, ThemeProvider } from "@ory/elements";
-import MainWrapperErrorBoundary from "legacy/shared/error_handling/MainWrapperErrorBoundary";
-import { withRouter, type RouteComponentProps } from "react-router";
-
-import AuthzProvider from "shared/auth/AuthzContext";
-
-import AuthnProvider from "../shared/auth/AuthnContext";
-import { ContextProvider } from "shared/Context";
-import Main from "./Main";
-// required styles for Ory Elements
-import "@ory/elements/style.css";
-
-type PropsType = RouteComponentProps;
-
-const themeOverrides = {
-  fontFamily: '"Work Sans", sans-serif',
-  // other theme properties...
-};
-
-const MainWrapper: React.FC<PropsType> = ({ history, location }) => {
-  return (
-    <ContextProvider history={history} location={location}>
-      <ThemeProvider themeOverrides={themeOverrides}>
-        <IntlProvider locale="en" defaultLocale="en">
-          <AuthzProvider>
-            <AuthnProvider>
-              <MainWrapperErrorBoundary>
-                <Main />
-              </MainWrapperErrorBoundary>
-            </AuthnProvider>
-          </AuthzProvider>
-        </IntlProvider>
-      </ThemeProvider>
-    </ContextProvider>
-  );
-};
-
-export default withRouter(MainWrapper);
diff --git a/dashboard/src/legacy/shared/Context.tsx b/dashboard/src/legacy/shared/Context.tsx
deleted file mode 100644
index 301a9de226..0000000000
--- a/dashboard/src/legacy/shared/Context.tsx
+++ /dev/null
@@ -1,265 +0,0 @@
-import React, { Component } from "react";
-import { pushQueryParams } from "legacy/shared/routing";
-import {
-  NilCluster,
-  type CapabilityType,
-  type ClusterType,
-  type ContextProps,
-  type ProjectListType,
-  type ProjectType,
-  type UsageData,
-} from "legacy/shared/types";
-
-import api from "./api";
-
-const Context = React.createContext<Partial<ContextProps>>(null);
-
-const { Provider } = Context;
-const ContextConsumer = Context.Consumer;
-
-type PropsType = {
-  history: any;
-  location: any;
-};
-
-type StateType = GlobalContextType;
-
-export type GlobalContextType = {
-  currentModal: string;
-  currentModalData: any;
-  setCurrentModal: (currentModal: string, currentModalData?: any) => void;
-  currentOverlay: {
-    message: string;
-    onYes: any;
-    onNo: any;
-  };
-  setCurrentOverlay: (x: any) => void;
-  currentError: string | null;
-  setCurrentError: (currentError: string) => void;
-  currentCluster: ClusterType;
-  setCurrentCluster: (currentCluster: ClusterType, callback?: any) => void;
-  currentProject: ProjectType | null;
-  setCurrentProject: (
-    currentProject: ProjectType,
-    callback?: () => void
-  ) => void;
-  projects: ProjectListType[];
-  setProjects: (projects: ProjectListType[]) => void;
-  user: any;
-  setUser: (userId: number, email: string) => void;
-  devOpsMode: boolean;
-  setDevOpsMode: (devOpsMode: boolean) => void;
-  capabilities: CapabilityType;
-  setCapabilities: (capabilities: CapabilityType) => void;
-  clearContext: () => void;
-  edition: "ee" | "ce";
-  setEdition: (appVersion: string) => void;
-  hasBillingEnabled: boolean;
-  setHasBillingEnabled: (isBillingEnabled: boolean) => void;
-  usage: UsageData;
-  setUsage: (usage: UsageData) => void;
-  queryUsage: (retry?: number) => Promise<void>;
-  hasFinishedOnboarding: boolean;
-  setHasFinishedOnboarding: (onboardingStatus: boolean) => void;
-  canCreateProject: boolean;
-  setCanCreateProject: (canCreateProject: boolean) => void;
-  enableGitlab: boolean;
-  setEnableGitlab: (enableGitlab: boolean) => void;
-  shouldRefreshClusters: boolean;
-  setShouldRefreshClusters: (shouldRefreshClusters: boolean) => void;
-  featurePreview: boolean;
-  setFeaturePreview: (featurePreview: boolean) => void;
-  soc2Data: any;
-  setSoc2Data: (x: any) => void;
-};
-
-/**
- * Component managing a universal (application-wide) data store.
- *
- * Important Usage Notes:
- * 1) Each field must have an accompanying setter
- * 2) No function calls are allowed from within Context (not counting
- *    initialization)
- * 3) Context should be used as a last-resort (changes will re-render ALL
- *    components consuming Context)
- * 4) As a rule of thumb, Context should not be used for UI-related state
- */
-class ContextProvider extends Component<PropsType, StateType> {
-  state: GlobalContextType = {
-    currentModal: null,
-    currentModalData: null,
-    setCurrentModal: (currentModal: string, currentModalData?: any) => {
-      this.setState({ currentModal, currentModalData });
-    },
-    currentOverlay: null,
-    setCurrentOverlay: (x: any) => {
-      this.setState({ currentOverlay: x });
-    },
-    currentError: null,
-    setCurrentError: (currentError: string) => {
-      this.setState({ currentError });
-    },
-    currentCluster: NilCluster,
-    setCurrentCluster: (currentCluster: ClusterType, callback?: any) => {
-      localStorage.setItem(
-        this.state.currentProject.id + "-cluster",
-        JSON.stringify(currentCluster)
-      );
-      this.setState({ currentCluster }, () => {
-        callback?.();
-      });
-      if (window.intercomSettings) {
-        window.intercomSettings["Cluster ID"] = currentCluster.id;
-      }
-    },
-    currentProject: null,
-    setCurrentProject: (currentProject: ProjectType, callback?: any) => {
-      if (currentProject) {
-        localStorage.setItem("currentProject", currentProject.id.toString());
-        pushQueryParams(this.props, {
-          project_id: currentProject.id.toString(),
-        });
-      } else {
-        localStorage.removeItem("currentProject");
-      }
-      this.setState({ currentProject }, () => {
-        callback?.();
-      });
-      if (window.intercomSettings) {
-        window.intercomSettings["Project ID"] = currentProject.id;
-        window.intercomSettings.project_id = currentProject.id;
-      }
-    },
-    projects: [],
-    setProjects: (projects: ProjectListType[]) => {
-      projects.sort((a: any, b: any) => (a.name > b.name ? 1 : -1));
-      this.setState({ projects });
-    },
-    user: null,
-    setUser: (userId: number, email: string) => {
-      this.setState({
-        user: { userId, email, isPorterUser: email?.endsWith("@porter.run") },
-      });
-      if (window.intercomSettings) {
-        window.intercomSettings["Porter User ID"] = userId;
-        window.intercomSettings["Porter User Email"] = email;
-      }
-    },
-    devOpsMode: true,
-    setDevOpsMode: (devOpsMode: boolean) => {
-      this.setState({ devOpsMode });
-    },
-    capabilities: null,
-    setCapabilities: (capabilities: CapabilityType) => {
-      this.setState({ capabilities });
-    },
-    clearContext: () => {
-      this.setState({
-        currentModal: null,
-        currentModalData: null,
-        currentError: null,
-        currentCluster: null,
-        currentProject: null,
-        projects: [],
-        user: null,
-        devOpsMode: true,
-      });
-    },
-    edition: "ce",
-    setEdition: (version: string) => {
-      const [edition] = version.split("-").reverse();
-      // typesafe just in case we mess up something it will default to ce
-      if (edition === "ce" || edition === "ee") {
-        this.setState({ edition });
-      }
-    },
-    hasBillingEnabled: false,
-    setHasBillingEnabled: (isBillingEnabled: boolean) => {
-      this.setState({ hasBillingEnabled: isBillingEnabled });
-    },
-    usage: null,
-    setUsage: (usage: UsageData) => {
-      this.setState({ usage });
-    },
-    queryUsage: async (retry: number = 0) => {
-      api
-        .getUsage("<token>", {}, { project_id: this.state?.currentProject?.id })
-        .then((res) => {
-          if (JSON.stringify(res.data) !== JSON.stringify(this.state.usage)) {
-            this.state.setUsage(res.data);
-          } else {
-            if (retry < 10) {
-              setTimeout(() => {
-                this.state.queryUsage(retry + 1);
-              }, 1000);
-            }
-          }
-        });
-    },
-    hasFinishedOnboarding: false,
-    setHasFinishedOnboarding: (onboardingStatus) => {
-      this.setState({ hasFinishedOnboarding: onboardingStatus });
-    },
-    canCreateProject: false,
-    setCanCreateProject: (canCreateProject: boolean) => {
-      this.setState({ canCreateProject });
-    },
-    enableGitlab: false,
-    setEnableGitlab: (enableGitlab) => {
-      this.setState({ enableGitlab });
-    },
-    shouldRefreshClusters: false,
-    setShouldRefreshClusters: (shouldRefreshClusters) => {
-      this.setState({ shouldRefreshClusters });
-    },
-    featurePreview: false,
-    setFeaturePreview: (featurePreview) => {
-      this.setState({ featurePreview });
-    },
-    soc2Data: {
-      preflight_checks: {
-        "Public SSH Access": {
-          message:
-            "Porter-provisioned instances do not allow remote SSH access. Users are not allowed to invoke commands directly on the host, and all commands are invoked via the EKS Control Plane.",
-          enabled: true,
-          hideToggle: true,
-          status: "ENABLED",
-        },
-        "Cluster Secret Encryption": {
-          message:
-            "Cluster secrets can be encrypted using an AWS KMS Key. Secrets will be encrypted at rest, and encryption cannot be disabled for secrets.",
-          enabled: false,
-          disabledTooltip:
-            "Enable KMS encryption for the cluster to enable SOC 2 compliance.",
-          link: "https://aws.amazon.com/about-aws/whats-new/2020/03/amazon-eks-adds-envelope-encryption-for-secrets-with-aws-kms/",
-          locked: true,
-          status: "",
-        },
-        "Control Plane Log Retention": {
-          message:
-            "EKS Control Plane logs are by default available for a minimal amount of time, typically 1 hour or less. EKS CloudTrail Forwarding automatically sends control plane logs to CloudTrail for longer retention and later inspection.",
-          enabled: false,
-          enabledField: "Retain CloudTrail logs for 365 days",
-          status: "",
-        },
-        "Enhanced Image Vulnerability Scanning": {
-          message:
-            "AWS ECR scans for CVEs from the open-source Clair database on image push. Enhanced scanning provides continuous, automated scans against images as new vulnerabilities appear.",
-          link: "https://docs.aws.amazon.com/AmazonECR/latest/userguide/image-scanning-enhanced.html",
-          enabled: false,
-          info: "",
-          status: "",
-        },
-      },
-    },
-    setSoc2Data: (soc2Data) => {
-      localStorage.setItem("soc2Data", JSON.stringify(soc2Data));
-    },
-  };
-
-  render() {
-    return <Provider value={{ ...this.state }}>{this.props.children}</Provider>;
-  }
-}
-
-export { Context, ContextConsumer, ContextProvider };
diff --git a/dashboard/src/legacy/shared/DeploymentTargetContext.tsx b/dashboard/src/legacy/shared/DeploymentTargetContext.tsx
deleted file mode 100644
index a64eb77665..0000000000
--- a/dashboard/src/legacy/shared/DeploymentTargetContext.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import React, { createContext, useContext, useEffect, useMemo } from "react";
-import { useQuery } from "@tanstack/react-query";
-import {
-  deploymentTargetValidator,
-  useDefaultDeploymentTarget,
-  type DeploymentTarget,
-} from "legacy/lib/hooks/useDeploymentTarget";
-import { useLocation } from "react-router";
-import { z } from "zod";
-
-import api from "./api";
-import { Context } from "./Context";
-import { clusterValidator } from "./types";
-
-export const DeploymentTargetContext = createContext<{
-  currentDeploymentTarget: DeploymentTarget | null;
-} | null>(null);
-
-export const useDeploymentTarget = (): {
-  currentDeploymentTarget: DeploymentTarget | null;
-} => {
-  const context = useContext(DeploymentTargetContext);
-  if (context === null) {
-    throw new Error(
-      "useDeploymentTarget must be used within a DeploymentTargetContext"
-    );
-  }
-  return context;
-};
-
-const DeploymentTargetProvider = ({
-  children,
-}: {
-  children: JSX.Element;
-}): JSX.Element => {
-  const location = useLocation();
-  const { currentProject, currentCluster, setCurrentCluster } =
-    useContext(Context);
-
-  const deploymentTargetID = useMemo(() => {
-    const queryParams = new URLSearchParams(location.search);
-    return queryParams.get("target");
-  }, [location.search]);
-
-  const { defaultDeploymentTarget, isDefaultDeploymentTargetLoading } =
-    useDefaultDeploymentTarget();
-
-  const { data: deploymentTargetFromIdParam, status } = useQuery(
-    [
-      "getDeploymentTarget",
-      {
-        project_id: currentProject?.id,
-        deployment_target_id: deploymentTargetID,
-      },
-    ],
-    async () => {
-      if (!currentProject || !deploymentTargetID) {
-        return;
-      }
-      const res = await api.getDeploymentTarget(
-        "<token>",
-        {},
-        {
-          project_id: currentProject.id,
-          deployment_target_id: deploymentTargetID,
-        }
-      );
-
-      const deploymentTarget = await z
-        .object({ deployment_target: deploymentTargetValidator })
-        .parseAsync(res.data);
-
-      return deploymentTarget.deployment_target;
-    },
-    {
-      enabled: !!currentProject && !!deploymentTargetID,
-    }
-  );
-
-  const deploymentTarget: DeploymentTarget | null = useMemo(() => {
-    if (!deploymentTargetID && isDefaultDeploymentTargetLoading) {
-      return null;
-    }
-
-    if (deploymentTargetID) {
-      if (status === "loading" || !deploymentTargetFromIdParam) {
-        return null;
-      }
-
-      return deploymentTargetFromIdParam;
-    }
-
-    if (defaultDeploymentTarget) {
-      return defaultDeploymentTarget;
-    }
-
-    return null;
-  }, [
-    deploymentTargetID,
-    isDefaultDeploymentTargetLoading,
-    defaultDeploymentTarget,
-    deploymentTargetFromIdParam,
-    status,
-  ]);
-
-  const { data: cluster, isSuccess } = useQuery(
-    [
-      "getDeploymentTargetCluster",
-      {
-        project_id: currentProject?.id,
-        cluster_id: deploymentTarget?.cluster_id,
-      },
-    ],
-    async () => {
-      if (!currentProject || !deploymentTarget) {
-        return;
-      }
-      const { data } = await api.getCluster(
-        "<token>",
-        {},
-        {
-          project_id: currentProject.id,
-          cluster_id: deploymentTarget?.cluster_id,
-        }
-      );
-
-      const cluster = await clusterValidator.parseAsync(data);
-
-      return cluster;
-    },
-    {
-      enabled: !!currentProject && !!deploymentTargetID,
-    }
-  );
-
-  useEffect(() => {
-    if (cluster && cluster.id !== currentCluster?.id && setCurrentCluster) {
-      setCurrentCluster(cluster);
-    }
-  }, [isSuccess, cluster, setCurrentCluster]);
-
-  return (
-    <DeploymentTargetContext.Provider
-      value={{
-        currentDeploymentTarget: deploymentTarget,
-      }}
-    >
-      {children}
-    </DeploymentTargetContext.Provider>
-  );
-};
-
-export default DeploymentTargetProvider;
diff --git a/dashboard/src/legacy/shared/ansiparser.tsx b/dashboard/src/legacy/shared/ansiparser.tsx
deleted file mode 100644
index 14fbb5455b..0000000000
--- a/dashboard/src/legacy/shared/ansiparser.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-/* eslint-disable no-plusplus, no-continue */
-const foregroundColors = {
-  "30": "black",
-  "31": "red",
-  "32": "green",
-  "33": "yellow",
-  "34": "blue",
-  "35": "magenta",
-  "36": "cyan",
-  "37": "white",
-  "90": "grey",
-} as Record<string, string>;
-
-const backgroundColors = {
-  "40": "black",
-  "41": "red",
-  "42": "green",
-  "43": "yellow",
-  "44": "blue",
-  "45": "magenta",
-  "46": "cyan",
-  "47": "white",
-} as Record<string, string>;
-
-const styles = {
-  "1": "bold",
-  "3": "italic",
-  "4": "underline",
-} as Record<string, string>;
-
-const eraseChar = (matchingText: any, result: any) => {
-  if (matchingText.length) {
-    return [matchingText.substr(0, matchingText.length - 1), result];
-  } else if (result.length) {
-    const index = result.length - 1;
-    const { text } = result[index];
-    const newResult =
-      text.length === 1
-        ? result.slice(0, result.length - 1)
-        : result.map((item: any, i: number) =>
-            index === i
-              ? { ...item, text: text.substr(0, text.length - 1) }
-              : item
-          );
-
-    return [matchingText, newResult];
-  }
-
-  return [matchingText, result];
-};
-
-const ansiparse = (str: string) => {
-  let matchingControl = null;
-  let matchingData = null;
-  let matchingText = "";
-  let ansiState = [] as any[];
-  let result = [] as any[];
-  let state = {} as any;
-
-  for (let i = 0; i < str.length; i++) {
-    if (matchingControl !== null) {
-      if (matchingControl === "\x1b" && str[i] === "[") {
-        if (matchingText) {
-          state.text = matchingText;
-          result.push(state);
-          state = {};
-          matchingText = "";
-        }
-
-        matchingControl = null;
-        matchingData = "";
-      } else {
-        matchingText += matchingControl + str[i];
-        matchingControl = null;
-      }
-
-      continue;
-    } else if (matchingData !== null) {
-      if (str[i] === ";") {
-        ansiState.push(matchingData);
-        matchingData = "";
-      } else if (str[i] === "m") {
-        ansiState.push(matchingData);
-        matchingData = null;
-        matchingText = "";
-
-        for (let a = 0; a < ansiState.length; a++) {
-          const ansiCode = ansiState[a];
-
-          if (foregroundColors[ansiCode]) {
-            state.foreground = foregroundColors[ansiCode];
-          } else if (backgroundColors[ansiCode]) {
-            state.background = backgroundColors[ansiCode];
-          } else if (ansiCode === 39) {
-            delete state.foreground;
-          } else if (ansiCode === 49) {
-            delete state.background;
-          } else if (styles[ansiCode]) {
-            state[styles[ansiCode]] = true;
-          } else if (ansiCode === 22) {
-            state.bold = false;
-          } else if (ansiCode === 23) {
-            state.italic = false;
-          } else if (ansiCode === 24) {
-            state.underline = false;
-          }
-        }
-
-        ansiState = [];
-      } else {
-        matchingData += str[i];
-      }
-
-      continue;
-    }
-
-    if (str[i] === "\x1b") {
-      matchingControl = str[i];
-    } else if (str[i] === "\u0008") {
-      [matchingText, result] = eraseChar(matchingText, result);
-    } else {
-      matchingText += str[i];
-    }
-  }
-
-  if (matchingText) {
-    state.text = matchingText + (matchingControl || "");
-    result.push(state);
-  }
-
-  return result;
-};
-
-export default ansiparse;
diff --git a/dashboard/src/legacy/shared/regex.tsx b/dashboard/src/legacy/shared/regex.tsx
deleted file mode 100644
index da1eaf6a93..0000000000
--- a/dashboard/src/legacy/shared/regex.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export const emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
diff --git a/dashboard/src/legacy/utils/ip.ts b/dashboard/src/legacy/utils/ip.ts
deleted file mode 100644
index da401976ac..0000000000
--- a/dashboard/src/legacy/utils/ip.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import {z} from "zod";
-
-export const isIP = (value: string): boolean => {
-    const ip = z.string().ip();
-
-    const parsed = ip.safeParse(value);
-
-    return parsed.success;
-};
-
-export const stringifiedDNSRecordType = (value: string): string => {
-    if (isIP(value)) {
-       return "an A record"
-    } else {
-        return "a CNAME record"
-    }
-};
\ No newline at end of file
diff --git a/dashboard/src/shared/ansiparser.tsx b/dashboard/src/shared/ansiparser.tsx
deleted file mode 100644
index 14fbb5455b..0000000000
--- a/dashboard/src/shared/ansiparser.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-/* eslint-disable no-plusplus, no-continue */
-const foregroundColors = {
-  "30": "black",
-  "31": "red",
-  "32": "green",
-  "33": "yellow",
-  "34": "blue",
-  "35": "magenta",
-  "36": "cyan",
-  "37": "white",
-  "90": "grey",
-} as Record<string, string>;
-
-const backgroundColors = {
-  "40": "black",
-  "41": "red",
-  "42": "green",
-  "43": "yellow",
-  "44": "blue",
-  "45": "magenta",
-  "46": "cyan",
-  "47": "white",
-} as Record<string, string>;
-
-const styles = {
-  "1": "bold",
-  "3": "italic",
-  "4": "underline",
-} as Record<string, string>;
-
-const eraseChar = (matchingText: any, result: any) => {
-  if (matchingText.length) {
-    return [matchingText.substr(0, matchingText.length - 1), result];
-  } else if (result.length) {
-    const index = result.length - 1;
-    const { text } = result[index];
-    const newResult =
-      text.length === 1
-        ? result.slice(0, result.length - 1)
-        : result.map((item: any, i: number) =>
-            index === i
-              ? { ...item, text: text.substr(0, text.length - 1) }
-              : item
-          );
-
-    return [matchingText, newResult];
-  }
-
-  return [matchingText, result];
-};
-
-const ansiparse = (str: string) => {
-  let matchingControl = null;
-  let matchingData = null;
-  let matchingText = "";
-  let ansiState = [] as any[];
-  let result = [] as any[];
-  let state = {} as any;
-
-  for (let i = 0; i < str.length; i++) {
-    if (matchingControl !== null) {
-      if (matchingControl === "\x1b" && str[i] === "[") {
-        if (matchingText) {
-          state.text = matchingText;
-          result.push(state);
-          state = {};
-          matchingText = "";
-        }
-
-        matchingControl = null;
-        matchingData = "";
-      } else {
-        matchingText += matchingControl + str[i];
-        matchingControl = null;
-      }
-
-      continue;
-    } else if (matchingData !== null) {
-      if (str[i] === ";") {
-        ansiState.push(matchingData);
-        matchingData = "";
-      } else if (str[i] === "m") {
-        ansiState.push(matchingData);
-        matchingData = null;
-        matchingText = "";
-
-        for (let a = 0; a < ansiState.length; a++) {
-          const ansiCode = ansiState[a];
-
-          if (foregroundColors[ansiCode]) {
-            state.foreground = foregroundColors[ansiCode];
-          } else if (backgroundColors[ansiCode]) {
-            state.background = backgroundColors[ansiCode];
-          } else if (ansiCode === 39) {
-            delete state.foreground;
-          } else if (ansiCode === 49) {
-            delete state.background;
-          } else if (styles[ansiCode]) {
-            state[styles[ansiCode]] = true;
-          } else if (ansiCode === 22) {
-            state.bold = false;
-          } else if (ansiCode === 23) {
-            state.italic = false;
-          } else if (ansiCode === 24) {
-            state.underline = false;
-          }
-        }
-
-        ansiState = [];
-      } else {
-        matchingData += str[i];
-      }
-
-      continue;
-    }
-
-    if (str[i] === "\x1b") {
-      matchingControl = str[i];
-    } else if (str[i] === "\u0008") {
-      [matchingText, result] = eraseChar(matchingText, result);
-    } else {
-      matchingText += str[i];
-    }
-  }
-
-  if (matchingText) {
-    state.text = matchingText + (matchingControl || "");
-    result.push(state);
-  }
-
-  return result;
-};
-
-export default ansiparse;
diff --git a/dashboard/src/shared/array_utils.ts b/dashboard/src/shared/array_utils.ts
deleted file mode 100644
index ed784646c5..0000000000
--- a/dashboard/src/shared/array_utils.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export function onlyInLeft<T>(
-  left: Array<T>,
-  right: Array<T>,
-  compareFunction: (leftValue: T, rightValue: T) => boolean
-): Array<T> {
-  return left.filter(
-    (leftValue) =>
-      !right.some((rightValue) => compareFunction(leftValue, rightValue))
-  );
-}
diff --git a/dashboard/src/shared/hooks/useChart.ts b/dashboard/src/shared/hooks/useChart.ts
deleted file mode 100644
index ac1f07efd3..0000000000
--- a/dashboard/src/shared/hooks/useChart.ts
+++ /dev/null
@@ -1,326 +0,0 @@
-import yaml from "js-yaml";
-import { useContext, useEffect, useState } from "react";
-import { useRouteMatch } from "react-router";
-import api from "shared/api";
-import { onlyInLeft } from "shared/array_utils";
-import { Context } from "shared/Context";
-import { useRouting } from "shared/routing";
-import { ChartType, ChartTypeWithExtendedConfig } from "shared/types";
-
-export const useChart = (oldChart: ChartType, closeChart: () => void) => {
-  const { currentProject, currentCluster, setCurrentError } = useContext(
-    Context
-  );
-  const [chart, setChart] = useState<ChartTypeWithExtendedConfig>(null);
-  const { url: matchUrl } = useRouteMatch();
-
-  const [status, setStatus] = useState<"ready" | "loading" | "deleting">(
-    "loading"
-  );
-
-  const [saveStatus, setSaveStatus] = useState<
-    "loading" | "successful" | string
-  >("");
-
-  const { pushFiltered, getQueryParam, pushQueryParams } = useRouting();
-
-  useEffect(() => {
-    const { namespace, name: chartName } = oldChart;
-    setStatus("loading");
-
-    const revision = getQueryParam("chart_revision");
-
-    api
-      .getChart<ChartTypeWithExtendedConfig>(
-        "token",
-        {},
-        {
-          id: currentProject?.id,
-          cluster_id: currentCluster?.id,
-          namespace,
-          name: chartName,
-          revision: Number(revision) ? Number(revision) : 0,
-        }
-      )
-      .then((res) => {
-        if (res?.data) {
-          setChart(res.data);
-        }
-      })
-      .finally(() => {
-        setStatus("ready");
-      });
-  }, [oldChart, currentCluster, currentProject]);
-
-  /**
-   * Upgrade chart version
-   */
-  const upgradeChart = async () => {
-    // convert current values to yaml
-    let valuesYaml = yaml.dump({
-      ...(chart.config as Object),
-    });
-
-    try {
-      await api.upgradeChartValues(
-        "<token>",
-        {
-          values: valuesYaml,
-          version: chart.latest_version,
-          latest_revision: chart.version,
-        },
-        {
-          id: currentProject.id,
-          name: chart.name,
-          namespace: chart.namespace,
-          cluster_id: currentCluster.id,
-        }
-      );
-
-      window.analytics?.track("Chart Upgraded", {
-        chart: chart.name,
-        values: valuesYaml,
-      });
-    } catch (err) {
-      let parsedErr = err?.response?.data?.error;
-
-      if (parsedErr) {
-        err = parsedErr;
-      }
-      setCurrentError(parsedErr);
-
-      window.analytics?.track("Failed to Upgrade Chart", {
-        chart: chart.name,
-        values: valuesYaml,
-        error: err,
-      });
-    }
-  };
-
-  const uninstallChart = async () => {
-    if (chart.stack_id) {
-      await api.removeStackAppResource(
-        "<token>",
-        {},
-        {
-          project_id: currentProject.id,
-          cluster_id: currentCluster.id,
-          app_resource_name: chart.name,
-          namespace: chart.namespace,
-          stack_id: chart.stack_id,
-        }
-      );
-    } else {
-      await api.uninstallTemplate(
-        "<token>",
-        {},
-        {
-          namespace: chart.namespace,
-          name: chart.name,
-          id: currentProject.id,
-          cluster_id: currentCluster.id,
-        }
-      );
-    }
-  };
-
-  /**
-   * Delete/Uninstall chart
-   */
-  const deleteChart = async () => {
-    setStatus("deleting");
-    try {
-      const syncedEnvGroups = chart.config?.container?.env?.synced || [];
-      const removeApplicationToEnvGroupPromises = syncedEnvGroups.map(
-        (envGroup: any) => {
-          return api.removeApplicationFromEnvGroup(
-            "<token>",
-            {
-              name: envGroup?.name,
-              app_name: chart.name,
-            },
-            {
-              project_id: currentProject.id,
-              cluster_id: currentCluster.id,
-              namespace: chart.namespace,
-            }
-          );
-        }
-      );
-      try {
-        await Promise.all(removeApplicationToEnvGroupPromises);
-      } catch (error) {
-        setCurrentError(
-          "We coudln't remove the synced env group from the application, please remove it manually before uninstalling the chart, or try again."
-        );
-        return;
-      }
-
-      await uninstallChart();
-
-      setStatus("ready");
-      closeChart();
-      return;
-    } catch (error) {
-      console.log(error);
-      throw new Error("Couldn't uninstall the chart");
-    }
-  };
-
-  /**
-   * Update chart values
-   */
-  const updateChart = async (
-    processValues: (
-      chart: ChartType,
-      oldChart?: ChartType
-    ) => { yaml: string; metadata: any }
-  ) => {
-    setSaveStatus("loading");
-    const { yaml: values, metadata } = processValues(chart, oldChart);
-
-    const syncEnvGroups = metadata ? metadata["container.env"] : {};
-
-    const addedEnvGroups = syncEnvGroups?.added || [];
-    const deletedEnvGroups = syncEnvGroups?.deleted || [];
-
-    const addApplicationToEnvGroupPromises = addedEnvGroups.map(
-      (envGroup: any) => {
-        return api.addApplicationToEnvGroup(
-          "<token>",
-          {
-            name: envGroup?.name,
-            app_name: chart.name,
-          },
-          {
-            project_id: currentProject.id,
-            cluster_id: currentCluster.id,
-            namespace: chart.namespace,
-          }
-        );
-      }
-    );
-
-    try {
-      await Promise.all(addApplicationToEnvGroupPromises);
-    } catch (error) {
-      setCurrentError(
-        "We coudln't sync the env group to the application, please try again."
-      );
-    }
-
-    const removeApplicationToEnvGroupPromises = deletedEnvGroups.map(
-      (envGroup: any) => {
-        return api.removeApplicationFromEnvGroup(
-          "<token>",
-          {
-            name: envGroup?.name,
-            app_name: chart.name,
-          },
-          {
-            project_id: currentProject.id,
-            cluster_id: currentCluster.id,
-            namespace: chart.namespace,
-          }
-        );
-      }
-    );
-    try {
-      await Promise.all(removeApplicationToEnvGroupPromises);
-    } catch (error) {
-      setCurrentError(
-        "We coudln't remove the synced env group from the application, please try again."
-      );
-    }
-
-    try {
-      await api.upgradeChartValues(
-        "<token>",
-        {
-          values,
-          latest_revision: chart.version,
-        },
-        {
-          id: currentProject.id,
-          name: chart.name,
-          namespace: chart.namespace,
-          cluster_id: currentCluster.id,
-        }
-      );
-
-      setSaveStatus("successful");
-      setTimeout(() => setSaveStatus(""), 500);
-    } catch (err) {
-      let parsedErr = err?.response?.data?.error;
-
-      if (!parsedErr) {
-        parsedErr = err;
-      }
-      setCurrentError(parsedErr);
-      setSaveStatus("Couldn't process the request.");
-      // throw new Error(parsedErr);
-    }
-  };
-
-  /**
-   * Refresh the chart data
-   */
-  const refreshChart = async () => {
-    try {
-      const newChart = await api
-        .getChart(
-          "<token>",
-          {},
-          {
-            name: chart.name,
-            revision: 0,
-            namespace: chart.namespace,
-            cluster_id: currentCluster.id,
-            id: currentProject.id,
-          }
-        )
-        .then((res) => res.data);
-
-      pushQueryParams({
-        chart_version: newChart.version,
-      });
-
-      setChart(newChart);
-    } catch (error) {}
-  };
-
-  const loadChartWithSpecificRevision = async (revision: number) => {
-    try {
-      const newChart = await api
-        .getChart(
-          "<token>",
-          {},
-          {
-            name: chart.name,
-            revision: revision,
-            namespace: chart.namespace,
-            cluster_id: currentCluster.id,
-            id: currentProject.id,
-          }
-        )
-        .then((res) => res.data);
-
-      pushQueryParams({
-        chart_revision: newChart.version,
-      });
-
-      setChart(newChart);
-    } catch (error) {}
-  };
-
-  return {
-    chart,
-    status,
-    saveStatus,
-    upgradeChart,
-    deleteChart,
-    updateChart,
-    refreshChart,
-    loadChartWithSpecificRevision,
-  };
-};
diff --git a/dashboard/src/shared/hooks/useEffectDebugger.ts b/dashboard/src/shared/hooks/useEffectDebugger.ts
deleted file mode 100644
index c56ae913a8..0000000000
--- a/dashboard/src/shared/hooks/useEffectDebugger.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { useEffect } from "react";
-import { usePrevious } from "./usePrevious";
-
-export const useEffectDebugger = (
-  effectHook: any,
-  dependencies: any,
-  dependencyNames: any = []
-) => {
-  const previousDeps = usePrevious(dependencies, []);
-
-  const changedDeps = dependencies.reduce(
-    (accum: any, dependency: any, index: any) => {
-      if (dependency !== previousDeps[index]) {
-        const keyName = dependencyNames[index] || index;
-        return {
-          ...accum,
-          [keyName]: {
-            before: previousDeps[index],
-            after: dependency,
-          },
-        };
-      }
-
-      return accum;
-    },
-    {}
-  );
-
-  if (Object.keys(changedDeps).length) {
-    // console.log("[use-effect-debugger] ", changedDeps);
-  }
-
-  useEffect(effectHook, dependencies);
-};
diff --git a/dashboard/src/shared/hooks/usePagination.ts b/dashboard/src/shared/hooks/usePagination.ts
deleted file mode 100644
index 0516575eee..0000000000
--- a/dashboard/src/shared/hooks/usePagination.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-/**
- * Improved version using as base the usePagination hook by gh user @damiisdandy
- * Base hook on his repo https://github.com/damiisdandy/use-pagination
- */
-
-import { useState } from "react";
-
-interface UsePaginationProps {
-  count: number;
-  initialPageSize?: number;
-}
-
-interface UsePaginationReturn {
-  page: number;
-  totalPages: number;
-  setPage: (page: number) => void;
-  nextPage: () => void;
-  prevPage: () => void;
-  firstContentIndex: number;
-  lastContentIndex: number;
-  pageSize: number;
-  setPageSize: (pageSize: number) => void;
-  canNextPage: boolean;
-  canPreviousPage: boolean;
-}
-
-type UsePagination = (props: UsePaginationProps) => UsePaginationReturn;
-
-const usePagination: UsePagination = ({ count, initialPageSize }) => {
-  const [pageSize, setPageSize] = useState(() => {
-    if (typeof initialPageSize === "number" && initialPageSize !== NaN) {
-      return initialPageSize;
-    }
-
-    return 10;
-  });
-
-  const [page, setPage] = useState(1);
-  // number of pages in total (total items / content on each page)
-  const pageCount = Math.ceil(count / pageSize);
-  // index of last item of current page
-  const lastContentIndex = page * pageSize;
-  // index of first item of current page
-  const firstContentIndex = lastContentIndex - pageSize;
-
-  // change page based on direction either front or back
-  const changePage = (direction: boolean) => {
-    setPage((state) => {
-      // move forward
-      if (direction) {
-        // if page is the last page, do nothing
-        if (state === pageCount) {
-          return state;
-        }
-        return state + 1;
-        // go back
-      } else {
-        // if page is the first page, do nothing
-        if (state === 1) {
-          return state;
-        }
-        return state - 1;
-      }
-    });
-  };
-
-  const setPageSAFE = (num: number) => {
-    // if number is greater than number of pages, set to last page
-    if (num > pageCount) {
-      setPage(pageCount);
-      // if number is less than 1, set page to first page
-    } else if (num < 1) {
-      setPage(1);
-    } else {
-      setPage(num);
-    }
-  };
-
-  const setPageSizeSAFE = (pageSize: number) => {
-    if (typeof initialPageSize === "number" && initialPageSize !== NaN) {
-      setPageSize(pageSize);
-    }
-  };
-
-  const canNextPage = page <= pageCount - 1;
-  const canPreviousPage = page > 1;
-
-  return {
-    totalPages: pageCount,
-    nextPage: () => changePage(true),
-    prevPage: () => changePage(false),
-    setPage: setPageSAFE,
-    firstContentIndex,
-    lastContentIndex,
-    page,
-    pageSize,
-    setPageSize: setPageSizeSAFE,
-    canNextPage,
-    canPreviousPage,
-  };
-};
-
-export default usePagination;
diff --git a/dashboard/src/shared/hooks/usePods.ts b/dashboard/src/shared/hooks/usePods.ts
deleted file mode 100644
index 073fcf84ce..0000000000
--- a/dashboard/src/shared/hooks/usePods.ts
+++ /dev/null
@@ -1,143 +0,0 @@
-import { useEffect, useState } from "react";
-import api from "shared/api";
-import { NewWebsocketOptions, useWebsockets } from "./useWebsockets";
-
-interface Props {
-  selectors: string[];
-  namespace: string;
-  project_id: number;
-  cluster_id: number;
-  controller_kind?: string;
-  controller_name?: string;
-  // subscribed controls whether or not pods should be returned from this hook. for example, we
-  // use this hook to query a list of job runs, but only want to return pods (and live status)
-  // for job runs which are currently active. as we don't want to mess with conditional hooks,
-  // we simply toggle "subscribed" instead
-  subscribed?: boolean;
-}
-
-type UsePods = (props: Props) => [pods: any[], isLoading: boolean];
-
-export const usePods: UsePods = ({
-  selectors,
-  namespace,
-  project_id,
-  cluster_id,
-  controller_kind,
-  controller_name,
-  subscribed,
-}) => {
-  const [pods, setPods] = useState([]);
-  const [isLoading, setIsLoading] = useState(true);
-
-  const {
-    newWebsocket,
-    openWebsocket,
-    closeAllWebsockets,
-    closeWebsocket,
-  } = useWebsockets();
-
-  const setupWebsocket = () => {
-    let apiEndpoint = `/api/projects/${project_id}/clusters/${cluster_id}/pod/status?`;
-
-    if (selectors) {
-      for (let selector of selectors) {
-        apiEndpoint += `selectors=${selector}`;
-      }
-    }
-
-    const options: NewWebsocketOptions = {};
-
-    options.onopen = () => {
-      console.log("connected to websocket");
-    };
-
-    options.onmessage = (evt: MessageEvent) => {
-      let event = JSON.parse(evt.data);
-      let object = event.Object;
-      object.metadata.kind = event.Kind;
-
-      mergeAndUpdatePods(object);
-    };
-
-    options.onclose = () => {
-      console.log("closing websocket");
-    };
-
-    options.onerror = (err: ErrorEvent) => {
-      console.log(err);
-      closeWebsocket(apiEndpoint);
-    };
-
-    newWebsocket(apiEndpoint, apiEndpoint, options);
-    openWebsocket(apiEndpoint);
-  };
-
-  const mergeAndUpdatePods = (pod: any) => {
-    // find pods with the same name and namespace and overwrite them
-    let newPods = [...pods];
-    let assigned = false;
-
-    newPods.forEach((newPod, i) => {
-      if (
-        newPod.metadata.name == pod.metadata.name &&
-        newPod.metadata.namespace == pod.metadata.namespace
-      ) {
-        newPods[i] = pod;
-        assigned = true;
-      }
-    });
-
-    if (!assigned) {
-      newPods = [...newPods, pod];
-    }
-
-    setPods(newPods);
-  };
-
-  useEffect(() => {
-    if (!subscribed) {
-      return;
-    }
-    setIsLoading(true);
-    if (controller_kind == "job") {
-      api
-        .getJobPods(
-          "<token>",
-          {},
-          {
-            id: project_id,
-            name: controller_name,
-            cluster_id: cluster_id,
-            namespace: namespace,
-          }
-        )
-        .then((res) => {
-          setPods(res.data);
-          setIsLoading(false);
-        });
-    } else {
-      api
-        .getMatchingPods(
-          "<token>",
-          {
-            namespace: namespace,
-            selectors: selectors,
-          },
-          {
-            id: project_id,
-            cluster_id: cluster_id,
-          }
-        )
-        .then((res) => {
-          setPods(res.data);
-        });
-    }
-
-    setupWebsocket();
-
-    return () => closeAllWebsockets();
-  }, [project_id, cluster_id]);
-
-  return [pods, isLoading];
-};
diff --git a/dashboard/src/shared/hooks/usePrevious.ts b/dashboard/src/shared/hooks/usePrevious.ts
deleted file mode 100644
index 75975c734e..0000000000
--- a/dashboard/src/shared/hooks/usePrevious.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { useEffect, useRef } from "react";
-
-export const usePrevious = (value: any, initialValue: any) => {
-  const ref = useRef(initialValue);
-  useEffect(() => {
-    ref.current = value;
-  });
-  return ref.current;
-};
diff --git a/dashboard/src/shared/icons/MoonBase.tsx b/dashboard/src/shared/icons/MoonBase.tsx
deleted file mode 100644
index 17f70227ba..0000000000
--- a/dashboard/src/shared/icons/MoonBase.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from "react";
-
-import { type IconProps } from "./types";
-
-const MoonBaseIcon: React.FC<IconProps> = ({ className, styles, fill }) => {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-      style={styles}
-      fill={fill}
-    >
-      <path
-        d="M21.5999 14.6398C20.6977 14.9134 19.7404 15.0606 18.7487 15.0606C13.3307 15.0606 8.93856 10.6684 8.93856 5.25042C8.93856 4.2592 9.08557 3.30232 9.35897 2.40039C5.33153 3.62177 2.40002 7.36343 2.40002 11.7898C2.40002 17.2078 6.79218 21.5999 12.2102 21.5999C16.637 21.5999 20.3789 18.6679 21.5999 14.6398Z"
-        stroke="black"
-        strokeWidth="2"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-};
-
-export default MoonBaseIcon;
diff --git a/dashboard/src/shared/release/utils.ts b/dashboard/src/shared/release/utils.ts
deleted file mode 100644
index f403703fca..0000000000
--- a/dashboard/src/shared/release/utils.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { ChartTypeWithExtendedConfig } from "shared/types";
-
-export const isDeployedFromGithub = (release: ChartTypeWithExtendedConfig) => {
-  const githubRepository = release?.git_action_config?.git_repo;
-
-  return !!githubRepository?.length;
-};
diff --git a/dashboard/src/shared/themes/opal.ts b/dashboard/src/shared/themes/opal.ts
deleted file mode 100644
index 757e174c26..0000000000
--- a/dashboard/src/shared/themes/opal.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-const theme = {
-  bg: "#f3f5f8",
-  fg: "#ffffff",
-  fg2: "#ffffff11",
-  border: "#bbbbcc",
-  border2: "#9999aa",
-  button: "#3A48CA",
-  clickable: {
-    bg: "linear-gradient(180deg, #ffffff, #f3f5f8)",
-  },
-  modalBg: "#171B2111",
-  text: {
-    primary: "#414142",
-    helper: "#aaaabb",
-  },
-}
-
-export default theme;
\ No newline at end of file