diff --git a/src/components/forms/__tests__/company-form.test.js b/src/components/forms/__tests__/company-form.test.js
new file mode 100644
index 000000000..ed1dcc90d
--- /dev/null
+++ b/src/components/forms/__tests__/company-form.test.js
@@ -0,0 +1,357 @@
+// ---- Mocks must come first ----
+
+jest.mock("i18n-react/dist/i18n-react", () => ({
+  __esModule: true,
+  default: { translate: (key) => key }
+}));
+
+jest.mock("openstack-uicore-foundation/lib/utils/query-actions", () => ({
+  getCountryList: jest.fn((callback) => {
+    callback([
+      { iso_code: "AR", name: "Argentina" },
+      { iso_code: "US", name: "United States" }
+    ]);
+    return Promise.resolve();
+  })
+}));
+
+jest.mock(
+  "openstack-uicore-foundation/lib/components/inputs/upload-input-v3",
+  () => ({
+    __esModule: true,
+    default: ({ id, onUploadComplete, onUploadStart, value }) => (
+      <div
+        data-testid={`upload-input-${id}`}
+        data-logo={value?.[0]?.file_url ?? ""}
+      >
+        <button
+          type="button"
+          data-testid={`trigger-upload-${id}`}
+          onClick={() => {
+            onUploadStart?.();
+            onUploadComplete({ path: "/uploads/", name: `${id}.png` });
+          }}
+        >
+          Upload
+        </button>
+      </div>
+    )
+  })
+);
+
+jest.mock(
+  "openstack-uicore-foundation/lib/components/mui/formik-inputs/textfield",
+  () =>
+    function MockTextField({ name }) {
+      return <input data-testid={`textfield-${name}`} name={name} />;
+    }
+);
+
+jest.mock(
+  "openstack-uicore-foundation/lib/components/mui/formik-inputs/select",
+  () =>
+    function MockSelect({ name, children }) {
+      return <div data-testid={`select-${name}`}>{children}</div>;
+    }
+);
+
+jest.mock(
+  "openstack-uicore-foundation/lib/components/mui/table",
+  () =>
+    // eslint-disable-next-line react/prop-types
+    function MockTable({ data, onDelete }) {
+      return (
+        <div data-testid="mui-table">
+          {data.map((row) => (
+            <button key={row.id} type="button" onClick={() => onDelete(row.id)}>
+              {`delete-${row.id}`}
+            </button>
+          ))}
+        </div>
+      );
+    }
+);
+
+jest.mock(
+  "../../inputs/formik-text-editor",
+  () =>
+    function MockTextEditor({ name }) {
+      return <textarea data-testid={`editor-${name}`} name={name} />;
+    }
+);
+
+jest.mock("../../mui/showConfirmDialog", () =>
+  jest.fn(() => Promise.resolve(true))
+);
+
+jest.mock("../../../hooks/useScrollToError", () => jest.fn());
+
+jest.mock("mui-color-input", () => ({
+  MuiColorInput: ({ value, onChange, onBlur, name }) => (
+    <input
+      data-testid="color-input"
+      name={name}
+      value={value || ""}
+      onChange={(e) => onChange(e.target.value)}
+      onBlur={(e) => onBlur({ target: { name, value: e.target.value } })}
+    />
+  )
+}));
+
+// ---- Now imports ----
+/* eslint-disable import/first */
+import React, { useState } from "react";
+import {
+  render,
+  screen,
+  waitFor,
+  act,
+  fireEvent
+} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { FormikProvider, useFormik } from "formik";
+import CompanyForm from "../company-form";
+import showConfirmDialog from "../../mui/showConfirmDialog";
+/* eslint-enable import/first */
+
+const BASE_ENTITY = {
+  id: 0,
+  name: "",
+  url: "",
+  contact_email: "",
+  member_level: "",
+  color: "",
+  admin_email: "",
+  city: "",
+  state: "",
+  country: "",
+  industry: "",
+  products: "",
+  contributions: "",
+  description: "",
+  overview: "",
+  commitment: "",
+  logo: "",
+  big_logo: "",
+  project_sponsorships: []
+};
+
+// Mirrors the formik wiring edit-company-page.js provides in production, so
+// CompanyForm's useFormikContext() has a real context to read from.
+const Harness = ({
+  initialEntity,
+  onAttach = jest.fn(() => Promise.resolve()),
+  onRemove = jest.fn(() => Promise.resolve()),
+  onAddSponsorship,
+  onDeleteSponsorship
+}) => {
+  const [isSaving, setIsSaving] = useState(false);
+  const formik = useFormik({ initialValues: { ...initialEntity } });
+
+  return (
+    <FormikProvider value={formik}>
+      <CompanyForm
+        initialEntity={initialEntity}
+        isSaving={isSaving}
+        setIsSaving={setIsSaving}
+        onAttach={onAttach}
+        onRemove={onRemove}
+        onAddSponsorship={onAddSponsorship}
+        onDeleteSponsorship={onDeleteSponsorship}
+      />
+      <pre data-testid="debug-values">{JSON.stringify(formik.values)}</pre>
+    </FormikProvider>
+  );
+};
+
+const readFormikValues = () =>
+  JSON.parse(screen.getByTestId("debug-values").textContent);
+
+describe("CompanyForm", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    window.APP_CLIENT_NAME = "";
+  });
+
+  test.each([
+    [
+      "resolves a stored ISO code to its label when editing",
+      { ...BASE_ENTITY, id: 1, name: "Acme Corp", country: "AR" },
+      "Argentina"
+    ],
+    ["leaves the country field empty for a new company", BASE_ENTITY, ""]
+  ])("%s", async (_label, entity, expectedValue) => {
+    render(<Harness initialEntity={entity} />);
+
+    await waitFor(() => {
+      expect(screen.getByRole("combobox")).toHaveValue(expectedValue);
+    });
+  });
+
+  it("stores the full country option (not just the ISO string) once resolved", async () => {
+    render(
+      <Harness
+        initialEntity={{
+          ...BASE_ENTITY,
+          id: 1,
+          name: "Acme Corp",
+          country: "AR"
+        }}
+      />
+    );
+
+    await waitFor(() => {
+      expect(screen.getByRole("combobox")).toHaveValue("Argentina");
+    });
+
+    expect(readFormikValues().country).toEqual({
+      value: "AR",
+      label: "Argentina"
+    });
+  });
+
+  it("commits a newly picked color into the form on blur", async () => {
+    render(
+      <Harness
+        initialEntity={{
+          ...BASE_ENTITY,
+          id: 1,
+          name: "Acme Corp",
+          color: "#ff0000"
+        }}
+      />
+    );
+
+    const colorInput = screen.getByTestId("color-input");
+    fireEvent.change(colorInput, { target: { value: "#00ff00" } });
+    fireEvent.blur(colorInput);
+
+    await waitFor(() => {
+      expect(readFormikValues().color).toBe("#00ff00");
+    });
+  });
+
+  describe("logo upload", () => {
+    it("does not attach to the backend for a new (unsaved) company", async () => {
+      const user = userEvent.setup();
+      const onAttach = jest.fn(() => Promise.resolve());
+      const onRemove = jest.fn(() => Promise.resolve());
+
+      render(
+        <Harness
+          initialEntity={BASE_ENTITY}
+          onAttach={onAttach}
+          onRemove={onRemove}
+        />
+      );
+
+      await act(async () => {
+        await user.click(screen.getByTestId("trigger-upload-big_logo"));
+      });
+
+      expect(onAttach).not.toHaveBeenCalled();
+    });
+
+    it("reverts the logo preview when onAttach fails for an existing company", async () => {
+      const user = userEvent.setup();
+      let rejectAttach;
+      const onAttach = jest.fn(
+        () =>
+          new Promise((_, rej) => {
+            rejectAttach = rej;
+          })
+      );
+      const onRemove = jest.fn(() => Promise.resolve());
+
+      render(
+        <Harness
+          initialEntity={{
+            ...BASE_ENTITY,
+            id: 1,
+            name: "Acme Corp",
+            logo: "old-logo.png"
+          }}
+          onAttach={onAttach}
+          onRemove={onRemove}
+        />
+      );
+
+      await act(async () => {
+        await user.click(screen.getByTestId("trigger-upload-logo"));
+      });
+
+      expect(screen.getByTestId("upload-input-logo")).toHaveAttribute(
+        "data-logo",
+        "/uploads/logo.png"
+      );
+
+      await act(async () => {
+        rejectAttach(new Error("network error"));
+      });
+
+      await waitFor(() =>
+        expect(screen.getByTestId("upload-input-logo")).toHaveAttribute(
+          "data-logo",
+          "old-logo.png"
+        )
+      );
+    });
+  });
+
+  describe("sponsorship deletion", () => {
+    const entityWithSponsorship = {
+      ...BASE_ENTITY,
+      id: 5,
+      name: "Acme Corp",
+      project_sponsorships: [
+        {
+          id: 10,
+          sponsored_project: { id: 1, name: "Project A" },
+          name: "Gold",
+          supporting_companies: [{ id: 99, company_id: 5 }]
+        }
+      ]
+    };
+
+    beforeEach(() => {
+      window.APP_CLIENT_NAME = "openstack";
+    });
+
+    it("deletes the sponsorship when the user confirms", async () => {
+      showConfirmDialog.mockResolvedValueOnce(true);
+      const onDeleteSponsorship = jest.fn(() => Promise.resolve());
+      const user = userEvent.setup();
+
+      render(
+        <Harness
+          initialEntity={entityWithSponsorship}
+          onDeleteSponsorship={onDeleteSponsorship}
+        />
+      );
+
+      await user.click(screen.getByText("delete-10"));
+
+      await waitFor(() => {
+        expect(onDeleteSponsorship).toHaveBeenCalledWith(1, 10, 99);
+      });
+    });
+
+    it("does not delete the sponsorship when the user declines", async () => {
+      showConfirmDialog.mockResolvedValueOnce(false);
+      const onDeleteSponsorship = jest.fn(() => Promise.resolve());
+      const user = userEvent.setup();
+
+      render(
+        <Harness
+          initialEntity={entityWithSponsorship}
+          onDeleteSponsorship={onDeleteSponsorship}
+        />
+      );
+
+      await user.click(screen.getByText("delete-10"));
+
+      await waitFor(() => expect(showConfirmDialog).toHaveBeenCalled());
+      expect(onDeleteSponsorship).not.toHaveBeenCalled();
+    });
+  });
+});
diff --git a/src/components/forms/company-form.js b/src/components/forms/company-form.js
index 5292aeb2d..5b216b71d 100644
--- a/src/components/forms/company-form.js
+++ b/src/components/forms/company-form.js
@@ -1,5 +1,5 @@
-/*
- * Copyright 2017 OpenStack Foundation
+/**
+ * Copyright 2024 OpenStack Foundation
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
@@ -11,416 +11,415 @@
  * limitations under the License.
  * */
 
-import React from "react";
+import React, { useState } from "react";
+import PropTypes from "prop-types";
 import T from "i18n-react/dist/i18n-react";
-import "awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css";
-import UploadInput from "openstack-uicore-foundation/lib/components/inputs/upload-input"
-import Input from "openstack-uicore-foundation/lib/components/inputs/text-input"
-import CountryDropdown from "openstack-uicore-foundation/lib/components/inputs/country-dropdown"
-import Dropdown from "openstack-uicore-foundation/lib/components/inputs/dropdown"
-import Table from "openstack-uicore-foundation/lib/components/table";
-import TextEditorV3 from "openstack-uicore-foundation/lib/components/inputs/editor-input-v3";
-import { isEmpty, scrollToError, shallowEqual } from "../../utils/methods";
+import { useFormikContext } from "formik";
+import {
+  Button,
+  FormControl,
+  Grid2,
+  InputLabel,
+  MenuItem,
+  Select
+} from "@mui/material";
+import UploadInputV3 from "openstack-uicore-foundation/lib/components/inputs/upload-input-v3";
+import { getCountryList } from "openstack-uicore-foundation/lib/utils/query-actions";
+import Table from "openstack-uicore-foundation/lib/components/mui/table";
+import MuiFormikTextField from "openstack-uicore-foundation/lib/components/mui/formik-inputs/textfield";
+import MuiFormikSelect from "openstack-uicore-foundation/lib/components/mui/formik-inputs/select";
+import useScrollToError from "../../hooks/useScrollToError";
+import FormikTextEditor from "../inputs/formik-text-editor";
+import MuiFormikAsyncAutocomplete from "../mui/formik-inputs/mui-formik-async-select";
+import MuiFormikColorField from "../mui/formik-inputs/mui-formik-color-field";
+import showConfirmDialog from "../mui/showConfirmDialog";
 
-class CompanyForm extends React.Component {
-  constructor(props) {
-    super(props);
+const MEMBER_LEVELS = [
+  { label: "Platinum", value: "Platinum" },
+  { label: "Gold", value: "Gold" },
+  { label: "StartUp", value: "StartUp" },
+  { label: "Corporate", value: "Corporate" },
+  { label: "Mention", value: "Mention" },
+  { label: "None", value: "None" }
+];
 
-    this.state = {
-      entity: { ...props.entity },
-      errors: props.errors,
-      selectedSponsoredProject: null,
-      selectedSponsorShipType: null,
-      sponsorShipTypes: []
-    };
-
-    this.handleChange = this.handleChange.bind(this);
-    this.handleUploadLogo = this.handleUploadLogo.bind(this);
-    this.handleUploadBigLogo = this.handleUploadBigLogo.bind(this);
-    this.handleRemoveFile = this.handleRemoveFile.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
-    this.handleSelectedSponsoredProject =
-      this.handleSelectedSponsoredProject.bind(this);
-    this.handleSelectedSponsorshipType =
-      this.handleSelectedSponsorshipType.bind(this);
-    this.onAddSponsorshipType = this.onAddSponsorshipType.bind(this);
-  }
+const getLogoValue = (value) => {
+  if (!value) return [];
+  if (typeof value === "string") return [{ filename: value, file_url: value }];
+  return [{ filename: value.filename, file_url: value.filepath }];
+};
 
-  componentDidUpdate(prevProps) {
-    const state = {};
-    scrollToError(this.props.errors);
-
-    if (!shallowEqual(prevProps.entity, this.props.entity)) {
-      state.entity = { ...this.props.entity };
-      state.errors = {};
-    }
+const CompanyForm = ({
+  initialEntity,
+  sponsoredProjects = [],
+  onAttach,
+  onRemove,
+  onAddSponsorship,
+  onDeleteSponsorship,
+  isSaving,
+  setIsSaving
+}) => {
+  const formik = useFormikContext();
+  const [selectedSponsoredProject, setSelectedSponsoredProject] =
+    useState(null);
+  const [selectedSponsorShipType, setSelectedSponsorShipType] = useState(null);
+  const [sponsorShipTypes, setSponsorShipTypes] = useState([]);
 
-    if (!shallowEqual(prevProps.errors, this.props.errors)) {
-      state.errors = { ...this.props.errors };
-    }
-
-    if (!isEmpty(state)) {
-      this.setState({ ...this.state, ...state });
-    }
-  }
+  useScrollToError(formik, true);
 
-  handleChange(ev) {
-    const entity = { ...this.state.entity };
-    const errors = { ...this.state.errors };
-    let { value, id } = ev.target;
-
-    if (ev.target.type === "checkbox") {
-      value = ev.target.checked;
+  const handleLogoUploadComplete = (field) => (response) => {
+    const path =
+      response.path && response.name
+        ? `${response.path}${response.name}`
+        : response.file_url ?? response.path ?? "";
+    const uploadLogo = {
+      ...response,
+      filepath: path,
+      filename: response.name
+    };
+    delete uploadLogo.path;
+    delete uploadLogo.name;
+    const prevValue = formik.values[field];
+    formik.setFieldValue(field, uploadLogo);
+    if (initialEntity?.id) {
+      setIsSaving(true);
+      onAttach(initialEntity, uploadLogo, field)
+        .catch(() => formik.setFieldValue(field, prevValue))
+        .finally(() => setIsSaving(false));
+    } else {
+      setIsSaving(false);
     }
+  };
 
-    if (ev.target.type === "memberinput") {
-      entity.email = "";
+  const handleLogoRemove = (field) => () => {
+    formik.setFieldValue(field, "");
+    if (initialEntity?.id) {
+      setIsSaving(true);
+      const prevValue = formik.values[field];
+      onRemove(initialEntity, field)
+        .catch(() => formik.setFieldValue(field, prevValue))
+        .finally(() => setIsSaving(false));
     }
+  };
 
-    errors[id] = "";
-    entity[id] = value;
-    this.setState({ entity, errors });
-  }
-
-  handleUploadLogo(file) {
-    const formData = new FormData();
-    formData.append("file", file);
-    this.props.onAttach(this.state.entity, formData, "logo");
-  }
-
-  handleUploadBigLogo(file) {
-    const formData = new FormData();
-    formData.append("file", file);
-    this.props.onAttach(this.state.entity, formData, "big");
-  }
-
-  handleRemoveFile(picAttr) {
-    const entity = { ...this.state.entity };
-    entity[picAttr] = "";
-    this.setState({ entity });
-  }
-
-  handleSubmit(publish, ev) {
-    ev.preventDefault();
-    this.props.onSubmit(this.state.entity);
-  }
-
-  handleSelectedSponsoredProject(ev) {
-    const { sponsoredProjects } = this.props;
+  const handleSelectedSponsoredProject = (ev) => {
     const { value } = ev.target;
+    const project = sponsoredProjects.find((p) => p.id == value);
+    setSelectedSponsoredProject(value);
+    setSponsorShipTypes(
+      project
+        ? project.sponsorship_types.map((s) => ({ label: s.name, value: s.id }))
+        : []
+    );
+    setSelectedSponsorShipType(null);
+  };
 
-    const project = sponsoredProjects.find((e) => e.id == value);
+  const handleAddSponsorshipType = () => {
+    if (
+      !onAddSponsorship ||
+      !selectedSponsoredProject ||
+      !selectedSponsorShipType ||
+      isSaving
+    )
+      return;
+    setIsSaving(true);
+    onAddSponsorship(selectedSponsoredProject, selectedSponsorShipType, {
+      id: 0,
+      company: { id: formik.values.id }
+    }).finally(() => setIsSaving(false));
+  };
 
-    this.setState({
-      ...this.state,
-      selectedSponsoredProject: value,
-      sponsorShipTypes: project
-        ? project.sponsorship_types.map((s) => ({ label: s.name, value: s.id }))
-        : [],
-      selectedSponsorShipType: null
+  const handleDeleteSponsorship = async (sponsorshipId) => {
+    const sponsorship = initialEntity?.project_sponsorships?.find(
+      (ps) => ps.id === sponsorshipId
+    );
+    if (!sponsorship) return;
+    const supportingCompany = sponsorship.supporting_companies?.find(
+      (sc) => sc.company_id === formik.values.id
+    );
+    if (!supportingCompany) return;
+
+    const confirmed = await showConfirmDialog({
+      title: T.translate("general.are_you_sure"),
+      text: T.translate("edit_company.delete_supporting_company_warning")
     });
-  }
 
-  handleSelectedSponsorshipType(ev) {
-    const { value } = ev.target;
-    this.setState({ ...this.state, selectedSponsorShipType: value });
-  }
+    if (confirmed) {
+      if (isSaving) return;
+      setIsSaving(true);
+      onDeleteSponsorship(
+        sponsorship.sponsored_project.id,
+        sponsorshipId,
+        supportingCompany.id
+      ).finally(() => setIsSaving(false));
+    }
+  };
 
-  onAddSponsorshipType(ev) {
-    ev.preventDefault();
-    const { selectedSponsoredProject, selectedSponsorShipType, entity } =
-      this.state;
-    if (!selectedSponsoredProject) return;
-    if (!selectedSponsorShipType) return;
-    this.props.addSponsoreProjectSponsorship(
-      entity.id,
-      selectedSponsoredProject,
-      selectedSponsorShipType
-    );
-  }
+  const sponsored_project_columns = [
+    {
+      columnKey: "project_name",
+      header: T.translate("edit_company.project_name")
+    },
+    { columnKey: "name", header: T.translate("edit_company.sponsorship_type") }
+  ];
 
-  render() {
-    const { entity } = this.state;
-    const { sponsoredProjects } = this.props;
+  const sponsored_projects_ddl = sponsoredProjects.map((sp) => ({
+    label: sp.name,
+    value: sp.id
+  }));
 
-    const member_levels_ddl = [
-      { label: "Platinum", value: "Platinum" },
-      { label: "Gold", value: "Gold" },
-      { label: "StartUp", value: "StartUp" },
-      { label: "Corporate", value: "Corporate" },
-      { label: "Mention", value: "Mention" },
-      { label: "None", value: "None" }
-    ];
+  const showOpenStackSection =
+    formik.values.id > 0 && window.APP_CLIENT_NAME === "openstack";
 
-    const sponsored_projects_ddl =
-      sponsoredProjects && Array.isArray(sponsoredProjects)
-        ? sponsoredProjects.map((sp) => ({
-            label: sp.name,
-            value: sp.id
-          }))
-        : [];
+  return (
+    <Grid2 container spacing={2} size={12} sx={{ p: 3 }}>
+      <Grid2 size={4}>
+        <InputLabel htmlFor="name">
+          {T.translate("edit_company.name")} *
+        </InputLabel>
+        <MuiFormikTextField name="name" margin="none" fullWidth />
+      </Grid2>
+      <Grid2 size={4}>
+        <InputLabel htmlFor="url">{T.translate("edit_company.url")}</InputLabel>
+        <MuiFormikTextField name="url" margin="none" fullWidth />
+      </Grid2>
+      <Grid2 size={4}>
+        <InputLabel htmlFor="contact_email">
+          {T.translate("edit_company.contact_email")}
+        </InputLabel>
+        <MuiFormikTextField name="contact_email" margin="none" fullWidth />
+      </Grid2>
 
-    const columns = [
-      {
-        columnKey: "project_name",
-        value: T.translate("edit_company.project_name")
-      },
-      { columnKey: "name", value: T.translate("edit_company.sponsorship_type") }
-    ];
+      <Grid2 size={4}>
+        <InputLabel htmlFor="member_level">
+          {T.translate("edit_company.member_level")}
+        </InputLabel>
+        <MuiFormikSelect name="member_level" isClearable>
+          {MEMBER_LEVELS.map((lvl) => (
+            <MenuItem key={lvl.value} value={lvl.value}>
+              {lvl.label}
+            </MenuItem>
+          ))}
+        </MuiFormikSelect>
+      </Grid2>
+      <Grid2 size={4}>
+        <InputLabel htmlFor="color">
+          {T.translate("edit_company.color")}
+        </InputLabel>
+        <MuiFormikColorField name="color" />
+      </Grid2>
+      <Grid2 size={4}>
+        <InputLabel htmlFor="admin_email">
+          {T.translate("edit_company.admin_email")}
+        </InputLabel>
+        <MuiFormikTextField name="admin_email" margin="none" fullWidth />
+      </Grid2>
 
-    const table_options = {
-      actions: {
-        delete: { onClick: this.props.onDeleteSponsorship }
-      }
-    };
+      <Grid2 size={4}>
+        <InputLabel htmlFor="city">
+          {T.translate("edit_company.city")}
+        </InputLabel>
+        <MuiFormikTextField name="city" margin="none" fullWidth />
+      </Grid2>
+      <Grid2 size={4}>
+        <InputLabel htmlFor="state">
+          {T.translate("edit_company.state")}
+        </InputLabel>
+        <MuiFormikTextField name="state" margin="none" fullWidth />
+      </Grid2>
+      <Grid2 size={4}>
+        <InputLabel htmlFor="country">
+          {T.translate("edit_company.country")}
+        </InputLabel>
+        <MuiFormikAsyncAutocomplete
+          name="country"
+          fullWidth
+          margin="none"
+          queryFunction={(_input, callback) => getCountryList(callback)}
+          formatOption={(country) => ({
+            value: country.iso_code,
+            label: country.name
+          })}
+          defaultOptions
+        />
+      </Grid2>
+      <Grid2 size={4}>
+        <InputLabel htmlFor="industry">
+          {T.translate("edit_company.industry")}
+        </InputLabel>
+        <MuiFormikTextField name="industry" margin="none" fullWidth />
+      </Grid2>
+      <Grid2 size={4}>
+        <InputLabel htmlFor="products">
+          {T.translate("edit_company.products")}
+        </InputLabel>
+        <MuiFormikTextField name="products" margin="none" fullWidth />
+      </Grid2>
+      <Grid2 size={4}>
+        <InputLabel htmlFor="contributions">
+          {T.translate("edit_company.contributions")}
+        </InputLabel>
+        <MuiFormikTextField name="contributions" margin="none" fullWidth />
+      </Grid2>
 
-    return (
-      <form className="company-form">
-        <input type="hidden" id="id" value={entity.id} />
-        <div className="row form-group">
-          <div className="col-md-4">
-            <label> {T.translate("edit_company.name")} </label>
-            <Input
-              className="form-control"
-              id="name"
-              value={entity.name}
-              onChange={this.handleChange}
-            />
-          </div>
-          <div className="col-md-4">
-            <label> {T.translate("edit_company.url")} </label>
-            <Input
-              className="form-control"
-              id="url"
-              value={entity.url}
-              onChange={this.handleChange}
-            />
-          </div>
-          <div className="col-md-4">
-            <label> {T.translate("edit_company.contact_email")} </label>
-            <Input
-              className="form-control"
-              id="contact_email"
-              value={entity.contact_email}
-              onChange={this.handleChange}
-            />
-          </div>
-        </div>
-        <div className="row form-group">
-          <div className="col-md-4">
-            <label> {T.translate("edit_company.member_level")} </label>
-            <Dropdown
-              id="member_level"
-              value={entity.member_level}
-              placeholder={T.translate(
-                "edit_company.placeholders.member_level"
-              )}
-              options={member_levels_ddl}
-              onChange={this.handleChange}
-            />
-          </div>
-          <div className="col-md-4">
-            <label> {T.translate("edit_company.color")} </label>
-            <Input
-              className="form-control"
-              type="color"
-              id="color"
-              value={entity.color}
-              onChange={this.handleChange}
-            />
-          </div>
-          <div className="col-md-4">
-            <label> {T.translate("edit_company.admin_email")} </label>
-            <Input
-              className="form-control"
-              id="admin_email"
-              value={entity.admin_email}
-              onChange={this.handleChange}
-            />
-          </div>
-        </div>
-        <div className="row form-group">
-          <div className="col-md-4">
-            <label> {T.translate("edit_company.city")} </label>
-            <Input
-              className="form-control"
-              id="city"
-              value={entity.city}
-              onChange={this.handleChange}
-            />
-          </div>
-          <div className="col-md-4">
-            <label> {T.translate("edit_company.state")} </label>
-            <Input
-              className="form-control"
-              id="state"
-              value={entity.state}
-              onChange={this.handleChange}
-            />
-          </div>
-          <div className="col-md-4">
-            <label> {T.translate("edit_company.country")} </label>
-            <CountryDropdown
-              id="country"
-              value={entity.country}
-              onChange={this.handleChange}
-              placeholder={T.translate(
-                "edit_company.placeholders.select_country"
-              )}
-            />
-          </div>
-        </div>
-        <div className="row form-group">
-          <div className="col-md-4">
-            <label> {T.translate("edit_company.industry")} </label>
-            <Input
-              className="form-control"
-              id="industry"
-              value={entity.industry}
-              onChange={this.handleChange}
-            />
-          </div>
-          <div className="col-md-4">
-            <label> {T.translate("edit_company.products")} </label>
-            <Input
-              className="form-control"
-              id="products"
-              value={entity.products}
-              onChange={this.handleChange}
-            />
-          </div>
-          <div className="col-md-4">
-            <label> {T.translate("edit_company.contributions")} </label>
-            <Input
-              className="form-control"
-              id="contributions"
-              value={entity.contributions}
-              onChange={this.handleChange}
-            />
-          </div>
-        </div>
-        <div className="row form-group">
-          <div className="col-md-12">
-            <label> {T.translate("edit_company.description")} </label>
-            <TextEditorV3
-              id="description"
-              value={entity.description}
-              onChange={this.handleChange}
-              license={process.env.JODIT_LICENSE_KEY}
-            />
-          </div>
-        </div>
-        <div className="row form-group">
-          <div className="col-md-12">
-            <label> {T.translate("edit_company.overview")} </label>
-            <TextEditorV3
-              id="overview"
-              value={entity.overview}
-              onChange={this.handleChange}
-              license={process.env.JODIT_LICENSE_KEY}
-            />
-          </div>
-        </div>
-        <div className="row form-group">
-          <div className="col-md-12">
-            <label> {T.translate("edit_company.commitment")} </label>
-            <TextEditorV3
-              id="commitment"
-              value={entity.commitment}
-              onChange={this.handleChange}
-              license={process.env.JODIT_LICENSE_KEY}
-            />
-          </div>
-        </div>
-        {entity.id > 0 && window.APP_CLIENT_NAME == "openstack" && (
-          <div className="row form-group">
-            <div className="col-md-4">
-              <Dropdown
+      <Grid2 size={12}>
+        <InputLabel htmlFor="description">
+          {T.translate("edit_company.description")}
+        </InputLabel>
+        <FormikTextEditor name="description" />
+      </Grid2>
+      <Grid2 size={12}>
+        <InputLabel htmlFor="overview">
+          {T.translate("edit_company.overview")}
+        </InputLabel>
+        <FormikTextEditor name="overview" />
+      </Grid2>
+      <Grid2 size={12}>
+        <InputLabel htmlFor="commitment">
+          {T.translate("edit_company.commitment")}
+        </InputLabel>
+        <FormikTextEditor name="commitment" />
+      </Grid2>
+
+      {showOpenStackSection && (
+        <Grid2 container size={12} mt={2} mb={2} alignItems="end">
+          <Grid2 size={4}>
+            <InputLabel htmlFor="sponsored_project">
+              {T.translate("edit_company.project_name")}
+            </InputLabel>
+            <FormControl fullWidth>
+              <Select
                 id="sponsored_project"
-                options={sponsored_projects_ddl}
-                clearable
-                value={this.state.selectedSponsoredProject}
-                onChange={this.handleSelectedSponsoredProject}
-                placeholder={T.translate(
-                  "edit_company.placeholders.sponsored_project"
-                )}
-              />
-            </div>
-            <div className="col-md-4">
-              <Dropdown
+                value={selectedSponsoredProject ?? ""}
+                onChange={handleSelectedSponsoredProject}
+                displayEmpty
+                renderValue={(selected) =>
+                  selected ? (
+                    sponsored_projects_ddl.find((sp) => sp.value === selected)
+                      ?.label
+                  ) : (
+                    <span style={{ color: "#aaa" }}>
+                      {T.translate(
+                        "edit_company.placeholders.sponsored_project"
+                      )}
+                    </span>
+                  )
+                }
+              >
+                {sponsored_projects_ddl.map((sp) => (
+                  <MenuItem key={sp.value} value={sp.value}>
+                    {sp.label}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          </Grid2>
+
+          <Grid2 size={4}>
+            <InputLabel htmlFor="sponsorship_type">
+              {T.translate("edit_company.sponsorship_type")}
+            </InputLabel>
+            <FormControl fullWidth>
+              <Select
                 id="sponsorship_type"
-                clearable
-                value={this.state.selectedSponsorShipType}
-                options={this.state.sponsorShipTypes}
-                onChange={this.handleSelectedSponsorshipType}
-                placeholder={T.translate(
-                  "edit_company.placeholders.sponsorship_type"
-                )}
-              />
-            </div>
-            <div className="col-md-4">
-              <button
-                className="btn btn-primary right-space"
-                onClick={this.onAddSponsorshipType}
+                value={selectedSponsorShipType ?? ""}
+                onChange={(ev) => setSelectedSponsorShipType(ev.target.value)}
+                displayEmpty
               >
-                {T.translate("edit_company.add_project_sponsorship")}
-              </button>
-            </div>
-          </div>
-        )}
-        {entity.project_sponsorships.length > 0 &&
-          window.APP_CLIENT_NAME == "openstack" && (
-            <div className="row form-group">
-              <div className="col-md-12">
-                <Table
-                  options={table_options}
-                  data={entity.project_sponsorships.map((sp) => ({
-                    ...sp,
-                    project_name: sp.sponsored_project.name
-                  }))}
-                  columns={columns}
-                />
-              </div>
-            </div>
-          )}
-        <div className="row form-group">
-          <div className="col-md-6">
-            <label> {T.translate("edit_company.logo")} </label>
-            <UploadInput
-              value={entity.logo}
-              handleUpload={this.handleUploadLogo}
-              handleRemove={() => this.handleRemoveFile("logo")}
-              className="dropzone col-md-6"
-              multiple={false}
-              accept="image/*"
-            />
-          </div>
-          <div className="col-md-6">
-            <label> {T.translate("edit_company.big_logo")} </label>
-            <UploadInput
-              value={entity.big_logo}
-              handleUpload={this.handleUploadBigLogo}
-              handleRemove={() => this.handleRemoveFile("big_logo")}
-              className="dropzone col-md-6"
-              multiple={false}
-              accept="image/*"
+                {sponsorShipTypes.length === 0 ? (
+                  <MenuItem value="" disabled>
+                    {T.translate("edit_company.placeholders.no_options")}
+                  </MenuItem>
+                ) : (
+                  sponsorShipTypes.map((st) => (
+                    <MenuItem key={st.value} value={st.value}>
+                      {st.label}
+                    </MenuItem>
+                  ))
+                )}
+              </Select>
+            </FormControl>
+          </Grid2>
+          <Grid2 size={4}>
+            <InputLabel sx={{ visibility: "hidden" }}>&nbsp;</InputLabel>
+            <Button
+              variant="contained"
+              onClick={handleAddSponsorshipType}
+              fullWidth
+              sx={{ height: "56px" }}
+            >
+              {T.translate("edit_company.add_project_sponsorship")}
+            </Button>
+          </Grid2>
+        </Grid2>
+      )}
+      {initialEntity?.project_sponsorships?.length > 0 &&
+        window.APP_CLIENT_NAME === "openstack" && (
+          <Grid2 size={12} mb={2}>
+            <Table
+              data={initialEntity.project_sponsorships.map((sp) => ({
+                ...sp,
+                project_name: sp.sponsored_project.name
+              }))}
+              columns={sponsored_project_columns}
+              onDelete={handleDeleteSponsorship}
             />
-          </div>
-        </div>
+          </Grid2>
+        )}
 
-        <div className="row">
-          <div className="col-md-12 submit-buttons">
-            <input
-              type="button"
-              onClick={this.handleSubmit.bind(this, false)}
-              className="btn btn-primary pull-right"
-              value={T.translate("general.save")}
-            />
-          </div>
-        </div>
-      </form>
-    );
-  }
-}
+      <Grid2 container size={12} mt={2} mb={2}>
+        <Grid2 size={6}>
+          <InputLabel>{T.translate("edit_company.logo")}</InputLabel>
+          <UploadInputV3
+            id="logo"
+            name="logo"
+            value={getLogoValue(formik.values.logo)}
+            onUploadComplete={handleLogoUploadComplete("logo")}
+            onUploadStart={() => setIsSaving(true)}
+            onError={() => setIsSaving(false)}
+            onRemove={handleLogoRemove("logo")}
+            postUrl={`${window.FILE_UPLOAD_API_BASE_URL}/api/v1/files/upload`}
+            djsConfig={{ withCredentials: true }}
+            maxFiles={1}
+            canAdd={!formik.values.logo}
+            mediaType={{
+              type: { allowed_extensions: ["jpg", "jpeg", "png", "gif", "svg"] }
+            }}
+          />
+        </Grid2>
+        <Grid2 size={6}>
+          <InputLabel>{T.translate("edit_company.big_logo")}</InputLabel>
+          <UploadInputV3
+            id="big_logo"
+            name="big_logo"
+            value={getLogoValue(formik.values.big_logo)}
+            onUploadComplete={handleLogoUploadComplete("big_logo")}
+            onUploadStart={() => setIsSaving(true)}
+            onError={() => setIsSaving(false)}
+            onRemove={handleLogoRemove("big_logo")}
+            postUrl={`${window.FILE_UPLOAD_API_BASE_URL}/api/v1/files/upload`}
+            djsConfig={{ withCredentials: true }}
+            maxFiles={1}
+            canAdd={!formik.values.big_logo}
+            mediaType={{
+              type: { allowed_extensions: ["jpg", "jpeg", "png", "gif", "svg"] }
+            }}
+          />
+        </Grid2>
+      </Grid2>
+    </Grid2>
+  );
+};
+
+CompanyForm.propTypes = {
+  initialEntity: PropTypes.object,
+  sponsoredProjects: PropTypes.array,
+  onAttach: PropTypes.func.isRequired,
+  onRemove: PropTypes.func.isRequired,
+  onAddSponsorship: PropTypes.func,
+  onDeleteSponsorship: PropTypes.func,
+  isSaving: PropTypes.bool,
+  setIsSaving: PropTypes.func.isRequired
+};
 
 export default CompanyForm;
diff --git a/src/components/mui/formik-inputs/mui-formik-async-select.js b/src/components/mui/formik-inputs/mui-formik-async-select.js
index b574b198f..e7302479c 100644
--- a/src/components/mui/formik-inputs/mui-formik-async-select.js
+++ b/src/components/mui/formik-inputs/mui-formik-async-select.js
@@ -9,7 +9,7 @@ import { useField } from "formik";
 import { DEBOUNCE_WAIT_250 } from "../../../utils/constants";
 
 // Stays local: uicore's async-select.js lacks defaultOptions, filterOptions,
-// and the plain-value-sync effect this component has. company-dialog.js
+// and the plain-value-sync effect this component has. company-form.js
 // depends on defaultOptions specifically. Deferred as a follow-up rather
 // than migrated blindly in this pass.
 const MuiFormikAsyncAutocomplete = ({
diff --git a/src/i18n/en.json b/src/i18n/en.json
index c01abeafd..4c3b68989 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -93,6 +93,7 @@
     "n_a": "N/A",
     "to": "To",
     "from": "From",
+    "add_new": "Add new",
     "placeholders": {
       "search": "Search...",
       "search_speakers": "Search Speakers by Name, Email, Speaker Id or Member Id",
diff --git a/src/pages/companies/__tests__/edit-company-page.test.js b/src/pages/companies/__tests__/edit-company-page.test.js
new file mode 100644
index 000000000..1ec9a1f44
--- /dev/null
+++ b/src/pages/companies/__tests__/edit-company-page.test.js
@@ -0,0 +1,188 @@
+// ---- Mocks must come first ----
+
+jest.mock("i18n-react/dist/i18n-react", () => ({
+  __esModule: true,
+  default: { translate: (key) => key }
+}));
+
+const mockGetCompany = jest.fn(() => () => Promise.resolve());
+const mockResetCompanyForm = jest.fn(() => () => {});
+const mockSaveCompany = jest.fn(() => () => Promise.resolve());
+const mockAttachLogo = jest.fn(() => () => Promise.resolve());
+const mockRemoveLogo = jest.fn(() => () => Promise.resolve());
+
+jest.mock("../../../actions/company-actions", () => ({
+  getCompany: (...args) => mockGetCompany(...args),
+  resetCompanyForm: (...args) => mockResetCompanyForm(...args),
+  saveCompany: (...args) => mockSaveCompany(...args),
+  attachLogo: (...args) => mockAttachLogo(...args),
+  removeLogo: (...args) => mockRemoveLogo(...args)
+}));
+
+const mockGetSponsoredProjects = jest.fn(() => () => Promise.resolve());
+const mockSaveSupportingCompany = jest.fn(() => () => Promise.resolve());
+const mockDeleteSupportingCompany = jest.fn(() => () => Promise.resolve());
+
+jest.mock("../../../actions/sponsored-project-actions", () => ({
+  getSponsoredProjects: (...args) => mockGetSponsoredProjects(...args),
+  saveSupportingCompany: (...args) => mockSaveSupportingCompany(...args),
+  deleteSupportingCompany: (...args) => mockDeleteSupportingCompany(...args)
+}));
+
+// CompanyForm's own fields are covered separately in
+// src/components/forms/__tests__/company-form.test.js — mocked here so this
+// suite can focus on the page's fetch/save/navigate orchestration.
+jest.mock(
+  "../../../components/forms/company-form",
+  () =>
+    function MockCompanyForm({ initialEntity, isSaving }) {
+      return (
+        <div
+          data-testid="company-form"
+          data-has-entity={String(!!initialEntity)}
+          data-is-saving={String(!!isSaving)}
+        />
+      );
+    }
+);
+
+// ---- Now imports ----
+/* eslint-disable import/first */
+import React from "react";
+import { screen, waitFor, act } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import EditCompanyPage from "../edit-company-page";
+import { renderWithRedux } from "../../../utils/test-utils";
+/* eslint-enable import/first */
+
+const BASE_ENTITY = {
+  id: 0,
+  name: "",
+  color: "",
+  project_sponsorships: []
+};
+
+const buildMatch = (companyId) => ({
+  params: { company_id: companyId },
+  url: companyId ? `/app/companies/${companyId}` : "/app/companies/new"
+});
+
+const renderPage = ({
+  companyId,
+  entity = BASE_ENTITY,
+  history = { push: jest.fn() }
+} = {}) => {
+  const utils = renderWithRedux(
+    <EditCompanyPage match={buildMatch(companyId)} history={history} />,
+    {
+      initialState: {
+        currentCompanyState: { entity },
+        sponsoredProjectListState: { sponsoredProjects: [] }
+      }
+    }
+  );
+
+  return { ...utils, history };
+};
+
+describe("EditCompanyPage", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockGetCompany.mockReturnValue(() => Promise.resolve());
+    mockSaveCompany.mockReturnValue(() => Promise.resolve());
+  });
+
+  it("fetches the company when the route has a company id (deep link)", () => {
+    renderPage({ companyId: "5" });
+
+    expect(mockGetCompany).toHaveBeenCalledWith("5");
+    expect(mockResetCompanyForm).not.toHaveBeenCalled();
+  });
+
+  it("resets the form when navigating to the new-company route", () => {
+    renderPage({ companyId: undefined });
+
+    expect(mockResetCompanyForm).toHaveBeenCalled();
+    expect(mockGetCompany).not.toHaveBeenCalled();
+  });
+
+  it("passes the current entity and saving state down to CompanyForm", () => {
+    renderPage({
+      companyId: "1",
+      entity: { ...BASE_ENTITY, id: 1, name: "Acme Corp" }
+    });
+
+    const form = screen.getByTestId("company-form");
+    expect(form).toHaveAttribute("data-has-entity", "true");
+    expect(form).toHaveAttribute("data-is-saving", "false");
+  });
+
+  it("saves and navigates back to the company list on success", async () => {
+    const user = userEvent.setup();
+    const { history } = renderPage({
+      companyId: "1",
+      entity: { ...BASE_ENTITY, id: 1, name: "Acme Corp" }
+    });
+
+    await act(async () => {
+      await user.click(screen.getByText("general.save"));
+    });
+
+    expect(mockSaveCompany).toHaveBeenCalledWith(
+      expect.objectContaining({ id: 1, name: "Acme Corp" })
+    );
+    await waitFor(() =>
+      expect(history.push).toHaveBeenCalledWith("/app/companies")
+    );
+  });
+
+  it("stays on the page and re-enables Save when saveCompany rejects", async () => {
+    mockSaveCompany.mockReturnValue(() =>
+      Promise.reject(new Error("server error"))
+    );
+    const user = userEvent.setup();
+    const { history } = renderPage({
+      companyId: "1",
+      entity: { ...BASE_ENTITY, id: 1, name: "Acme Corp" }
+    });
+
+    const saveButton = screen.getByText("general.save").closest("button");
+
+    await act(async () => {
+      await user.click(saveButton);
+    });
+
+    await waitFor(() => expect(saveButton).not.toBeDisabled());
+    expect(history.push).not.toHaveBeenCalled();
+  });
+
+  it("disables the Save button while saving and re-enables after resolve", async () => {
+    let resolveSave;
+    mockSaveCompany.mockReturnValue(
+      () =>
+        new Promise((res) => {
+          resolveSave = res;
+        })
+    );
+    const user = userEvent.setup();
+    renderPage({
+      companyId: "1",
+      entity: { ...BASE_ENTITY, id: 1, name: "Acme Corp" }
+    });
+
+    const saveButton = screen.getByText("general.save").closest("button");
+    expect(saveButton).not.toBeDisabled();
+
+    await act(async () => {
+      await user.click(saveButton);
+    });
+
+    expect(saveButton).toBeDisabled();
+
+    await act(async () => {
+      resolveSave();
+    });
+
+    await waitFor(() => expect(saveButton).not.toBeDisabled());
+  });
+});
diff --git a/src/pages/companies/company-list-page.js b/src/pages/companies/company-list-page.js
index 0812d95b3..6e7215661 100644
--- a/src/pages/companies/company-list-page.js
+++ b/src/pages/companies/company-list-page.js
@@ -11,58 +11,28 @@
  * limitations under the License.
  * */
 
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import { connect } from "react-redux";
 import T from "i18n-react/dist/i18n-react";
 import { Box, Button } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
 import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
 import GridToolbar from "../../components/mui/grid-toolbar";
-import {
-  getCompanies,
-  getCompany,
-  deleteCompany,
-  saveCompany,
-  resetCompanyForm,
-  attachLogo,
-  removeLogo
-} from "../../actions/company-actions";
-import {
-  getSponsoredProjects,
-  saveSupportingCompany,
-  deleteSupportingCompany
-} from "../../actions/sponsored-project-actions";
-import { DEFAULT_CURRENT_PAGE, MAX_PER_PAGE } from "../../utils/constants";
-import CompanyDialog from "./components/company-dialog";
+import { getCompanies, deleteCompany } from "../../actions/company-actions";
+import { DEFAULT_CURRENT_PAGE } from "../../utils/constants";
 
 const CompanyListPage = ({
   companies,
-  currentCompany,
   term,
   order,
   orderDir,
   currentPage,
   perPage,
   totalCompanies,
+  history,
   getCompanies,
-  getCompany,
-  deleteCompany,
-  saveCompany,
-  resetCompanyForm,
-  attachLogo,
-  removeLogo,
-  getSponsoredProjects,
-  saveSupportingCompany,
-  deleteSupportingCompany,
-  sponsoredProjects
+  deleteCompany
 }) => {
-  const [companyPopup, setCompanyPopup] = useState(false);
-
-  useEffect(() => {
-    if (window.APP_CLIENT_NAME === "openstack")
-      getSponsoredProjects("", 1, MAX_PER_PAGE);
-  }, []);
-
   const columns = [
     { columnKey: "id", header: "Id", sortable: true },
     { columnKey: "name", header: T.translate("general.name"), sortable: true },
@@ -83,7 +53,7 @@ const CompanyListPage = ({
   }, []);
 
   const handleEdit = (company) => {
-    getCompany(company.id).then(() => setCompanyPopup(true));
+    history.push(`/app/companies/${company.id}`);
   };
 
   const handleDelete = (companyId) => {
@@ -109,17 +79,7 @@ const CompanyListPage = ({
   };
 
   const handleNewCompany = () => {
-    resetCompanyForm();
-    setCompanyPopup(true);
-  };
-
-  const handleSave = (entity) =>
-    saveCompany(entity).then(() =>
-      getCompanies(term, DEFAULT_CURRENT_PAGE, perPage, order, orderDir)
-    );
-
-  const handleClose = () => {
-    setCompanyPopup(false);
+    history.push("/app/companies/new");
   };
 
   return (
@@ -166,42 +126,15 @@ const CompanyListPage = ({
       {companies.length === 0 && (
         <div>{T.translate("company_list.no_results")}</div>
       )}
-
-      {companyPopup && (
-        <CompanyDialog
-          entity={currentCompany}
-          onClose={handleClose}
-          onSave={handleSave}
-          onAttach={attachLogo}
-          onRemove={removeLogo}
-          onAddSponsorship={saveSupportingCompany}
-          onDeleteSponsorship={deleteSupportingCompany}
-          sponsoredProjects={sponsoredProjects}
-        />
-      )}
     </div>
   );
 };
 
-const mapStateToProps = ({
-  currentCompanyListState,
-  sponsoredProjectListState,
-  currentCompanyState
-}) => ({
-  ...currentCompanyListState,
-  currentCompany: currentCompanyState.entity,
-  sponsoredProjects: sponsoredProjectListState.sponsoredProjects
+const mapStateToProps = ({ currentCompanyListState }) => ({
+  ...currentCompanyListState
 });
 
 export default connect(mapStateToProps, {
   getCompanies,
-  getCompany,
-  deleteCompany,
-  saveCompany,
-  resetCompanyForm,
-  getSponsoredProjects,
-  saveSupportingCompany,
-  deleteSupportingCompany,
-  attachLogo,
-  removeLogo
+  deleteCompany
 })(CompanyListPage);
diff --git a/src/pages/companies/components/__tests__/company-dialog.test.js b/src/pages/companies/components/__tests__/company-dialog.test.js
deleted file mode 100644
index bb0077fed..000000000
--- a/src/pages/companies/components/__tests__/company-dialog.test.js
+++ /dev/null
@@ -1,343 +0,0 @@
-import React from "react";
-import {
-  render,
-  screen,
-  waitFor,
-  act,
-  fireEvent
-} from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import CompanyDialog from "../company-dialog";
-
-jest.mock("i18n-react/dist/i18n-react", () => ({
-  translate: jest.fn((key) => key)
-}));
-
-jest.mock("openstack-uicore-foundation/lib/utils/query-actions", () => ({
-  getCountryList: jest.fn((callback) => {
-    callback([
-      { iso_code: "AR", name: "Argentina" },
-      { iso_code: "US", name: "United States" }
-    ]);
-    return Promise.resolve();
-  })
-}));
-
-jest.mock(
-  "openstack-uicore-foundation/lib/components/inputs/upload-input-v3",
-  () => ({
-    __esModule: true,
-    default: ({ id, onUploadComplete, onUploadStart, value }) => (
-      <div
-        data-testid={`upload-input-${id}`}
-        data-logo={value?.[0]?.file_path ?? ""}
-      >
-        <button
-          type="button"
-          data-testid={`trigger-upload-${id}`}
-          onClick={() => {
-            onUploadStart?.();
-            onUploadComplete({ path: "/uploads/", name: `${id}.png` });
-          }}
-        >
-          Upload
-        </button>
-      </div>
-    )
-  })
-);
-
-jest.mock(
-  "openstack-uicore-foundation/lib/components/mui/formik-inputs/textfield",
-  () =>
-    function MockTextField({ name }) {
-      return <input data-testid={`textfield-${name}`} name={name} />;
-    }
-);
-
-jest.mock(
-  "openstack-uicore-foundation/lib/components/mui/formik-inputs/select",
-  () =>
-    function MockSelect({ name, children }) {
-      return <div data-testid={`select-${name}`}>{children}</div>;
-    }
-);
-
-jest.mock(
-  "openstack-uicore-foundation/lib/components/mui/table",
-  () =>
-    function MockTable() {
-      return <div data-testid="mui-table" />;
-    }
-);
-
-jest.mock(
-  "../../../../components/inputs/formik-text-editor",
-  () =>
-    function MockTextEditor({ name }) {
-      return <textarea data-testid={`editor-${name}`} name={name} />;
-    }
-);
-
-jest.mock("../../../../components/mui/showConfirmDialog", () =>
-  jest.fn(() => Promise.resolve(true))
-);
-
-jest.mock("../../../../hooks/useScrollToError", () => jest.fn());
-
-jest.mock("mui-color-input", () => ({
-  MuiColorInput: ({ value, onChange, onBlur, name }) => (
-    <input
-      data-testid="color-input"
-      name={name}
-      value={value || ""}
-      onChange={(e) => onChange(e.target.value)}
-      onBlur={(e) => onBlur({ target: { name, value: e.target.value } })}
-    />
-  )
-}));
-
-const BASE_ENTITY = {
-  id: 0,
-  name: "",
-  url: "",
-  contact_email: "",
-  member_level: "",
-  color: "",
-  admin_email: "",
-  city: "",
-  state: "",
-  country: "",
-  industry: "",
-  products: "",
-  contributions: "",
-  description: "",
-  overview: "",
-  commitment: "",
-  logo: "",
-  big_logo: "",
-  project_sponsorships: []
-};
-
-describe("CompanyDialog", () => {
-  let onSave;
-  let onClose;
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-    onSave = jest.fn(() => Promise.resolve());
-    onClose = jest.fn();
-    window.APP_CLIENT_NAME = "";
-  });
-
-  test.each([
-    [
-      "resolves a stored ISO code to its label when editing",
-      { ...BASE_ENTITY, id: 1, name: "Acme Corp", country: "AR" },
-      "Argentina"
-    ],
-    ["leaves the country field empty for a new company", BASE_ENTITY, ""]
-  ])("%s", async (_label, entity, expectedValue) => {
-    render(<CompanyDialog entity={entity} onSave={onSave} onClose={onClose} />);
-
-    await waitFor(() => {
-      expect(screen.getByRole("combobox")).toHaveValue(expectedValue);
-    });
-  });
-
-  it("calls onSave with the ISO country code and then onClose on valid submit", async () => {
-    const user = userEvent.setup();
-
-    render(
-      <CompanyDialog
-        entity={{ ...BASE_ENTITY, id: 1, name: "Acme Corp", country: "AR" }}
-        onSave={onSave}
-        onClose={onClose}
-      />
-    );
-
-    await waitFor(() => {
-      expect(screen.getByRole("combobox")).toHaveValue("Argentina");
-    });
-
-    await act(async () => {
-      await user.click(screen.getByText("general.save"));
-    });
-
-    expect(onSave).toHaveBeenCalledWith(
-      expect.objectContaining({ country: "AR" })
-    );
-    expect(onClose).toHaveBeenCalledTimes(1);
-  });
-
-  it("submits a newly picked color after it is blurred", async () => {
-    const user = userEvent.setup();
-
-    render(
-      <CompanyDialog
-        entity={{ ...BASE_ENTITY, id: 1, name: "Acme Corp", color: "#ff0000" }}
-        onSave={onSave}
-        onClose={onClose}
-      />
-    );
-
-    const colorInput = screen.getByTestId("color-input");
-    fireEvent.change(colorInput, { target: { value: "#00ff00" } });
-    fireEvent.blur(colorInput);
-
-    await act(async () => {
-      await user.click(screen.getByText("general.save"));
-    });
-
-    expect(onSave).toHaveBeenCalledWith(
-      expect.objectContaining({ color: "#00ff00" })
-    );
-  });
-
-  it("keeps dialog open and re-enables save when onSave rejects", async () => {
-    onSave = jest.fn(() => Promise.reject(new Error("server error")));
-    const user = userEvent.setup();
-
-    render(
-      <CompanyDialog
-        entity={{ ...BASE_ENTITY, id: 1, name: "Acme Corp" }}
-        onSave={onSave}
-        onClose={onClose}
-      />
-    );
-
-    const saveButton = screen.getByText("general.save").closest("button");
-
-    await act(async () => {
-      await user.click(saveButton);
-    });
-
-    await waitFor(() => expect(saveButton).not.toBeDisabled());
-    expect(onClose).not.toHaveBeenCalled();
-  });
-
-  it("disables the save button while saving and re-enables after resolve", async () => {
-    let resolve;
-    onSave = jest.fn(
-      () =>
-        new Promise((res) => {
-          resolve = res;
-        })
-    );
-
-    const user = userEvent.setup();
-
-    render(
-      <CompanyDialog
-        entity={{ ...BASE_ENTITY, id: 1, name: "Acme Corp" }}
-        onSave={onSave}
-        onClose={onClose}
-      />
-    );
-
-    const saveButton = screen.getByText("general.save").closest("button");
-    expect(saveButton).not.toBeDisabled();
-
-    await act(async () => {
-      await user.click(saveButton);
-    });
-
-    expect(saveButton).toBeDisabled();
-
-    await act(async () => {
-      resolve();
-    });
-
-    await waitFor(() => expect(saveButton).not.toBeDisabled());
-  });
-
-  it("calls onClose when the close icon button is clicked and not saving", async () => {
-    const user = userEvent.setup();
-
-    render(
-      <CompanyDialog entity={BASE_ENTITY} onSave={onSave} onClose={onClose} />
-    );
-
-    await act(async () => {
-      await user.click(screen.getByLabelText("close"));
-    });
-
-    expect(onClose).toHaveBeenCalledTimes(1);
-  });
-
-  describe("logo upload", () => {
-    it("re-enables save after CDN upload completes for a new company", async () => {
-      const user = userEvent.setup();
-      const onAttach = jest.fn(() => Promise.resolve());
-      const onRemove = jest.fn(() => Promise.resolve());
-
-      render(
-        <CompanyDialog
-          entity={BASE_ENTITY}
-          onSave={onSave}
-          onClose={onClose}
-          onAttach={onAttach}
-          onRemove={onRemove}
-        />
-      );
-
-      const saveButton = screen.getByText("general.save").closest("button");
-
-      await act(async () => {
-        await user.click(screen.getByTestId("trigger-upload-big_logo"));
-      });
-
-      await waitFor(() => expect(saveButton).not.toBeDisabled());
-      expect(onAttach).not.toHaveBeenCalled();
-    });
-
-    it("reverts logo preview and re-enables save when onAttach fails", async () => {
-      const user = userEvent.setup();
-      let rejectAttach;
-      const onAttach = jest.fn(
-        () =>
-          new Promise((_, rej) => {
-            rejectAttach = rej;
-          })
-      );
-      const onRemove = jest.fn(() => Promise.resolve());
-
-      render(
-        <CompanyDialog
-          entity={{
-            ...BASE_ENTITY,
-            id: 1,
-            name: "Acme Corp",
-            logo: "old-logo.png"
-          }}
-          onSave={onSave}
-          onClose={onClose}
-          onAttach={onAttach}
-          onRemove={onRemove}
-        />
-      );
-
-      const saveButton = screen.getByText("general.save").closest("button");
-
-      // trigger the upload completion (CDN upload already happened)
-      await act(async () => {
-        await user.click(screen.getByTestId("trigger-upload-logo"));
-      });
-
-      // save should be blocked while onAttach is in flight
-      expect(saveButton).toBeDisabled();
-
-      // API call fails
-      await act(async () => {
-        rejectAttach(new Error("network error"));
-      });
-
-      // save re-enables and logo preview reverts to the previous value
-      await waitFor(() => expect(saveButton).not.toBeDisabled());
-      expect(screen.getByTestId("upload-input-logo")).toHaveAttribute(
-        "data-logo",
-        "old-logo.png"
-      );
-    });
-  });
-});
diff --git a/src/pages/companies/components/company-dialog.js b/src/pages/companies/components/company-dialog.js
deleted file mode 100644
index 7bbe62a97..000000000
--- a/src/pages/companies/components/company-dialog.js
+++ /dev/null
@@ -1,551 +0,0 @@
-/**
- * Copyright 2024 OpenStack Foundation
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * */
-
-import React, { useState } from "react";
-import PropTypes from "prop-types";
-import T from "i18n-react/dist/i18n-react";
-import { FormikProvider, useFormik } from "formik";
-import * as yup from "yup";
-import {
-  Box,
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  Divider,
-  FormControl,
-  Grid2,
-  IconButton,
-  InputLabel,
-  MenuItem,
-  Select,
-  Typography
-} from "@mui/material";
-import CloseIcon from "@mui/icons-material/Close";
-import UploadInputV3 from "openstack-uicore-foundation/lib/components/inputs/upload-input-v3";
-import { getCountryList } from "openstack-uicore-foundation/lib/utils/query-actions";
-import Table from "openstack-uicore-foundation/lib/components/mui/table";
-import MuiFormikTextField from "openstack-uicore-foundation/lib/components/mui/formik-inputs/textfield";
-import MuiFormikSelect from "openstack-uicore-foundation/lib/components/mui/formik-inputs/select";
-// import MuiFormikAsyncAutocomplete from "openstack-uicore-foundation/lib/components/mui/formik-inputs/async-select";
-import useScrollToError from "../../../hooks/useScrollToError";
-import FormikTextEditor from "../../../components/inputs/formik-text-editor";
-import MuiFormikAsyncAutocomplete from "../../../components/mui/formik-inputs/mui-formik-async-select";
-import MuiFormikColorField from "../../../components/mui/formik-inputs/mui-formik-color-field";
-import showConfirmDialog from "../../../components/mui/showConfirmDialog";
-import { hexColorValidation } from "../../../utils/yup";
-
-const MEMBER_LEVELS = [
-  { label: "Platinum", value: "Platinum" },
-  { label: "Gold", value: "Gold" },
-  { label: "StartUp", value: "StartUp" },
-  { label: "Corporate", value: "Corporate" },
-  { label: "Mention", value: "Mention" },
-  { label: "None", value: "None" }
-];
-
-const getLogoValue = (value) => {
-  if (!value) return [];
-  if (typeof value === "string") return [{ filename: value, file_path: value }];
-  return [{ filename: value.filename, file_path: value.filepath }];
-};
-
-const CompanyDialog = ({
-  entity: initialEntity,
-  sponsoredProjects = [],
-  onSave,
-  onClose,
-  onAttach,
-  onRemove,
-  onDeleteSponsorship,
-  onAddSponsorship
-}) => {
-  const [selectedSponsoredProject, setSelectedSponsoredProject] =
-    useState(null);
-  const [selectedSponsorShipType, setSelectedSponsorShipType] = useState(null);
-  const [sponsorShipTypes, setSponsorShipTypes] = useState([]);
-  const [isSaving, setIsSaving] = useState(false);
-
-  const formik = useFormik({
-    initialValues: {
-      id: initialEntity?.id ?? 0,
-      name: initialEntity?.name ?? "",
-      url: initialEntity?.url ?? "",
-      contact_email: initialEntity?.contact_email ?? "",
-      member_level: initialEntity?.member_level ?? "",
-      color: initialEntity?.color ?? "",
-      admin_email: initialEntity?.admin_email ?? "",
-      city: initialEntity?.city ?? "",
-      state: initialEntity?.state ?? "",
-      country: initialEntity?.country ?? "",
-      industry: initialEntity?.industry ?? "",
-      products: initialEntity?.products ?? "",
-      contributions: initialEntity?.contributions ?? "",
-      description: initialEntity?.description ?? "",
-      overview: initialEntity?.overview ?? "",
-      commitment: initialEntity?.commitment ?? "",
-      logo: initialEntity?.logo ?? "",
-      big_logo: initialEntity?.big_logo ?? ""
-    },
-    enableReinitialize: true,
-    validationSchema: yup.object().shape({
-      name: yup.string().required(T.translate("validation.required")),
-      color: hexColorValidation()
-    }),
-    onSubmit: (values) => {
-      if (isSaving) return;
-      const valuesToSave = {
-        ...values,
-        country:
-          typeof values.country === "object"
-            ? values.country?.value
-            : values.country
-      };
-      setIsSaving(true);
-      onSave(valuesToSave)
-        .then(() => onClose())
-        .catch(() => {})
-        .finally(() => setIsSaving(false));
-    }
-  });
-
-  useScrollToError(formik, true);
-
-  const title = initialEntity?.id
-    ? `${T.translate("general.edit")} ${T.translate("edit_company.company")}`
-    : `${T.translate("general.add")} ${T.translate("edit_company.company")}`;
-
-  const handleLogoUploadComplete = (field) => (response) => {
-    const path =
-      response.path && response.name
-        ? `${response.path}${response.name}`
-        : response.file_url ?? response.path ?? "";
-    const uploadLogo = {
-      ...response,
-      filepath: path,
-      filename: response.name
-    };
-    delete uploadLogo.path;
-    delete uploadLogo.name;
-    const prevValue = formik.values[field];
-    formik.setFieldValue(field, uploadLogo);
-    if (initialEntity?.id) {
-      setIsSaving(true);
-      onAttach(initialEntity, uploadLogo, field)
-        .catch(() => formik.setFieldValue(field, prevValue))
-        .finally(() => setIsSaving(false));
-    } else {
-      setIsSaving(false);
-    }
-  };
-
-  const handleLogoRemove = (field) => () => {
-    formik.setFieldValue(field, "");
-    if (initialEntity?.id) {
-      setIsSaving(true);
-      const prevValue = formik.values[field];
-      onRemove(initialEntity, field)
-        .catch(() => formik.setFieldValue(field, prevValue))
-        .finally(() => setIsSaving(false));
-    }
-  };
-
-  const handleSelectedSponsoredProject = (ev) => {
-    const { value } = ev.target;
-    const project = sponsoredProjects.find((p) => p.id == value);
-    setSelectedSponsoredProject(value);
-    setSponsorShipTypes(
-      project
-        ? project.sponsorship_types.map((s) => ({ label: s.name, value: s.id }))
-        : []
-    );
-    setSelectedSponsorShipType(null);
-  };
-
-  const handleAddSponsorshipType = () => {
-    if (!selectedSponsoredProject || !selectedSponsorShipType || isSaving)
-      return;
-    setIsSaving(true);
-    onAddSponsorship(selectedSponsoredProject, selectedSponsorShipType, {
-      id: 0,
-      company: { id: formik.values.id }
-    }).finally(() => setIsSaving(false));
-  };
-
-  const handleDeleteSponsorship = async (sponsorshipId) => {
-    const sponsorship = initialEntity?.project_sponsorships?.find(
-      (ps) => ps.id === sponsorshipId
-    );
-    if (!sponsorship) return;
-    const supportingCompany = sponsorship.supporting_companies?.find(
-      (sc) => sc.company_id === formik.values.id
-    );
-    if (!supportingCompany) return;
-
-    const confirmed = await showConfirmDialog({
-      title: T.translate("general.are_you_sure"),
-      text: T.translate("edit_company.delete_supporting_company_warning")
-    });
-
-    if (confirmed) {
-      if (isSaving) return;
-      setIsSaving(true);
-      onDeleteSponsorship(
-        sponsorship.sponsored_project.id,
-        sponsorshipId,
-        supportingCompany.id
-      ).finally(() => setIsSaving(false));
-    }
-  };
-
-  const handleOnClose = () => {
-    if (isSaving) return;
-    onClose();
-  };
-
-  const sponsored_project_columns = [
-    {
-      columnKey: "project_name",
-      header: T.translate("edit_company.project_name")
-    },
-    { columnKey: "name", header: T.translate("edit_company.sponsorship_type") }
-  ];
-
-  const sponsored_projects_ddl = sponsoredProjects.map((sp) => ({
-    label: sp.name,
-    value: sp.id
-  }));
-
-  const showOpenStackSection =
-    formik.values.id > 0 && window.APP_CLIENT_NAME === "openstack";
-
-  return (
-    <Dialog
-      open
-      onClose={handleOnClose}
-      maxWidth="md"
-      fullWidth
-      disableEscapeKeyDown={isSaving}
-    >
-      <DialogTitle sx={{ display: "flex", justifyContent: "space-between" }}>
-        <Typography fontSize="1.5rem">{title}</Typography>
-        <IconButton
-          size="small"
-          onClick={handleOnClose}
-          sx={{ mr: 1 }}
-          aria-label="close"
-          disabled={isSaving}
-        >
-          <CloseIcon fontSize="small" />
-        </IconButton>
-      </DialogTitle>
-      <Divider />
-      <FormikProvider value={formik}>
-        <Box
-          component="form"
-          onSubmit={formik.handleSubmit}
-          noValidate
-          autoComplete="off"
-        >
-          <DialogContent sx={{ p: 0 }}>
-            <Grid2 container spacing={2} size={12} sx={{ p: 3 }}>
-              <Grid2 size={4}>
-                <InputLabel htmlFor="name">
-                  {T.translate("edit_company.name")} *
-                </InputLabel>
-                <MuiFormikTextField name="name" margin="none" fullWidth />
-              </Grid2>
-              <Grid2 size={4}>
-                <InputLabel htmlFor="url">
-                  {T.translate("edit_company.url")}
-                </InputLabel>
-                <MuiFormikTextField name="url" margin="none" fullWidth />
-              </Grid2>
-              <Grid2 size={4}>
-                <InputLabel htmlFor="contact_email">
-                  {T.translate("edit_company.contact_email")}
-                </InputLabel>
-                <MuiFormikTextField
-                  name="contact_email"
-                  margin="none"
-                  fullWidth
-                />
-              </Grid2>
-
-              <Grid2 size={4}>
-                <InputLabel htmlFor="member_level">
-                  {T.translate("edit_company.member_level")}
-                </InputLabel>
-                <MuiFormikSelect name="member_level" isClearable>
-                  {MEMBER_LEVELS.map((lvl) => (
-                    <MenuItem key={lvl.value} value={lvl.value}>
-                      {lvl.label}
-                    </MenuItem>
-                  ))}
-                </MuiFormikSelect>
-              </Grid2>
-              <Grid2 size={4}>
-                <InputLabel htmlFor="color">
-                  {T.translate("edit_company.color")}
-                </InputLabel>
-                <MuiFormikColorField name="color" />
-              </Grid2>
-              <Grid2 size={4}>
-                <InputLabel htmlFor="admin_email">
-                  {T.translate("edit_company.admin_email")}
-                </InputLabel>
-                <MuiFormikTextField
-                  name="admin_email"
-                  margin="none"
-                  fullWidth
-                />
-              </Grid2>
-
-              <Grid2 size={4}>
-                <InputLabel htmlFor="city">
-                  {T.translate("edit_company.city")}
-                </InputLabel>
-                <MuiFormikTextField name="city" margin="none" fullWidth />
-              </Grid2>
-              <Grid2 size={4}>
-                <InputLabel htmlFor="state">
-                  {T.translate("edit_company.state")}
-                </InputLabel>
-                <MuiFormikTextField name="state" margin="none" fullWidth />
-              </Grid2>
-              <Grid2 size={4}>
-                <InputLabel htmlFor="state">
-                  {T.translate("edit_company.country")}
-                </InputLabel>
-                <MuiFormikAsyncAutocomplete
-                  name="country"
-                  fullWidth
-                  margin="none"
-                  queryFunction={(_input, callback) => getCountryList(callback)}
-                  formatOption={(country) => ({
-                    value: country.iso_code,
-                    label: country.name
-                  })}
-                  defaultOptions
-                />
-              </Grid2>
-              <Grid2 size={4}>
-                <InputLabel htmlFor="industry">
-                  {T.translate("edit_company.industry")}
-                </InputLabel>
-                <MuiFormikTextField name="industry" margin="none" fullWidth />
-              </Grid2>
-              <Grid2 size={4}>
-                <InputLabel htmlFor="products">
-                  {T.translate("edit_company.products")}
-                </InputLabel>
-                <MuiFormikTextField name="products" margin="none" fullWidth />
-              </Grid2>
-              <Grid2 size={4}>
-                <InputLabel htmlFor="contributions">
-                  {T.translate("edit_company.contributions")}
-                </InputLabel>
-                <MuiFormikTextField
-                  name="contributions"
-                  margin="none"
-                  fullWidth
-                />
-              </Grid2>
-
-              <Grid2 size={12}>
-                <InputLabel htmlFor="description">
-                  {T.translate("edit_company.description")}
-                </InputLabel>
-                <FormikTextEditor name="description" />
-              </Grid2>
-              <Grid2 size={12}>
-                <InputLabel htmlFor="overview">
-                  {T.translate("edit_company.overview")}
-                </InputLabel>
-                <FormikTextEditor name="overview" />
-              </Grid2>
-              <Grid2 size={12}>
-                <InputLabel htmlFor="commitment">
-                  {T.translate("edit_company.commitment")}
-                </InputLabel>
-                <FormikTextEditor name="commitment" />
-              </Grid2>
-
-              {showOpenStackSection && (
-                <Grid2 container size={12} mt={2} mb={2} alignItems="end">
-                  <Grid2 size={4}>
-                    <InputLabel htmlFor="sponsored_project">
-                      {T.translate("edit_company.project_name")}
-                    </InputLabel>
-                    <FormControl fullWidth>
-                      <Select
-                        id="sponsored_project"
-                        value={selectedSponsoredProject ?? ""}
-                        onChange={handleSelectedSponsoredProject}
-                        displayEmpty
-                        renderValue={(selected) =>
-                          selected ? (
-                            sponsored_projects_ddl.find(
-                              (sp) => sp.value === selected
-                            )?.label
-                          ) : (
-                            <span style={{ color: "#aaa" }}>
-                              {T.translate(
-                                "edit_company.placeholders.sponsored_project"
-                              )}
-                            </span>
-                          )
-                        }
-                      >
-                        {sponsored_projects_ddl.map((sp) => (
-                          <MenuItem key={sp.value} value={sp.value}>
-                            {sp.label}
-                          </MenuItem>
-                        ))}
-                      </Select>
-                    </FormControl>
-                  </Grid2>
-
-                  <Grid2 size={4}>
-                    <InputLabel htmlFor="sponsorship_type">
-                      {T.translate("edit_company.sponsorship_type")}
-                    </InputLabel>
-                    <FormControl fullWidth>
-                      <Select
-                        id="sponsorship_type"
-                        value={selectedSponsorShipType ?? ""}
-                        onChange={(ev) =>
-                          setSelectedSponsorShipType(ev.target.value)
-                        }
-                        displayEmpty
-                      >
-                        {sponsorShipTypes.length === 0 ? (
-                          <MenuItem value="" disabled>
-                            {T.translate(
-                              "edit_company.placeholders.no_options"
-                            )}
-                          </MenuItem>
-                        ) : (
-                          sponsorShipTypes.map((st) => (
-                            <MenuItem key={st.value} value={st.value}>
-                              {st.label}
-                            </MenuItem>
-                          ))
-                        )}
-                      </Select>
-                    </FormControl>
-                  </Grid2>
-                  <Grid2 size={4}>
-                    <InputLabel sx={{ visibility: "hidden" }}>
-                      &nbsp;
-                    </InputLabel>
-                    <Button
-                      variant="contained"
-                      onClick={handleAddSponsorshipType}
-                      fullWidth
-                      sx={{ height: "56px" }}
-                    >
-                      {T.translate("edit_company.add_project_sponsorship")}
-                    </Button>
-                  </Grid2>
-                </Grid2>
-              )}
-
-              {initialEntity.project_sponsorships?.length > 0 &&
-                window.APP_CLIENT_NAME == "openstack" && (
-                  <Grid2 size={12} mb={2}>
-                    <Table
-                      data={initialEntity.project_sponsorships.map((sp) => ({
-                        ...sp,
-                        project_name: sp.sponsored_project.name
-                      }))}
-                      columns={sponsored_project_columns}
-                      onDelete={handleDeleteSponsorship}
-                    />
-                  </Grid2>
-                )}
-
-              <Grid2 size={6}>
-                <InputLabel>{T.translate("edit_company.logo")}</InputLabel>
-                <UploadInputV3
-                  id="logo"
-                  name="logo"
-                  value={getLogoValue(formik.values.logo)}
-                  onUploadComplete={handleLogoUploadComplete("logo")}
-                  onUploadStart={() => setIsSaving(true)}
-                  onError={() => setIsSaving(false)}
-                  onRemove={handleLogoRemove("logo")}
-                  postUrl={`${window.FILE_UPLOAD_API_BASE_URL}/api/v1/files/upload`}
-                  djsConfig={{ withCredentials: true }}
-                  maxFiles={1}
-                  canAdd={!formik.values.logo}
-                  mediaType={{
-                    type: {
-                      allowed_extensions: ["jpg", "jpeg", "png", "gif", "svg"]
-                    }
-                  }}
-                />
-              </Grid2>
-              <Grid2 size={6}>
-                <InputLabel>{T.translate("edit_company.big_logo")}</InputLabel>
-                <UploadInputV3
-                  id="big_logo"
-                  name="big_logo"
-                  value={getLogoValue(formik.values.big_logo)}
-                  onUploadComplete={handleLogoUploadComplete("big_logo")}
-                  onUploadStart={() => setIsSaving(true)}
-                  onError={() => setIsSaving(false)}
-                  onRemove={handleLogoRemove("big_logo")}
-                  postUrl={`${window.FILE_UPLOAD_API_BASE_URL}/api/v1/files/upload`}
-                  djsConfig={{ withCredentials: true }}
-                  maxFiles={1}
-                  canAdd={!formik.values.big_logo}
-                  mediaType={{
-                    type: {
-                      allowed_extensions: ["jpg", "jpeg", "png", "gif", "svg"]
-                    }
-                  }}
-                />
-              </Grid2>
-            </Grid2>
-          </DialogContent>
-          <Divider />
-          <DialogActions>
-            <Button
-              type="submit"
-              fullWidth
-              variant="contained"
-              disabled={isSaving}
-            >
-              {T.translate("general.save")}
-            </Button>
-          </DialogActions>
-        </Box>
-      </FormikProvider>
-    </Dialog>
-  );
-};
-
-CompanyDialog.propTypes = {
-  entity: PropTypes.object.isRequired,
-  sponsoredProjects: PropTypes.array,
-  onClose: PropTypes.func.isRequired,
-  onSave: PropTypes.func.isRequired,
-  onAttach: PropTypes.func.isRequired,
-  onRemove: PropTypes.func.isRequired,
-  onDeleteSponsorship: PropTypes.func,
-  onAddSponsorship: PropTypes.func
-};
-
-export default CompanyDialog;
diff --git a/src/pages/companies/edit-company-page.js b/src/pages/companies/edit-company-page.js
index 84d649fcc..dc16341ae 100644
--- a/src/pages/companies/edit-company-page.js
+++ b/src/pages/companies/edit-company-page.js
@@ -11,137 +11,165 @@
  * limitations under the License.
  * */
 
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import T from "i18n-react/dist/i18n-react";
 import { Breadcrumb } from "react-breadcrumbs";
-import Swal from "sweetalert2";
+import { FormikProvider, useFormik } from "formik";
+import * as yup from "yup";
+import { Box, Button, Grid2 } from "@mui/material";
+import AddIcon from "@mui/icons-material/Add";
 import CompanyForm from "../../components/forms/company-form";
 import {
   getCompany,
   resetCompanyForm,
   saveCompany,
-  attachLogo
+  attachLogo,
+  removeLogo
 } from "../../actions/company-actions";
 import {
   getSponsoredProjects,
   saveSupportingCompany,
   deleteSupportingCompany
 } from "../../actions/sponsored-project-actions";
-import "../../styles/edit-company-page.less";
-import AddNewButton from "../../components/buttons/add-new-button";
+import { MAX_PER_PAGE } from "../../utils/constants";
+import { hexColorValidation } from "../../utils/yup";
 
-class EditCompanyPage extends React.Component {
-  constructor(props) {
-    const companyId = props.match.params.company_id;
-    const perPage = 100;
-    super(props);
+const EditCompanyPage = ({
+  entity: initialEntity,
+  sponsoredProjects,
+  match,
+  history,
+  getCompany,
+  resetCompanyForm,
+  saveCompany,
+  attachLogo,
+  removeLogo,
+  getSponsoredProjects,
+  saveSupportingCompany,
+  deleteSupportingCompany
+}) => {
+  const companyId = match.params.company_id;
+  const [isSaving, setIsSaving] = useState(false);
 
+  useEffect(() => {
     if (!companyId) {
-      props.resetCompanyForm();
+      resetCompanyForm();
     } else {
-      props.getCompany(companyId);
+      getCompany(companyId);
     }
-    if (window.APP_CLIENT_NAME == "openstack")
-      props.getSponsoredProjects("", 1, perPage);
-  }
+  }, [companyId]);
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    const oldId = prevProps.match.params.company_id;
-    const newId = this.props.match.params.company_id;
+  useEffect(() => {
+    if (window.APP_CLIENT_NAME === "openstack")
+      getSponsoredProjects("", 1, MAX_PER_PAGE);
+  }, []);
 
-    if (oldId !== newId) {
-      if (!newId) {
-        this.props.resetCompanyForm();
-      } else {
-        this.props.getCompany(newId);
-      }
+  const formik = useFormik({
+    initialValues: {
+      id: initialEntity?.id ?? 0,
+      name: initialEntity?.name ?? "",
+      url: initialEntity?.url ?? "",
+      contact_email: initialEntity?.contact_email ?? "",
+      member_level: initialEntity?.member_level ?? "",
+      color: initialEntity?.color ?? "",
+      admin_email: initialEntity?.admin_email ?? "",
+      city: initialEntity?.city ?? "",
+      state: initialEntity?.state ?? "",
+      country: initialEntity?.country ?? "",
+      industry: initialEntity?.industry ?? "",
+      products: initialEntity?.products ?? "",
+      contributions: initialEntity?.contributions ?? "",
+      description: initialEntity?.description ?? "",
+      overview: initialEntity?.overview ?? "",
+      commitment: initialEntity?.commitment ?? "",
+      logo: initialEntity?.logo ?? "",
+      big_logo: initialEntity?.big_logo ?? ""
+    },
+    enableReinitialize: true,
+    validationSchema: yup.object().shape({
+      name: yup.string().required(T.translate("validation.required")),
+      color: hexColorValidation()
+    }),
+    onSubmit: (values) => {
+      if (isSaving) return;
+      const valuesToSave = {
+        ...values,
+        country:
+          typeof values.country === "object"
+            ? values.country?.value
+            : values.country
+      };
+      setIsSaving(true);
+      saveCompany(valuesToSave)
+        .then(() => history.push("/app/companies"))
+        .catch(() => {})
+        .finally(() => setIsSaving(false));
     }
-  }
-
-  render() {
-    const {
-      entity,
-      errors,
-      summits,
-      history,
-      saveCompany,
-      attachLogo,
-      match,
-      sponsoredProjects,
-      deleteSupportingCompany,
-      saveSupportingCompany
-    } = this.props;
-
-    const title = entity.id
-      ? T.translate("general.edit")
-      : T.translate("general.add");
-    const breadcrumb = entity.id ? entity.name : T.translate("general.new");
+  });
 
-    return (
-      <div className="container">
-        <Breadcrumb data={{ title: breadcrumb, pathname: match.url }} />
-        <h3>
-          {title} {T.translate("edit_company.company")}
-          <AddNewButton entity={entity} />
-        </h3>
-        <hr />
-        <CompanyForm
-          summits={summits}
-          history={history}
-          entity={entity}
-          errors={errors}
-          onSubmit={saveCompany}
-          onAttach={attachLogo}
-          sponsoredProjects={sponsoredProjects}
-          onDeleteSponsorship={(id) => {
-            const sponsorship = entity.project_sponsorships.find(
-              (ps) => ps.id == id
-            );
-            if (!sponsorship) return;
-            const supportingCompany = sponsorship.supporting_companies.find(
-              (sc) => sc.company_id == entity.id
-            );
-            if (!supportingCompany) return;
+  const title = initialEntity?.id
+    ? T.translate("general.edit")
+    : T.translate("general.add");
+  const breadcrumb = initialEntity?.id
+    ? initialEntity.name
+    : T.translate("general.new");
 
-            Swal.fire({
-              title: T.translate("general.are_you_sure"),
-              text: T.translate(
-                "edit_company.delete_supporting_company_warning"
-              ),
-              type: "warning",
-              showCancelButton: true,
-              confirmButtonColor: "#DD6B55",
-              confirmButtonText: T.translate("general.yes_delete")
-            }).then((result) => {
-              if (result.value) {
-                deleteSupportingCompany(
-                  sponsorship.sponsored_project.id,
-                  id,
-                  supportingCompany.id
-                );
-              }
-            });
-          }}
-          addSponsoreProjectSponsorship={(
-            companyId,
-            selectedSponsoredProject,
-            selectedSponsorShipType
-          ) => {
-            saveSupportingCompany(
-              selectedSponsoredProject,
-              selectedSponsorShipType,
-              {
-                id: 0,
-                company: { id: companyId }
-              }
-            );
-          }}
-        />
-      </div>
-    );
-  }
-}
+  return (
+    <div className="container">
+      <Breadcrumb data={{ title: breadcrumb, pathname: match.url }} />
+      <Grid2
+        container
+        sx={{ justifyContent: "space-between", alignItems: "center" }}
+      >
+        <Grid2>
+          <h3>
+            {title} {T.translate("edit_company.company")}
+          </h3>
+        </Grid2>
+        {initialEntity?.id > 0 && (
+          <Grid2>
+            <Button
+              variant="contained"
+              onClick={() => history.push("/app/companies/new")}
+              startIcon={<AddIcon />}
+            >
+              {T.translate("general.add_new")}
+            </Button>
+          </Grid2>
+        )}
+      </Grid2>
+      <hr />
+      <FormikProvider value={formik}>
+        <Box
+          component="form"
+          onSubmit={formik.handleSubmit}
+          noValidate
+          autoComplete="off"
+        >
+          <CompanyForm
+            initialEntity={initialEntity}
+            sponsoredProjects={sponsoredProjects}
+            onAttach={attachLogo}
+            onRemove={removeLogo}
+            onAddSponsorship={saveSupportingCompany}
+            onDeleteSponsorship={deleteSupportingCompany}
+            isSaving={isSaving}
+            setIsSaving={setIsSaving}
+          />
+          <Grid2
+            size={12}
+            sx={{ p: 3, pt: 0, display: "flex", justifyContent: "flex-end" }}
+          >
+            <Button type="submit" variant="contained" disabled={isSaving}>
+              {T.translate("general.save")}
+            </Button>
+          </Grid2>
+        </Box>
+      </FormikProvider>
+    </div>
+  );
+};
 
 const mapStateToProps = ({
   currentCompanyState,
@@ -156,6 +184,7 @@ export default connect(mapStateToProps, {
   resetCompanyForm,
   saveCompany,
   attachLogo,
+  removeLogo,
   getSponsoredProjects,
   saveSupportingCompany,
   deleteSupportingCompany