diff --git a/package.json b/package.json
index 61237633c0..05066b363a 100644
--- a/package.json
+++ b/package.json
@@ -83,7 +83,7 @@
     "react-dnd": "16.0.1",
     "react-dnd-html5-backend": "16.0.1",
     "react-dom": "18.2.0",
-    "react-hook-form": "7.43.2",
+    "react-hook-form": "7.53.0",
     "react-query": "3.39.3",
     "react-redux": "8.1.3",
     "react-router-dom": "6.21.1",
diff --git a/static/js/publisher/listing/components/AdditionalInformation/AdditionalInformation.tsx b/static/js/publisher/listing/components/AdditionalInformation/AdditionalInformation.tsx
new file mode 100644
index 0000000000..40a3ae3f01
--- /dev/null
+++ b/static/js/publisher/listing/components/AdditionalInformation/AdditionalInformation.tsx
@@ -0,0 +1,106 @@
+import {
+  UseFormRegister,
+  UseFormGetValues,
+  UseFormSetValue,
+  UseFormWatch,
+  FieldValues,
+} from "react-hook-form";
+import { Row, Col } from "@canonical/react-components";
+
+import LicenseInputs from "./LicenseInputs";
+
+import type { Data } from "../../types";
+
+type Props = {
+  data: Data;
+  register: UseFormRegister<FieldValues>;
+  getValues: UseFormGetValues<FieldValues>;
+  setValue: UseFormSetValue<FieldValues>;
+  watch: UseFormWatch<FieldValues>;
+};
+
+function AdditionalInformation({
+  data,
+  register,
+  getValues,
+  setValue,
+  watch,
+}: Props): JSX.Element {
+  return (
+    <>
+      <h2 className="p-heading--4">Additional information</h2>
+
+      <LicenseInputs
+        listingData={data}
+        register={register}
+        setValue={setValue}
+        watch={watch}
+      />
+
+      <Row className="p-form__control">
+        <Col size={2}>
+          <label htmlFor="metrics">Metrics:</label>
+        </Col>
+        <Col size={8}>
+          <p className="u-no-margin--bottom">
+            <label className="p-checkbox">
+              <input
+                type="checkbox"
+                className="p-checkbox__input"
+                aria-labelledby="public-metrics-checkbox"
+                {...register("public_metrics_enabled")}
+                defaultChecked={getValues("public_metrics_enabled")}
+              />
+              <span className="p-checkbox__label" id="public-metrics-checkbox">
+                Display public popularity charts
+              </span>
+            </label>
+          </p>
+          <div className="p-nested-inputs">
+            <p className="u-no-margin--bottom u-no-padding--top">
+              <label className="p-checkbox">
+                <input
+                  type="checkbox"
+                  className="p-checkbox__input"
+                  aria-labelledby="world-map-checkbox"
+                  disabled={!getValues("public_metrics_enabled")}
+                  {...register("public_metrics_territories")}
+                  defaultChecked={getValues("public_metrics_territories")}
+                />
+                <span className="p-checkbox__label" id="world-map-checkbox">
+                  World map
+                </span>
+              </label>
+              <small className="u-text-muted">
+                Displays where your snap is being used by country
+              </small>
+            </p>
+            <p className="u-no-margin--bottom">
+              <label className="p-checkbox">
+                <input
+                  type="checkbox"
+                  className="p-checkbox__input"
+                  aria-labelledby="linux-distributions-checkbox"
+                  disabled={!getValues("public_metrics_enabled")}
+                  {...register("public_metrics_distros")}
+                  defaultChecked={getValues("public_metrics_distros")}
+                />
+                <span
+                  className="p-checkbox__label"
+                  id="linux-distributions-checkbox"
+                >
+                  Linux distributions
+                </span>
+              </label>
+              <small className="u-text-muted">
+                Displays where your snap is being used by distro
+              </small>
+            </p>
+          </div>
+        </Col>
+      </Row>
+    </>
+  );
+}
+
+export default AdditionalInformation;
diff --git a/static/js/publisher/listing/components/LicenseInputs/LicenseInputs.tsx b/static/js/publisher/listing/components/AdditionalInformation/LicenseInputs.tsx
similarity index 92%
rename from static/js/publisher/listing/components/LicenseInputs/LicenseInputs.tsx
rename to static/js/publisher/listing/components/AdditionalInformation/LicenseInputs.tsx
index 0b543c0169..05dd78c853 100644
--- a/static/js/publisher/listing/components/LicenseInputs/LicenseInputs.tsx
+++ b/static/js/publisher/listing/components/AdditionalInformation/LicenseInputs.tsx
@@ -1,4 +1,10 @@
 import { useState, useEffect } from "react";
+import {
+  UseFormRegister,
+  UseFormSetValue,
+  UseFormWatch,
+  FieldValues,
+} from "react-hook-form";
 import { nanoid } from "nanoid";
 import { Row, Col } from "@canonical/react-components";
 
@@ -10,9 +16,9 @@ type Props = {
     license_type: string;
     licenses: Array<{ key: string; name: string }>;
   };
-  register: Function;
-  setValue: Function;
-  watch: Function;
+  register: UseFormRegister<FieldValues>;
+  setValue: UseFormSetValue<FieldValues>;
+  watch: UseFormWatch<FieldValues>;
 };
 
 function LicenseInputs({ listingData, register, setValue, watch }: Props) {
@@ -98,7 +104,7 @@ function LicenseInputs({ listingData, register, setValue, watch }: Props) {
 
           {licenseType === "custom" && (
             <>
-              <textarea name="license" {...register("license")} />
+              <textarea {...register("license")} />
 
               <small className="u-text-muted">
                 Visit{" "}
diff --git a/static/js/publisher/listing/components/LicenseInputs/LicenseSearch.tsx b/static/js/publisher/listing/components/AdditionalInformation/LicenseSearch.tsx
similarity index 97%
rename from static/js/publisher/listing/components/LicenseInputs/LicenseSearch.tsx
rename to static/js/publisher/listing/components/AdditionalInformation/LicenseSearch.tsx
index 7a5336ecf3..c3f74165a4 100644
--- a/static/js/publisher/listing/components/LicenseInputs/LicenseSearch.tsx
+++ b/static/js/publisher/listing/components/AdditionalInformation/LicenseSearch.tsx
@@ -1,4 +1,5 @@
 import { useState, SyntheticEvent, useEffect } from "react";
+import { UseFormRegister, UseFormSetValue, FieldValues } from "react-hook-form";
 import Downshift from "downshift";
 
 import debounce from "../../../../libs/debounce";
@@ -11,8 +12,8 @@ type License = {
 type Props = {
   licenses: Array<License>;
   license: string | undefined;
-  register: Function;
-  setValue: Function;
+  register: UseFormRegister<FieldValues>;
+  setValue: UseFormSetValue<FieldValues>;
   setLicense: Function;
   originalLicense: string;
 };
@@ -90,7 +91,6 @@ function LicenseSearch({
         <div>
           <input
             type="hidden"
-            name="license"
             {...register("license", {
               value: license,
             })}
diff --git a/static/js/publisher/listing/components/AdditionalInformation/index.ts b/static/js/publisher/listing/components/AdditionalInformation/index.ts
new file mode 100644
index 0000000000..a564425f07
--- /dev/null
+++ b/static/js/publisher/listing/components/AdditionalInformation/index.ts
@@ -0,0 +1 @@
+export { default } from "./AdditionalInformation";
diff --git a/static/js/publisher/listing/components/App/App.tsx b/static/js/publisher/listing/components/App/App.tsx
index 897bc73ebf..d41960378b 100644
--- a/static/js/publisher/listing/components/App/App.tsx
+++ b/static/js/publisher/listing/components/App/App.tsx
@@ -1,236 +1,49 @@
-import { useState, useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { Form, Strip, Notification } from "@canonical/react-components";
-
-import {
-  getChanges,
-  getFormData,
-  getListingData,
-  shouldShowUpdateMetadataWarning,
-  getDefaultValues,
-} from "../../utils";
-import { initListingTour } from "../../../tour";
+import { useParams } from "react-router-dom";
+import { useQuery } from "react-query";
+import { Strip } from "@canonical/react-components";
 
 import PageHeader from "../../../shared/PageHeader";
-import SaveAndPreview from "../../../shared/SaveAndPreview";
-import UpdateMetadataModal from "../../../shared/UpdateMetadataModal";
-import SaveStateNotifications from "../../../shared/SaveStateNotifications";
-import ListingDetailsSection from "../../sections/ListingDetailsSection";
-import ContactInformationSection from "../../sections/ContactInformationSection";
-import AdditionalInformationSection from "../../sections/AdditionalInformationSection";
-import PreviewForm from "../PreviewForm";
-
-function App() {
-  const snapData = getListingData(window?.listingData);
-  const snapId = window?.listingData?.snap_id;
-  const snapTitle = window?.listingData?.snap_title;
-  const snapName = window?.listingData?.snap_name;
-  const publisherName = window?.listingData?.publisher_name;
-  const categories = window?.listingData?.categories;
-  const tourSteps = window?.tourSteps;
-
-  const defaultValues = getDefaultValues(snapData);
-
-  const [isSaving, setIsSaving] = useState(false);
-  const [hasSaved, setHasSaved] = useState(false);
-  const [savedError, setSavedError] = useState<
-    boolean | { code: string; message: string }[]
-  >(false);
-  const [showMetadataWarningModal, setShowMetadataWarningModal] =
-    useState(false);
-  const [formData, setFormData] = useState({});
-  const [updateMetadataOnRelease, setUpdateMetadataOnRelease] = useState(
-    snapData.update_metadata_on_release
-  );
-
-  const {
-    register,
-    getFieldState,
-    handleSubmit,
-    reset,
-    watch,
-    setValue,
-    control,
-    getValues,
-    formState,
-  } = useForm({ defaultValues, mode: "onChange" });
-
-  const isDirty = formState.isDirty;
-  const isValid = formState.isValid;
-  const dirtyFields: { [key: string]: any } = formState.dirtyFields;
-
-  const onSubmit = (data: any) => {
-    if (
-      snapData.update_metadata_on_release &&
-      shouldShowUpdateMetadataWarning(dirtyFields)
-    ) {
-      setShowMetadataWarningModal(true);
-      setFormData(data);
-    } else {
-      submitForm(data);
-    }
-  };
-
-  const submitForm = async (data: any) => {
-    const changes = getChanges(dirtyFields, data);
-    const formData = getFormData(data, snapId, changes);
+import ListingForm from "../ListingForm";
 
-    const previousDirtyFields = Object.assign({}, dirtyFields);
+function App(): JSX.Element {
+  const { snapName } = useParams();
+  const { data, isLoading, refetch } = useQuery({
+    queryKey: ["listing"],
+    queryFn: async () => {
+      const response = await fetch(`/api/${snapName}/listing`);
 
-    setHasSaved(false);
-    setIsSaving(true);
-    setSavedError(false);
+      if (!response.ok) {
+        throw new Error("There was a problem fetching listing data");
+      }
 
-    const response = await fetch(`/${snapName}/listing.json`, {
-      method: "POST",
-      body: formData,
-    });
+      const data = await response.json();
 
-    if (shouldShowUpdateMetadataWarning(previousDirtyFields)) {
-      setUpdateMetadataOnRelease(false);
-    }
+      if (!data.success) {
+        throw new Error(data.message);
+      }
 
-    if (response.status !== 200) {
-      setTimeout(() => {
-        setIsSaving(false);
-        setSavedError(true);
-      }, 1000);
-      return;
-    }
-
-    const jsonData = await response.json();
-    if (jsonData.error_list) {
-      setTimeout(() => {
-        setIsSaving(false);
-        setSavedError(jsonData.error_list);
-      }, 1000);
-      return;
-    }
-    setTimeout(() => {
-      setIsSaving(false);
-      setHasSaved(true);
-      reset(data);
-      window.scrollTo(0, 0);
-    }, 1000);
-  };
-
-  useEffect(() => {
-    const tourContainer = document.getElementById(
-      "tour-container"
-    ) as HTMLElement;
-    initListingTour({
-      snapName,
-      container: tourContainer,
-      formFields: snapData,
-      steps: tourSteps,
-    });
-  }, []);
+      return data.data;
+    },
+  });
 
   return (
     <>
       <PageHeader
         snapName={snapName}
-        snapTitle={snapTitle}
-        publisherName={publisherName}
+        snapTitle={snapName}
         activeTab="listing"
       />
 
-      <Form
-        onSubmit={handleSubmit(onSubmit)}
-        stacked={true}
-        encType="multipart/form-data"
-      >
-        <SaveAndPreview
-          snapName={snapName}
-          isDirty={isDirty}
-          reset={reset}
-          isSaving={isSaving}
-          isValid={isValid}
-          showPreview={true}
-        />
-
-        {updateMetadataOnRelease && (
-          <>
-            <section className="p-strip is-shallow u-no-padding--bottom">
-              <div className="u-fixed-width">
-                <Notification severity="caution">
-                  Information here was automatically updated to the latest
-                  version of the snapcraft.yaml released to the stable channel.{" "}
-                  <a
-                    className="p-link--external"
-                    href="/docs/snapcraft-top-level-metadata"
-                  >
-                    Learn more
-                  </a>
-                  .
-                </Notification>
-              </div>
-            </section>
-
-            {showMetadataWarningModal ? (
-              <UpdateMetadataModal
-                setShowMetadataWarningModal={setShowMetadataWarningModal}
-                submitForm={submitForm}
-                formData={formData}
-              />
-            ) : null}
-          </>
-        )}
-
-        <Strip shallow={true} className="u-no-padding--bottom">
-          <SaveStateNotifications
-            hasSaved={hasSaved}
-            setHasSaved={setHasSaved}
-            savedError={savedError}
-            setSavedError={setSavedError}
-          />
-
-          <ListingDetailsSection
-            register={register}
-            getFieldState={getFieldState}
-            setValue={setValue}
-            categories={categories}
-            primaryCategory={snapData["primary-category"]}
-            secondaryCategory={snapData["secondary-category"]}
-            iconUrl={snapData.icon_url}
-            bannerUrl={snapData.banner_url}
-            control={control}
-            getValues={getValues}
-          />
-          <Strip shallow={true}>
-            <div className="u-fixed-width">
-              <hr className="u-no-maring--bottom" />
-            </div>
-          </Strip>
-
-          <ContactInformationSection
-            snapName={snapName}
-            getFieldState={getFieldState}
-            register={register}
-            publisherName={publisherName}
-            control={control}
-            getValues={getValues}
-            formState={formState}
-          />
-
-          <Strip shallow={true}>
-            <div className="u-fixed-width">
-              <hr className="u-no-maring--bottom" />
-            </div>
-          </Strip>
-
-          <AdditionalInformationSection
-            register={register}
-            listingData={snapData}
-            setValue={setValue}
-            watch={watch}
-            getValues={getValues}
-          />
+      {isLoading && (
+        <Strip shallow>
+          <p>
+            <i className="p-icon--spinner u-animation--spin"></i>&nbsp;Loading{" "}
+            {snapName} listing data
+          </p>
         </Strip>
-      </Form>
-      <PreviewForm snapName={snapName} getValues={getValues} />
+      )}
 
-      <div id="tour-container" />
+      {data && <ListingForm data={data} refetch={refetch} />}
     </>
   );
 }
diff --git a/static/js/publisher/listing/components/App/__tests__/App.test.tsx b/static/js/publisher/listing/components/App/__tests__/App.test.tsx
index 89d13c3273..34c5d13309 100644
--- a/static/js/publisher/listing/components/App/__tests__/App.test.tsx
+++ b/static/js/publisher/listing/components/App/__tests__/App.test.tsx
@@ -1,72 +1,150 @@
-import { QueryClient, QueryClientProvider } from "react-query";
+import { BrowserRouter } from "react-router-dom";
+import { QueryClient, QueryClientProvider, useQuery } from "react-query";
 import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
 import "@testing-library/jest-dom";
 
 import App from "../App";
 
-import mockListingData from "../mocks/mockListingData";
+import { mockData } from "../../../test-utils";
 
-const queryClient = new QueryClient();
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
+    },
+  },
+});
 
-const renderComponent = () =>
-  render(
-    <QueryClientProvider client={queryClient}>
-      <App />
-    </QueryClientProvider>
-  );
+jest.mock("react-query", () => ({
+  ...jest.requireActual("react-query"),
+  useQuery: jest.fn(),
+}));
+
+jest.mock("react-router-dom", () => ({
+  ...jest.requireActual("react-router-dom"),
+  useParams: () => ({
+    snapName: "test-snap",
+  }),
+}));
 
-window.listingData = mockListingData;
-window.tourSteps = mockListingData.tour_steps;
+const renderComponent = () => {
+  return render(
+    <BrowserRouter>
+      <QueryClientProvider client={queryClient}>
+        <App />
+      </QueryClientProvider>
+    </BrowserRouter>
+  );
+};
 
 describe("App", () => {
-  it("shows 'Save' button as disabled by default", () => {
+  test("renders page header", () => {
+    // @ts-ignore
+    useQuery.mockReturnValue({
+      isLoading: true,
+      data: undefined,
+      refetch: jest.fn(),
+    });
+
     renderComponent();
-    expect(screen.getByRole("button", { name: "Save" })).toHaveAttribute("aria-disabled","true");
+
+    expect(
+      screen.getByRole("heading", { level: 1, name: "test-snap" })
+    ).toBeInTheDocument();
   });
 
-  it("shows 'Revert' button as disabled by default", () => {
+  test("renders loading state", () => {
+    // @ts-ignore
+    useQuery.mockReturnValue({
+      isLoading: true,
+      data: undefined,
+      refetch: jest.fn(),
+    });
+
     renderComponent();
-    expect(screen.getByRole("button", { name: "Revert" })).toHaveAttribute("aria-disabled","true");
+
+    expect(
+      screen.getByText(/Loading test-snap listing data/)
+    ).toBeInTheDocument();
   });
 
-  it("enables 'Save' button if a change is made to the form", async () => {
-    const user = userEvent.setup();
+  test("renders listing details section", () => {
+    // @ts-ignore
+    useQuery.mockReturnValue({
+      isLoading: false,
+      data: mockData,
+      refetch: jest.fn(),
+    });
+
     renderComponent();
-    await user.type(
-      screen.getByRole("textbox", { name: "Title:" }),
-      "new-name"
-    );
-    expect(screen.getByRole("button", { name: "Save" })).not.toBeDisabled();
+
+    expect(
+      screen.getByRole("heading", { level: 2, name: "Listing details" })
+    ).toBeInTheDocument();
   });
 
-  it("enables 'Revert' button if a change is made to the form", async () => {
-    const user = userEvent.setup();
+  test("renders contact section", () => {
+    // @ts-ignore
+    useQuery.mockReturnValue({
+      isLoading: false,
+      data: mockData,
+      refetch: jest.fn(),
+    });
+
     renderComponent();
-    await user.type(
-      screen.getByRole("textbox", { name: "Title:" }),
-      "new-name"
-    );
-    expect(screen.getByRole("button", { name: "Revert" })).not.toBeDisabled();
+
+    expect(
+      screen.getByRole("heading", { level: 2, name: "Contact information" })
+    ).toBeInTheDocument();
+  });
+
+  test("renders additional information section", () => {
+    // @ts-ignore
+    useQuery.mockReturnValue({
+      isLoading: false,
+      data: mockData,
+      refetch: jest.fn(),
+    });
+
+    renderComponent();
+
+    expect(
+      screen.getByRole("heading", { level: 2, name: "Additional information" })
+    ).toBeInTheDocument();
   });
 
-  it("disables 'Save' button if a change is made to the form and then reset", async () => {
-    const user = userEvent.setup();
+  test("shows 'Update metadata' notification", () => {
+    // @ts-ignore
+    useQuery.mockReturnValue({
+      isLoading: false,
+      data: { ...mockData, update_metadata_on_release: true },
+      refetch: jest.fn(),
+    });
+
     renderComponent();
-    const input = screen.getByRole("textbox", { name: "Title:" });
-    await user.type(input, "new-name");
-    await user.clear(input);
-    await user.type(input, mockListingData.snap_title);
-    expect(screen.getByRole("button", { name: "Save" })).toHaveAttribute("aria-disabled","true");
+
+    expect(
+      screen.getByText(
+        /Information here was automatically updated to the latest version of the snapcraft.yaml released to the stable channel/
+      )
+    ).toBeInTheDocument();
   });
 
-  it("disables 'Revert' button if a change is made to the form and then reset", async () => {
-    const user = userEvent.setup();
+  test("doesn't show 'Update metadata' nofitication", () => {
+    // @ts-ignore
+    useQuery.mockReturnValue({
+      isLoading: false,
+      data: mockData,
+      refetch: jest.fn(),
+    });
+
     renderComponent();
-    const input = screen.getByRole("textbox", { name: "Title:" });
-    await user.type(input, "new-name");
-    await user.clear(input);
-    await user.type(input, mockListingData.snap_title);
-    expect(screen.getByRole("button", { name: "Revert" })).toHaveAttribute("aria-disabled","true");
+
+    expect(
+      screen.queryByText(
+        /Information here was automatically updated to the latest version of the snapcraft.yaml released to the stable channel/
+      )
+    ).not.toBeInTheDocument();
   });
 });
diff --git a/static/js/publisher/listing/components/App/mocks/mockListingData.js b/static/js/publisher/listing/components/App/mocks/mockListingData.js
deleted file mode 100644
index c3be7c461c..0000000000
--- a/static/js/publisher/listing/components/App/mocks/mockListingData.js
+++ /dev/null
@@ -1,2040 +0,0 @@
-export default {
-  banner_urls: [
-    "https://dashboard.snapcraft.io/site_media/appmedia/2024/06/banner_YmiU4IP.jpg",
-  ],
-  categories: [
-    {
-      name: "Art and Design",
-      slug: "art-and-design",
-    },
-    {
-      name: "Books and Reference",
-      slug: "books-and-reference",
-    },
-    {
-      name: "Development",
-      slug: "development",
-    },
-    {
-      name: "Devices and IoT",
-      slug: "devices-and-iot",
-    },
-    {
-      name: "Education",
-      slug: "education",
-    },
-    {
-      name: "Entertainment",
-      slug: "entertainment",
-    },
-    {
-      name: "Finance",
-      slug: "finance",
-    },
-    {
-      name: "Games",
-      slug: "games",
-    },
-    {
-      name: "Health and Fitness",
-      slug: "health-and-fitness",
-    },
-    {
-      name: "Music and Audio",
-      slug: "music-and-audio",
-    },
-    {
-      name: "News and Weather",
-      slug: "news-and-weather",
-    },
-    {
-      name: "Personalisation",
-      slug: "personalisation",
-    },
-    {
-      name: "Photo and Video",
-      slug: "photo-and-video",
-    },
-    {
-      name: "Productivity",
-      slug: "productivity",
-    },
-    {
-      name: "Science",
-      slug: "science",
-    },
-    {
-      name: "Security",
-      slug: "security",
-    },
-    {
-      name: "Server and Cloud",
-      slug: "server-and-cloud",
-    },
-    {
-      name: "Social",
-      slug: "social",
-    },
-    {
-      name: "Utilities",
-      slug: "utilities",
-    },
-  ],
-  contact: "mailto:hello@example.com",
-  description: "This is the snap I use for development and testing",
-  from: null,
-  icon_url:
-    "https://dashboard.snapcraft.io/site_media/appmedia/2024/06/icon.jpg_tQ660mJ.png",
-  is_on_stable: "released",
-  license: "AFL-1.1 OR ANTLR-PD-fallback OR Glide",
-  license_type: "simple",
-  licenses: [
-    {
-      key: "Glide",
-      name: "3dfx Glide License",
-    },
-    {
-      key: "AMDPLPA",
-      name: "AMD's plpa_map.c License",
-    },
-    {
-      key: "ANTLR-PD",
-      name: "ANTLR Software Rights Notice",
-    },
-    {
-      key: "ANTLR-PD-fallback",
-      name: "ANTLR Software Rights Notice with license fallback",
-    },
-    {
-      key: "Abstyles",
-      name: "Abstyles License",
-    },
-    {
-      key: "AFL-1.1",
-      name: "Academic Free License v1.1",
-    },
-    {
-      key: "AFL-1.2",
-      name: "Academic Free License v1.2",
-    },
-    {
-      key: "AFL-2.0",
-      name: "Academic Free License v2.0",
-    },
-    {
-      key: "AFL-2.1",
-      name: "Academic Free License v2.1",
-    },
-    {
-      key: "AFL-3.0",
-      name: "Academic Free License v3.0",
-    },
-    {
-      key: "AMPAS",
-      name: "Academy of Motion Picture Arts and Sciences BSD",
-    },
-    {
-      key: "APL-1.0",
-      name: "Adaptive Public License 1.0",
-    },
-    {
-      key: "Adobe-Glyph",
-      name: "Adobe Glyph List License",
-    },
-    {
-      key: "APAFML",
-      name: "Adobe Postscript AFM License",
-    },
-    {
-      key: "Adobe-2006",
-      name: "Adobe Systems Incorporated Source Code License Agreement",
-    },
-    {
-      key: "AGPL-1.0",
-      name: "Affero General Public License v1.0",
-    },
-    {
-      key: "AGPL-1.0-only",
-      name: "Affero General Public License v1.0 only",
-    },
-    {
-      key: "AGPL-1.0-or-later",
-      name: "Affero General Public License v1.0 or later",
-    },
-    {
-      key: "Afmparse",
-      name: "Afmparse License",
-    },
-    {
-      key: "Aladdin",
-      name: "Aladdin Free Public License",
-    },
-    {
-      key: "ADSL",
-      name: "Amazon Digital Services License",
-    },
-    {
-      key: "Apache-1.0",
-      name: "Apache License 1.0",
-    },
-    {
-      key: "Apache-1.1",
-      name: "Apache License 1.1",
-    },
-    {
-      key: "Apache-2.0",
-      name: "Apache License 2.0",
-    },
-    {
-      key: "AML",
-      name: "Apple MIT License",
-    },
-    {
-      key: "APSL-1.0",
-      name: "Apple Public Source License 1.0",
-    },
-    {
-      key: "APSL-1.1",
-      name: "Apple Public Source License 1.1",
-    },
-    {
-      key: "APSL-1.2",
-      name: "Apple Public Source License 1.2",
-    },
-    {
-      key: "APSL-2.0",
-      name: "Apple Public Source License 2.0",
-    },
-    {
-      key: "Artistic-1.0",
-      name: "Artistic License 1.0",
-    },
-    {
-      key: "Artistic-1.0-Perl",
-      name: "Artistic License 1.0 (Perl)",
-    },
-    {
-      key: "Artistic-1.0-cl8",
-      name: "Artistic License 1.0 w/clause 8",
-    },
-    {
-      key: "Artistic-2.0",
-      name: "Artistic License 2.0",
-    },
-    {
-      key: "AAL",
-      name: "Attribution Assurance License",
-    },
-    {
-      key: "BSD-1-Clause",
-      name: "BSD 1-Clause License",
-    },
-    {
-      key: "BSD-2-Clause",
-      name: 'BSD 2-Clause "Simplified" License',
-    },
-    {
-      key: "BSD-2-Clause-FreeBSD",
-      name: "BSD 2-Clause FreeBSD License",
-    },
-    {
-      key: "BSD-2-Clause-NetBSD",
-      name: "BSD 2-Clause NetBSD License",
-    },
-    {
-      key: "BSD-2-Clause-Views",
-      name: "BSD 2-Clause with views sentence",
-    },
-    {
-      key: "BSD-3-Clause",
-      name: 'BSD 3-Clause "New" or "Revised" License',
-    },
-    {
-      key: "BSD-3-Clause-Clear",
-      name: "BSD 3-Clause Clear License",
-    },
-    {
-      key: "BSD-3-Clause-Modification",
-      name: "BSD 3-Clause Modification",
-    },
-    {
-      key: "BSD-3-Clause-No-Nuclear-License",
-      name: "BSD 3-Clause No Nuclear License",
-    },
-    {
-      key: "BSD-3-Clause-No-Nuclear-License-2014",
-      name: "BSD 3-Clause No Nuclear License 2014",
-    },
-    {
-      key: "BSD-3-Clause-No-Nuclear-Warranty",
-      name: "BSD 3-Clause No Nuclear Warranty",
-    },
-    {
-      key: "BSD-3-Clause-Open-MPI",
-      name: "BSD 3-Clause Open MPI variant",
-    },
-    {
-      key: "BSD-4-Clause-Shortened",
-      name: "BSD 4 Clause Shortened",
-    },
-    {
-      key: "BSD-4-Clause",
-      name: 'BSD 4-Clause "Original" or "Old" License',
-    },
-    {
-      key: "BSD-Protection",
-      name: "BSD Protection License",
-    },
-    {
-      key: "BSD-Source-Code",
-      name: "BSD Source Code Attribution",
-    },
-    {
-      key: "0BSD",
-      name: "BSD Zero Clause License",
-    },
-    {
-      key: "BSD-3-Clause-Attribution",
-      name: "BSD with attribution",
-    },
-    {
-      key: "BSD-2-Clause-Patent",
-      name: "BSD-2-Clause Plus Patent License",
-    },
-    {
-      key: "BSD-4-Clause-UC",
-      name: "BSD-4-Clause (University of California-Specific)",
-    },
-    {
-      key: "Bahyph",
-      name: "Bahyph License",
-    },
-    {
-      key: "Barr",
-      name: "Barr License",
-    },
-    {
-      key: "Beerware",
-      name: "Beerware License",
-    },
-    {
-      key: "BitTorrent-1.0",
-      name: "BitTorrent Open Source License v1.0",
-    },
-    {
-      key: "BitTorrent-1.1",
-      name: "BitTorrent Open Source License v1.1",
-    },
-    {
-      key: "BlueOak-1.0.0",
-      name: "Blue Oak Model License 1.0.0",
-    },
-    {
-      key: "BSL-1.0",
-      name: "Boost Software License 1.0",
-    },
-    {
-      key: "Borceux",
-      name: "Borceux license",
-    },
-    {
-      key: "BUSL-1.1",
-      name: "Business Source License 1.1",
-    },
-    {
-      key: "CERN-OHL-P-2.0",
-      name: "CERN Open Hardware Licence Version 2 - Permissive",
-    },
-    {
-      key: "CERN-OHL-S-2.0",
-      name: "CERN Open Hardware Licence Version 2 - Strongly Reciprocal",
-    },
-    {
-      key: "CERN-OHL-W-2.0",
-      name: "CERN Open Hardware Licence Version 2 - Weakly Reciprocal",
-    },
-    {
-      key: "CERN-OHL-1.1",
-      name: "CERN Open Hardware Licence v1.1",
-    },
-    {
-      key: "CERN-OHL-1.2",
-      name: "CERN Open Hardware Licence v1.2",
-    },
-    {
-      key: "MIT-CMU",
-      name: "CMU License",
-    },
-    {
-      key: "CNRI-Jython",
-      name: "CNRI Jython License",
-    },
-    {
-      key: "CNRI-Python",
-      name: "CNRI Python License",
-    },
-    {
-      key: "CNRI-Python-GPL-Compatible",
-      name: "CNRI Python Open Source GPL Compatible License Agreement",
-    },
-    {
-      key: "CUA-OPL-1.0",
-      name: "CUA Office Public License v1.0",
-    },
-    {
-      key: "Caldera",
-      name: "Caldera License",
-    },
-    {
-      key: "CECILL-1.0",
-      name: "CeCILL Free Software License Agreement v1.0",
-    },
-    {
-      key: "CECILL-1.1",
-      name: "CeCILL Free Software License Agreement v1.1",
-    },
-    {
-      key: "CECILL-2.0",
-      name: "CeCILL Free Software License Agreement v2.0",
-    },
-    {
-      key: "CECILL-2.1",
-      name: "CeCILL Free Software License Agreement v2.1",
-    },
-    {
-      key: "CECILL-B",
-      name: "CeCILL-B Free Software License Agreement",
-    },
-    {
-      key: "CECILL-C",
-      name: "CeCILL-C Free Software License Agreement",
-    },
-    {
-      key: "ClArtistic",
-      name: "Clarified Artistic License",
-    },
-    {
-      key: "CPOL-1.02",
-      name: "Code Project Open License 1.02",
-    },
-    {
-      key: "CDDL-1.0",
-      name: "Common Development and Distribution License 1.0",
-    },
-    {
-      key: "CDDL-1.1",
-      name: "Common Development and Distribution License 1.1",
-    },
-    {
-      key: "CPAL-1.0",
-      name: "Common Public Attribution License 1.0",
-    },
-    {
-      key: "CPL-1.0",
-      name: "Common Public License 1.0",
-    },
-    {
-      key: "CDLA-Permissive-1.0",
-      name: "Community Data License Agreement Permissive 1.0",
-    },
-    {
-      key: "CDLA-Sharing-1.0",
-      name: "Community Data License Agreement Sharing 1.0",
-    },
-    {
-      key: "C-UDA-1.0",
-      name: "Computational Use of Data Agreement v1.0",
-    },
-    {
-      key: "CATOSL-1.1",
-      name: "Computer Associates Trusted Open Source License 1.1",
-    },
-    {
-      key: "Condor-1.1",
-      name: "Condor Public License v1.1",
-    },
-    {
-      key: "CC-BY-1.0",
-      name: "Creative Commons Attribution 1.0 Generic",
-    },
-    {
-      key: "CC-BY-2.0",
-      name: "Creative Commons Attribution 2.0 Generic",
-    },
-    {
-      key: "CC-BY-2.5",
-      name: "Creative Commons Attribution 2.5 Generic",
-    },
-    {
-      key: "CC-BY-3.0-AT",
-      name: "Creative Commons Attribution 3.0 Austria",
-    },
-    {
-      key: "CC-BY-3.0-US",
-      name: "Creative Commons Attribution 3.0 United States",
-    },
-    {
-      key: "CC-BY-3.0",
-      name: "Creative Commons Attribution 3.0 Unported",
-    },
-    {
-      key: "CC-BY-4.0",
-      name: "Creative Commons Attribution 4.0 International",
-    },
-    {
-      key: "CC-BY-ND-1.0",
-      name: "Creative Commons Attribution No Derivatives 1.0 Generic",
-    },
-    {
-      key: "CC-BY-ND-2.0",
-      name: "Creative Commons Attribution No Derivatives 2.0 Generic",
-    },
-    {
-      key: "CC-BY-ND-2.5",
-      name: "Creative Commons Attribution No Derivatives 2.5 Generic",
-    },
-    {
-      key: "CC-BY-ND-3.0",
-      name: "Creative Commons Attribution No Derivatives 3.0 Unported",
-    },
-    {
-      key: "CC-BY-ND-4.0",
-      name: "Creative Commons Attribution No Derivatives 4.0 International",
-    },
-    {
-      key: "CC-BY-NC-1.0",
-      name: "Creative Commons Attribution Non Commercial 1.0 Generic",
-    },
-    {
-      key: "CC-BY-NC-2.0",
-      name: "Creative Commons Attribution Non Commercial 2.0 Generic",
-    },
-    {
-      key: "CC-BY-NC-2.5",
-      name: "Creative Commons Attribution Non Commercial 2.5 Generic",
-    },
-    {
-      key: "CC-BY-NC-3.0",
-      name: "Creative Commons Attribution Non Commercial 3.0 Unported",
-    },
-    {
-      key: "CC-BY-NC-4.0",
-      name: "Creative Commons Attribution Non Commercial 4.0 International",
-    },
-    {
-      key: "CC-BY-NC-ND-1.0",
-      name: "Creative Commons Attribution Non Commercial No Derivatives 1.0 Generic",
-    },
-    {
-      key: "CC-BY-NC-ND-2.0",
-      name: "Creative Commons Attribution Non Commercial No Derivatives 2.0 Generic",
-    },
-    {
-      key: "CC-BY-NC-ND-2.5",
-      name: "Creative Commons Attribution Non Commercial No Derivatives 2.5 Generic",
-    },
-    {
-      key: "CC-BY-NC-ND-3.0-IGO",
-      name: "Creative Commons Attribution Non Commercial No Derivatives 3.0 IGO",
-    },
-    {
-      key: "CC-BY-NC-ND-3.0",
-      name: "Creative Commons Attribution Non Commercial No Derivatives 3.0 Unported",
-    },
-    {
-      key: "CC-BY-NC-ND-4.0",
-      name: "Creative Commons Attribution Non Commercial No Derivatives 4.0 International",
-    },
-    {
-      key: "CC-BY-NC-SA-1.0",
-      name: "Creative Commons Attribution Non Commercial Share Alike 1.0 Generic",
-    },
-    {
-      key: "CC-BY-NC-SA-2.0",
-      name: "Creative Commons Attribution Non Commercial Share Alike 2.0 Generic",
-    },
-    {
-      key: "CC-BY-NC-SA-2.5",
-      name: "Creative Commons Attribution Non Commercial Share Alike 2.5 Generic",
-    },
-    {
-      key: "CC-BY-NC-SA-3.0",
-      name: "Creative Commons Attribution Non Commercial Share Alike 3.0 Unported",
-    },
-    {
-      key: "CC-BY-NC-SA-4.0",
-      name: "Creative Commons Attribution Non Commercial Share Alike 4.0 International",
-    },
-    {
-      key: "CC-BY-SA-1.0",
-      name: "Creative Commons Attribution Share Alike 1.0 Generic",
-    },
-    {
-      key: "CC-BY-SA-2.0-UK",
-      name: "Creative Commons Attribution Share Alike 2.0 England and Wales",
-    },
-    {
-      key: "CC-BY-SA-2.0",
-      name: "Creative Commons Attribution Share Alike 2.0 Generic",
-    },
-    {
-      key: "CC-BY-SA-2.1-JP",
-      name: "Creative Commons Attribution Share Alike 2.1 Japan",
-    },
-    {
-      key: "CC-BY-SA-2.5",
-      name: "Creative Commons Attribution Share Alike 2.5 Generic",
-    },
-    {
-      key: "CC-BY-SA-3.0",
-      name: "Creative Commons Attribution Share Alike 3.0 Unported",
-    },
-    {
-      key: "CC-BY-SA-4.0",
-      name: "Creative Commons Attribution Share Alike 4.0 International",
-    },
-    {
-      key: "CC-BY-SA-3.0-AT",
-      name: "Creative Commons Attribution-Share Alike 3.0 Austria",
-    },
-    {
-      key: "CC-PDDC",
-      name: "Creative Commons Public Domain Dedication and Certification",
-    },
-    {
-      key: "CC0-1.0",
-      name: "Creative Commons Zero v1.0 Universal",
-    },
-    {
-      key: "Crossword",
-      name: "Crossword License",
-    },
-    {
-      key: "CAL-1.0",
-      name: "Cryptographic Autonomy License 1.0",
-    },
-    {
-      key: "CAL-1.0-Combined-Work-Exception",
-      name: "Cryptographic Autonomy License 1.0 (Combined Work Exception)",
-    },
-    {
-      key: "CrystalStacker",
-      name: "CrystalStacker License",
-    },
-    {
-      key: "Cube",
-      name: "Cube License",
-    },
-    {
-      key: "DOC",
-      name: "DOC License",
-    },
-    {
-      key: "DSDP",
-      name: "DSDP License",
-    },
-    {
-      key: "DRL-1.0",
-      name: "Detection Rule License 1.0",
-    },
-    {
-      key: "D-FSL-1.0",
-      name: "Deutsche Freie Software Lizenz",
-    },
-    {
-      key: "WTFPL",
-      name: "Do What The F*ck You Want To Public License",
-    },
-    {
-      key: "Dotseqn",
-      name: "Dotseqn License",
-    },
-    {
-      key: "EPICS",
-      name: "EPICS Open License",
-    },
-    {
-      key: "EUDatagrid",
-      name: "EU DataGrid Software License",
-    },
-    {
-      key: "EPL-1.0",
-      name: "Eclipse Public License 1.0",
-    },
-    {
-      key: "EPL-2.0",
-      name: "Eclipse Public License 2.0",
-    },
-    {
-      key: "ECL-1.0",
-      name: "Educational Community License v1.0",
-    },
-    {
-      key: "ECL-2.0",
-      name: "Educational Community License v2.0",
-    },
-    {
-      key: "EFL-1.0",
-      name: "Eiffel Forum License v1.0",
-    },
-    {
-      key: "EFL-2.0",
-      name: "Eiffel Forum License v2.0",
-    },
-    {
-      key: "MIT-advertising",
-      name: "Enlightenment License (e16)",
-    },
-    {
-      key: "Entessa",
-      name: "Entessa Public License v1.0",
-    },
-    {
-      key: "ErlPL-1.1",
-      name: "Erlang Public License v1.1",
-    },
-    {
-      key: "etalab-2.0",
-      name: "Etalab Open License 2.0",
-    },
-    {
-      key: "EUPL-1.0",
-      name: "European Union Public License 1.0",
-    },
-    {
-      key: "EUPL-1.1",
-      name: "European Union Public License 1.1",
-    },
-    {
-      key: "EUPL-1.2",
-      name: "European Union Public License 1.2",
-    },
-    {
-      key: "Eurosym",
-      name: "Eurosym License",
-    },
-    {
-      key: "FSFAP",
-      name: "FSF All Permissive License",
-    },
-    {
-      key: "FSFUL",
-      name: "FSF Unlimited License",
-    },
-    {
-      key: "FSFULLR",
-      name: "FSF Unlimited License (with License Retention)",
-    },
-    {
-      key: "Fair",
-      name: "Fair License",
-    },
-    {
-      key: "Frameworx-1.0",
-      name: "Frameworx Open License 1.0",
-    },
-    {
-      key: "FreeBSD-DOC",
-      name: "FreeBSD Documentation License",
-    },
-    {
-      key: "FreeImage",
-      name: "FreeImage Public License v1.0",
-    },
-    {
-      key: "FTL",
-      name: "Freetype Project License",
-    },
-    {
-      key: "GD",
-      name: "GD License",
-    },
-    {
-      key: "GL2PS",
-      name: "GL2PS License",
-    },
-    {
-      key: "AGPL-3.0",
-      name: "GNU Affero General Public License v3.0",
-    },
-    {
-      key: "AGPL-3.0-only",
-      name: "GNU Affero General Public License v3.0 only",
-    },
-    {
-      key: "AGPL-3.0-or-later",
-      name: "GNU Affero General Public License v3.0 or later",
-    },
-    {
-      key: "AGPL-3.0+",
-      name: "GNU Affero General Public License v3.0 or later",
-    },
-    {
-      key: "GFDL-1.1",
-      name: "GNU Free Documentation License v1.1",
-    },
-    {
-      key: "GFDL-1.1-only",
-      name: "GNU Free Documentation License v1.1 only",
-    },
-    {
-      key: "GFDL-1.1-invariants-only",
-      name: "GNU Free Documentation License v1.1 only - invariants",
-    },
-    {
-      key: "GFDL-1.1-no-invariants-only",
-      name: "GNU Free Documentation License v1.1 only - no invariants",
-    },
-    {
-      key: "GFDL-1.1-or-later",
-      name: "GNU Free Documentation License v1.1 or later",
-    },
-    {
-      key: "GFDL-1.1-invariants-or-later",
-      name: "GNU Free Documentation License v1.1 or later - invariants",
-    },
-    {
-      key: "GFDL-1.1-no-invariants-or-later",
-      name: "GNU Free Documentation License v1.1 or later - no invariants",
-    },
-    {
-      key: "GFDL-1.2",
-      name: "GNU Free Documentation License v1.2",
-    },
-    {
-      key: "GFDL-1.2-only",
-      name: "GNU Free Documentation License v1.2 only",
-    },
-    {
-      key: "GFDL-1.2-invariants-only",
-      name: "GNU Free Documentation License v1.2 only - invariants",
-    },
-    {
-      key: "GFDL-1.2-no-invariants-only",
-      name: "GNU Free Documentation License v1.2 only - no invariants",
-    },
-    {
-      key: "GFDL-1.2-or-later",
-      name: "GNU Free Documentation License v1.2 or later",
-    },
-    {
-      key: "GFDL-1.2-invariants-or-later",
-      name: "GNU Free Documentation License v1.2 or later - invariants",
-    },
-    {
-      key: "GFDL-1.2-no-invariants-or-later",
-      name: "GNU Free Documentation License v1.2 or later - no invariants",
-    },
-    {
-      key: "GFDL-1.3",
-      name: "GNU Free Documentation License v1.3",
-    },
-    {
-      key: "GFDL-1.3-only",
-      name: "GNU Free Documentation License v1.3 only",
-    },
-    {
-      key: "GFDL-1.3-invariants-only",
-      name: "GNU Free Documentation License v1.3 only - invariants",
-    },
-    {
-      key: "GFDL-1.3-no-invariants-only",
-      name: "GNU Free Documentation License v1.3 only - no invariants",
-    },
-    {
-      key: "GFDL-1.3-or-later",
-      name: "GNU Free Documentation License v1.3 or later",
-    },
-    {
-      key: "GFDL-1.3-invariants-or-later",
-      name: "GNU Free Documentation License v1.3 or later - invariants",
-    },
-    {
-      key: "GFDL-1.3-no-invariants-or-later",
-      name: "GNU Free Documentation License v1.3 or later - no invariants",
-    },
-    {
-      key: "GPL-1.0-only",
-      name: "GNU General Public License v1.0 only",
-    },
-    {
-      key: "GPL-1.0",
-      name: "GNU General Public License v1.0 only",
-    },
-    {
-      key: "GPL-1.0-or-later",
-      name: "GNU General Public License v1.0 or later",
-    },
-    {
-      key: "GPL-1.0+",
-      name: "GNU General Public License v1.0 or later",
-    },
-    {
-      key: "GPL-2.0-only",
-      name: "GNU General Public License v2.0 only",
-    },
-    {
-      key: "GPL-2.0",
-      name: "GNU General Public License v2.0 only",
-    },
-    {
-      key: "GPL-2.0-or-later",
-      name: "GNU General Public License v2.0 or later",
-    },
-    {
-      key: "GPL-2.0+",
-      name: "GNU General Public License v2.0 or later",
-    },
-    {
-      key: "GPL-2.0-with-autoconf-exception",
-      name: "GNU General Public License v2.0 w/Autoconf exception",
-    },
-    {
-      key: "GPL-2.0-with-bison-exception",
-      name: "GNU General Public License v2.0 w/Bison exception",
-    },
-    {
-      key: "GPL-2.0-with-classpath-exception",
-      name: "GNU General Public License v2.0 w/Classpath exception",
-    },
-    {
-      key: "GPL-2.0-with-font-exception",
-      name: "GNU General Public License v2.0 w/Font exception",
-    },
-    {
-      key: "GPL-2.0-with-GCC-exception",
-      name: "GNU General Public License v2.0 w/GCC Runtime Library exception",
-    },
-    {
-      key: "GPL-3.0",
-      name: "GNU General Public License v3.0 only",
-    },
-    {
-      key: "GPL-3.0-only",
-      name: "GNU General Public License v3.0 only",
-    },
-    {
-      key: "GPL-3.0+",
-      name: "GNU General Public License v3.0 or later",
-    },
-    {
-      key: "GPL-3.0-or-later",
-      name: "GNU General Public License v3.0 or later",
-    },
-    {
-      key: "GPL-3.0-with-autoconf-exception",
-      name: "GNU General Public License v3.0 w/Autoconf exception",
-    },
-    {
-      key: "GPL-3.0-with-GCC-exception",
-      name: "GNU General Public License v3.0 w/GCC Runtime Library exception",
-    },
-    {
-      key: "LGPL-2.1-only",
-      name: "GNU Lesser General Public License v2.1 only",
-    },
-    {
-      key: "LGPL-2.1",
-      name: "GNU Lesser General Public License v2.1 only",
-    },
-    {
-      key: "LGPL-2.1-or-later",
-      name: "GNU Lesser General Public License v2.1 or later",
-    },
-    {
-      key: "LGPL-3.0-only",
-      name: "GNU Lesser General Public License v3.0 only",
-    },
-    {
-      key: "LGPL-3.0",
-      name: "GNU Lesser General Public License v3.0 only",
-    },
-    {
-      key: "LGPL-3.0-or-later",
-      name: "GNU Lesser General Public License v3.0 or later",
-    },
-    {
-      key: "LGPL-3.0+",
-      name: "GNU Lesser General Public License v3.0 or later",
-    },
-    {
-      key: "LGPL-2.0-only",
-      name: "GNU Library General Public License v2 only",
-    },
-    {
-      key: "LGPL-2.0",
-      name: "GNU Library General Public License v2 only",
-    },
-    {
-      key: "LGPL-2.0-or-later",
-      name: "GNU Library General Public License v2 or later",
-    },
-    {
-      key: "LGPL-2.0+",
-      name: "GNU Library General Public License v2 or later",
-    },
-    {
-      key: "LGPL-2.1+",
-      name: "GNU Library General Public License v2.1 or later",
-    },
-    {
-      key: "Giftware",
-      name: "Giftware License",
-    },
-    {
-      key: "Glulxe",
-      name: "Glulxe License",
-    },
-    {
-      key: "GLWTPL",
-      name: "Good Luck With That Public License",
-    },
-    {
-      key: "HTMLTIDY",
-      name: "HTML Tidy License",
-    },
-    {
-      key: "HaskellReport",
-      name: "Haskell Language Report License",
-    },
-    {
-      key: "Hippocratic-2.1",
-      name: "Hippocratic License 2.1",
-    },
-    {
-      key: "HPND",
-      name: "Historical Permission Notice and Disclaimer",
-    },
-    {
-      key: "HPND-sell-variant",
-      name: "Historical Permission Notice and Disclaimer - sell variant",
-    },
-    {
-      key: "IBM-pibs",
-      name: "IBM PowerPC Initialization and Boot Software",
-    },
-    {
-      key: "IPL-1.0",
-      name: "IBM Public License v1.0",
-    },
-    {
-      key: "ICU",
-      name: "ICU License",
-    },
-    {
-      key: "IPA",
-      name: "IPA Font License",
-    },
-    {
-      key: "ISC",
-      name: "ISC License",
-    },
-    {
-      key: "ImageMagick",
-      name: "ImageMagick License",
-    },
-    {
-      key: "Imlib2",
-      name: "Imlib2 License",
-    },
-    {
-      key: "IJG",
-      name: "Independent JPEG Group License",
-    },
-    {
-      key: "Info-ZIP",
-      name: "Info-ZIP License",
-    },
-    {
-      key: "Intel-ACPI",
-      name: "Intel ACPI Software License Agreement",
-    },
-    {
-      key: "Intel",
-      name: "Intel Open Source License",
-    },
-    {
-      key: "Interbase-1.0",
-      name: "Interbase Public License v1.0",
-    },
-    {
-      key: "JSON",
-      name: "JSON License",
-    },
-    {
-      key: "JPNIC",
-      name: "Japan Network Information Center License",
-    },
-    {
-      key: "JasPer-2.0",
-      name: "JasPer License",
-    },
-    {
-      key: "LPPL-1.0",
-      name: "LaTeX Project Public License v1.0",
-    },
-    {
-      key: "LPPL-1.1",
-      name: "LaTeX Project Public License v1.1",
-    },
-    {
-      key: "LPPL-1.2",
-      name: "LaTeX Project Public License v1.2",
-    },
-    {
-      key: "LPPL-1.3a",
-      name: "LaTeX Project Public License v1.3a",
-    },
-    {
-      key: "LPPL-1.3c",
-      name: "LaTeX Project Public License v1.3c",
-    },
-    {
-      key: "Latex2e",
-      name: "Latex2e License",
-    },
-    {
-      key: "BSD-3-Clause-LBNL",
-      name: "Lawrence Berkeley National Labs BSD variant license",
-    },
-    {
-      key: "Leptonica",
-      name: "Leptonica License",
-    },
-    {
-      key: "LGPLLR",
-      name: "Lesser General Public License For Linguistic Resources",
-    },
-    {
-      key: "LAL-1.2",
-      name: "Licence Art Libre 1.2",
-    },
-    {
-      key: "LAL-1.3",
-      name: "Licence Art Libre 1.3",
-    },
-    {
-      key: "LiLiQ-P-1.1",
-      name: "Licence Libre du Québec – Permissive version 1.1",
-    },
-    {
-      key: "LiLiQ-Rplus-1.1",
-      name: "Licence Libre du Québec – Réciprocité forte version 1.1",
-    },
-    {
-      key: "LiLiQ-R-1.1",
-      name: "Licence Libre du Québec – Réciprocité version 1.1",
-    },
-    {
-      key: "Linux-OpenIB",
-      name: "Linux Kernel Variant of OpenIB.org license",
-    },
-    {
-      key: "LPL-1.0",
-      name: "Lucent Public License Version 1.0",
-    },
-    {
-      key: "LPL-1.02",
-      name: "Lucent Public License v1.02",
-    },
-    {
-      key: "MITNFA",
-      name: "MIT +no-false-attribs license",
-    },
-    {
-      key: "MIT",
-      name: "MIT License",
-    },
-    {
-      key: "MIT-Modern-Variant",
-      name: "MIT License Modern Variant",
-    },
-    {
-      key: "MIT-0",
-      name: "MIT No Attribution",
-    },
-    {
-      key: "MIT-open-group",
-      name: "MIT Open Group variant",
-    },
-    {
-      key: "MakeIndex",
-      name: "MakeIndex License",
-    },
-    {
-      key: "MTLL",
-      name: "Matrix Template Library License",
-    },
-    {
-      key: "MS-PL",
-      name: "Microsoft Public License",
-    },
-    {
-      key: "MS-RL",
-      name: "Microsoft Reciprocal License",
-    },
-    {
-      key: "Motosoto",
-      name: "Motosoto License",
-    },
-    {
-      key: "MPL-1.0",
-      name: "Mozilla Public License 1.0",
-    },
-    {
-      key: "MPL-1.1",
-      name: "Mozilla Public License 1.1",
-    },
-    {
-      key: "MPL-2.0",
-      name: "Mozilla Public License 2.0",
-    },
-    {
-      key: "MPL-2.0-no-copyleft-exception",
-      name: "Mozilla Public License 2.0 (no copyleft exception)",
-    },
-    {
-      key: "MulanPSL-1.0",
-      name: "Mulan Permissive Software License, Version 1",
-    },
-    {
-      key: "MulanPSL-2.0",
-      name: "Mulan Permissive Software License, Version 2",
-    },
-    {
-      key: "Multics",
-      name: "Multics License",
-    },
-    {
-      key: "Mup",
-      name: "Mup License",
-    },
-    {
-      key: "NASA-1.3",
-      name: "NASA Open Source Agreement 1.3",
-    },
-    {
-      key: "NIST-PD",
-      name: "NIST Public Domain Notice",
-    },
-    {
-      key: "NIST-PD-fallback",
-      name: "NIST Public Domain Notice with license fallback",
-    },
-    {
-      key: "NRL",
-      name: "NRL License",
-    },
-    {
-      key: "NTP",
-      name: "NTP License",
-    },
-    {
-      key: "NTP-0",
-      name: "NTP No Attribution",
-    },
-    {
-      key: "NAIST-2003",
-      name: "Nara Institute of Science and Technology License (2003)",
-    },
-    {
-      key: "Naumen",
-      name: "Naumen Public License",
-    },
-    {
-      key: "NBPL-1.0",
-      name: "Net Boolean Public License v1",
-    },
-    {
-      key: "Net-SNMP",
-      name: "Net-SNMP License",
-    },
-    {
-      key: "NetCDF",
-      name: "NetCDF license",
-    },
-    {
-      key: "NGPL",
-      name: "Nethack General Public License",
-    },
-    {
-      key: "NOSL",
-      name: "Netizen Open Source License",
-    },
-    {
-      key: "NPL-1.0",
-      name: "Netscape Public License v1.0",
-    },
-    {
-      key: "NPL-1.1",
-      name: "Netscape Public License v1.1",
-    },
-    {
-      key: "Newsletr",
-      name: "Newsletr License",
-    },
-    {
-      key: "NLPL",
-      name: "No Limit Public License",
-    },
-    {
-      key: "Nokia",
-      name: "Nokia Open Source License",
-    },
-    {
-      key: "NCGL-UK-2.0",
-      name: "Non-Commercial Government Licence",
-    },
-    {
-      key: "NPOSL-3.0",
-      name: "Non-Profit Open Software License 3.0",
-    },
-    {
-      key: "NLOD-1.0",
-      name: "Norwegian Licence for Open Government Data",
-    },
-    {
-      key: "Noweb",
-      name: "Noweb License",
-    },
-    {
-      key: "Nunit",
-      name: "Nunit License",
-    },
-    {
-      key: "OCLC-2.0",
-      name: "OCLC Research Public License 2.0",
-    },
-    {
-      key: "OGC-1.0",
-      name: "OGC Software License, Version 1.0",
-    },
-    {
-      key: "OSET-PL-2.1",
-      name: "OSET Public License version 2.1",
-    },
-    {
-      key: "OCCT-PL",
-      name: "Open CASCADE Technology Public License",
-    },
-    {
-      key: "ODC-By-1.0",
-      name: "Open Data Commons Attribution License v1.0",
-    },
-    {
-      key: "ODbL-1.0",
-      name: "Open Data Commons Open Database License v1.0",
-    },
-    {
-      key: "PDDL-1.0",
-      name: "Open Data Commons Public Domain Dedication & License 1.0",
-    },
-    {
-      key: "OGL-Canada-2.0",
-      name: "Open Government Licence - Canada",
-    },
-    {
-      key: "OGL-UK-1.0",
-      name: "Open Government Licence v1.0",
-    },
-    {
-      key: "OGL-UK-2.0",
-      name: "Open Government Licence v2.0",
-    },
-    {
-      key: "OGL-UK-3.0",
-      name: "Open Government Licence v3.0",
-    },
-    {
-      key: "OGTSL",
-      name: "Open Group Test Suite License",
-    },
-    {
-      key: "OLDAP-2.2.2",
-      name: "Open LDAP Public License 2.2.2",
-    },
-    {
-      key: "OLDAP-1.1",
-      name: "Open LDAP Public License v1.1",
-    },
-    {
-      key: "OLDAP-1.2",
-      name: "Open LDAP Public License v1.2",
-    },
-    {
-      key: "OLDAP-1.3",
-      name: "Open LDAP Public License v1.3",
-    },
-    {
-      key: "OLDAP-1.4",
-      name: "Open LDAP Public License v1.4",
-    },
-    {
-      key: "OLDAP-2.0",
-      name: "Open LDAP Public License v2.0 (or possibly 2.0A and 2.0B)",
-    },
-    {
-      key: "OLDAP-2.0.1",
-      name: "Open LDAP Public License v2.0.1",
-    },
-    {
-      key: "OLDAP-2.1",
-      name: "Open LDAP Public License v2.1",
-    },
-    {
-      key: "OLDAP-2.2",
-      name: "Open LDAP Public License v2.2",
-    },
-    {
-      key: "OLDAP-2.2.1",
-      name: "Open LDAP Public License v2.2.1",
-    },
-    {
-      key: "OLDAP-2.3",
-      name: "Open LDAP Public License v2.3",
-    },
-    {
-      key: "OLDAP-2.4",
-      name: "Open LDAP Public License v2.4",
-    },
-    {
-      key: "OLDAP-2.5",
-      name: "Open LDAP Public License v2.5",
-    },
-    {
-      key: "OLDAP-2.6",
-      name: "Open LDAP Public License v2.6",
-    },
-    {
-      key: "OLDAP-2.7",
-      name: "Open LDAP Public License v2.7",
-    },
-    {
-      key: "OLDAP-2.8",
-      name: "Open LDAP Public License v2.8",
-    },
-    {
-      key: "OML",
-      name: "Open Market License",
-    },
-    {
-      key: "OPL-1.0",
-      name: "Open Public License v1.0",
-    },
-    {
-      key: "OSL-1.0",
-      name: "Open Software License 1.0",
-    },
-    {
-      key: "OSL-1.1",
-      name: "Open Software License 1.1",
-    },
-    {
-      key: "OSL-2.0",
-      name: "Open Software License 2.0",
-    },
-    {
-      key: "OSL-2.1",
-      name: "Open Software License 2.1",
-    },
-    {
-      key: "OSL-3.0",
-      name: "Open Software License 3.0",
-    },
-    {
-      key: "O-UDA-1.0",
-      name: "Open Use of Data Agreement v1.0",
-    },
-    {
-      key: "OpenSSL",
-      name: "OpenSSL License",
-    },
-    {
-      key: "Other Open Source",
-      name: "Other Open Source",
-    },
-    {
-      key: "PHP-3.0",
-      name: "PHP License v3.0",
-    },
-    {
-      key: "PHP-3.01",
-      name: "PHP License v3.01",
-    },
-    {
-      key: "libpng-2.0",
-      name: "PNG Reference Library version 2",
-    },
-    {
-      key: "Plexus",
-      name: "Plexus Classworlds License",
-    },
-    {
-      key: "PolyForm-Noncommercial-1.0.0",
-      name: "PolyForm Noncommercial License 1.0.0",
-    },
-    {
-      key: "PolyForm-Small-Business-1.0.0",
-      name: "PolyForm Small Business License 1.0.0",
-    },
-    {
-      key: "PostgreSQL",
-      name: "PostgreSQL License",
-    },
-    {
-      key: "Proprietary",
-      name: "Proprietary",
-    },
-    {
-      key: "Python-2.0",
-      name: "Python License 2.0",
-    },
-    {
-      key: "PSF-2.0",
-      name: "Python Software Foundation License 2.0",
-    },
-    {
-      key: "QPL-1.0",
-      name: "Q Public License 1.0",
-    },
-    {
-      key: "Qhull",
-      name: "Qhull License",
-    },
-    {
-      key: "RSA-MD",
-      name: "RSA Message-Digest License",
-    },
-    {
-      key: "Rdisc",
-      name: "Rdisc License",
-    },
-    {
-      key: "RPSL-1.0",
-      name: "RealNetworks Public Source License v1.0",
-    },
-    {
-      key: "RPL-1.1",
-      name: "Reciprocal Public License 1.1",
-    },
-    {
-      key: "RPL-1.5",
-      name: "Reciprocal Public License 1.5",
-    },
-    {
-      key: "RHeCos-1.1",
-      name: "Red Hat eCos Public License v1.1",
-    },
-    {
-      key: "RSCPL",
-      name: "Ricoh Source Code Public License",
-    },
-    {
-      key: "Ruby",
-      name: "Ruby License",
-    },
-    {
-      key: "SCEA",
-      name: "SCEA Shared Source License",
-    },
-    {
-      key: "SGI-B-1.0",
-      name: "SGI Free Software License B v1.0",
-    },
-    {
-      key: "SGI-B-1.1",
-      name: "SGI Free Software License B v1.1",
-    },
-    {
-      key: "SGI-B-2.0",
-      name: "SGI Free Software License B v2.0",
-    },
-    {
-      key: "OFL-1.0",
-      name: "SIL Open Font License 1.0",
-    },
-    {
-      key: "OFL-1.0-RFN",
-      name: "SIL Open Font License 1.0 with Reserved Font Name",
-    },
-    {
-      key: "OFL-1.0-no-RFN",
-      name: "SIL Open Font License 1.0 with no Reserved Font Name",
-    },
-    {
-      key: "OFL-1.1",
-      name: "SIL Open Font License 1.1",
-    },
-    {
-      key: "OFL-1.1-RFN",
-      name: "SIL Open Font License 1.1 with Reserved Font Name",
-    },
-    {
-      key: "OFL-1.1-no-RFN",
-      name: "SIL Open Font License 1.1 with no Reserved Font Name",
-    },
-    {
-      key: "SNIA",
-      name: "SNIA Public License 1.1",
-    },
-    {
-      key: "blessing",
-      name: "SQLite Blessing",
-    },
-    {
-      key: "SSH-OpenSSH",
-      name: "SSH OpenSSH license",
-    },
-    {
-      key: "SSH-short",
-      name: "SSH short notice",
-    },
-    {
-      key: "SAX-PD",
-      name: "Sax Public Domain Notice",
-    },
-    {
-      key: "Saxpath",
-      name: "Saxpath License",
-    },
-    {
-      key: "SWL",
-      name: "Scheme Widget Library (SWL) Software License Agreement",
-    },
-    {
-      key: "SMPPL",
-      name: "Secure Messaging Protocol Public License",
-    },
-    {
-      key: "Sendmail",
-      name: "Sendmail License",
-    },
-    {
-      key: "Sendmail-8.23",
-      name: "Sendmail License 8.23",
-    },
-    {
-      key: "SSPL-1.0",
-      name: "Server Side Public License, v 1",
-    },
-    {
-      key: "SimPL-2.0",
-      name: "Simple Public License 2.0",
-    },
-    {
-      key: "Sleepycat",
-      name: "Sleepycat License",
-    },
-    {
-      key: "SHL-0.5",
-      name: "Solderpad Hardware License v0.5",
-    },
-    {
-      key: "SHL-0.51",
-      name: "Solderpad Hardware License, Version 0.51",
-    },
-    {
-      key: "Spencer-86",
-      name: "Spencer License 86",
-    },
-    {
-      key: "Spencer-94",
-      name: "Spencer License 94",
-    },
-    {
-      key: "Spencer-99",
-      name: "Spencer License 99",
-    },
-    {
-      key: "SMLNJ",
-      name: "Standard ML of New Jersey License",
-    },
-    {
-      key: "StandardML-NJ",
-      name: "Standard ML of New Jersey License",
-    },
-    {
-      key: "SugarCRM-1.1.3",
-      name: "SugarCRM Public License v1.1.3",
-    },
-    {
-      key: "SISSL",
-      name: "Sun Industry Standards Source License v1.1",
-    },
-    {
-      key: "SISSL-1.2",
-      name: "Sun Industry Standards Source License v1.2",
-    },
-    {
-      key: "SPL-1.0",
-      name: "Sun Public License v1.0",
-    },
-    {
-      key: "Watcom-1.0",
-      name: "Sybase Open Watcom Public License 1.0",
-    },
-    {
-      key: "TAPR-OHL-1.0",
-      name: "TAPR Open Hardware License v1.0",
-    },
-    {
-      key: "TCL",
-      name: "TCL/TK License",
-    },
-    {
-      key: "TCP-wrappers",
-      name: "TCP Wrappers License",
-    },
-    {
-      key: "TMate",
-      name: "TMate Open Source License",
-    },
-    {
-      key: "TORQUE-1.1",
-      name: "TORQUE v2.5+ Software License v1.1",
-    },
-    {
-      key: "OGDL-Taiwan-1.0",
-      name: "Taiwan Open Government Data License, version 1.0",
-    },
-    {
-      key: "TU-Berlin-1.0",
-      name: "Technische Universitaet Berlin License 1.0",
-    },
-    {
-      key: "TU-Berlin-2.0",
-      name: "Technische Universitaet Berlin License 2.0",
-    },
-    {
-      key: "MirOS",
-      name: "The MirOS Licence",
-    },
-    {
-      key: "Parity-6.0.0",
-      name: "The Parity Public License 6.0.0",
-    },
-    {
-      key: "Parity-7.0.0",
-      name: "The Parity Public License 7.0.0",
-    },
-    {
-      key: "Unlicense",
-      name: "The Unlicense",
-    },
-    {
-      key: "TOSL",
-      name: "Trusster Open Source License",
-    },
-    {
-      key: "Unicode-DFS-2015",
-      name: "Unicode License Agreement - Data Files and Software (2015)",
-    },
-    {
-      key: "Unicode-DFS-2016",
-      name: "Unicode License Agreement - Data Files and Software (2016)",
-    },
-    {
-      key: "Unicode-TOU",
-      name: "Unicode Terms of Use",
-    },
-    {
-      key: "UPL-1.0",
-      name: "Universal Permissive License v1.0",
-    },
-    {
-      key: "NCSA",
-      name: "University of Illinois/NCSA Open Source License",
-    },
-    {
-      key: "UCL-1.0",
-      name: "Upstream Compatibility License v1.0",
-    },
-    {
-      key: "VOSTROM",
-      name: "VOSTROM Public License for Open Source",
-    },
-    {
-      key: "Vim",
-      name: "Vim License",
-    },
-    {
-      key: "VSL-1.0",
-      name: "Vovida Software License v1.0",
-    },
-    {
-      key: "W3C-20150513",
-      name: "W3C Software Notice and Document License (2015-05-13)",
-    },
-    {
-      key: "W3C-19980720",
-      name: "W3C Software Notice and License (1998-07-20)",
-    },
-    {
-      key: "W3C",
-      name: "W3C Software Notice and License (2002-12-31)",
-    },
-    {
-      key: "Wsuipa",
-      name: "Wsuipa License",
-    },
-    {
-      key: "Xnet",
-      name: "X.Net License",
-    },
-    {
-      key: "X11",
-      name: "X11 License",
-    },
-    {
-      key: "XFree86-1.1",
-      name: "XFree86 License 1.1",
-    },
-    {
-      key: "xpp",
-      name: "XPP License",
-    },
-    {
-      key: "XSkat",
-      name: "XSkat License",
-    },
-    {
-      key: "Xerox",
-      name: "Xerox License",
-    },
-    {
-      key: "YPL-1.0",
-      name: "Yahoo! Public License v1.0",
-    },
-    {
-      key: "YPL-1.1",
-      name: "Yahoo! Public License v1.1",
-    },
-    {
-      key: "Zed",
-      name: "Zed License",
-    },
-    {
-      key: "Zend-2.0",
-      name: "Zend License v2.0",
-    },
-    {
-      key: "Zimbra-1.3",
-      name: "Zimbra Public License v1.3",
-    },
-    {
-      key: "Zimbra-1.4",
-      name: "Zimbra Public License v1.4",
-    },
-    {
-      key: "ZPL-1.1",
-      name: "Zope Public License 1.1",
-    },
-    {
-      key: "ZPL-2.0",
-      name: "Zope Public License 2.0",
-    },
-    {
-      key: "ZPL-2.1",
-      name: "Zope Public License 2.1",
-    },
-    {
-      key: "bzip2-1.0.5",
-      name: "bzip2 and libbzip2 License v1.0.5",
-    },
-    {
-      key: "bzip2-1.0.6",
-      name: "bzip2 and libbzip2 License v1.0.6",
-    },
-    {
-      key: "copyleft-next-0.3.0",
-      name: "copyleft-next 0.3.0",
-    },
-    {
-      key: "copyleft-next-0.3.1",
-      name: "copyleft-next 0.3.1",
-    },
-    {
-      key: "curl",
-      name: "curl License",
-    },
-    {
-      key: "diffmark",
-      name: "diffmark license",
-    },
-    {
-      key: "dvipdfm",
-      name: "dvipdfm License",
-    },
-    {
-      key: "eCos-2.0",
-      name: "eCos license version 2.0",
-    },
-    {
-      key: "eGenix",
-      name: "eGenix.com Public License 1.1.0",
-    },
-    {
-      key: "MIT-enna",
-      name: "enna License",
-    },
-    {
-      key: "MIT-feh",
-      name: "feh License",
-    },
-    {
-      key: "gSOAP-1.3b",
-      name: "gSOAP Public License v1.3b",
-    },
-    {
-      key: "gnuplot",
-      name: "gnuplot License",
-    },
-    {
-      key: "iMatix",
-      name: "iMatix Standard Function Library Agreement",
-    },
-    {
-      key: "Libpng",
-      name: "libpng License",
-    },
-    {
-      key: "libselinux-1.0",
-      name: "libselinux public domain notice",
-    },
-    {
-      key: "libtiff",
-      name: "libtiff License",
-    },
-    {
-      key: "mpich2",
-      name: "mpich2 License",
-    },
-    {
-      key: "psfrag",
-      name: "psfrag License",
-    },
-    {
-      key: "psutils",
-      name: "psutils License",
-    },
-    {
-      key: "wxWindows",
-      name: "wxWindows Library License",
-    },
-    {
-      key: "xinetd",
-      name: "xinetd License",
-    },
-    {
-      key: "Zlib",
-      name: "zlib License",
-    },
-    {
-      key: "zlib-acknowledgement",
-      name: "zlib/libpng License with Acknowledgement",
-    },
-  ],
-  links: {
-    contact: ["mailto:hello@example.com"],
-    donations: ["https://example.com/donate"],
-    issues: ["https://github.com/issues"],
-    source: ["https://github.com"],
-    website: ["https://example.com", "https://example.com/hey"],
-  },
-  private: false,
-  public_metrics_blacklist: [
-    "weekly_installed_base_by_operating_system_normalized",
-  ],
-  public_metrics_enabled: false,
-  publisher_name: "John Doe",
-  screenshot_urls: [
-    "https://dashboard.snapcraft.io/site_media/appmedia/2022/08/screenshot-yellow_bwcSz5T.jpg",
-    "https://dashboard.snapcraft.io/site_media/appmedia/2022/08/too-big_ASpc8iL.gif",
-    "https://dashboard.snapcraft.io/site_media/appmedia/2023/03/screenshot-green.jpg",
-    "https://dashboard.snapcraft.io/site_media/appmedia/2024/03/screenshot-blue-1709564416.jpg",
-    "https://dashboard.snapcraft.io/site_media/appmedia/2024/06/screenshot-1718185318.jpg",
-  ],
-  snap_categories: {
-    categories: ["health-and-fitness", "music-and-audio"],
-    locked: false,
-  },
-  snap_id: "bv9Q2i9CNAvTjt9wTx1cFC6SAT9YrEfG",
-  snap_name: "test-snap",
-  snap_title: "test-snap",
-  status: "published",
-  summary: "The snap I use for testingd",
-  tour_steps: [
-    {
-      content:
-        "<p>Here you can manage the display of your snap listing within the store.</p>\n<p>We’ll give you a quick tour to get you up to speed!</p>\n",
-      id: "listing-intro",
-      title: "Welcome to your snap listing page!",
-    },
-    {
-      content:
-        "<p>Including an icon will help your snap to stand out making it far more attractive to users browsing graphical interfaces such as snapcraft.io/store and the Snap Store.</p>\n",
-      id: "listing-icon",
-      title: "Icons attract eyes…",
-    },
-    {
-      content:
-        "<p>Adding a meaningful title to your snap listing will help people understand what the purpose of your snap is.</p>\n<p>It's best to use something that aligns with your brand and looks clean. This is your opportunity to replace punctuation with spaces and capitalise.</p>\n",
-      id: "listing-title",
-      title: "Title your snap",
-    },
-    {
-      content:
-        "<p>Categories are used to define the kind of application you have published. Categorising your snap will aid findability within the Store and increase exposure to end users.</p>\n",
-      id: "listing-category",
-      title: "Set your snap category",
-    },
-    {
-      content:
-        "<p>Allow potential users get a better understanding of features and functionality prior to installation. Snaps that utilise a video tend to have a higher number of installs and better user retention.</p>\n",
-      id: "listing-video",
-      title: "Showcase your application with a video",
-    },
-    {
-      content:
-        "<p>Explain your application visually and allow users to see what they will get prior to installation. Data shows that snaps with images tend to have a bigger install base.</p>\n",
-      id: "listing-images",
-      title: "Celebrate key features with images",
-    },
-    {
-      content:
-        "<p>Adding a banner will increase your chances of being featured on snapcraft.io and in GNOME software.</p>\n",
-      id: "listing-banner",
-      title: "Get featured, get installed!",
-    },
-    {
-      content:
-        "<p>Having a relevant and descriptive summary will allow users to get a quick insight into what your snap does. This should mean that you have more target users clicking through to your listing page.</p>\n",
-      id: "listing-summary",
-      title: "Summarise your application",
-    },
-    {
-      content:
-        "<p>Providing a detailed description allows your users to understand the core functionality of your snap. It’s especially useful if it doesn’t have a user interface or if you don’t have any media assets to upload.</p>\n",
-      id: "listing-description",
-      title: "Get into the details with your description",
-    },
-    {
-      content:
-        "<p>Give users the opportunity to learn more about your application and find support when needed.</p>\n<p>Alternatively, you can add an email address if you prefer direct contact.</p>\n",
-      id: "listing-contact",
-      position: "top-left",
-      title: "Feeling sociable? Add your contact information",
-    },
-    {
-      content:
-        "<p>If you ever need more help just look for the tour icon.</p>\n",
-      id: "tour-end",
-      position: "top-right",
-      title: "That’s it for now!",
-    },
-  ],
-  update_metadata_on_release: false,
-  username: "steverydz",
-  video_urls: ["https://www.youtube.com/watch?v=oTahLEX3NXos"],
-  website: "https://steverydz.com",
-};
diff --git a/static/js/publisher/listing/components/CategoriesInput/CategoriesInput.test.tsx b/static/js/publisher/listing/components/CategoriesInput/CategoriesInput.test.tsx
deleted file mode 100644
index cba65ee1aa..0000000000
--- a/static/js/publisher/listing/components/CategoriesInput/CategoriesInput.test.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import { render, screen, fireEvent } from "@testing-library/react";
-import "@testing-library/jest-dom";
-
-import CategoriesInput from "./CategoriesInput";
-
-const props = {
-  register: jest.fn(),
-  getFieldState: () => {
-    return {
-      invalid: false,
-    };
-  },
-  primaryCategory: "productivity",
-  secondaryCategory: "",
-  setValue: jest.fn(),
-  categories: [
-    { slug: "development", name: "Development" },
-    { slug: "education", name: "Education" },
-    { slug: "finance", name: "Finance" },
-    { slug: "productivity", name: "Productivity" },
-    { slug: "security", name: "Security" },
-  ],
-};
-
-jest.mock("nanoid", () => {
-  return { nanoid: () => `abcd-${Math.random() * (999 - 100 + 1) + 100}` };
-});
-
-test("the correct primary category is selected", () => {
-  render(<CategoriesInput {...props} />);
-  expect(screen.getByRole("combobox", { name: "Category:" })).toHaveValue(
-    "productivity"
-  );
-});
-
-test("the correct secondary category is selected", () => {
-  render(<CategoriesInput {...props} secondaryCategory="development" />);
-  expect(
-    screen.getByRole("combobox", { name: "Second category:" })
-  ).toHaveValue("development");
-});
-
-test("the primary category option is disabled in the secondary field", () => {
-  render(<CategoriesInput {...props} secondaryCategory="development" />);
-  expect(
-    screen
-      .getByRole("combobox", { name: "Second category:" })
-      .querySelector("option[value='productivity']")
-  ).toBeDisabled();
-});
-
-test("the secondary category option is disabled in the primary field", () => {
-  render(<CategoriesInput {...props} secondaryCategory="development" />);
-  expect(
-    screen
-      .getByRole("combobox", { name: "Category:" })
-      .querySelector("option[value='development']")
-  ).toBeDisabled();
-});
-
-test("the second category field is not present if no second category", () => {
-  render(<CategoriesInput {...props} />);
-  expect(
-    screen.queryByRole("combobox", { name: "Second category:" })
-  ).not.toBeInTheDocument();
-});
-
-test("the second category field is present if there is second category", () => {
-  render(<CategoriesInput {...props} secondaryCategory="development" />);
-  expect(
-    screen.getByRole("combobox", { name: "Second category:" })
-  ).toBeInTheDocument();
-});
-
-test("the add category button adds the second category field", () => {
-  render(<CategoriesInput {...props} />);
-
-  expect(
-    screen.queryByRole("combobox", { name: "Second category:" })
-  ).not.toBeInTheDocument();
-
-  fireEvent.click(screen.getByTestId("add-category-button"));
-
-  expect(
-    screen.getByRole("combobox", { name: "Second category:" })
-  ).toBeInTheDocument();
-});
-
-test("the remove category button removes the second category field", () => {
-  render(<CategoriesInput {...props} secondaryCategory="development" />);
-
-  expect(
-    screen.getByRole("combobox", { name: "Second category:" })
-  ).toBeInTheDocument();
-
-  fireEvent.click(screen.getByTestId("delete-category-button"));
-
-  expect(
-    screen.queryByRole("combobox", { name: "Second category:" })
-  ).not.toBeInTheDocument();
-});
diff --git a/static/js/publisher/listing/components/CategoriesInput/CategoriesInput.tsx b/static/js/publisher/listing/components/CategoriesInput/CategoriesInput.tsx
deleted file mode 100644
index 8078006a3f..0000000000
--- a/static/js/publisher/listing/components/CategoriesInput/CategoriesInput.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-import { useState, useEffect } from "react";
-import { nanoid } from "nanoid";
-import { Row, Col, Button, Icon } from "@canonical/react-components";
-
-type Props = {
-  register: Function;
-  getFieldState: Function;
-  primaryCategory: string;
-  secondaryCategory: string;
-  setValue: Function;
-  categories: Array<{
-    slug: string;
-    name: string;
-  }>;
-};
-
-function CategoriesInput({
-  categories,
-  register,
-  getFieldState,
-  setValue,
-  primaryCategory,
-  secondaryCategory,
-}: Props) {
-  const primaryCategoryFieldId = nanoid();
-  const primaryCategoryFieldState = getFieldState
-    ? getFieldState("primary-category")
-    : "";
-
-  const secondaryCategoryFieldId = nanoid();
-  const secondaryCategoryFieldState = getFieldState
-    ? getFieldState("secondary-category")
-    : "";
-
-  const [showSecondCategoryField, setShowSecondCategoryField] = useState(
-    secondaryCategory ? true : false
-  );
-
-  useEffect(() => {
-    setShowSecondCategoryField(secondaryCategory ? true : false);
-  }, [secondaryCategory]);
-
-  return (
-    <>
-      <Row
-        className={`p-form__group ${
-          primaryCategoryFieldState.invalid && "p-form-validation is-error"
-        }`}
-      >
-        <Col size={2} data-tour="listing-category">
-          <label htmlFor={primaryCategoryFieldId} className="p-form__label">
-            Category:
-          </label>
-        </Col>
-        <Col size={5}>
-          <div className="p-form__control" data-tour="listing-category">
-            <select
-              name="primary-category"
-              id={primaryCategoryFieldId}
-              {...register("primary-category")}
-              defaultValue={primaryCategory}
-            >
-              <option value="">Select a category</option>
-              {categories.map((category) => (
-                <option
-                  key={category.slug}
-                  value={category.slug}
-                  disabled={category.slug === secondaryCategory}
-                >
-                  {category.name}
-                </option>
-              ))}
-              <option value="">None</option>
-            </select>
-          </div>
-          {!showSecondCategoryField && (
-            <>
-              <Button
-                appearance="link"
-                onClick={() => {
-                  setShowSecondCategoryField(true);
-                }}
-                data-testid="add-category-button"
-              >
-                +&nbsp;Add another category
-              </Button>
-              <p className="p-form-help-text">
-                If your snap fits into multiple categories you can select
-                another.
-              </p>
-            </>
-          )}
-        </Col>
-      </Row>
-      {showSecondCategoryField && (
-        <Row
-          className={`p-form__group ${
-            secondaryCategoryFieldState.invalid && "p-form-validation is-error"
-          }`}
-        >
-          <Col size={2}>
-            <label htmlFor={secondaryCategoryFieldId} className="p-form__label">
-              Second category:
-            </label>
-          </Col>
-          <Col size={5}>
-            <div className="p-form__control">
-              <select
-                name="secondary-category"
-                id={secondaryCategoryFieldId}
-                {...register("secondary-category")}
-                defaultValue={secondaryCategory}
-              >
-                <option value="">Select a category</option>
-                {categories.map((category) => (
-                  <option
-                    key={category.slug}
-                    value={category.slug}
-                    disabled={category.slug === primaryCategory}
-                  >
-                    {category.name}
-                  </option>
-                ))}
-                <option value="">None</option>
-              </select>
-            </div>
-          </Col>
-          <Col size={2}>
-            <Button
-              appearance="base"
-              onClick={() => {
-                setValue("secondary-category", "", {
-                  shouldDirty:
-                    secondaryCategoryFieldState.isDirty || secondaryCategory,
-                });
-                setShowSecondCategoryField(false);
-              }}
-              data-testid="delete-category-button"
-            >
-              <Icon name="delete">Delete second category</Icon>
-            </Button>
-          </Col>
-        </Row>
-      )}
-    </>
-  );
-}
-
-export default CategoriesInput;
diff --git a/static/js/publisher/listing/components/CategoriesInput/index.ts b/static/js/publisher/listing/components/CategoriesInput/index.ts
deleted file mode 100644
index a937aaee87..0000000000
--- a/static/js/publisher/listing/components/CategoriesInput/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./CategoriesInput";
diff --git a/static/js/publisher/listing/components/ContactInformation/ContactFields.tsx b/static/js/publisher/listing/components/ContactInformation/ContactFields.tsx
new file mode 100644
index 0000000000..2d9a235cc5
--- /dev/null
+++ b/static/js/publisher/listing/components/ContactInformation/ContactFields.tsx
@@ -0,0 +1,101 @@
+import {
+  Control,
+  FieldValues,
+  useFieldArray,
+  UseFormGetValues,
+  UseFormRegister,
+} from "react-hook-form";
+import { Row, Col, Button, Icon } from "@canonical/react-components";
+
+type Props = {
+  register: UseFormRegister<FieldValues>;
+  control: Control<FieldValues>;
+  labelName: string;
+  fieldName: string;
+  getValues: UseFormGetValues<FieldValues>;
+};
+
+function ContactFields({
+  register,
+  control,
+  labelName,
+  fieldName,
+  getValues,
+}: Props): JSX.Element {
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: fieldName,
+  });
+
+  return (
+    <>
+      {fields.length === 0 && (
+        <Row className="p-form__group">
+          <Col size={2}>
+            <label htmlFor={fieldName}>{labelName}:</label>
+          </Col>
+          <Col size={5}>
+            <Button
+              type="button"
+              appearance="link"
+              onClick={() => {
+                append({ url: "" });
+              }}
+            >
+              +&nbsp;Add field
+            </Button>
+          </Col>
+        </Row>
+      )}
+
+      {fields.map((field, index) => (
+        <Row className="p-form__group" key={field.id}>
+          {index === 0 && (
+            <Col size={2}>
+              <label htmlFor={fieldName}>{labelName}:</label>
+            </Col>
+          )}
+          <Col size={5} emptyLarge={index === 0 ? undefined : 3}>
+            <div className="p-form__control">
+              <input
+                type="url"
+                {...register(`${fieldName}.${index}.url`)}
+                defaultValue={getValues(`${fieldName}.${index}.url`)}
+              />
+            </div>
+          </Col>
+          <Col size={2}>
+            <Button
+              type="button"
+              appearance="base"
+              onClick={() => {
+                remove(index);
+              }}
+            >
+              <Icon name="delete" />
+              <span className="u-off-screen">Remove this link</span>
+            </Button>
+          </Col>
+        </Row>
+      ))}
+
+      {fields.length > 0 && (
+        <Row>
+          <Col size={5} emptyLarge={3}>
+            <Button
+              type="button"
+              appearance="link"
+              onClick={() => {
+                append({ url: "" });
+              }}
+            >
+              +&nbsp;Add field
+            </Button>
+          </Col>
+        </Row>
+      )}
+    </>
+  );
+}
+
+export default ContactFields;
diff --git a/static/js/publisher/listing/components/ContactInformation/ContactInformation.tsx b/static/js/publisher/listing/components/ContactInformation/ContactInformation.tsx
new file mode 100644
index 0000000000..99e040663d
--- /dev/null
+++ b/static/js/publisher/listing/components/ContactInformation/ContactInformation.tsx
@@ -0,0 +1,83 @@
+import {
+  Control,
+  UseFormRegister,
+  FieldValues,
+  UseFormGetFieldState,
+  UseFormGetValues,
+} from "react-hook-form";
+
+import PrimaryDomainInput from "./PrimaryDomainInput";
+import ContactFields from "./ContactFields";
+
+import type { Data } from "../../types";
+
+type Props = {
+  data: Data;
+  register: UseFormRegister<FieldValues>;
+  control: Control<FieldValues>;
+  getFieldState: UseFormGetFieldState<FieldValues>;
+  getValues: UseFormGetValues<FieldValues>;
+};
+
+function ContactInformation({
+  data,
+  register,
+  control,
+  getFieldState,
+  getValues,
+}: Props): JSX.Element {
+  return (
+    <>
+      <h2 className="p-heading--4">Contact information</h2>
+
+      <PrimaryDomainInput
+        data={data}
+        register={register}
+        getFieldState={getFieldState}
+        getValues={getValues}
+      />
+
+      <ContactFields
+        register={register}
+        control={control}
+        labelName="Other websites"
+        fieldName="websites"
+        getValues={getValues}
+      />
+
+      <ContactFields
+        register={register}
+        control={control}
+        labelName="Contacts"
+        fieldName="contacts"
+        getValues={getValues}
+      />
+
+      <ContactFields
+        register={register}
+        control={control}
+        labelName="Donations"
+        fieldName="donations"
+        getValues={getValues}
+      />
+
+      <ContactFields
+        register={register}
+        control={control}
+        labelName="Source code"
+        fieldName="source_code"
+        getValues={getValues}
+      />
+
+      <ContactFields
+        register={register}
+        control={control}
+        labelName="Issues"
+        fieldName="issues"
+        getValues={getValues}
+      />
+    </>
+  );
+}
+
+export default ContactInformation;
diff --git a/static/js/publisher/listing/components/PrimaryDomainInput/PrimaryDomainInput.tsx b/static/js/publisher/listing/components/ContactInformation/PrimaryDomainInput.tsx
similarity index 90%
rename from static/js/publisher/listing/components/PrimaryDomainInput/PrimaryDomainInput.tsx
rename to static/js/publisher/listing/components/ContactInformation/PrimaryDomainInput.tsx
index 02e6669ebb..025c67d9c1 100644
--- a/static/js/publisher/listing/components/PrimaryDomainInput/PrimaryDomainInput.tsx
+++ b/static/js/publisher/listing/components/ContactInformation/PrimaryDomainInput.tsx
@@ -1,30 +1,38 @@
 import { useState } from "react";
+import { useParams } from "react-router-dom";
+import {
+  UseFormRegister,
+  UseFormGetFieldState,
+  UseFormGetValues,
+  FieldValues,
+} from "react-hook-form";
 import { nanoid } from "nanoid";
 import { Row, Col, Modal } from "@canonical/react-components";
 
 import { useVerified } from "../../hooks";
 
+import type { Data } from "../../types";
+
 type Props = {
-  snapName: string | undefined;
-  register: Function;
-  getFieldState: Function;
-  getValues: Function;
-  formState: { [key: string]: any };
+  data: Data;
+  register: UseFormRegister<FieldValues>;
+  getFieldState: UseFormGetFieldState<FieldValues>;
+  getValues: UseFormGetValues<FieldValues>;
 };
 
 function PrimaryDomainInput({
-  snapName,
+  data,
   register,
   getFieldState,
   getValues,
-  formState,
 }: Props) {
+  const { snapName } = useParams();
   const id = nanoid();
   const fieldState = getFieldState("primary_website");
   const [showVerifyModal, setShowVerifyModal] = useState(false);
-  const { isLoading, status, data } = useVerified(snapName);
+  const { isLoading, status, data: verifiedData } = useVerified(snapName);
   const domain = getValues("primary_website");
-  const defaultDomain = formState.defaultValues.primary_website;
+  const defaultDomain = data.primary_website;
   const verificationToken = `SNAPCRAFT_IO_VERIFICATION=${window.DNS_VERIFICATION_TOKEN}`;
 
   const noPathDomains = [
@@ -111,7 +119,7 @@ function PrimaryDomainInput({
         <Col size={5}>
           <div className="p-form__control">
             <input
-              type={"url"}
+              type="url"
               id={id}
               className="p-form-validation__input"
               {...register("primary_website")}
@@ -121,7 +129,7 @@ function PrimaryDomainInput({
         <Col size={5}>
           {!isLoading && status === "success" && data && (
             <>
-              {data.primary_domain && (
+              {verifiedData.primary_domain && (
                 <>
                   {fieldState.isDirty && (
                     <>
@@ -130,11 +138,7 @@ function PrimaryDomainInput({
                         domainInNoPathList() && (
                           <>
                             Unable to verify{" "}
-                            <strong>
-                              {getHostname(
-                                formState.defaultValues.primary_website
-                              )}
-                            </strong>{" "}
+                            <strong>{getHostname(data.primary_website)}</strong>{" "}
                             with a path
                           </>
                         )}
@@ -196,7 +200,7 @@ function PrimaryDomainInput({
 
               {defaultDomain &&
                 getValues("primary_website") &&
-                !data.primary_domain && (
+                !verifiedData.primary_domain && (
                   <button
                     type="button"
                     className="p-button has-icon"
diff --git a/static/js/publisher/listing/components/PrimaryDomainInput/__tests__/PrimaryDomainInput.test.tsx b/static/js/publisher/listing/components/ContactInformation/__tests__/PrimaryDomainInput.test.tsx
similarity index 87%
rename from static/js/publisher/listing/components/PrimaryDomainInput/__tests__/PrimaryDomainInput.test.tsx
rename to static/js/publisher/listing/components/ContactInformation/__tests__/PrimaryDomainInput.test.tsx
index a9504c735c..0c350f8929 100644
--- a/static/js/publisher/listing/components/PrimaryDomainInput/__tests__/PrimaryDomainInput.test.tsx
+++ b/static/js/publisher/listing/components/ContactInformation/__tests__/PrimaryDomainInput.test.tsx
@@ -7,6 +7,10 @@ import "@testing-library/jest-dom";
 
 import PrimaryDomainInput from "../PrimaryDomainInput";
 
+import { mockData } from "../../../test-utils";
+
+import type { Data } from "../../../types";
+
 window.DNS_VERIFICATION_TOKEN = "abc123";
 
 jest.mock("react-query", () => ({
@@ -32,14 +36,11 @@ const mockUseFormReturnValue = {
     isDirty: false,
   }),
   getValues: jest.fn().mockReturnValue("https://example.com"),
-  formState: {
-    defaultValues: { primary_website: "https://example.com" },
-  },
 };
 
-const renderComponent = (defaultValues: { [key: string]: any }) => {
+const renderComponent = (data: Data, defaultValues: { [key: string]: any }) => {
   const Component = () => {
-    const { register, getFieldState, getValues, formState } = useForm({
+    const { register, getFieldState, getValues } = useForm({
       defaultValues,
       mode: "onChange",
     });
@@ -49,11 +50,10 @@ const renderComponent = (defaultValues: { [key: string]: any }) => {
     return (
       <QueryClientProvider client={queryClient}>
         <PrimaryDomainInput
-          snapName="test-snap"
           register={register}
           getFieldState={getFieldState}
           getValues={getValues}
-          formState={formState}
+          data={data}
         />
       </QueryClientProvider>
     );
@@ -71,7 +71,7 @@ describe("PrimaryDomainInput", () => {
     // @ts-ignore
     useForm.mockImplementation(() => mockUseFormReturnValue);
 
-    renderComponent({ primary_website: "https://example.com" });
+    renderComponent(mockData, { primary_website: "https://example.com" });
     expect(screen.getByText("Verified ownership")).toBeInTheDocument();
   });
 
@@ -92,7 +92,7 @@ describe("PrimaryDomainInput", () => {
     useForm.mockImplementation(() => mockUseFormReturnValue);
 
     const user = userEvent.setup();
-    renderComponent({ primary_website: "https://example.com" });
+    renderComponent(mockData, { primary_website: "https://example.com" });
     const input = screen.getByRole("textbox", { name: "Primary website:" });
     await user.type(input, "https://example.comabc");
     expect(input).toHaveValue("https://example.comabc");
@@ -120,7 +120,7 @@ describe("PrimaryDomainInput", () => {
     useForm.mockImplementation(() => mockUseFormReturnValue);
 
     const user = userEvent.setup();
-    renderComponent({ primary_website: "https://example.com" });
+    renderComponent(mockData, { primary_website: "https://example.com" });
     const input = screen.getByRole("textbox", { name: "Primary website:" });
     await user.clear(input);
     await user.type(input, "/path");
@@ -133,10 +133,6 @@ describe("PrimaryDomainInput", () => {
     // @ts-ignore
     useQuery.mockImplementation(() => mockUseQueryReturnValue);
 
-    mockUseFormReturnValue.formState = {
-      defaultValues: { primary_website: "https://launchpad.net" },
-    };
-
     mockUseFormReturnValue.getValues = jest
       .fn()
       .mockReturnValue("https://launchpad.net/path");
@@ -144,7 +140,10 @@ describe("PrimaryDomainInput", () => {
     // @ts-ignore
     useForm.mockImplementation(() => mockUseFormReturnValue);
     const user = userEvent.setup();
-    renderComponent({ primary_website: "https://launchpad.net" });
+    renderComponent(
+      { ...mockData, primary_website: "https://launchpad.net" },
+      { primary_website: "https://launchpad.net" }
+    );
     await user.type(
       screen.getByRole("textbox", { name: "Primary website:" }),
       "/path"
@@ -167,7 +166,7 @@ describe("PrimaryDomainInput", () => {
     useForm.mockImplementation(() => mockUseFormReturnValue);
 
     const user = userEvent.setup();
-    renderComponent({ primary_website: "https://example.com" });
+    renderComponent(mockData, { primary_website: "https://example.com" });
     await user.click(
       screen.getByRole("button", { name: "Verified ownership" })
     );
@@ -188,7 +187,7 @@ describe("PrimaryDomainInput", () => {
     // @ts-ignore
     useForm.mockImplementation(() => mockUseFormReturnValue);
 
-    renderComponent({ primary_website: "https://example.com" });
+    renderComponent(mockData, { primary_website: "https://example.com" });
     expect(screen.queryByText("Verified ownership")).not.toBeInTheDocument();
     expect(
       screen.getByRole("button", { name: "Verify ownership" })
@@ -210,7 +209,7 @@ describe("PrimaryDomainInput", () => {
     useForm.mockImplementation(() => mockUseFormReturnValue);
 
     const user = userEvent.setup();
-    renderComponent({ primary_website: "https://example.com" });
+    renderComponent(mockData, { primary_website: "https://example.com" });
     await user.click(screen.getByRole("button", { name: "Verify ownership" }));
     expect(
       screen.getByRole("heading", { level: 2, name: "Verify ownership" })
@@ -235,7 +234,7 @@ describe("PrimaryDomainInput", () => {
     useForm.mockImplementation(() => mockUseFormReturnValue);
 
     const user = userEvent.setup();
-    renderComponent({ primary_website: "https://example.com" });
+    renderComponent(mockData, { primary_website: "https://example.com" });
     expect(
       screen.getByRole("button", { name: "Verify ownership" })
     ).toBeDisabled();
diff --git a/static/js/publisher/listing/components/ContactInformation/index.ts b/static/js/publisher/listing/components/ContactInformation/index.ts
new file mode 100644
index 0000000000..295dd9bdaf
--- /dev/null
+++ b/static/js/publisher/listing/components/ContactInformation/index.ts
@@ -0,0 +1 @@
+export { default } from "./ContactInformation";
diff --git a/static/js/publisher/listing/components/ImageUpload/index.ts b/static/js/publisher/listing/components/ImageUpload/index.ts
deleted file mode 100644
index c7b55abb41..0000000000
--- a/static/js/publisher/listing/components/ImageUpload/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./ImageUpload";
diff --git a/static/js/publisher/listing/components/LicenseInputs/index.ts b/static/js/publisher/listing/components/LicenseInputs/index.ts
deleted file mode 100644
index 79dc5bdc61..0000000000
--- a/static/js/publisher/listing/components/LicenseInputs/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./LicenseInputs";
diff --git a/static/js/publisher/listing/components/ListingDescriptionField/ListingDescriptionField.tsx b/static/js/publisher/listing/components/ListingDescriptionField/ListingDescriptionField.tsx
deleted file mode 100644
index 2809e39319..0000000000
--- a/static/js/publisher/listing/components/ListingDescriptionField/ListingDescriptionField.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { useState } from "react";
-import { nanoid } from "nanoid";
-import { Row, Col, Button } from "@canonical/react-components";
-
-type Props = {
-  register: Function;
-  getFieldState: Function;
-};
-
-function ListingDescriptionField({ register, getFieldState }: Props) {
-  const id = nanoid();
-  const fieldState = getFieldState ? getFieldState("description") : "";
-  const [showMarkdownGuide, setShowMarkdownGuide] = useState(false);
-
-  return (
-    <Row
-      className={`p-form__group ${
-        fieldState.invalid && "p-form-validation is-error"
-      }`}
-    >
-      <Col size={2} data-tour="listing-description">
-        <label htmlFor={id} className="p-form__label">
-          Description:
-        </label>
-      </Col>
-      <Col size={8}>
-        <div className="p-form__control">
-          <textarea
-            data-tour="listing-description"
-            id={id}
-            className="p-form-validation__input"
-            rows={10}
-            {...register("description", { required: true })}
-          />
-        </div>
-        <p className="p-form-help-text u-no-margin--bottom">
-          <Button
-            type="button"
-            appearance="link"
-            small={true}
-            className="u-no-padding--left u-no-padding--right"
-            onClick={() => {
-              setShowMarkdownGuide(!showMarkdownGuide);
-            }}
-          >
-            Show supported markdown syntax
-          </Button>
-        </p>
-        {showMarkdownGuide && (
-          <Row>
-            <Col size={4}>
-              <p>
-                <small>
-                  <strong>Bold</strong>: <code>**Foo**</code>
-                </small>
-              </p>
-              <p>
-                <small>
-                  <strong>URLs</strong>: <code>https://foo.bar</code>
-                </small>
-              </p>
-              <p>
-                <small>
-                  <strong>Lists</strong>: <code>* Foo</code>
-                </small>
-              </p>
-            </Col>
-            <Col size={4}>
-              <p>
-                <small>
-                  <strong>Italics</strong>: <code>_Foo_</code>
-                </small>
-              </p>
-              <p>
-                <small>
-                  <strong>Code</strong>: Text indented with 3 spaces of inside{" "}
-                  <code>`</code>
-                </small>
-              </p>
-            </Col>
-          </Row>
-        )}
-      </Col>
-    </Row>
-  );
-}
-
-export default ListingDescriptionField;
diff --git a/static/js/publisher/listing/components/ListingDescriptionField/index.ts b/static/js/publisher/listing/components/ListingDescriptionField/index.ts
deleted file mode 100644
index ff147c65dd..0000000000
--- a/static/js/publisher/listing/components/ListingDescriptionField/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./ListingDescriptionField";
diff --git a/static/js/publisher/listing/components/ImageUpload/ImageUpload.tsx b/static/js/publisher/listing/components/ListingDetails/ImageUpload.tsx
similarity index 94%
rename from static/js/publisher/listing/components/ImageUpload/ImageUpload.tsx
rename to static/js/publisher/listing/components/ListingDetails/ImageUpload.tsx
index f99831501d..b9b224cc1d 100644
--- a/static/js/publisher/listing/components/ImageUpload/ImageUpload.tsx
+++ b/static/js/publisher/listing/components/ListingDetails/ImageUpload.tsx
@@ -1,4 +1,5 @@
 import { useState, SyntheticEvent } from "react";
+import { UseFormRegister, UseFormSetValue, FieldValues } from "react-hook-form";
 import { nanoid } from "nanoid";
 import {
   Row,
@@ -8,16 +9,12 @@ import {
   Icon,
 } from "@canonical/react-components";
 
-import {
-  validateImageDimensions,
-  validateAspectRatio,
-  formatFileSize,
-} from "../../utils";
+import { validateImageDimensions } from "../../utils";
 
 type Props = {
   imageUrl: string | null;
-  register: Function;
-  setValue: Function;
+  register: UseFormRegister<FieldValues>;
+  setValue: UseFormSetValue<FieldValues>;
   validationSchema: {
     maxFileSize: number;
     minWidth: number;
@@ -41,6 +38,25 @@ type Props = {
   hasDarkThemePreview?: boolean;
 };
 
+function validateAspectRatio(
+  width: number,
+  height: number,
+  ratio: { width: number; height: number }
+): boolean {
+  const aspectRatio = ratio.width / ratio.height;
+  const expectedHeight = width / aspectRatio;
+
+  return expectedHeight === height;
+}
+
+function formatFileSize(fileSize: number): string {
+  if (fileSize < 1000000) {
+    return `${fileSize / 1000}kB`;
+  }
+
+  return `${fileSize / 1000000}MB`;
+}
+
 function ImageUpload({
   imageUrl,
   register,
diff --git a/static/js/publisher/listing/components/ListingDetails/ListingDetails.tsx b/static/js/publisher/listing/components/ListingDetails/ListingDetails.tsx
new file mode 100644
index 0000000000..96b5f3c39a
--- /dev/null
+++ b/static/js/publisher/listing/components/ListingDetails/ListingDetails.tsx
@@ -0,0 +1,320 @@
+import { useState } from "react";
+import {
+  UseFormRegister,
+  UseFormGetValues,
+  UseFormSetValue,
+  FieldValues,
+  Control,
+} from "react-hook-form";
+import { Row, Col, Button, Icon } from "@canonical/react-components";
+
+import ImageUpload from "./ImageUpload";
+import Screenshots from "./Screenshots";
+
+import type { Data } from "../../types";
+
+type Props = {
+  data: Data;
+  register: UseFormRegister<FieldValues>;
+  getValues: UseFormGetValues<FieldValues>;
+  setValue: UseFormSetValue<FieldValues>;
+  control: Control<FieldValues>;
+};
+
+function ListingDetails({
+  data,
+  register,
+  getValues,
+  setValue,
+  control,
+}: Props): JSX.Element {
+  const [showSupportedMarkdownSyntax, setShowSupportedMarkdownSyntax] =
+    useState<boolean>(false);
+
+  const [hasSecondaryCategory, setHasSecondCategory] = useState<boolean>(
+    data.secondary_category ? true : false
+  );
+
+  const showSecondaryCategory = (): boolean => {
+    if (getValues("secondary_category") !== "") {
+      return true;
+    }
+
+    return hasSecondaryCategory;
+  };
+
+  return (
+    <>
+      <h2 className="p-heading--4">Listing details</h2>
+
+      <ImageUpload
+        imageUrl={data.icon_url}
+        register={register}
+        setValue={setValue}
+        validationSchema={{
+          maxFileSize: 256000,
+          minWidth: 40,
+          maxWidth: 512,
+          minHeight: 40,
+          maxHeight: 512,
+          fileTypes: "PNG, JPEG & SVG",
+          aspectRatio: {
+            width: 1,
+            height: 1,
+          },
+        }}
+        label="Snap icon"
+        imageUrlFieldKey="icon_url"
+        imageFieldKey="icon"
+        previewWidth={120}
+        previewHeight={120}
+        fileTypes="image/png, image/jpeg, image/svg+xml"
+        tourLabel="listing-icon"
+        hasDarkThemePreview={true}
+      />
+
+      <Row className="p-form__group">
+        <Col size={2} data-tour="listing-title">
+          <label htmlFor="title" className="p-form__label">
+            Title:
+          </label>
+        </Col>
+        <Col size={8}>
+          <div className="p-form__control" data-tour="listing-title">
+            <input
+              type="text"
+              id="title"
+              defaultValue={data.title}
+              {...register("title", { required: true })}
+            />
+          </div>
+        </Col>
+      </Row>
+
+      <Row className="p-form__group">
+        <Col size={2} data-tour="listing-category">
+          <label htmlFor="primary_category" className="p-form__label">
+            Category:
+          </label>
+        </Col>
+        <Col size={5}>
+          <div className="p-form__control" data-tour="listing-category">
+            <select
+              id="primary_category"
+              defaultValue={data.primary_category}
+              {...register("primary_category", { required: true })}
+            >
+              {data.categories.map((category) => (
+                <option
+                  value={category.slug}
+                  key={category.slug}
+                  disabled={category.slug === getValues("secondary_category")}
+                >
+                  {category.name}
+                </option>
+              ))}
+            </select>
+          </div>
+        </Col>
+      </Row>
+
+      {showSecondaryCategory() && (
+        <Row className="p-form__group">
+          <Col size={2}>
+            <label htmlFor="secondary_category" className="p-form__label">
+              Secondary category:
+            </label>
+          </Col>
+          <Col size={5}>
+            <div className="p-form__control">
+              <select
+                id="secondary_category"
+                defaultValue={data.secondary_category || ""}
+                {...register("secondary_category", { required: true })}
+              >
+                <option value="">Select a category</option>
+                {data.categories.map((category) => (
+                  <option
+                    value={category.slug}
+                    key={category.slug}
+                    disabled={category.slug === getValues("primary_category")}
+                  >
+                    {category.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </Col>
+          <Col size={2}>
+            <Button
+              type="button"
+              appearance="base"
+              onClick={() => {
+                setValue("secondary_category", "", {
+                  shouldDirty: data.secondary_category !== "",
+                });
+                setHasSecondCategory(false);
+              }}
+            >
+              <Icon name="delete" />
+              <span className="u-off-screen">Remove secondary category</span>
+            </Button>
+          </Col>
+        </Row>
+      )}
+
+      {!showSecondaryCategory() && (
+        <Row className="p-form__group">
+          <Col size={5} emptyLarge={3}>
+            <Button
+              type="button"
+              appearance="link"
+              className="u-no-margin--bottom"
+              onClick={() => {
+                setHasSecondCategory(true);
+              }}
+            >
+              +&nbsp;Add another category
+            </Button>
+            <p>
+              <small className="u-text-muted">
+                If your snap fits into multiple categories you can select
+                another.
+              </small>
+            </p>
+          </Col>
+        </Row>
+      )}
+
+      <Row className="p-form__group" data-tour="listing-video">
+        <Col size={2}>
+          <label htmlFor="video_urls">Video:</label>
+        </Col>
+        <Col size={8}>
+          <div className="p-form__control" data-tour="listing-video">
+            <input
+              type="url"
+              id="video_urls"
+              defaultValue={data.video_urls}
+              {...register("video_urls")}
+            />
+          </div>
+        </Col>
+      </Row>
+
+      <Screenshots
+        register={register}
+        control={control}
+        getValues={getValues}
+        setValue={setValue}
+      />
+
+      <ImageUpload
+        imageUrl={data.banner_urls[0]}
+        register={register}
+        setValue={setValue}
+        validationSchema={{
+          maxFileSize: 2000000,
+          minWidth: 720,
+          maxWidth: 4320,
+          minHeight: 240,
+          maxHeight: 1440,
+          fileTypes: "JPEG & PNG files",
+          aspectRatio: {
+            width: 3,
+            height: 1,
+          },
+        }}
+        label="Featured banner"
+        imageUrlFieldKey="banner_urls"
+        imageFieldKey="banner"
+        previewWidth={720}
+        previewHeight={240}
+        fileTypes="image/png, image/jpeg"
+        helpText="Adding a featured banner will increase your chances of being featured on snapcraft.io and in GNOME software but does not immediately make you eligible to be featured."
+        tourLabel="listing-banner"
+      />
+
+      <Row className="p-form__group">
+        <Col size={2} data-tour="listing-summary">
+          <label htmlFor="video_urls">Summary:</label>
+        </Col>
+        <Col size={8}>
+          <div className="p-form__control" data-tour="listing-summary">
+            <input
+              type="text"
+              id="summary"
+              defaultValue={data.summary}
+              {...register("summary", { required: true })}
+            />
+          </div>
+        </Col>
+      </Row>
+
+      <Row className="p-form__group" data-tour="listing-description">
+        <Col size={2}>
+          <label htmlFor="video_urls">Description:</label>
+        </Col>
+        <Col size={8}>
+          <div className="p-form__control">
+            <textarea
+              data-tour="listing-description"
+              id="description"
+              defaultValue={data.description}
+              rows={10}
+              {...register("description", { required: true })}
+            />
+          </div>
+          <Button
+            appearance="link"
+            type="button"
+            onClick={() => {
+              setShowSupportedMarkdownSyntax(!showSupportedMarkdownSyntax);
+            }}
+          >
+            <small>
+              {showSupportedMarkdownSyntax ? "Hide" : "Show"} supported markdown
+              syntax
+            </small>
+          </Button>
+          {showSupportedMarkdownSyntax && (
+            <Row>
+              <Col size={4}>
+                <p>
+                  <small>
+                    <strong>Bold</strong>: <code>**Foo**</code>
+                  </small>
+                </p>
+                <p>
+                  <small>
+                    <strong>URLs</strong>: <code>https://foo.bar</code>
+                  </small>
+                </p>
+                <p>
+                  <small>
+                    <strong>Lists</strong>: <code>* Foo</code>
+                  </small>
+                </p>
+              </Col>
+              <Col size={4}>
+                <p>
+                  <small>
+                    <strong>Italics</strong>: <code>_Foo_</code>
+                  </small>
+                </p>
+                <p>
+                  <small>
+                    <strong>Code</strong>: Text indented with 3 spaces of{" "}
+                  </small>
+                  <code>`</code> inside
+                </p>
+              </Col>
+            </Row>
+          )}
+        </Col>
+      </Row>
+    </>
+  );
+}
+
+export default ListingDetails;
diff --git a/static/js/publisher/listing/components/Screenshots/Screenshot.tsx b/static/js/publisher/listing/components/ListingDetails/Screenshot.tsx
similarity index 100%
rename from static/js/publisher/listing/components/Screenshots/Screenshot.tsx
rename to static/js/publisher/listing/components/ListingDetails/Screenshot.tsx
diff --git a/static/js/publisher/listing/components/Screenshots/ScreenshotList.tsx b/static/js/publisher/listing/components/ListingDetails/ScreenshotList.tsx
similarity index 100%
rename from static/js/publisher/listing/components/Screenshots/ScreenshotList.tsx
rename to static/js/publisher/listing/components/ListingDetails/ScreenshotList.tsx
diff --git a/static/js/publisher/listing/components/Screenshots/Screenshots.tsx b/static/js/publisher/listing/components/ListingDetails/Screenshots.tsx
similarity index 100%
rename from static/js/publisher/listing/components/Screenshots/Screenshots.tsx
rename to static/js/publisher/listing/components/ListingDetails/Screenshots.tsx
diff --git a/static/js/publisher/listing/components/ListingDetails/index.ts b/static/js/publisher/listing/components/ListingDetails/index.ts
new file mode 100644
index 0000000000..2a02662e5d
--- /dev/null
+++ b/static/js/publisher/listing/components/ListingDetails/index.ts
@@ -0,0 +1 @@
+export { default } from "./ListingDetails";
diff --git a/static/js/publisher/listing/components/ListingForm/ListingForm.tsx b/static/js/publisher/listing/components/ListingForm/ListingForm.tsx
new file mode 100644
index 0000000000..1f2dd2ba53
--- /dev/null
+++ b/static/js/publisher/listing/components/ListingForm/ListingForm.tsx
@@ -0,0 +1,204 @@
+import { useState, useEffect } from "react";
+import { useParams } from "react-router-dom";
+import { useForm, useFormState, FieldValues } from "react-hook-form";
+import { Strip, Notification } from "@canonical/react-components";
+
+import SaveAndPreview from "../../../shared/SaveAndPreview";
+import ListingDetails from "../ListingDetails";
+import ContactInformation from "../ContactInformation";
+import AdditionalInformation from "../AdditionalInformation";
+import PreviewForm from "../PreviewForm";
+import UpdateMetadataModal from "../../../shared/UpdateMetadataModal";
+
+import { shouldShowUpdateMetadataWarning, getDefaultData } from "../../utils";
+import { initListingTour } from "../../../tour";
+
+import { useMutateListingData } from "../../hooks";
+
+import type { Data } from "../../types";
+
+type Props = {
+  data: Data;
+  refetch: Function;
+};
+
+function ListingForm({ data, refetch }: Props): JSX.Element {
+  const { snapName } = useParams();
+
+  const {
+    register,
+    reset,
+    formState,
+    getValues,
+    setValue,
+    control,
+    getFieldState,
+    handleSubmit,
+    watch,
+  } = useForm<FieldValues>({
+    defaultValues: getDefaultData(data),
+  });
+
+  const { dirtyFields } = useFormState({ control });
+
+  const [showSuccessNotification, setShowSuccessNotification] =
+    useState<boolean>(false);
+
+  const [updateMetadataOnRelease, setUpdateMetadataOnRelease] =
+    useState<boolean>(data.update_metadata_on_release);
+
+  const [showMetadataWarningModal, setShowMetadataWarningModal] =
+    useState<boolean>(false);
+
+  const [formValues, setFormValues] = useState<{ [key: string]: any } | null>(
+    null
+  );
+
+  const { mutate, isLoading } = useMutateListingData({
+    data,
+    dirtyFields,
+    getDefaultData,
+    refetch,
+    reset,
+    setShowSuccessNotification,
+    setUpdateMetadataOnRelease,
+    shouldShowUpdateMetadataWarning,
+    snapName,
+  });
+
+  useEffect(() => {
+    const tourContainer = document.getElementById(
+      "tour-container"
+    ) as HTMLElement;
+
+    if (snapName) {
+      initListingTour({
+        snapName,
+        container: tourContainer,
+        formFields: {
+          title: data.title,
+          snap_name: snapName,
+          categories: [],
+          video_urls: [],
+          images: [],
+          summary: data.summary,
+          website: [],
+          contact: [],
+        },
+        steps: data.tour_steps,
+      });
+    }
+  }, []);
+
+  return (
+    <>
+      <form
+        className="p-form"
+        onSubmit={handleSubmit((values: any) => {
+          if (
+            data.update_metadata_on_release &&
+            shouldShowUpdateMetadataWarning(dirtyFields)
+          ) {
+            setFormValues(values);
+            setShowMetadataWarningModal(true);
+          } else {
+            mutate(values);
+          }
+        })}
+      >
+        <SaveAndPreview
+          snapName={snapName}
+          isDirty={formState.isDirty}
+          reset={reset}
+          isSaving={isLoading}
+          isValid={formState.isValid}
+          showPreview={true}
+        />
+
+        {updateMetadataOnRelease && (
+          <>
+            <Strip shallow className="u-no-padding--bottom">
+              <div className="u-fixed-width">
+                <Notification severity="caution">
+                  Information here was automatically updated to the latest
+                  version of the snapcraft.yaml released to the stable channel.{" "}
+                  <a
+                    className="p-link--external"
+                    href="/docs/snapcraft-top-level-metadata"
+                  >
+                    Learn more
+                  </a>
+                  .
+                </Notification>
+              </div>
+            </Strip>
+
+            {showMetadataWarningModal ? (
+              <UpdateMetadataModal
+                setShowMetadataWarningModal={setShowMetadataWarningModal}
+                submitForm={mutate}
+                formData={formValues}
+              />
+            ) : null}
+          </>
+        )}
+
+        {showSuccessNotification && (
+          <Strip shallow className="u-no-padding--bottom">
+            <Notification
+              severity="positive"
+              onDismiss={() => {
+                setShowSuccessNotification(false);
+              }}
+              className="u-no-margin--bottom"
+            >
+              Changes applied successfully.
+            </Notification>
+          </Strip>
+        )}
+
+        <Strip shallow>
+          <ListingDetails
+            data={data}
+            register={register}
+            getValues={getValues}
+            setValue={setValue}
+            control={control}
+          />
+
+          <Strip shallow>
+            <div className="u-fixed-width">
+              <hr className="u-no-margin--bottom" />
+            </div>
+          </Strip>
+
+          <ContactInformation
+            data={data}
+            register={register}
+            control={control}
+            getFieldState={getFieldState}
+            getValues={getValues}
+          />
+
+          <Strip shallow>
+            <div className="u-fixed-width">
+              <hr className="u-no-margin--bottom" />
+            </div>
+          </Strip>
+
+          <AdditionalInformation
+            data={data}
+            register={register}
+            getValues={getValues}
+            setValue={setValue}
+            watch={watch}
+          />
+        </Strip>
+      </form>
+      {snapName && <PreviewForm snapName={snapName} getValues={getValues} />}
+      <div id="tour-container" />
+    </>
+  );
+}
+
+export default ListingForm;
diff --git a/static/js/publisher/listing/components/ListingForm/index.ts b/static/js/publisher/listing/components/ListingForm/index.ts
new file mode 100644
index 0000000000..5fc6554bc0
--- /dev/null
+++ b/static/js/publisher/listing/components/ListingForm/index.ts
@@ -0,0 +1 @@
+export { default } from "./ListingForm";
diff --git a/static/js/publisher/listing/components/ListingFormInput/ListingFormInput.tsx b/static/js/publisher/listing/components/ListingFormInput/ListingFormInput.tsx
deleted file mode 100644
index 1d7444306b..0000000000
--- a/static/js/publisher/listing/components/ListingFormInput/ListingFormInput.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { nanoid } from "nanoid";
-import { Row, Col } from "@canonical/react-components";
-
-type Props = {
-  label: string;
-  maxLength?: number;
-  name: string;
-  register: Function;
-  required?: boolean;
-  helpText?: string;
-  type?: "text" | "email" | "url";
-  placeholder?: string;
-  getFieldState: Function;
-  pattern?: RegExp;
-  tourLabel: string;
-};
-
-function ListingFormInput({
-  label,
-  maxLength,
-  name,
-  register,
-  required,
-  helpText,
-  type,
-  placeholder,
-  getFieldState,
-  pattern,
-  tourLabel,
-}: Props) {
-  const id = nanoid();
-  const fieldState = getFieldState ? getFieldState(name) : "";
-
-  return (
-    <Row
-      className={`p-form__group ${
-        fieldState.invalid && "p-form-validation is-error"
-      }`}
-    >
-      <Col size={2} data-tour={tourLabel}>
-        <label htmlFor={id} className="p-form__label">
-          {label}:
-        </label>
-      </Col>
-      <Col size={8}>
-        <div className="p-form__control">
-          <input
-            data-tour={tourLabel}
-            type={type || "text"}
-            id={id}
-            className="p-form-validation__input"
-            maxLength={maxLength || 256}
-            placeholder={placeholder}
-            {...register(name, { required, pattern: { value: pattern } })}
-          />
-          {helpText && <p className="p-form-help-text">{helpText}</p>}
-        </div>
-      </Col>
-    </Row>
-  );
-}
-
-export default ListingFormInput;
diff --git a/static/js/publisher/listing/components/ListingFormInput/index.ts b/static/js/publisher/listing/components/ListingFormInput/index.ts
deleted file mode 100644
index 377b33a73b..0000000000
--- a/static/js/publisher/listing/components/ListingFormInput/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./ListingFormInput";
diff --git a/static/js/publisher/listing/components/MetricsInputs/MetricsInputs.test.tsx b/static/js/publisher/listing/components/MetricsInputs/MetricsInputs.test.tsx
deleted file mode 100644
index 62109fc9d0..0000000000
--- a/static/js/publisher/listing/components/MetricsInputs/MetricsInputs.test.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import "@testing-library/jest-dom";
-
-import MetricsInputs from "./MetricsInputs";
-
-const props = {
-  register: jest.fn(),
-  setValue: jest.fn(),
-  getValues: jest.fn(),
-  defaultPublicMetricsBlacklist: [],
-};
-
-jest.mock("nanoid", () => {
-  return { nanoid: () => `abcd-${Math.random() * (999 - 100 + 1) + 100}` };
-});
-
-test("public metrics are not enabled", () => {
-  render(<MetricsInputs {...props} />);
-  expect(
-    screen.getByRole("checkbox", { name: "Display public popularity charts" })
-  ).not.toBeChecked();
-});
-
-test("world map field is disabled", () => {
-  render(
-    <MetricsInputs {...props} getValues={jest.fn().mockReturnValue(false)} />
-  );
-  expect(screen.getByRole("checkbox", { name: "World map" })).toBeDisabled();
-});
-
-test("Linux distros field is disabled", () => {
-  render(<MetricsInputs {...props} />);
-  expect(
-    screen.getByRole("checkbox", { name: "Linux distributions" })
-  ).toBeDisabled();
-});
-
-test("world map field not to be checked if value is in blacklist", () => {
-  render(
-    <MetricsInputs
-      {...props}
-      defaultPublicMetricsBlacklist={["installed_base_by_country_percent"]}
-    />
-  );
-  expect(screen.getByRole("checkbox", { name: "World map" })).not.toBeChecked();
-});
-
-test("Linux distributions field to be checked if value is not in blacklist", () => {
-  render(<MetricsInputs {...props} />);
-  expect(
-    screen.getByRole("checkbox", { name: "Linux distributions" })
-  ).toBeChecked();
-});
-
-test("Linux distributions field not to be checked if value is in blacklist", () => {
-  render(
-    <MetricsInputs
-      {...props}
-      defaultPublicMetricsBlacklist={[
-        "weekly_installed_base_by_operating_system_normalized",
-      ]}
-    />
-  );
-  expect(
-    screen.getByRole("checkbox", { name: "Linux distributions" })
-  ).not.toBeChecked();
-});
diff --git a/static/js/publisher/listing/components/MetricsInputs/MetricsInputs.tsx b/static/js/publisher/listing/components/MetricsInputs/MetricsInputs.tsx
deleted file mode 100644
index 7f99d7f3dd..0000000000
--- a/static/js/publisher/listing/components/MetricsInputs/MetricsInputs.tsx
+++ /dev/null
@@ -1,205 +0,0 @@
-import { useState, useEffect, SyntheticEvent } from "react";
-import { nanoid } from "nanoid";
-import { Row, Col } from "@canonical/react-components";
-
-type Props = {
-  register: Function;
-  setValue: Function;
-  defaultPublicMetricsBlacklist: Array<string>;
-  getValues: Function;
-};
-
-function MetricsInputs({
-  register,
-  setValue,
-  getValues,
-  defaultPublicMetricsBlacklist,
-}: Props) {
-  const [publicMetricsBlacklist, setPublicMetricsBlacklist] = useState(
-    defaultPublicMetricsBlacklist
-  );
-
-  const [publicMetricsDistros, setPublicMetricsDistros] = useState(
-    publicMetricsBlacklist.includes(
-      "weekly_installed_base_by_operating_system_normalized"
-    )
-  );
-
-  const displayPublicChartsInputId = nanoid();
-  const worldMapInputId = nanoid();
-  const linuxDistributionInputId = nanoid();
-
-  const updatePublicMetricsBlacklist = (
-    fieldName: string,
-    isChecked: boolean
-  ) => {
-    const newPublicMetricsBlacklist: Array<string> = Array.prototype.concat(
-      publicMetricsBlacklist
-    );
-
-    if (fieldName === "public_metrics_territories") {
-      if (
-        !newPublicMetricsBlacklist.includes(
-          "installed_base_by_country_percent"
-        ) &&
-        !isChecked
-      ) {
-        setPublicMetricsBlacklist(
-          newPublicMetricsBlacklist.concat([
-            "installed_base_by_country_percent",
-          ])
-        );
-      }
-
-      if (
-        newPublicMetricsBlacklist.includes(
-          "installed_base_by_country_percent"
-        ) &&
-        isChecked
-      ) {
-        setPublicMetricsBlacklist(
-          newPublicMetricsBlacklist.filter(
-            (d) => d !== "installed_base_by_country_percent"
-          )
-        );
-      }
-    }
-
-    if (fieldName === "public_metrics_distros") {
-      if (
-        !newPublicMetricsBlacklist.includes(
-          "weekly_installed_base_by_operating_system_normalized"
-        ) &&
-        !isChecked
-      ) {
-        setPublicMetricsBlacklist(
-          newPublicMetricsBlacklist.concat([
-            "weekly_installed_base_by_operating_system_normalized",
-          ])
-        );
-      }
-
-      if (
-        newPublicMetricsBlacklist.includes(
-          "weekly_installed_base_by_operating_system_normalized"
-        ) &&
-        isChecked
-      ) {
-        setPublicMetricsBlacklist(
-          newPublicMetricsBlacklist.filter(
-            (d) => d !== "weekly_installed_base_by_operating_system_normalized"
-          )
-        );
-      }
-    }
-  };
-
-  useEffect(() => {
-    setValue("public_metrics_blacklist", publicMetricsBlacklist, {
-      shouldDirty: true,
-    });
-  }, [publicMetricsBlacklist]);
-
-  return (
-    <>
-      <Row>
-        <Col size={2}>
-          <p>Metrics:</p>
-        </Col>
-        <Col size={8}>
-          <p className="u-no-margin--bottom">
-            <label className="p-checkbox">
-              <input
-                type="checkbox"
-                aria-labelledby={displayPublicChartsInputId}
-                className="p-checkbox__input"
-                name="public_metrics_enabled"
-                {...register("public_metrics_enabled")}
-              />
-              <span
-                className="p-checkbox__label"
-                id={displayPublicChartsInputId}
-              >
-                Display public popularity charts
-              </span>
-            </label>
-          </p>
-          <div className="p-nested-inputs">
-            <p className="u-no-margin--bottom u-no-padding--top">
-              <label className="p-checkbox">
-                <input
-                  type="checkbox"
-                  aria-labelledby={worldMapInputId}
-                  className="p-checkbox__input"
-                  name="public_metrics_territories"
-                  disabled={!getValues("public_metrics_enabled")}
-                  {...register("public_metrics_territories", {
-                    onChange: (
-                      e: SyntheticEvent<HTMLInputElement> & {
-                        target: HTMLInputElement;
-                      }
-                    ) => {
-                      updatePublicMetricsBlacklist(
-                        e.target.name,
-                        e.target.checked
-                      );
-                    },
-                  })}
-                />
-                <span className="p-checkbox__label" id={worldMapInputId}>
-                  World map
-                </span>
-              </label>
-              <small className="u-text-muted">
-                Displays where your snap is being used by country
-              </small>
-            </p>
-            <p>
-              <label className="p-checkbox">
-                <input
-                  type="checkbox"
-                  aria-labelledby={linuxDistributionInputId}
-                  className="p-checkbox__input"
-                  name="public_metrics_distros"
-                  defaultChecked={!publicMetricsDistros}
-                  disabled={!getValues("public_metrics_enabled")}
-                  {...register("public_metrics_distros", {
-                    onChange: (
-                      e: SyntheticEvent<HTMLInputElement> & {
-                        target: HTMLInputElement;
-                      }
-                    ) => {
-                      setPublicMetricsDistros(!e.target.checked);
-                      updatePublicMetricsBlacklist(
-                        e.target.name,
-                        e.target.checked
-                      );
-                    },
-                  })}
-                />
-                <span
-                  className="p-checkbox__label"
-                  id={linuxDistributionInputId}
-                >
-                  Linux distributions
-                </span>
-              </label>
-              <small className="u-text-muted">
-                Displays where your snap is being used by distro
-              </small>
-            </p>
-          </div>
-
-          <input
-            type="hidden"
-            name="public_metrics_blacklist"
-            value={publicMetricsBlacklist}
-            {...register("public_metrics_blacklist")}
-          />
-        </Col>
-      </Row>
-    </>
-  );
-}
-
-export default MetricsInputs;
diff --git a/static/js/publisher/listing/components/MetricsInputs/index.ts b/static/js/publisher/listing/components/MetricsInputs/index.ts
deleted file mode 100644
index a0a258435b..0000000000
--- a/static/js/publisher/listing/components/MetricsInputs/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./MetricsInputs";
diff --git a/static/js/publisher/listing/components/MultipleInputs/MultipleInputs.tsx b/static/js/publisher/listing/components/MultipleInputs/MultipleInputs.tsx
deleted file mode 100644
index 65359f4e4d..0000000000
--- a/static/js/publisher/listing/components/MultipleInputs/MultipleInputs.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { useFieldArray } from "react-hook-form";
-import { Row, Col, Button, Icon } from "@canonical/react-components";
-
-import UrlInput from "../UrlInput";
-
-type Props = {
-  fieldName: string;
-  label: string;
-  register: Function;
-  control: any;
-  getFieldState: Function;
-};
-
-function MultipleInputs({
-  fieldName,
-  label,
-  register,
-  control,
-  getFieldState,
-}: Props) {
-  const { fields, append, remove } = useFieldArray({
-    control,
-    name: fieldName,
-  });
-
-  const urlFieldNames = ["websites", "donations", "source-code", "issues"];
-  const isUrl = urlFieldNames.includes(fieldName);
-
-  return (
-    <Row className="p-form__group">
-      <Col size={2}>
-        <label className="p-form__label">{label}:</label>
-      </Col>
-      <Col size={8}>
-        {fields.map((field, index) => (
-          <Row key={field.id}>
-            <Col size={5}>
-              {isUrl ? (
-                <UrlInput
-                  fieldName={fieldName}
-                  index={index}
-                  register={register}
-                  getFieldState={getFieldState}
-                />
-              ) : (
-                <div className="p-form__control">
-                  <input
-                    type="text"
-                    {...register(`${fieldName}.${index}.url`, {
-                      required: true,
-                    })}
-                  />
-                </div>
-              )}
-            </Col>
-            <Col size={2}>
-              <Button
-                appearance="base"
-                type="button"
-                onClick={() => {
-                  remove(index);
-                }}
-              >
-                <Icon name="delete">Remove field</Icon>
-              </Button>
-            </Col>
-          </Row>
-        ))}
-
-        <Button
-          type="button"
-          appearance="link"
-          onClick={() => {
-            append({ url: "" });
-          }}
-        >
-          +&nbsp;Add field
-        </Button>
-      </Col>
-    </Row>
-  );
-}
-
-export default MultipleInputs;
diff --git a/static/js/publisher/listing/components/MultipleInputs/index.ts b/static/js/publisher/listing/components/MultipleInputs/index.ts
deleted file mode 100644
index 54a5597748..0000000000
--- a/static/js/publisher/listing/components/MultipleInputs/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./MultipleInputs";
diff --git a/static/js/publisher/listing/components/PreviewForm/PreviewForm.tsx b/static/js/publisher/listing/components/PreviewForm/PreviewForm.tsx
index e2aaafabe3..f99c8d1121 100644
--- a/static/js/publisher/listing/components/PreviewForm/PreviewForm.tsx
+++ b/static/js/publisher/listing/components/PreviewForm/PreviewForm.tsx
@@ -6,7 +6,7 @@ type Props = {
 };
 
 type ListingData = {
-  categories: Array<string>;
+  categories: { name: string; slug: string }[];
   links: {
     website: Array<string>;
     contact: Array<string>;
@@ -21,6 +21,8 @@ type ListingData = {
     type: string;
     status: string;
   }>;
+  summary: string;
+  description: string;
 };
 
 function PreviewForm({ snapName, getValues }: Props) {
@@ -32,7 +34,7 @@ function PreviewForm({ snapName, getValues }: Props) {
       donations: getValues("donations").map(
         (item: { url: string }) => item.url
       ),
-      source: getValues("source-code").map((item: { url: string }) => item.url),
+      source: getValues("source_code").map((item: { url: string }) => item.url),
       issues: getValues("issues").map((item: { url: string }) => item.url),
     },
     snap_name: snapName,
@@ -49,6 +51,8 @@ function PreviewForm({ snapName, getValues }: Props) {
         status: "uploaded",
       },
     ],
+    summary: getValues("summary"),
+    description: getValues("description"),
   };
 
   const screenshotUrls = getValues("screenshot_urls");
@@ -63,15 +67,21 @@ function PreviewForm({ snapName, getValues }: Props) {
     });
   }
 
-  const primaryCategory = getValues("primary-category");
-  const secondaryCategory = getValues("secondary-category");
+  const primaryCategory = getValues("primary_category");
+  const secondaryCategory = getValues("secondary_category");
 
   if (primaryCategory) {
-    listingData.categories.push(primaryCategory);
+    listingData.categories.push({
+      name: primaryCategory,
+      slug: primaryCategory,
+    });
   }
 
   if (secondaryCategory) {
-    listingData.categories.push(secondaryCategory);
+    listingData.categories.push({
+      name: secondaryCategory,
+      slug: secondaryCategory,
+    });
   }
 
   window.localStorage.setItem(
diff --git a/static/js/publisher/listing/components/PrimaryDomainInput/index.ts b/static/js/publisher/listing/components/PrimaryDomainInput/index.ts
deleted file mode 100644
index 8f00df0a71..0000000000
--- a/static/js/publisher/listing/components/PrimaryDomainInput/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./PrimaryDomainInput";
diff --git a/static/js/publisher/listing/components/Screenshots/index.ts b/static/js/publisher/listing/components/Screenshots/index.ts
deleted file mode 100644
index f84c59d769..0000000000
--- a/static/js/publisher/listing/components/Screenshots/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Screenshots";
diff --git a/static/js/publisher/listing/components/UrlInput/UrlInput.tsx b/static/js/publisher/listing/components/UrlInput/UrlInput.tsx
deleted file mode 100644
index 4b90a95879..0000000000
--- a/static/js/publisher/listing/components/UrlInput/UrlInput.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-type Props = {
-  fieldName: string;
-  index: number;
-  register: Function;
-  getFieldState: Function;
-};
-
-function UrlInput({ fieldName, index, register, getFieldState }: Props) {
-  const name = `${fieldName}.${index}.url`;
-  const fieldState = getFieldState(name);
-  const isInvalid = fieldState.invalid;
-
-  return (
-    <div
-      className={`p-form__group ${isInvalid && "p-form-validation is-error"}`}
-    >
-      <input
-        type="url"
-        id={name}
-        className="p-form-validation__input"
-        {...register(name, {
-          required: false,
-          pattern: { value: /^https?:\/\//gi },
-        })}
-      />
-      {fieldState.invalid && (
-        <p className="p-form-validation__message">Please enter a valid URL</p>
-      )}
-    </div>
-  );
-}
-
-export default UrlInput;
diff --git a/static/js/publisher/listing/components/UrlInput/index.ts b/static/js/publisher/listing/components/UrlInput/index.ts
deleted file mode 100644
index 5d988ea561..0000000000
--- a/static/js/publisher/listing/components/UrlInput/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./UrlInput";
diff --git a/static/js/publisher/listing/hooks/__tests__/useMutateListingData.test.ts b/static/js/publisher/listing/hooks/__tests__/useMutateListingData.test.ts
new file mode 100644
index 0000000000..4f877bd116
--- /dev/null
+++ b/static/js/publisher/listing/hooks/__tests__/useMutateListingData.test.ts
@@ -0,0 +1,26 @@
+import * as ReactQuery from "react-query";
+import { renderHook } from "@testing-library/react";
+
+import useMutateListingData from "../useMutateListingData";
+
+import { mockData } from "../../test-utils";
+
+describe("useMutateListingData", () => {
+  test("Calls useMutatation", () => {
+    jest.spyOn(ReactQuery, "useMutation").mockImplementation(jest.fn());
+    renderHook(() =>
+      useMutateListingData({
+        data: mockData,
+        dirtyFields: {},
+        getDefaultData: jest.fn(),
+        refetch: jest.fn(),
+        reset: jest.fn(),
+        setShowSuccessNotification: jest.fn(),
+        setUpdateMetadataOnRelease: jest.fn(),
+        shouldShowUpdateMetadataWarning: jest.fn(),
+        snapName: "test-snap",
+      })
+    );
+    expect(ReactQuery.useMutation).toHaveBeenCalled();
+  });
+});
diff --git a/static/js/publisher/listing/hooks/__tests__/useVerified.test.ts b/static/js/publisher/listing/hooks/__tests__/useVerified.test.ts
new file mode 100644
index 0000000000..8ce424dd9f
--- /dev/null
+++ b/static/js/publisher/listing/hooks/__tests__/useVerified.test.ts
@@ -0,0 +1,12 @@
+import * as ReactQuery from "react-query";
+import { renderHook } from "@testing-library/react";
+
+import useVerified from "../useVerified";
+
+describe("useVerified", () => {
+  test("Calls useQuery", () => {
+    jest.spyOn(ReactQuery, "useQuery").mockImplementation(jest.fn());
+    renderHook(() => useVerified("test-snap"));
+    expect(ReactQuery.useQuery).toHaveBeenCalled();
+  });
+});
diff --git a/static/js/publisher/listing/hooks/index.ts b/static/js/publisher/listing/hooks/index.ts
index 24e42a4ef4..bd59f1cd25 100644
--- a/static/js/publisher/listing/hooks/index.ts
+++ b/static/js/publisher/listing/hooks/index.ts
@@ -1,3 +1,4 @@
 import useVerified from "./useVerified";
+import useMutateListingData from "./useMutateListingData";
 
-export { useVerified };
+export { useVerified, useMutateListingData };
diff --git a/static/js/publisher/listing/hooks/useMutateListingData.ts b/static/js/publisher/listing/hooks/useMutateListingData.ts
new file mode 100644
index 0000000000..441940653c
--- /dev/null
+++ b/static/js/publisher/listing/hooks/useMutateListingData.ts
@@ -0,0 +1,87 @@
+import { useMutation } from "react-query";
+
+import { addDateToFilename, getChanges } from "../utils";
+
+import type { Data } from "../types";
+
+type Options = {
+  data: Data;
+  dirtyFields: any;
+  getDefaultData: Function;
+  refetch: Function;
+  reset: Function;
+  setShowSuccessNotification: Function;
+  setUpdateMetadataOnRelease: Function;
+  shouldShowUpdateMetadataWarning: Function;
+  snapName: string | undefined;
+};
+
+function useMutateListingData({
+  data,
+  dirtyFields,
+  getDefaultData,
+  refetch,
+  reset,
+  setShowSuccessNotification,
+  setUpdateMetadataOnRelease,
+  shouldShowUpdateMetadataWarning,
+  snapName,
+}: Options) {
+  return useMutation({
+    mutationFn: async (values: any) => {
+      const formData = new FormData();
+
+      const changes = getChanges(dirtyFields, values, data);
+
+      formData.set("csrf_token", window.CSRF_TOKEN);
+      formData.set("snap_id", data.snap_id);
+
+      if (values.icon && values.icon.length > 0) {
+        formData.append("icon", values.icon[0]);
+      }
+
+      if (values.banner && values.banner.length > 0) {
+        formData.append("banner-image", values.banner[0]);
+      }
+
+      if (values.screenshots) {
+        values.screenshots.forEach((screenshot: FileList) => {
+          if (screenshot[0]) {
+            const oldName = screenshot[0].name;
+            const newFile = addDateToFilename(screenshot[0], new Date());
+
+            formData.append("screenshots", newFile);
+
+            const imageIndex = changes.images.findIndex(
+              (image: any) => image.name === oldName
+            );
+            changes.images[imageIndex].name = newFile.name;
+            changes.images[imageIndex].url = URL.createObjectURL(newFile);
+          }
+        });
+      }
+
+      formData.set("changes", JSON.stringify(changes));
+
+      const response = await fetch(`/api/${snapName}/listing`, {
+        method: "POST",
+        body: formData,
+      });
+
+      if (shouldShowUpdateMetadataWarning(values)) {
+        setUpdateMetadataOnRelease(false);
+      }
+
+      if (!response.ok) {
+        throw new Error("There was a problem saving listing data");
+      }
+    },
+    onSuccess: async () => {
+      setShowSuccessNotification(true);
+      const response = await refetch();
+      reset(getDefaultData(response.data));
+    },
+  });
+}
+
+export default useMutateListingData;
diff --git a/static/js/publisher/listing/index.tsx b/static/js/publisher/listing/index.tsx
index 9ba21f37cb..f0ebc90826 100644
--- a/static/js/publisher/listing/index.tsx
+++ b/static/js/publisher/listing/index.tsx
@@ -1,21 +1,18 @@
 import { createRoot } from "react-dom/client";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import { QueryClient, QueryClientProvider } from "react-query";
-import * as Sentry from "@sentry/react";
-import { Integrations } from "@sentry/tracing";
 import App from "./components/App";
 
-Sentry.init({
-  dsn: window.SENTRY_DSN,
-  integrations: [new Integrations.BrowserTracing()],
-  tracesSampleRate: 1.0,
-});
-
 const queryClient = new QueryClient();
 
 const container = document.getElementById("main-content");
 const root = createRoot(container as HTMLElement);
 root.render(
-  <QueryClientProvider client={queryClient}>
-    <App />
-  </QueryClientProvider>
+  <Router>
+    <QueryClientProvider client={queryClient}>
+      <Routes>
+        <Route path="/:snapName/listing" element={<App />} />
+      </Routes>
+    </QueryClientProvider>
+  </Router>
 );
diff --git a/static/js/publisher/listing/sections/AdditionalInformationSection/AdditionalInformationSection.tsx b/static/js/publisher/listing/sections/AdditionalInformationSection/AdditionalInformationSection.tsx
deleted file mode 100644
index 236533ad63..0000000000
--- a/static/js/publisher/listing/sections/AdditionalInformationSection/AdditionalInformationSection.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import LicenseInputs from "../../components/LicenseInputs";
-import MetricsInputs from "../../components/MetricsInputs";
-
-type Props = {
-  register: Function;
-  setValue: Function;
-  watch: Function;
-  listingData: {
-    public_metrics_enabled: boolean;
-    public_metrics_blacklist: Array<string>;
-    license: string;
-    license_type: string;
-    licenses: Array<{ key: string; name: string }>;
-  };
-  getValues: Function;
-};
-
-function AdditionalInformationSection({
-  register,
-  listingData,
-  setValue,
-  watch,
-  getValues,
-}: Props) {
-  return (
-    <>
-      <div className="u-fixed-width">
-        <h2 className="p-heading--4">Additional information</h2>
-      </div>
-
-      <LicenseInputs
-        listingData={listingData}
-        register={register}
-        setValue={setValue}
-        watch={watch}
-      />
-
-      <MetricsInputs
-        register={register}
-        setValue={setValue}
-        getValues={getValues}
-        defaultPublicMetricsBlacklist={
-          listingData?.public_metrics_blacklist || []
-        }
-      />
-    </>
-  );
-}
-
-export default AdditionalInformationSection;
diff --git a/static/js/publisher/listing/sections/AdditionalInformationSection/__tests__/AdditionalInformationSection.test.tsx b/static/js/publisher/listing/sections/AdditionalInformationSection/__tests__/AdditionalInformationSection.test.tsx
deleted file mode 100644
index da3b789823..0000000000
--- a/static/js/publisher/listing/sections/AdditionalInformationSection/__tests__/AdditionalInformationSection.test.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { screen, render } from "@testing-library/react";
-import "@testing-library/jest-dom";
-
-import AdditionalInformationSection from "../AdditionalInformationSection";
-
-const renderComponent = () => {
-  return render(
-    <AdditionalInformationSection
-      register={jest.fn()}
-      setValue={jest.fn()}
-      watch={() => {
-        return {
-          unsubscribe: jest.fn(),
-        };
-      }}
-      listingData={{
-        public_metrics_enabled: false,
-        public_metrics_blacklist: [],
-        license: "test",
-        license_type: "test",
-        licenses: [],
-      }}
-      getValues={jest.fn()}
-    />
-  );
-};
-
-describe("AdditionalInformationSection", () => {
-  test("shows the correct section", () => {
-    renderComponent();
-    expect(
-      screen.getByRole("heading", { level: 2, name: "Additional information" })
-    ).toBeInTheDocument();
-  });
-});
diff --git a/static/js/publisher/listing/sections/AdditionalInformationSection/index.ts b/static/js/publisher/listing/sections/AdditionalInformationSection/index.ts
deleted file mode 100644
index 5f519fe9ed..0000000000
--- a/static/js/publisher/listing/sections/AdditionalInformationSection/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./AdditionalInformationSection";
diff --git a/static/js/publisher/listing/sections/ContactInformationSection/ContactInformationSection.tsx b/static/js/publisher/listing/sections/ContactInformationSection/ContactInformationSection.tsx
deleted file mode 100644
index 3de7fc4429..0000000000
--- a/static/js/publisher/listing/sections/ContactInformationSection/ContactInformationSection.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import MultipleInputs from "../../components/MultipleInputs";
-import PrimaryDomainInput from "../../components/PrimaryDomainInput";
-
-type Props = {
-  snapName: string | undefined;
-  getFieldState: Function;
-  register: Function;
-  publisherName: string;
-  control: {};
-  getValues: Function;
-  formState: { [key: string]: any };
-};
-
-function ContactInformationSection({
-  snapName,
-  register,
-  control,
-  getFieldState,
-  getValues,
-  formState,
-}: Props) {
-  return (
-    <>
-      <div className="u-fixed-width">
-        <h2 className="p-heading--4">Contact information</h2>
-      </div>
-
-      <PrimaryDomainInput
-        snapName={snapName}
-        register={register}
-        getFieldState={getFieldState}
-        getValues={getValues}
-        formState={formState}
-      />
-
-      <MultipleInputs
-        fieldName="websites"
-        label="Other websites"
-        register={register}
-        control={control}
-        getFieldState={getFieldState}
-      />
-
-      <MultipleInputs
-        fieldName="contacts"
-        label="Contacts"
-        register={register}
-        control={control}
-        getFieldState={getFieldState}
-      />
-
-      <MultipleInputs
-        fieldName="donations"
-        label="Donations"
-        register={register}
-        control={control}
-        getFieldState={getFieldState}
-      />
-
-      <MultipleInputs
-        fieldName="source-code"
-        label="Source code"
-        register={register}
-        control={control}
-        getFieldState={getFieldState}
-      />
-
-      <MultipleInputs
-        fieldName="issues"
-        label="Issues"
-        register={register}
-        control={control}
-        getFieldState={getFieldState}
-      />
-    </>
-  );
-}
-
-export default ContactInformationSection;
diff --git a/static/js/publisher/listing/sections/ContactInformationSection/index.ts b/static/js/publisher/listing/sections/ContactInformationSection/index.ts
deleted file mode 100644
index 58b59d795a..0000000000
--- a/static/js/publisher/listing/sections/ContactInformationSection/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./ContactInformationSection";
diff --git a/static/js/publisher/listing/sections/ListingDetailsSection/ListingDetailsSection.tsx b/static/js/publisher/listing/sections/ListingDetailsSection/ListingDetailsSection.tsx
deleted file mode 100644
index 0fcb10e89c..0000000000
--- a/static/js/publisher/listing/sections/ListingDetailsSection/ListingDetailsSection.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-import ListingFormInput from "../../components/ListingFormInput";
-import ListingDescriptionField from "../../components/ListingDescriptionField";
-import CategoriesInput from "../../components/CategoriesInput";
-import ImageUpload from "../../components/ImageUpload";
-import Screenshots from "../../components/Screenshots";
-
-type Props = {
-  register: Function;
-  getFieldState: Function;
-  setValue: Function;
-  primaryCategory: string;
-  secondaryCategory: string;
-  categories: Array<{
-    slug: string;
-    name: string;
-  }>;
-  iconUrl: string;
-  bannerUrl: string;
-  control: any;
-  getValues: Function;
-};
-
-function ListingDetailsSection({
-  register,
-  getFieldState,
-  setValue,
-  categories,
-  primaryCategory,
-  secondaryCategory,
-  iconUrl,
-  bannerUrl,
-  control,
-  getValues,
-}: Props) {
-  return (
-    <>
-      <div className="u-fixed-width">
-        <h2 className="p-heading--4">Listing details</h2>
-      </div>
-
-      <ImageUpload
-        imageUrl={iconUrl}
-        register={register}
-        setValue={setValue}
-        validationSchema={{
-          maxFileSize: 256000,
-          minWidth: 40,
-          maxWidth: 512,
-          minHeight: 40,
-          maxHeight: 512,
-          fileTypes: "PNG, JPEG & SVG",
-          aspectRatio: {
-            width: 1,
-            height: 1,
-          },
-        }}
-        label="Snap icon"
-        imageUrlFieldKey="icon_url"
-        imageFieldKey="icon"
-        previewWidth={120}
-        previewHeight={120}
-        fileTypes="image/png, image/jpeg, image/svg+xml"
-        tourLabel="listing-icon"
-        hasDarkThemePreview={true}
-      />
-
-      <ListingFormInput
-        label="Title"
-        name="title"
-        maxLength={40}
-        register={register}
-        required={true}
-        getFieldState={getFieldState}
-        tourLabel="listing-title"
-      />
-
-      <CategoriesInput
-        categories={categories}
-        register={register}
-        getFieldState={getFieldState}
-        primaryCategory={primaryCategory}
-        secondaryCategory={secondaryCategory}
-        setValue={setValue}
-      />
-
-      <ListingFormInput
-        type="url"
-        label="Video"
-        name="video_urls"
-        register={register}
-        helpText="Vimeo, YouTube or asciinema URL"
-        getFieldState={getFieldState}
-        pattern={/^https?:\/\//gi}
-        tourLabel="listing-video"
-      />
-
-      <Screenshots
-        register={register}
-        control={control}
-        getValues={getValues}
-        setValue={setValue}
-      />
-
-      <ImageUpload
-        imageUrl={bannerUrl}
-        register={register}
-        setValue={setValue}
-        validationSchema={{
-          maxFileSize: 2000000,
-          minWidth: 720,
-          maxWidth: 4320,
-          minHeight: 240,
-          maxHeight: 1440,
-          fileTypes: "JPEG & PNG files",
-          aspectRatio: {
-            width: 3,
-            height: 1,
-          },
-        }}
-        label="Featured banner"
-        imageUrlFieldKey="banner_url"
-        imageFieldKey="banner"
-        previewWidth={720}
-        previewHeight={240}
-        fileTypes="image/png, image/jpeg"
-        helpText="Adding a featured banner will increase your chances of being featured on snapcraft.io and in GNOME software but does not immediately make you eligible to be featured."
-        tourLabel="listing-banner"
-      />
-
-      <ListingFormInput
-        label="Summary"
-        name="summary"
-        maxLength={128}
-        register={register}
-        required={true}
-        getFieldState={getFieldState}
-        tourLabel="listing-summary"
-      />
-
-      <ListingDescriptionField
-        register={register}
-        getFieldState={getFieldState}
-      />
-    </>
-  );
-}
-
-export default ListingDetailsSection;
diff --git a/static/js/publisher/listing/sections/ListingDetailsSection/index.ts b/static/js/publisher/listing/sections/ListingDetailsSection/index.ts
deleted file mode 100644
index cb46e126ef..0000000000
--- a/static/js/publisher/listing/sections/ListingDetailsSection/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./ListingDetailsSection";
diff --git a/static/js/publisher/listing/test-utils/index.ts b/static/js/publisher/listing/test-utils/index.ts
new file mode 100644
index 0000000000..5da2429913
--- /dev/null
+++ b/static/js/publisher/listing/test-utils/index.ts
@@ -0,0 +1,3 @@
+import { mockData } from "./mockData";
+
+export { mockData };
diff --git a/static/js/publisher/listing/test-utils/mockData.ts b/static/js/publisher/listing/test-utils/mockData.ts
new file mode 100644
index 0000000000..75ad1d48b5
--- /dev/null
+++ b/static/js/publisher/listing/test-utils/mockData.ts
@@ -0,0 +1,40 @@
+export const mockData = {
+  banner_urls: ["https://example.com/screenshot"],
+  categories: [
+    { name: "Test category 1", slug: "test-category-1" },
+    { name: "Test category 2", slug: "test-category-2" },
+  ],
+  contacts: [{ url: "https://example.com/contact" }],
+  description: "lorem ipsum dolor sit amet",
+  donations: [{ url: "https://example.com/donate" }],
+  icon_url: "https://example.com/icon",
+  issues: [{ url: "https://example.com/issues" }],
+  license: "test-license",
+  license_type: "test",
+  licenses: [{ key: "test", name: "test" }],
+  primary_category: "test-category-1",
+  primary_website: "https://example.com",
+  public_metrics_blacklist: [
+    "weekly_installed_base_by_operating_system_normalized",
+  ],
+  public_metrics_distros: false,
+  public_metrics_enabled: false,
+  public_metrics_territories: false,
+  screenshot_urls: ["https://example.com/screenshot"],
+  secondary_category: "test-category-2",
+  snap_id: "test_id",
+  source_code: [{ url: "https://example.com/code" }],
+  summary: "lorem ispum",
+  title: "test-snap",
+  tour_steps: [
+    {
+      content:
+        "<p>Here you can manage the display of your snap listing within the store.</p><p>We’ll give you a quick tour to get you up to speed!</p>",
+      id: "listing-intro",
+      title: "Welcome to your snap listing page!",
+    },
+  ],
+  update_metadata_on_release: false,
+  video_urls: "https://example.com/video",
+  websites: [{ url: "https://example.com" }],
+};
diff --git a/static/js/publisher/listing/types/index.d.ts b/static/js/publisher/listing/types/index.d.ts
index aab10b4350..37cd8c4e13 100644
--- a/static/js/publisher/listing/types/index.d.ts
+++ b/static/js/publisher/listing/types/index.d.ts
@@ -1,7 +1,3 @@
-// Empty export to mark this file as a module.
-// This is required to augment global scope.
-export {};
-
 declare global {
   interface Window {
     SENTRY_DSN: string;
@@ -10,3 +6,40 @@ declare global {
     tourSteps: any;
   }
 }
+
+export type Step = {
+  id: string;
+  position?: string;
+  elements?: HTMLElement[];
+  title: string;
+  content: string;
+};
+
+export type Data = {
+  snap_id: string;
+  title: string;
+  video_urls: string;
+  summary: string;
+  description: string;
+  categories: { name: string; slug: string }[];
+  primary_category: string;
+  secondary_category: string;
+  websites: { url: string }[];
+  contacts: { url: string }[];
+  donations: { url: string }[];
+  source_code: { url: string }[];
+  issues: { url: string }[];
+  primary_website: string;
+  public_metrics_enabled: boolean;
+  public_metrics_blacklist: string[];
+  public_metrics_territories: boolean;
+  public_metrics_distros: boolean;
+  license: string;
+  license_type: string;
+  licenses: { key: string; name: string }[];
+  icon_url: string;
+  screenshot_urls: string[];
+  banner_urls: string[];
+  update_metadata_on_release: boolean;
+  tour_steps: Step[];
+};
diff --git a/static/js/publisher/listing/utils/__tests__/addDateToFilename.test.ts b/static/js/publisher/listing/utils/__tests__/addDateToFilename.test.ts
new file mode 100644
index 0000000000..fe1573628c
--- /dev/null
+++ b/static/js/publisher/listing/utils/__tests__/addDateToFilename.test.ts
@@ -0,0 +1,10 @@
+import addDateToFilename from "../addDateToFilename";
+
+describe("addDateToFilename", () => {
+  test("adds date to filename", () => {
+    const date = new Date();
+    const now = Math.round(date.getTime() / 1000);
+    const file = addDateToFilename(new File([], "test.jpg"), date);
+    expect(file.name).toBe(`test-${now}.jpg`);
+  });
+});
diff --git a/static/js/publisher/listing/utils/__tests__/formatFileSize.test.ts b/static/js/publisher/listing/utils/__tests__/formatFileSize.test.ts
deleted file mode 100644
index 3f5eac9e93..0000000000
--- a/static/js/publisher/listing/utils/__tests__/formatFileSize.test.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import formatFileSize from "../formatFileSize";
-
-describe("formatFileSize", () => {
-  test("formats file size in kB", () => {
-    expect(formatFileSize(900)).toBe("0.9kB");
-  });
-
-  test("formats file size in MB", () => {
-    expect(formatFileSize(2000000)).toBe("2MB");
-  });
-});
diff --git a/static/js/publisher/listing/utils/__tests__/formatImageChanges.test.ts b/static/js/publisher/listing/utils/__tests__/formatImageChanges.test.ts
new file mode 100644
index 0000000000..867809c684
--- /dev/null
+++ b/static/js/publisher/listing/utils/__tests__/formatImageChanges.test.ts
@@ -0,0 +1,25 @@
+import formatImageChanges from "../formatImageChanges";
+
+describe("formatImageChanges", () => {
+  test("returns formatted image objects", () => {
+    const imageChanges = formatImageChanges(
+      ["https://example.com/banner"],
+      "https://example.com/icon",
+      ["https://example.com/screenshot"],
+      [],
+      {}
+    );
+
+    expect(imageChanges[0].url).toBe("https://example.com/banner");
+    expect(imageChanges[0].type).toBe("banner");
+    expect(imageChanges[0].status).toBe("uploaded");
+
+    expect(imageChanges[1].url).toBe("https://example.com/icon");
+    expect(imageChanges[1].type).toBe("icon");
+    expect(imageChanges[1].status).toBe("uploaded");
+
+    expect(imageChanges[2].url).toBe("https://example.com/screenshot");
+    expect(imageChanges[2].type).toBe("screenshot");
+    expect(imageChanges[2].status).toBe("uploaded");
+  });
+});
diff --git a/static/js/publisher/listing/utils/__tests__/getChanges.test.ts b/static/js/publisher/listing/utils/__tests__/getChanges.test.ts
deleted file mode 100644
index 24fffde45f..0000000000
--- a/static/js/publisher/listing/utils/__tests__/getChanges.test.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-import getChanges from "../getChanges";
-
-describe("getChanges", () => {
-  test("returns changes in data", () => {
-    const changedFields = {
-      description: true,
-      summary: true,
-    };
-    const data = {
-      snap_name: "test-snap",
-      description: "lorem ipsum",
-      summary: "lorem ipsum dolor sit amet",
-    };
-
-    const changes = getChanges(changedFields, data);
-
-    expect(changes.description).toBe("lorem ipsum");
-    expect(changes.summary).toBe("lorem ipsum dolor sit amet");
-    expect(changes.snap_name).not.toBeDefined();
-  });
-
-  test("handles website changes in data", () => {
-    const changedFields = {
-      primary_website: true,
-    };
-    const data = {
-      primary_website: "https://example.com",
-      websites: [{ url: "https://test.com" }],
-    };
-    const changes = getChanges(changedFields, data);
-
-    expect(changes.links.website[0]).toBe("https://example.com");
-  });
-
-  test("doesn't return changes for forbidden keys", () => {
-    const changedFields = {
-      "primary-category": true,
-      "secondary-category": true,
-      contacts: true,
-      donations: true,
-      issues: true,
-      "source-code": true,
-      websites: true,
-      licenses: true,
-    };
-
-    const data = {
-      "primary-category": "health-and-fitness",
-      "secondary-category": "music-and-audio",
-      contacts: [{ url: "mailto:name@example.com" }],
-      donations: [{ url: "https://example.com" }],
-      issues: [{ url: "https://example.com" }],
-      "source-code": [{ url: "https://example.com" }],
-      websites: [{ url: "https://example.com" }],
-      licenses: [{ key: "Glide", name: "3dfx Glide License" }],
-    };
-
-    const changes = getChanges(changedFields, data);
-
-    expect(changes["primary-category"]).not.toBeDefined();
-    expect(changes["secondary-category"]).not.toBeDefined();
-    expect(changes.contacts).not.toBeDefined();
-    expect(changes.donations).not.toBeDefined();
-    expect(changes.issues).not.toBeDefined();
-    expect(changes["source-code"]).not.toBeDefined();
-    expect(changes.websites).not.toBeDefined();
-    expect(changes.licenses).not.toBeDefined();
-  });
-
-  test("handles image changes", () => {
-    const data = {
-      banner: new File([""], "test-banner", { type: "image" }),
-      banner_url: "https://example.com/banner-image.jpg",
-      banner_urls: ["https://example.com/banner-image.jpg"],
-      icon: new File([""], "test-icon", { type: "image" }),
-      icon_url: "https://example.com/icon-image.jpg",
-      images: [
-        {
-          status: "uploaded",
-          type: "icon",
-          url: "https://example.com/icon-image.jpg",
-        },
-        {
-          status: "uploaded",
-          type: "screenshot",
-          url: "https://example.com/screenshot-image.jpg",
-        },
-        {
-          status: "uploaded",
-          type: "banner",
-          url: "https://example.com/banner-image.jpg",
-        },
-      ],
-      screenshot_urls: ["https://example.com/screenshot-image.jpg"],
-      screenshots: [new File([""], "test-screenshot", { type: "image" })],
-    };
-
-    const changedFields = {
-      banner_url: true,
-      icon_url: true,
-      screenshot_urls: true,
-      icon: true,
-      banner: true,
-      screenshots: true,
-    };
-
-    const changes = getChanges(changedFields, data);
-
-    expect(changes.images).toHaveLength(3);
-  });
-});
diff --git a/static/js/publisher/listing/utils/__tests__/getDefaultData.test.ts b/static/js/publisher/listing/utils/__tests__/getDefaultData.test.ts
new file mode 100644
index 0000000000..964cd7222e
--- /dev/null
+++ b/static/js/publisher/listing/utils/__tests__/getDefaultData.test.ts
@@ -0,0 +1,38 @@
+import getDefaultData from "../getDefaultData";
+
+import { mockData } from "../../test-utils";
+
+describe("getDefaultData", () => {
+  test("returns default data", () => {
+    const defaultData = getDefaultData(mockData);
+
+    expect(defaultData.contacts).toBeDefined();
+    expect(defaultData.description).toBeDefined();
+    expect(defaultData.donations).toBeDefined();
+    expect(defaultData.icon_url).toBeDefined();
+    expect(defaultData.issues).toBeDefined();
+    expect(defaultData.license).toBeDefined();
+    expect(defaultData.licenses).toBeDefined();
+    expect(defaultData.license_type).toBeDefined();
+    expect(defaultData.primary_category).toBeDefined();
+    expect(defaultData.primary_website).toBeDefined();
+    expect(defaultData.public_metrics_distros).toBeDefined();
+    expect(defaultData.public_metrics_enabled).toBeDefined();
+    expect(defaultData.public_metrics_territories).toBeDefined();
+    expect(defaultData.screenshots).toBeDefined();
+    expect(defaultData.screenshot_urls).toBeDefined();
+    expect(defaultData.secondary_category).toBeDefined();
+    expect(defaultData.source_code).toBeDefined();
+    expect(defaultData.summary).toBeDefined();
+    expect(defaultData.title).toBeDefined();
+    expect(defaultData.video_urls).toBeDefined();
+    expect(defaultData.websites).toBeDefined();
+
+    expect(defaultData.banner_urls).not.toBeDefined();
+    expect(defaultData.categories).not.toBeDefined();
+    expect(defaultData.public_metrics_blacklist).not.toBeDefined();
+    expect(defaultData.snap_id).not.toBeDefined();
+    expect(defaultData.tour_steps).not.toBeDefined();
+    expect(defaultData.update_metadata_on_release).not.toBeDefined();
+  });
+});
diff --git a/static/js/publisher/listing/utils/__tests__/getFormData.test.ts b/static/js/publisher/listing/utils/__tests__/getFormData.test.ts
deleted file mode 100644
index 9bdcefb7e0..0000000000
--- a/static/js/publisher/listing/utils/__tests__/getFormData.test.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import getFormData from "../getFormData";
-
-describe("getFormData", () => {
-  window.CSRF_TOKEN = "test_token";
-
-  const data = {
-    title: "Lorem ipsum",
-    summary: "Lorem ipsum",
-    description: "Lorem ipsum",
-    video_urls: ["https://example.com/video.mp4"],
-    website: "https://example.com",
-    contact: "mailto:name@example.com",
-    "primary-category": "data",
-    "secondary-category": "security",
-    public_metrics_enabled: true,
-    public_metrics_blacklist: true,
-    license: "MIT",
-    images: [{ name: "image", url: "https://example.com/image.jpg" }],
-    contacts: [{ url: "https://example.com" }],
-    donations: [{ url: "https://example.com" }],
-    issues: [{ url: "https://example.com" }],
-    "source-code": [{ url: "https://example.com" }],
-    websites: [{ url: "https://example.com" }],
-    icon: [{ url: "https://example.com" }],
-    banner: [{ url: "https://example.com" }],
-    screenshots: [{ url: "https://example.com" }],
-  };
-
-  const changes = {
-    title: true,
-    summary: true,
-    description: true,
-    video_urls: true,
-    website: true,
-    contact: true,
-    categories: true,
-    public_metrics_enabled: true,
-    public_metrics_blacklist: true,
-    license: true,
-    images: [{ name: "image-name", url: "https://example.com/test-image.jpg" }],
-    links: true,
-  };
-
-  test("returns form data", () => {
-    const formData = getFormData(data, "test-snap-id", changes);
-
-    expect(formData.get("csrf_token")).toEqual("test_token");
-    expect(formData.get("snap_id")).toEqual("test-snap-id");
-    expect(formData.get("title")).toBeDefined();
-    expect(formData.get("summary")).toBeDefined();
-    expect(formData.get("description")).toBeDefined();
-    expect(formData.get("video_urls")).toBeDefined();
-    expect(formData.get("website")).toBeDefined();
-    expect(formData.get("contact")).toBeDefined();
-    expect(formData.get("primary-category")).toBeDefined();
-    expect(formData.get("secondary-category")).toBeDefined();
-    expect(formData.get("public_metrics_enabled")).toBeDefined();
-    expect(formData.get("public_metrics_blacklist")).toBeDefined();
-    expect(formData.get("license")).toBeDefined();
-    expect(formData.get("images")).toBeDefined();
-    expect(formData.get("links")).toBeDefined();
-    expect(formData.get("icon")).toBeDefined();
-    expect(formData.get("banner-image")).toBeDefined();
-    expect(formData.get("screenshots")).toBeDefined();
-    expect(formData.get("changes")).toBeDefined();
-  });
-});
diff --git a/static/js/publisher/listing/utils/__tests__/getListingData.test.ts b/static/js/publisher/listing/utils/__tests__/getListingData.test.ts
deleted file mode 100644
index 22d441b81f..0000000000
--- a/static/js/publisher/listing/utils/__tests__/getListingData.test.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import getListingData from "../getListingData";
-
-describe("getListingData", () => {
-  test("returns listing data", () => {
-    window.listingData = {
-      icon_url: "https://example.com/icon.jpg",
-      banner_urls: ["https://example.com/banner.jpg"],
-      screenshot_urls: ["https://example.com/screenshot.jpg"],
-      snap_categories: {
-        categories: ["primary", "secondary"],
-      },
-      links: ["https://example.com"],
-    };
-
-    const data = {
-      snap_name: "test",
-      snap_title: "test",
-      summary: "test",
-      description: "test",
-      website: "https://example.com",
-      contact: "mailto:name@example.com",
-      categories: ["primary", "secondary"],
-      snap_categories: {
-        categories: ["primary", "secondary"],
-      },
-      public_metrics_enabled: true,
-      license: "test",
-      license_type: "test",
-      update_metadata_on_release: true,
-      licenses: [{ name: "MIT" }, { name: "GNU" }],
-      video_urls: ["https://example.com/video.mp4"],
-      public_metrics_blacklist: ["installed_base_by_country_percent"],
-    };
-
-    const listingData = getListingData(data);
-
-    expect(listingData.snap_name).toBeDefined();
-    expect(listingData.title).toBeDefined();
-    expect(listingData.summary).toBeDefined();
-    expect(listingData.description).toBeDefined();
-    expect(listingData.website).toBeDefined();
-    expect(listingData.contact).toBeDefined();
-    expect(listingData.categories).toBeDefined();
-    expect(listingData.public_metrics_enabled).toBeDefined();
-    expect(listingData.public_metrics_blacklist).toBeDefined();
-    expect(listingData.license).toBeDefined();
-    expect(listingData.license_type).toBeDefined();
-    expect(listingData.licenses).toBeDefined();
-    expect(listingData.video_urls).toBeDefined();
-    expect(listingData["primary-category"]).toBeDefined();
-    expect(listingData["secondary-category"]).toBeDefined();
-    expect(listingData.public_metrics_territories).toBeDefined();
-    expect(listingData.public_metrics_distros).toBeDefined();
-    expect(listingData.update_metadata_on_release).toBeDefined();
-    expect(listingData.contacts).toBeDefined();
-    expect(listingData.donations).toBeDefined();
-    expect(listingData.issues).toBeDefined();
-    expect(listingData["source-code"]).toBeDefined();
-    expect(listingData.websites).toBeDefined();
-    expect(listingData.banner_urls).toBeDefined();
-    expect(listingData.icon_url).toBeDefined();
-    expect(listingData.screenshot_urls).toBeDefined();
-    expect(listingData.icon).toBeDefined();
-    expect(listingData.banner_url).toBeDefined();
-    expect(listingData.banner).toBeDefined();
-    expect(listingData.screenshots).toBeDefined();
-    expect(listingData.images).toBeDefined();
-    expect(listingData.snap_categories).toBeDefined();
-    expect(listingData.links).toBeDefined();
-    expect(listingData.primary_website).toBeDefined();
-  });
-});
diff --git a/static/js/publisher/listing/utils/__tests__/shouldShowUpdateMetadataWarning.test.ts b/static/js/publisher/listing/utils/__tests__/shouldShowUpdateMetadataWarning.test.ts
index 411ac83f96..142d82c027 100644
--- a/static/js/publisher/listing/utils/__tests__/shouldShowUpdateMetadataWarning.test.ts
+++ b/static/js/publisher/listing/utils/__tests__/shouldShowUpdateMetadataWarning.test.ts
@@ -4,7 +4,7 @@ describe("shouldShowUpdateMetadataWarning", () => {
   test("returns false if only allowed keys have changed", () => {
     expect(
       shouldShowUpdateMetadataWarning({
-        banner_url: true,
+        banner_urls: true,
         icon_url: true,
         screenshot_urls: true,
       })
diff --git a/static/js/publisher/listing/utils/__tests__/validateAspectRatio.test.ts b/static/js/publisher/listing/utils/__tests__/validateAspectRatio.test.ts
deleted file mode 100644
index 768943b459..0000000000
--- a/static/js/publisher/listing/utils/__tests__/validateAspectRatio.test.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import validateAspectRatio from "../validateAspectRatio";
-
-describe("validateAspectRatio", () => {
-  test("returns false if doesn't match aspect ratio", () => {
-    expect(validateAspectRatio(300, 100, { width: 1, height: 1 }));
-    expect(validateAspectRatio(140, 900, { width: 16, height: 9 }));
-  });
-
-  test("returns true if matches aspect ratio", () => {
-    expect(validateAspectRatio(100, 100, { width: 1, height: 1 }));
-    expect(validateAspectRatio(1600, 900, { width: 16, height: 9 }));
-  });
-});
diff --git a/static/js/publisher/listing/utils/addDateToFilename.ts b/static/js/publisher/listing/utils/addDateToFilename.ts
new file mode 100644
index 0000000000..441a98d992
--- /dev/null
+++ b/static/js/publisher/listing/utils/addDateToFilename.ts
@@ -0,0 +1,7 @@
+export default function addDateToFilename(file: File, date: Date): File {
+  const now = Math.round(date.getTime() / 1000);
+  const nameParts = file.name.split(".");
+  const extension = nameParts.pop();
+  const newName = `${nameParts.join(".")}-${now}.${extension}`;
+  return new File([file], newName);
+}
diff --git a/static/js/publisher/listing/utils/formatFileSize.ts b/static/js/publisher/listing/utils/formatFileSize.ts
deleted file mode 100644
index 62dd033289..0000000000
--- a/static/js/publisher/listing/utils/formatFileSize.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-function formatFileSize(fileSize: number): string {
-  if (fileSize < 1000000) {
-    return `${fileSize / 1000}kB`;
-  }
-
-  return `${fileSize / 1000000}MB`;
-}
-
-export default formatFileSize;
diff --git a/static/js/publisher/listing/utils/formatImageChanges.ts b/static/js/publisher/listing/utils/formatImageChanges.ts
new file mode 100644
index 0000000000..3a6b6e7559
--- /dev/null
+++ b/static/js/publisher/listing/utils/formatImageChanges.ts
@@ -0,0 +1,50 @@
+export default function formatImageChanges(
+  bannerUrls: string[],
+  iconUrl: string,
+  screenshotUrls: string[],
+  screenshots: FileList[],
+  dirtyFields: { [key: string]: boolean }
+) {
+  const images = [];
+
+  if (!dirtyFields.banner_urls && bannerUrls.length > 0) {
+    images.push({
+      url: bannerUrls[0],
+      type: "banner",
+      status: "uploaded",
+    });
+  }
+
+  if (iconUrl) {
+    images.push({
+      url: iconUrl,
+      type: "icon",
+      status: "uploaded",
+    });
+  }
+
+  if (screenshotUrls.length) {
+    screenshotUrls.forEach((url, i) => {
+      images.push({
+        url,
+        type: "screenshot",
+        status: "uploaded",
+      });
+    });
+  }
+
+  if (screenshots) {
+    screenshots.forEach((screenshot) => {
+      if (screenshot[0]) {
+        images.push({
+          url: URL.createObjectURL(screenshot[0]),
+          type: "screenshot",
+          status: "new",
+          name: screenshot[0].name,
+        });
+      }
+    });
+  }
+
+  return images;
+}
diff --git a/static/js/publisher/listing/utils/getChanges.ts b/static/js/publisher/listing/utils/getChanges.ts
index 7c958449fb..bde5d68448 100644
--- a/static/js/publisher/listing/utils/getChanges.ts
+++ b/static/js/publisher/listing/utils/getChanges.ts
@@ -1,149 +1,119 @@
-const formatImageChanges = (
-  bannerUrl: [string],
-  iconUrl: string,
-  screenshotUrls: [string],
-  screenshots: [FileList]
-) => {
-  const images = [];
-
-  if (bannerUrl) {
-    images.push({
-      url: bannerUrl,
-      type: "banner",
-      status: "uploaded",
-    });
-  }
+import formatImageChanges from "./formatImageChanges";
 
-  if (iconUrl) {
-    images.push({
-      url: iconUrl,
-      type: "icon",
-      status: "uploaded",
-    });
-  }
+import type { Data } from "../types";
 
-  if (screenshotUrls.length) {
-    screenshotUrls.forEach((url) => {
-      images.push({
-        url,
-        type: "screenshot",
-        status: "uploaded",
-      });
-    });
-  }
+export default function getChanges(
+  dirtyFields: any,
+  fieldValues: any,
+  data: Data
+): { [key: string]: any } {
+  const changes: { [key: string]: any } = {};
 
-  if (screenshots) {
-    screenshots.forEach((screenshot) => {
-      if (screenshot[0]) {
-        images.push({
-          url: URL.createObjectURL(screenshot[0]),
-          type: "screenshot",
-          status: "new",
-          name: screenshot[0].name,
-        });
-      }
-    });
+  if (
+    dirtyFields.banner_urls ||
+    dirtyFields.icon_url ||
+    dirtyFields.screenshot_urls ||
+    dirtyFields.icon ||
+    dirtyFields.banner ||
+    dirtyFields.screenshots
+  ) {
+    changes.images = formatImageChanges(
+      data.banner_urls,
+      fieldValues.icon_url,
+      fieldValues.screenshot_urls,
+      fieldValues.screenshots,
+      dirtyFields
+    );
   }
 
-  return images;
-};
-
-function getChanges(
-  dirtyFields: { [key: string]: any },
-  data: { [key: string]: any }
-) {
-  const changes: { [key: string]: any } = {};
-  const keys = Object.keys(dirtyFields);
   const forbiddenKeys = [
-    "primary-category",
-    "secondary-category",
+    "primary_category",
+    "secondary_category",
+    "websites",
     "contacts",
     "donations",
+    "source_code",
     "issues",
-    "source-code",
+    "icon",
+    "icon_url",
+  ];
+
+  const linksKeys = [
     "websites",
-    "licenses",
+    "contacts",
+    "donations",
+    "source_code",
+    "issues",
+    "primary_website",
   ];
 
-  const removeEmptyUrls = (urls: Array<{ url: string }>) => {
-    return urls.filter((url) => url.url !== "");
-  };
+  const getUrls = (item: { url: string }) => item.url;
 
-  const combineWebsites = (
-    primaryWebsite: string,
-    websites: Array<{ url: string }>
-  ) => {
-    return [{ url: primaryWebsite }].concat(websites);
-  };
+  for (const [key, value] of Object.entries(dirtyFields)) {
+    if (!forbiddenKeys.includes(key) && value !== false) {
+      changes[key] = fieldValues[key];
+    }
 
-  if (
-    dirtyFields.primary_website ||
-    dirtyFields.contacts ||
-    dirtyFields.donations ||
-    dirtyFields.issues ||
-    dirtyFields.license ||
-    dirtyFields["source-code"] ||
-    dirtyFields.website
-  ) {
-    combineWebsites(data.primary_website, data.websites);
-    changes.links = {
-      contact: data.contacts
-        ? removeEmptyUrls(data.contacts).map((url: { url: string }) => url.url)
-        : [],
-      donations: data.donations
-        ? removeEmptyUrls(data.donations).map((url: { url: string }) => url.url)
-        : [],
-      issues: data.issues
-        ? removeEmptyUrls(data.issues).map((url: { url: string }) => url.url)
-        : [],
-      website: data.websites
-        ? removeEmptyUrls(
-            combineWebsites(data.primary_website, data.websites)
-          ).map((url: { url: string }) => url.url)
-        : [],
-      source: data["source-code"]
-        ? removeEmptyUrls(data["source-code"]).map(
-            (url: { url: string }) => url.url
-          )
-        : [],
-    };
+    if (linksKeys.includes(key)) {
+      changes.links = {
+        contact: fieldValues.contacts.map(getUrls),
+        donations: fieldValues.donations.map(getUrls),
+        issues: fieldValues.issues.map(getUrls),
+        source: fieldValues.source_code.map(getUrls),
+        website: fieldValues.websites.map(getUrls),
+      };
+
+      if (fieldValues.primary_website) {
+        changes.links.website.unshift(fieldValues.primary_website);
+      }
+    }
   }
 
-  if (
-    dirtyFields.banner_url ||
-    dirtyFields.icon_url ||
-    dirtyFields.screenshot_urls ||
-    dirtyFields.icon ||
-    dirtyFields.banner ||
-    dirtyFields.screenshots
-  ) {
-    changes.images = formatImageChanges(
-      data?.banner_url,
-      data?.icon_url,
-      data?.screenshot_urls,
-      data?.screenshots
-    );
+  if (dirtyFields.primary_category || dirtyFields.secondary_category) {
+    const categories = [];
+
+    if (fieldValues.primary_category) {
+      categories.push(fieldValues.primary_category);
+    }
+
+    if (fieldValues.secondary_category) {
+      categories.push(fieldValues.secondary_category);
+    }
+
+    changes.categories = categories;
   }
 
-  keys.forEach((key) => {
-    if (!forbiddenKeys.includes(key) && dirtyFields[key] === true) {
-      changes[key] = data[key];
+  if (
+    dirtyFields.public_metrics_territories ||
+    dirtyFields.public_metrics_distros
+  ) {
+    if (fieldValues.public_metrics_territories === true) {
+      changes.public_metrics_blacklist = [
+        "weekly_installed_base_by_operating_system_normalized",
+      ];
     }
 
-    if (dirtyFields["primary-category"] || dirtyFields["secondary-category"]) {
-      changes.categories = [];
+    if (fieldValues.public_metrics_distros === true) {
+      changes.public_metrics_blacklist = ["installed_base_by_country_percent"];
+    }
 
-      if (data["primary-category"]) {
-        changes.categories.push(data["primary-category"]);
-      }
+    if (
+      fieldValues.public_metrics_territories === true &&
+      fieldValues.public_metrics_distros === true
+    ) {
+      changes.public_metrics_blacklist = [];
+    }
 
-      if (data["secondary-category"]) {
-        changes.categories.push(data["secondary-category"]);
-      }
+    if (
+      fieldValues.public_metrics_territories === false &&
+      fieldValues.public_metrics_distros === false
+    ) {
+      changes.public_metrics_blacklist = [
+        "installed_base_by_country_percent",
+        "weekly_installed_base_by_operating_system_normalized",
+      ];
     }
-  });
+  }
 
   return changes;
 }
-
-export default getChanges;
diff --git a/static/js/publisher/listing/utils/getDefaultData.ts b/static/js/publisher/listing/utils/getDefaultData.ts
new file mode 100644
index 0000000000..cfeda5a70f
--- /dev/null
+++ b/static/js/publisher/listing/utils/getDefaultData.ts
@@ -0,0 +1,73 @@
+import type { Data } from "../types";
+
+function getPublicMetricsTerritoriesValue(
+  publicMetricsBlacklist: string[]
+): boolean {
+  if (publicMetricsBlacklist.length === 0) {
+    return true;
+  }
+
+  if (
+    publicMetricsBlacklist.length === 1 &&
+    publicMetricsBlacklist.includes(
+      "weekly_installed_base_by_operating_system_normalized"
+    )
+  ) {
+    return true;
+  }
+
+  return false;
+}
+
+function getPublicMetricsDistrosValue(
+  publicMetricsBlacklist: string[]
+): boolean {
+  if (publicMetricsBlacklist.length === 0) {
+    return true;
+  }
+
+  if (
+    publicMetricsBlacklist.length === 1 &&
+    publicMetricsBlacklist.includes("installed_base_by_country_percent")
+  ) {
+    return true;
+  }
+
+  return false;
+}
+
+export default function getDefaultData(data: Data): { [key: string]: any } {
+  return {
+    contacts: data.contacts,
+    description: data.description,
+    donations: data.donations,
+    icon_url: data.icon_url,
+    issues: data.issues,
+    license: data.license,
+    licenses: data.licenses,
+    license_type: data.license_type,
+    primary_category: data.primary_category,
+    primary_website: data.primary_website,
+    public_metrics_distros: getPublicMetricsDistrosValue(
+      data.public_metrics_blacklist
+    ),
+    public_metrics_enabled: data.public_metrics_enabled,
+    public_metrics_territories: getPublicMetricsTerritoriesValue(
+      data.public_metrics_blacklist
+    ),
+    screenshots: [
+      new File([], ""),
+      new File([], ""),
+      new File([], ""),
+      new File([], ""),
+      new File([], ""),
+    ],
+    screenshot_urls: data.screenshot_urls,
+    secondary_category: data.secondary_category,
+    source_code: data.source_code,
+    summary: data.summary,
+    title: data.title,
+    video_urls: data.video_urls,
+    websites: data.websites,
+  };
+}
diff --git a/static/js/publisher/listing/utils/getDefaultValues.ts b/static/js/publisher/listing/utils/getDefaultValues.ts
deleted file mode 100644
index a4c07b7c45..0000000000
--- a/static/js/publisher/listing/utils/getDefaultValues.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-function getDefaultValues(data: any) {
-  return {
-    title: data.title || "",
-    icon_url: data.icon_url || "",
-    icon: data.icon,
-    screenshots: data.screenshots,
-    screenshot_urls: data.screenshot_urls,
-    banner_url: data.banner_url || "",
-    banner: data.banner,
-    "primary-category": data["primary-category"] || "",
-    "secondary-category": data["secondary-category"] || "",
-    video_urls: data.video_urls || "",
-    summary: data.summary || "",
-    description: data.description || "",
-    primary_website: data.primary_website || "",
-    websites: data.websites,
-    contacts: data.contacts,
-    donations: data.donations,
-    "source-code": data["source-code"],
-    issues: data.issues,
-    license: data.license,
-    public_metrics_enabled: data.public_metrics_enabled,
-    public_metrics_territories: data.public_metrics_territories,
-    public_metrics_distros: data.public_metrics_distros,
-    public_metrics_blacklist: data.public_metrics_blacklist,
-  };
-}
-
-export default getDefaultValues;
diff --git a/static/js/publisher/listing/utils/getFormData.ts b/static/js/publisher/listing/utils/getFormData.ts
deleted file mode 100644
index a64ee98703..0000000000
--- a/static/js/publisher/listing/utils/getFormData.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-const addDateToFilename = (file: File): File => {
-  const now = Math.round(new Date().getTime() / 1000);
-  const nameParts = file.name.split(".");
-  const extension = nameParts.pop();
-  const newName = `${nameParts.join(".")}-${now}.${extension}`;
-  return new File([file], newName);
-};
-
-const formatLinkFields = (fields: Array<{ url: string }>) => {
-  return fields.map((item) => item.url);
-};
-
-function getFormData(
-  data: { [key: string]: any },
-  snapId: string | undefined,
-  changes: { [key: string]: any }
-) {
-  const formData = new FormData();
-
-  formData.set("csrf_token", window.CSRF_TOKEN);
-  formData.set("snap_id", snapId || "");
-
-  if (changes.title) {
-    formData.set("title", data?.title);
-  }
-
-  if (changes.summary) {
-    formData.set("summary", data?.summary);
-  }
-
-  if (changes.description) {
-    formData.set("description", data?.description);
-  }
-
-  if (changes.video_urls) {
-    formData.set("video_urls", data?.video_urls);
-  }
-
-  if (changes.website) {
-    formData.set("website", data?.website);
-  }
-
-  if (changes.contact) {
-    formData.set("contact", data?.contact);
-  }
-
-  if (changes.categories) {
-    formData.set("primary-category", data?.["primary-category"]);
-    formData.set("secondary-category", data?.["secondary-category"]);
-  }
-
-  if (changes.public_metrics_enabled) {
-    formData.set("public_metrics_enabled", data?.public_metrics_enabled);
-  }
-
-  if (changes.public_metrics_blacklist) {
-    formData.set("public_metrics_blacklist", data?.public_metrics_blacklist);
-  }
-
-  if (changes.license) {
-    formData.set("license", data?.license || "unset");
-  }
-
-  // The currently uploaded images
-  if (changes.images) {
-    formData.set("images", data?.["images"]);
-  }
-
-  if (changes.links) {
-    formData.set(
-      "links",
-      JSON.stringify({
-        contact: formatLinkFields(data?.contacts),
-        donation: formatLinkFields(data?.donations),
-        issues: formatLinkFields(data?.issues),
-        "source-code": formatLinkFields(data?.["source-code"]),
-        website: formatLinkFields(data?.websites),
-      })
-    );
-  }
-
-  if (data?.icon?.[0]) {
-    formData.append("icon", data.icon[0]);
-  }
-
-  if (data?.banner?.[0]) {
-    formData.append("banner-image", data.banner[0]);
-  }
-
-  if (data?.screenshots) {
-    data?.screenshots.forEach((screenshot: FileList) => {
-      if (screenshot[0]) {
-        // Add a timestamp to the filename
-        const oldName = screenshot[0].name;
-        const newFile = addDateToFilename(screenshot[0]);
-
-        formData.append("screenshots", newFile);
-
-        // update changes object
-        const imageIndex = changes.images.findIndex(
-          (image: any) => image.name === oldName
-        );
-        changes.images[imageIndex].name = newFile.name;
-        changes.images[imageIndex].url = URL.createObjectURL(newFile);
-      }
-    });
-  }
-
-  // Set changes last, just incase any modifications have happened
-  formData.set("changes", JSON.stringify(changes));
-
-  return formData;
-}
-
-export default getFormData;
diff --git a/static/js/publisher/listing/utils/getListingData.ts b/static/js/publisher/listing/utils/getListingData.ts
deleted file mode 100644
index 1566241020..0000000000
--- a/static/js/publisher/listing/utils/getListingData.ts
+++ /dev/null
@@ -1,141 +0,0 @@
-type License = {
-  key: string;
-  name: string;
-};
-
-const getOtherWebsites = (websites: Array<string>) => {
-  if (websites.length > 1) {
-    return websites.slice(1, websites.length).map((url) => ({ url })) as Array<{
-      url: string;
-    }>;
-  }
-
-  return [] as [];
-};
-
-const licenseSort = (a: License, b: License) => {
-  if (a.name < b.name) {
-    return -1;
-  }
-
-  if (a.name > b.name) {
-    return 1;
-  }
-
-  return 0;
-};
-
-function getListingData(listingData: { [key: string]: any }) {
-  let images = [];
-
-  if (window?.listingData?.icon_url) {
-    images.push({
-      url: window?.listingData?.icon_url,
-      type: "icon",
-      status: "uploaded",
-    });
-  }
-
-  if (window?.listingData?.banner_urls.length) {
-    images.push({
-      url: window?.listingData?.banner_urls[0],
-      type: "banner",
-      status: "uploaded",
-    });
-  }
-
-  if (window?.listingData?.screenshot_urls) {
-    images = images.concat(
-      window?.listingData?.screenshot_urls.map((url: string) => {
-        return {
-          url,
-          type: "screenshot",
-          status: "uploaded",
-        };
-      })
-    );
-  }
-
-  return {
-    snap_name: listingData?.snap_name,
-    title: listingData?.snap_title,
-    summary: listingData?.summary,
-    description: listingData?.description,
-    website: listingData?.website,
-    contact: listingData?.contact,
-    categories: listingData?.categories,
-    public_metrics_enabled: listingData?.public_metrics_enabled,
-    public_metrics_blacklist: listingData?.public_metrics_blacklist,
-    license: listingData?.license,
-    license_type: listingData?.license_type,
-    licenses: listingData?.licenses.sort(licenseSort),
-    video_urls: listingData?.video_urls[0] || "",
-    "primary-category": listingData?.snap_categories?.categories[0],
-    "secondary-category": listingData?.snap_categories?.categories[1],
-    public_metrics_territories: !listingData?.public_metrics_blacklist.includes(
-      "installed_base_by_country_percent"
-    ),
-    public_metrics_distros: !listingData?.public_metrics_blacklist.includes(
-      "weekly_installed_base_by_operating_system_normalized"
-    ),
-    update_metadata_on_release: listingData?.update_metadata_on_release,
-    contacts:
-      listingData.links && listingData.links.contact
-        ? listingData.links.contact.map((link: string) => {
-            return {
-              url: link,
-            };
-          })
-        : [],
-    donations:
-      listingData.links && listingData.links.donations
-        ? listingData.links.donations.map((link: string) => {
-            return {
-              url: link,
-            };
-          })
-        : [],
-    issues:
-      listingData.links && listingData.links.issues
-        ? listingData.links.issues.map((link: string) => {
-            return {
-              url: link,
-            };
-          })
-        : [],
-    "source-code":
-      listingData.links && listingData.links["source"]
-        ? listingData.links["source"].map((link: string) => {
-            return {
-              url: link,
-            };
-          })
-        : [],
-    primary_website:
-      listingData.links && listingData.links.website
-        ? listingData.links.website[0]
-        : "",
-    websites:
-      listingData.links && listingData.links.website
-        ? getOtherWebsites(listingData.links.website)
-        : [],
-    banner_urls: window?.listingData?.banner_urls,
-    icon_url: window?.listingData?.icon_url,
-    screenshot_urls: window?.listingData?.screenshot_urls,
-    icon: new File([], ""),
-    banner_url: window?.listingData?.banner_urls[0],
-    banner: new File([], ""),
-    screenshots: [
-      new File([], ""),
-      new File([], ""),
-      new File([], ""),
-      new File([], ""),
-      new File([], ""),
-    ],
-    images,
-    snap_categories: window?.listingData?.snap_categories?.categories,
-    links: window?.listingData?.links,
-  };
-}
-
-export default getListingData;
diff --git a/static/js/publisher/listing/utils/index.ts b/static/js/publisher/listing/utils/index.ts
index bfdb5bf9f0..d7a5f6555d 100644
--- a/static/js/publisher/listing/utils/index.ts
+++ b/static/js/publisher/listing/utils/index.ts
@@ -1,19 +1,15 @@
-import getChanges from "./getChanges";
-import getFormData from "./getFormData";
-import getListingData from "./getListingData";
 import validateImageDimensions from "./validateImageDimensions";
-import validateAspectRatio from "./validateAspectRatio";
-import formatFileSize from "./formatFileSize";
 import shouldShowUpdateMetadataWarning from "./shouldShowUpdateMetadataWarning";
-import getDefaultValues from "./getDefaultValues";
+import addDateToFilename from "./addDateToFilename";
+import formatImageChanges from "./formatImageChanges";
+import getChanges from "./getChanges";
+import getDefaultData from "./getDefaultData";
 
 export {
-  getChanges,
-  getFormData,
-  getListingData,
   validateImageDimensions,
-  validateAspectRatio,
-  formatFileSize,
   shouldShowUpdateMetadataWarning,
-  getDefaultValues,
+  addDateToFilename,
+  formatImageChanges,
+  getChanges,
+  getDefaultData,
 };
diff --git a/static/js/publisher/listing/utils/shouldShowUpdateMetadataWarning.ts b/static/js/publisher/listing/utils/shouldShowUpdateMetadataWarning.ts
index ce625a3c1e..f02262ca9d 100644
--- a/static/js/publisher/listing/utils/shouldShowUpdateMetadataWarning.ts
+++ b/static/js/publisher/listing/utils/shouldShowUpdateMetadataWarning.ts
@@ -6,12 +6,12 @@ function shouldShowUpdateMetadataWarning(dirtyFields: DirtyField) {
   const filteredDirtyFields = [];
 
   for (const [key, value] of Object.entries(dirtyFields)) {
-    if (value === true && key !== "banner_url" && key !== "icon_url") {
+    if (value === true && key !== "banner_urls" && key !== "icon_url") {
       filteredDirtyFields.push(key);
     }
 
     if (
-      key === "banner_url" &&
+      key === "banner_urls" &&
       value === true &&
       !filteredDirtyFields.includes("banner") &&
       !filteredDirtyFields.includes("screenshot_urls")
diff --git a/static/js/publisher/listing/utils/validateAspectRatio.ts b/static/js/publisher/listing/utils/validateAspectRatio.ts
deleted file mode 100644
index a0a1375d85..0000000000
--- a/static/js/publisher/listing/utils/validateAspectRatio.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-function validateAspectRatio(
-  width: number,
-  height: number,
-  ratio: { width: number; height: number }
-): boolean {
-  const aspectRatio = ratio.width / ratio.height;
-  const expectedHeight = width / aspectRatio;
-
-  return expectedHeight === height;
-}
-
-export default validateAspectRatio;
diff --git a/static/js/publisher/shared/PageHeader/PageHeader.tsx b/static/js/publisher/shared/PageHeader/PageHeader.tsx
index ec55209359..f71060e358 100644
--- a/static/js/publisher/shared/PageHeader/PageHeader.tsx
+++ b/static/js/publisher/shared/PageHeader/PageHeader.tsx
@@ -1,7 +1,7 @@
 import { Strip, Tabs } from "@canonical/react-components";
 
 type Props = {
-  snapName: string;
+  snapName: string | undefined;
   snapTitle?: string;
   activeTab: string;
   publisherName?: string;
diff --git a/static/js/publisher/shared/SaveAndPreview/SaveAndPreview.tsx b/static/js/publisher/shared/SaveAndPreview/SaveAndPreview.tsx
index a6b71a5685..07f5470ee7 100644
--- a/static/js/publisher/shared/SaveAndPreview/SaveAndPreview.tsx
+++ b/static/js/publisher/shared/SaveAndPreview/SaveAndPreview.tsx
@@ -4,7 +4,7 @@ import { Row, Col, Button } from "@canonical/react-components";
 import debounce from "../../../libs/debounce";
 
 type Props = {
-  snapName: string;
+  snapName: string | undefined;
   isDirty: boolean;
   reset: Function;
   isSaving: boolean;
diff --git a/static/js/publisher/tour.tsx b/static/js/publisher/tour.tsx
index fa83cb6d88..0cecdd1fae 100644
--- a/static/js/publisher/tour.tsx
+++ b/static/js/publisher/tour.tsx
@@ -4,6 +4,8 @@ import Tour from "./tour/tour";
 
 import { toggleShadowWhenSticky } from "./market/stickyListingBar";
 
+import type { Step } from "./listing/types";
+
 // returns true if % of truthy values in the array is above the threshold
 function isCompleted(fields: unknown[], threshold = 0.5): boolean {
   const completed = fields.filter((isCompleted) => isCompleted);
@@ -19,13 +21,7 @@ export function initTour({
   startTour,
 }: {
   container: HTMLElement;
-  steps: Array<{
-    id: string;
-    position: string;
-    elements: HTMLElement[];
-    title: string;
-    content: string;
-  }>;
+  steps: Step[];
   onTourStarted: () => void;
   onTourClosed: () => void;
   startTour: boolean;
@@ -56,13 +52,7 @@ export function initListingTour({
 }: {
   snapName: string;
   container: HTMLElement;
-  steps: Array<{
-    id: string;
-    position: string;
-    elements: HTMLElement[];
-    content: string;
-    title: string;
-  }>;
+  steps: Step[];
   formFields: {
     title: string;
     snap_name: string;
diff --git a/static/js/publisher/tour/helpers.ts b/static/js/publisher/tour/helpers.ts
index cf0f4457ad..5b9b36a4b8 100644
--- a/static/js/publisher/tour/helpers.ts
+++ b/static/js/publisher/tour/helpers.ts
@@ -1,20 +1,14 @@
 import { MASK_OFFSET } from "./constants";
 
+import type { Step } from "../listing/types";
+
 // check if element is part of the DOM and is visible
 export const isVisibleInDocument = (el: HTMLElement): boolean =>
   document.contains(el) && !(el.offsetWidth === 0 && el.offsetHeight === 0);
 
 // find DOM elements for each step, ignore steps with no elements
 // set default position to "bottom-left"
-export function prepareSteps(
-  steps: Array<{
-    id: string;
-    position: string;
-    elements: HTMLElement[];
-    content: string;
-    title: string;
-  }>
-): Array<{
+export function prepareSteps(steps: Step[]): Array<{
   id: string;
   position: string;
   elements: HTMLElement[];
diff --git a/static/js/publisher/tour/tour.tsx b/static/js/publisher/tour/tour.tsx
index 01f6e5a3c8..6978f02aa7 100644
--- a/static/js/publisher/tour/tour.tsx
+++ b/static/js/publisher/tour/tour.tsx
@@ -5,14 +5,10 @@ import TourBar from "./tourBar";
 
 import { tourStartedAutomatically } from "./metricsEvents";
 
+import type { Step } from "../listing/types";
+
 type Props = {
-  steps: Array<{
-    id: string;
-    title: string;
-    content: string;
-    position: string;
-    elements: HTMLElement[];
-  }>;
+  steps: Step[];
   startTour: boolean;
   onTourStarted: () => void;
   onTourClosed: () => void;
diff --git a/static/js/publisher/tour/tourOverlay.tsx b/static/js/publisher/tour/tourOverlay.tsx
index db2c756a9f..c9ddd2b165 100644
--- a/static/js/publisher/tour/tourOverlay.tsx
+++ b/static/js/publisher/tour/tourOverlay.tsx
@@ -14,18 +14,14 @@ import {
 
 import { animateScrollTo } from "../../public/scroll-to";
 
+import type { Step } from "../listing/types";
+
 export default function TourOverlay({
   steps,
   hideTour,
   currentStepIndex = 0,
 }: {
-  steps: Array<{
-    id: string;
-    position: string;
-    elements: HTMLElement[];
-    content: string;
-    title: string;
-  }>;
+  steps: Step[];
   hideTour: () => void;
   currentStepIndex?: number;
 }) {
@@ -43,7 +39,7 @@ export default function TourOverlay({
         window.pageYOffset || document.documentElement.scrollTop;
 
       // when tooltip is on top of the mask, scroll into view aligning to bottom
-      if (step.position.indexOf("top") === 0) {
+      if (step.position && step.position.indexOf("top") === 0) {
         // scroll element into view aligning it to bottom
         // only if it's below the bottom border of the screen
         // or it's in the top half of the screen
@@ -60,7 +56,7 @@ export default function TourOverlay({
         }
       }
       // when tooltip is on the bottom of the mask, scroll aligning to top
-      if (step.position.indexOf("bottom") === 0) {
+      if (step.position && step.position.indexOf("bottom") === 0) {
         // scroll element into view, but only if it's higher on page than top offset
         // or it is in the bottom half of screen
         if (
@@ -76,7 +72,7 @@ export default function TourOverlay({
 
   const overlayEl = useRef(null);
 
-  const mask = getMaskFromElements(step.elements);
+  const mask = getMaskFromElements(step.elements || []);
 
   // rerender on resize or scroll
   // it is an unusual use of useState to force rerender, but on resize or scroll
diff --git a/static/js/publisher/tour/tourStepCard.tsx b/static/js/publisher/tour/tourStepCard.tsx
index e35e4dec80..2b4865bac2 100644
--- a/static/js/publisher/tour/tourStepCard.tsx
+++ b/static/js/publisher/tour/tourStepCard.tsx
@@ -1,13 +1,9 @@
 import { ReactNode } from "react";
 
+import type { Step } from "../listing/types";
+
 type Props = {
-  steps: Array<{
-    id: string;
-    position: string;
-    elements: HTMLElement[];
-    content: string;
-    title: string;
-  }>;
+  steps: Step[];
   currentStepIndex: number;
   mask: {
     top: number;
diff --git a/templates/publisher/listing.html b/templates/publisher/listing.html
index cd34b4f590..27a6e41595 100644
--- a/templates/publisher/listing.html
+++ b/templates/publisher/listing.html
@@ -1,17 +1,14 @@
 {% extends "publisher/_publisher_layout.html" %}
 
 {% block meta_title %}
-Listing details for {% if display_title %}{{ display_title }}{% else %}{{ snap_title }}{% endif %}
+Listing details for {{ snap_name }}
 {% endblock %}
 
 {% block content %}
 <main id="main-content"></main>
 <script>
   window.DNS_VERIFICATION_TOKEN = "{{ dns_verification_token }}"
-  window.SENTRY_DSN = "{{ SENTRY_DSN }}";
   window.CSRF_TOKEN = "{{ csrf_token() }}";
-  window.listingData = JSON.parse({{ listing_data|default({})|tojson }});
-  window.tourSteps = {{ tour_steps|tojson }};
 </script>
 <script src="{{ static_url('js/dist/publisher-listing.js') }}"></script>
 {% endblock %}
diff --git a/tests/publisher/snaps/tests_listing.py b/tests/publisher/snaps/tests_listing.py
index 7aa701835e..a099cb1a3b 100644
--- a/tests/publisher/snaps/tests_listing.py
+++ b/tests/publisher/snaps/tests_listing.py
@@ -5,7 +5,7 @@
 class ListingPageNotAuth(BaseTestCases.EndpointLoggedOut):
     def setUp(self):
         snap_name = "test-snap"
-        endpoint_url = "/{}/listing".format(snap_name)
+        endpoint_url = "/api/{}/listing".format(snap_name)
 
         super().setUp(snap_name=snap_name, endpoint_url=endpoint_url)
 
@@ -16,7 +16,7 @@ def setUp(self):
 
         api_url = "https://dashboard.snapcraft.io/dev/api/snaps/info/{}"
         api_url = api_url.format(snap_name)
-        endpoint_url = "/{}/listing".format(snap_name)
+        endpoint_url = "/api/{}/listing".format(snap_name)
 
         super().setUp(
             snap_name=snap_name,
@@ -61,7 +61,7 @@ def test_account_logged_in(self):
             "categories": {"items": []},
             "status": "published",
             "update_metadata_on_release": True,
-            "links": {"website": "https://example.com"},
+            "links": {"website": ["https://example.com"]},
         }
 
         responses.add(responses.GET, self.api_url, json=payload, status=200)
@@ -79,25 +79,6 @@ def test_account_logged_in(self):
         self.check_call_by_api_url(responses.calls)
 
         assert response.status_code == 200
-        self.assert_template_used("publisher/listing.html")
-
-        self.assert_context("snap_id", "id")
-        self.assert_context("snap_name", snap_name)
-        self.assert_context("snap_title", "Snap title")
-        self.assert_context("summary", "This is a summary")
-        self.assert_context("description", "This is a description")
-        self.assert_context("icon_url", None)
-        self.assert_context("publisher_name", "The publisher")
-        self.assert_context("username", "toto")
-        self.assert_context("screenshot_urls", [])
-        self.assert_context("contact", "contact adress")
-        self.assert_context("website", "website_url")
-        self.assert_context("is_on_stable", False)
-        self.assert_context("public_metrics_enabled", True)
-        self.assert_context("public_metrics_blacklist", False)
-        self.assert_context("license", "License")
-        self.assert_context("video_urls", [])
-        self.assert_context("from", "test")
 
     @responses.activate
     def test_icon(self):
@@ -120,7 +101,7 @@ def test_icon(self):
             "categories": {"items": []},
             "status": "published",
             "update_metadata_on_release": True,
-            "links": {"website": "https://example.com"},
+            "links": {"website": ["https://example.com"]},
         }
 
         responses.add(responses.GET, self.api_url, json=payload, status=200)
@@ -136,9 +117,6 @@ def test_icon(self):
         self.check_call_by_api_url(responses.calls)
 
         assert response.status_code == 200
-        self.assert_template_used("publisher/listing.html")
-
-        self.assert_context("icon_url", "this is a url")
 
     @responses.activate
     def test_screenshots(self):
@@ -161,7 +139,7 @@ def test_screenshots(self):
             "categories": {"items": []},
             "status": "published",
             "update_metadata_on_release": True,
-            "links": {"website": "https://example.com"},
+            "links": {"website": ["https://example.com"]},
         }
 
         responses.add(responses.GET, self.api_url, json=payload, status=200)
@@ -177,9 +155,6 @@ def test_screenshots(self):
         self.check_call_by_api_url(responses.calls)
 
         assert response.status_code == 200
-        self.assert_template_used("publisher/listing.html")
-
-        self.assert_context("screenshot_urls", ["this is a url"])
 
     @responses.activate
     def test_banner_images(self):
@@ -208,7 +183,7 @@ def test_banner_images(self):
             "categories": {"items": []},
             "status": "published",
             "update_metadata_on_release": True,
-            "links": {"website": "https://example.com"},
+            "links": {"website": ["https://example.com"]},
         }
 
         responses.add(responses.GET, self.api_url, json=payload, status=200)
@@ -224,9 +199,6 @@ def test_banner_images(self):
         self.check_call_by_api_url(responses.calls)
 
         assert response.status_code == 200
-        self.assert_template_used("publisher/listing.html")
-
-        self.assert_context("banner_urls", ["/banner_1234.png"])
 
     @responses.activate
     def test_videos(self):
@@ -249,7 +221,7 @@ def test_videos(self):
             "categories": {"items": []},
             "status": "published",
             "update_metadata_on_release": True,
-            "links": {"website": "https://example.com"},
+            "links": {"website": ["https://example.com"]},
         }
 
         responses.add(responses.GET, self.api_url, json=payload, status=200)
@@ -265,9 +237,6 @@ def test_videos(self):
         self.check_call_by_api_url(responses.calls)
 
         assert response.status_code == 200
-        self.assert_template_used("publisher/listing.html")
-
-        self.assert_context("video_urls", ["https://youtube.com/watch?v=1234"])
 
     @responses.activate
     def test_failed_categories_api(self):
@@ -290,7 +259,7 @@ def test_failed_categories_api(self):
             "categories": {"items": []},
             "status": "published",
             "update_metadata_on_release": True,
-            "links": {"website": "https://example.com"},
+            "links": {"website": ["https://example.com"]},
         }
 
         responses.add(responses.GET, self.api_url, json=payload, status=200)
@@ -306,6 +275,3 @@ def test_failed_categories_api(self):
         self.check_call_by_api_url(responses.calls)
 
         assert response.status_code == 200
-        self.assert_template_used("publisher/listing.html")
-
-        self.assert_context("categories", [])
diff --git a/tests/publisher/snaps/tests_post_binary_metadata.py b/tests/publisher/snaps/tests_post_binary_metadata.py
deleted file mode 100644
index 6a3d037a0f..0000000000
--- a/tests/publisher/snaps/tests_post_binary_metadata.py
+++ /dev/null
@@ -1,454 +0,0 @@
-import io
-import json
-
-import responses
-from tests.publisher.endpoint_testing import BaseTestCases
-
-
-class PostBinaryMetadataListingPageLoggedOut(BaseTestCases.EndpointLoggedOut):
-    def setUp(self):
-        snap_name = "test-snap"
-        endpoint_url = "/{}/listing".format(snap_name)
-
-        super().setUp(
-            snap_name=snap_name,
-            endpoint_url=endpoint_url,
-            method_endpoint="POST",
-        )
-
-
-class PostMetadataListingPage(BaseTestCases.EndpointLoggedInErrorHandling):
-    def setUp(self):
-        self.snap_id = "complexId"
-        snap_name = "test-snap"
-        endpoint_url = "/{}/listing".format(snap_name)
-        api_url = (
-            "https://dashboard.snapcraft.io/dev/api/"
-            "snaps/{}/binary-metadata?conflict_on_update=true"
-        ).format(self.snap_id)
-
-        changes = {"images": None}
-        data = dict(snap_id=self.snap_id, changes=json.dumps(changes))
-
-        super().setUp(
-            snap_name=snap_name,
-            endpoint_url=endpoint_url,
-            method_endpoint="POST",
-            api_url=api_url,
-            method_api="GET",
-            data=data,
-        )
-
-
-class PostBinaryMetadataErrorListingPage(BaseTestCases.EndpointLoggedIn):
-    def setUp(self):
-        responses.reset()
-
-        self.snap_id = "complexId"
-        snap_name = "test-snap"
-        endpoint_url = "/{}/listing".format(snap_name)
-        binary_url = (
-            "https://dashboard.snapcraft.io/dev/api/"
-            "snaps/{}/binary-metadata?conflict_on_update=true"
-        ).format(self.snap_id)
-
-        responses.add(responses.GET, binary_url, json=[], status=200)
-        payload = {
-            "error_list": [
-                {"code": "this-is-a-code", "message": "Great error message"}
-            ]
-        }
-        responses.add(responses.PUT, binary_url, json=payload, status=400)
-
-        api_url = "https://dashboard.snapcraft.io/dev/api/snaps/info/{}"
-        api_url = api_url.format(snap_name)
-
-        changes = {
-            "images": [
-                {
-                    "file": {},
-                    "url": "blob:this_is_a_blob",
-                    "name": "blue.png",
-                    "type": "icon",
-                    "status": "new",
-                }
-            ]
-        }
-
-        data = dict(
-            icon=[(io.BytesIO(b"my file contents"), "blue.png")],
-            snap_id=self.snap_id,
-            changes=json.dumps(changes),
-        )
-
-        super().setUp(
-            snap_name=snap_name,
-            endpoint_url=endpoint_url,
-            method_endpoint="POST",
-            api_url=api_url,
-            method_api="GET",
-            data=data,
-        )
-
-
-class PostBinaryMetadataListingPage(BaseTestCases.EndpointLoggedIn):
-    def setUp(self):
-        responses.reset()
-
-        self.snap_id = "complexId"
-        snap_name = "test-snap"
-        endpoint_url = "/{}/listing".format(snap_name)
-        api_url = (
-            "https://dashboard.snapcraft.io/dev/api/"
-            "snaps/{}/binary-metadata?conflict_on_update=true"
-        ).format(self.snap_id)
-
-        responses.add(responses.GET, api_url, json=[], status=200)
-
-        changes = {"images": []}
-        data = dict(snap_id=self.snap_id, changes=json.dumps(changes))
-
-        super().setUp(
-            snap_name=snap_name,
-            endpoint_url=endpoint_url,
-            method_endpoint="POST",
-            api_url=api_url,
-            method_api="PUT",
-            data=data,
-        )
-
-    @responses.activate
-    def test_upload_new_screenshot(self):
-        responses.add(
-            responses.PUT, self.api_url, json={"totot": "toto"}, status=200
-        )
-
-        changes = {
-            "images": [
-                {
-                    "file": {},
-                    "url": "blob:this_is_a_blob",
-                    "name": "blue.png",
-                    "type": "screenshot",
-                    "status": "new",
-                }
-            ]
-        }
-
-        data = dict(
-            screenshots=[(io.BytesIO(b"my file contents"), "blue.png")],
-            snap_id=self.snap_id,
-            changes=json.dumps(changes),
-        )
-
-        response = self.client.post(
-            self.endpoint_url, content_type="multipart/form-data", data=data
-        )
-
-        self.assertEqual(2, len(responses.calls))
-        called = responses.calls[0]
-        self.assertEqual(self.api_url, called.request.url)
-        self.assertEqual("GET", called.request.method)
-        self.assertEqual(
-            self.authorization, called.request.headers.get("Authorization")
-        )
-
-        called = responses.calls[1]
-        self.assertEqual(self.api_url, called.request.url)
-        self.assertEqual("PUT", called.request.method)
-        self.assertEqual(
-            self.authorization, called.request.headers.get("Authorization")
-        )
-
-        self.assertIn(b'"key": "blue.png"', called.request.body)
-        self.assertIn(b'"type": "screenshot"', called.request.body)
-        self.assertIn(b'"filename": "blue.png"', called.request.body)
-        hash_screenshot = (
-            '"hash": '
-            '"114d70ba7d04c76d8c217c970f99682025c89b1a6ffe91eb9045653b4b954eb9'
-        )
-        self.assertIn(
-            bytes(hash_screenshot, encoding="utf-8"), called.request.body
-        )
-
-        assert response.status_code == 302
-        assert response.location == f"{self._get_location()}.json"
-
-    @responses.activate
-    def test_upload_new_icon(self):
-        responses.add(responses.PUT, self.api_url, json={}, status=200)
-
-        changes = {
-            "images": [
-                {
-                    "file": {},
-                    "url": "blob:this_is_a_blob",
-                    "name": "blue.png",
-                    "type": "icon",
-                    "status": "new",
-                }
-            ]
-        }
-
-        data = dict(
-            icon=[(io.BytesIO(b"my file contents"), "blue.png")],
-            snap_id=self.snap_id,
-            changes=json.dumps(changes),
-        )
-
-        response = self.client.post(
-            self.endpoint_url, content_type="multipart/form-data", data=data
-        )
-
-        self.assertEqual(2, len(responses.calls))
-        called = responses.calls[0]
-        self.assertEqual(self.api_url, called.request.url)
-        self.assertEqual("GET", called.request.method)
-        self.assertEqual(
-            self.authorization, called.request.headers.get("Authorization")
-        )
-
-        called = responses.calls[1]
-        self.assertEqual(self.api_url, called.request.url)
-        self.assertEqual("PUT", called.request.method)
-        self.assertEqual(
-            self.authorization, called.request.headers.get("Authorization")
-        )
-
-        self.assertIn(b'"key": "blue.png"', called.request.body)
-        self.assertIn(b'"type": "icon"', called.request.body)
-        self.assertIn(b'"filename": "blue.png"', called.request.body)
-        hash_screenshot = (
-            '"hash": '
-            '"114d70ba7d04c76d8c217c970f99682025c89b1a6ffe91eb9045653b4b954eb9'
-        )
-        self.assertIn(
-            bytes(hash_screenshot, encoding="utf-8"), called.request.body
-        )
-
-        assert response.status_code == 302
-        assert response.location == f"{self._get_location()}.json"
-
-    @responses.activate
-    def test_upload_new_screenshot_with_existing_ones(self):
-        responses.reset()
-
-        current_screenshots = [
-            {
-                "url": "URL",
-                "hash": "HASH",
-                "type": "screenshot",
-                "filename": "red.png",
-            }
-        ]
-        responses.add(
-            responses.GET, self.api_url, json=current_screenshots, status=200
-        )
-        responses.add(responses.PUT, self.api_url, json={}, status=200)
-
-        changes = {
-            "images": [
-                {
-                    "file": {},
-                    "url": "blob:this_is_a_blob",
-                    "name": "blue.png",
-                    "type": "icon",
-                    "status": "new",
-                },
-                {"url": "URL", "type": "screenshot", "status": "uploaded"},
-            ]
-        }
-
-        data = dict(
-            screenshots=[(io.BytesIO(b"my file contents"), "blue.png")],
-            snap_id=self.snap_id,
-            changes=json.dumps(changes),
-        )
-
-        response = self.client.post(
-            self.endpoint_url, content_type="multipart/form-data", data=data
-        )
-
-        self.assertEqual(2, len(responses.calls))
-        called = responses.calls[0]
-        self.assertEqual(self.api_url, called.request.url)
-        self.assertEqual("GET", called.request.method)
-        self.assertEqual(
-            self.authorization, called.request.headers.get("Authorization")
-        )
-
-        called = responses.calls[1]
-        self.assertEqual(self.api_url, called.request.url)
-        self.assertEqual("PUT", called.request.method)
-        self.assertEqual(
-            self.authorization, called.request.headers.get("Authorization")
-        )
-
-        self.assertIn(b'"key": "blue.png"', called.request.body)
-        self.assertIn(b'"type": "screenshot"', called.request.body)
-        self.assertIn(b'"filename": "blue.png"', called.request.body)
-        hash_screenshot = (
-            '"hash": '
-            '"114d70ba7d04c76d8c217c970f99682025c89b1a6ffe91eb9045653b4b954eb9'
-        )
-        self.assertIn(
-            bytes(hash_screenshot, encoding="utf-8"), called.request.body
-        )
-
-        self.assertIn(b'"url": "URL"', called.request.body)
-        self.assertIn(b'"hash": "HASH"', called.request.body)
-        self.assertIn(b'"type": "screenshot"', called.request.body)
-        self.assertIn(b'"filename": "red.png"', called.request.body)
-
-        assert response.status_code == 302
-        assert response.location == f"{self._get_location()}.json"
-
-    @responses.activate
-    def test_upload_duplicated_screenshot(self):
-        responses.reset()
-
-        current_screenshots = []
-        responses.add(
-            responses.GET, self.api_url, json=current_screenshots, status=200
-        )
-        responses.add(responses.PUT, self.api_url, json={}, status=200)
-
-        changes = {
-            "images": [
-                {
-                    "file": {},
-                    "url": "blob:this_is_a_blob",
-                    "name": "blue.png",
-                    "type": "icon",
-                    "status": "new",
-                },
-                {
-                    "file": {},
-                    "url": "blob:this_is_a_blob",
-                    "name": "blue.png",
-                    "type": "icon",
-                    "status": "new",
-                },
-            ]
-        }
-
-        data = dict(
-            screenshots=[(io.BytesIO(b"my file contents"), "blue.png")],
-            snap_id=self.snap_id,
-            changes=json.dumps(changes),
-        )
-
-        response = self.client.post(
-            self.endpoint_url, content_type="multipart/form-data", data=data
-        )
-
-        self.assertEqual(2, len(responses.calls))
-        called = responses.calls[0]
-        self.assertEqual(self.api_url, called.request.url)
-        self.assertEqual("GET", called.request.method)
-        self.assertEqual(
-            self.authorization, called.request.headers.get("Authorization")
-        )
-
-        called = responses.calls[1]
-        self.assertEqual(self.api_url, called.request.url)
-        self.assertEqual("PUT", called.request.method)
-        self.assertEqual(
-            self.authorization, called.request.headers.get("Authorization")
-        )
-
-        self.assertIn(b'"key": "blue.png"', called.request.body)
-        self.assertIn(b'"type": "screenshot"', called.request.body)
-        self.assertIn(b'"filename": "blue.png"', called.request.body)
-        hash_screenshot = (
-            '"hash": '
-            '"114d70ba7d04c76d8c217c970f99682025c89b1a6ffe91eb9045653b4b954eb9'
-        )
-        self.assertIn(
-            bytes(hash_screenshot, encoding="utf-8"), called.request.body
-        )
-
-        assert called.request.body.count(b'"key": "blue.png"') == 1
-        assert response.status_code == 302
-        assert response.location == f"{self._get_location()}.json"
-
-    @responses.activate
-    def test_upload_screenshot_with_duplicates_current_ones(self):
-        responses.reset()
-
-        current_screenshots = [
-            {
-                "url": "URL",
-                "hash": "HASH",
-                "type": "screenshot",
-                "filename": "red.png",
-            },
-            {
-                "url": "URL",
-                "hash": "HASH",
-                "type": "screenshot",
-                "filename": "red.png",
-            },
-        ]
-        responses.add(
-            responses.GET, self.api_url, json=current_screenshots, status=200
-        )
-        responses.add(responses.PUT, self.api_url, json={}, status=200)
-
-        changes = {
-            "images": [
-                {
-                    "file": {},
-                    "url": "blob:this_is_a_blob",
-                    "name": "blue.png",
-                    "type": "icon",
-                    "status": "new",
-                },
-                {"url": "URL", "type": "screenshot", "status": "uploaded"},
-            ]
-        }
-
-        data = dict(
-            screenshots=[(io.BytesIO(b"my file contents"), "blue.png")],
-            snap_id=self.snap_id,
-            changes=json.dumps(changes),
-        )
-
-        response = self.client.post(
-            self.endpoint_url, content_type="multipart/form-data", data=data
-        )
-
-        self.assertEqual(2, len(responses.calls))
-        called = responses.calls[0]
-        self.assertEqual(self.api_url, called.request.url)
-        self.assertEqual("GET", called.request.method)
-        self.assertEqual(
-            self.authorization, called.request.headers.get("Authorization")
-        )
-
-        called = responses.calls[1]
-        self.assertEqual(self.api_url, called.request.url)
-        self.assertEqual("PUT", called.request.method)
-        self.assertEqual(
-            self.authorization, called.request.headers.get("Authorization")
-        )
-
-        self.assertIn(b'"key": "blue.png"', called.request.body)
-        self.assertIn(b'"type": "screenshot"', called.request.body)
-        self.assertIn(b'"filename": "blue.png"', called.request.body)
-        hash_screenshot = (
-            '"hash": '
-            '"114d70ba7d04c76d8c217c970f99682025c89b1a6ffe91eb9045653b4b954eb9'
-        )
-        self.assertIn(
-            bytes(hash_screenshot, encoding="utf-8"), called.request.body
-        )
-
-        self.assertIn(b'"url": "URL"', called.request.body)
-        self.assertIn(b'"hash": "HASH"', called.request.body)
-        self.assertIn(b'"type": "screenshot"', called.request.body)
-        self.assertIn(b'"filename": "red.png"', called.request.body)
-
-        assert called.request.body.count(b'"url": "URL"') == 1
-        assert response.status_code == 302
-        assert response.location == f"{self._get_location()}.json"
diff --git a/tests/publisher/snaps/tests_post_listing.py b/tests/publisher/snaps/tests_post_listing.py
index c3cdb99712..7c794a30d0 100644
--- a/tests/publisher/snaps/tests_post_listing.py
+++ b/tests/publisher/snaps/tests_post_listing.py
@@ -7,7 +7,7 @@
 class PostListingPageNotAuth(BaseTestCases.EndpointLoggedOut):
     def setUp(self):
         snap_name = "test-snap"
-        endpoint_url = "/{}/listing".format(snap_name)
+        endpoint_url = "/api/{}/listing".format(snap_name)
 
         super().setUp(
             snap_name=snap_name,
@@ -21,7 +21,7 @@ def setUp(self):
         self.snap_id = "complexId"
 
         snap_name = "test-snap"
-        endpoint_url = "/{}/listing".format(snap_name)
+        endpoint_url = "/api/{}/listing".format(snap_name)
         api_url = (
             "https://dashboard.snapcraft.io/dev/api/"
             "snaps/{}/metadata?conflict_on_update=true"
@@ -43,8 +43,7 @@ def setUp(self):
     def test_post_no_data(self):
         response = self.client.post(self.endpoint_url)
 
-        assert response.status_code == 302
-        assert response.location == f"{self._get_location()}.json"
+        assert response.status_code == 200
 
     @responses.activate
     def test_update_invalid_field(self):
@@ -54,8 +53,7 @@ def test_update_invalid_field(self):
         )
 
         assert 0 == len(responses.calls)
-        assert response.status_code == 302
-        assert response.location == f"{self._get_location()}.json"
+        assert response.status_code == 200
 
     @responses.activate
     def test_update_valid_field(self):
@@ -79,8 +77,7 @@ def test_update_valid_field(self):
             called.request.body,
         )
 
-        assert response.status_code == 302
-        assert response.location == f"{self._get_location()}.json"
+        assert response.status_code == 200
 
     @responses.activate
     def test_update_description_with_carriage_return(self):
@@ -104,316 +101,4 @@ def test_update_description_with_carriage_return(self):
             called.request.body,
         )
 
-        assert response.status_code == 302
-        assert response.location == f"{self._get_location()}.json"
-
-    @responses.activate
-    def test_return_error_udpate_one_field(self):
-        metadata_payload = {
-            "error_list": [{"code": "code", "message": "message"}]
-        }
-
-        responses.add(
-            responses.PUT, self.api_url, json=metadata_payload, status=400
-        )
-
-        info_url = "https://dashboard.snapcraft.io/dev/api/snaps/info/{}"
-        info_url = info_url.format(self.snap_name)
-
-        payload = {
-            "snap_id": self.snap_id,
-            "snap_name": self.snap_name,
-            "title": "Snap title",
-            "summary": "This is a summary",
-            "description": "This is a description",
-            "media": [],
-            "publisher": {"display-name": "The publisher", "username": "toto"},
-            "private": True,
-            "channel_maps_list": [{"map": [{"info": "info"}]}],
-            "contact": "contact address",
-            "website": "website_url",
-            "public_metrics_enabled": True,
-            "public_metrics_blacklist": True,
-            "license": "test OR testing",
-            "video_urls": [],
-            "categories": {"items": []},
-            "links": {},
-        }
-
-        responses.add(responses.GET, info_url, json=payload, status=200)
-        responses.add(
-            responses.GET,
-            "https://api.snapcraft.io/v2/snaps/categories?type=shared",
-            json=[],
-            status=200,
-        )
-
-        changes = {"description": "This is an updated description"}
-
-        response = self.client.post(
-            self.endpoint_url,
-            data={"changes": json.dumps(changes), "snap_id": self.snap_id},
-        )
-
-        self.assertEqual(3, len(responses.calls))
-        called = responses.calls[0]
-        self.assertEqual(self.api_url, called.request.url)
-        self.assertEqual(
-            self.authorization, called.request.headers.get("Authorization")
-        )
-        self.assertEqual(
-            b'{"description": "This is an updated description"}',
-            called.request.body,
-        )
-        called = responses.calls[1]
-        self.assertEqual(info_url, called.request.url)
-        self.assertEqual(
-            self.authorization, called.request.headers.get("Authorization")
-        )
-
-        self.assertEqual(response.status_code, 200)
-        self.assert_template_used("publisher/listing.html")
-
-        self.assert_context("snap_id", self.snap_id)
-        self.assert_context("snap_name", self.snap_name)
-        # udpated field
-        self.assert_context("description", "This is an updated description")
-
-        self.assert_context("snap_title", "Snap title")
-        self.assert_context("summary", "This is a summary")
-        self.assert_context("icon_url", None)
-        self.assert_context("publisher_name", "The publisher")
-        self.assert_context("username", "toto")
-        self.assert_context("screenshot_urls", [])
-        self.assert_context("website", "website_url")
-        self.assert_context("is_on_stable", False)
-        self.assert_context("public_metrics_enabled", True)
-        self.assert_context("public_metrics_blacklist", True)
-        self.assert_context("license", "test OR testing")
-        self.assert_context("video_urls", [])
-
-    @responses.activate
-    def test_return_error_udpate_all_field(self):
-        metadata_payload = {
-            "error_list": [{"code": "code", "message": "message"}]
-        }
-
-        responses.add(
-            responses.PUT, self.api_url, json=metadata_payload, status=400
-        )
-
-        info_url = "https://dashboard.snapcraft.io/dev/api/snaps/info/{}"
-        info_url = info_url.format(self.snap_name)
-
-        payload = {
-            "snap_id": self.snap_id,
-            "snap_name": self.snap_name,
-            "title": "Snap title",
-            "summary": "This is a summary",
-            "description": "This is a description",
-            "media": [],
-            "publisher": {"display-name": "The publisher", "username": "toto"},
-            "private": True,
-            "channel_maps_list": [{"map": [{"info": "info"}]}],
-            "contact": "contact address",
-            "website": "website_url",
-            "public_metrics_enabled": False,
-            "public_metrics_blacklist": True,
-            "license": "test OR testing",
-            "video_urls": [],
-            "categories": {"items": []},
-            "links": {},
-        }
-
-        responses.add(responses.GET, info_url, json=payload, status=200)
-        responses.add(
-            responses.GET,
-            "https://api.snapcraft.io/v2/snaps/categories?type=shared",
-            json=[],
-            status=200,
-        )
-
-        changes = {
-            "snap_title": "New title",
-            "summary": "New summary",
-            "description": "New description",
-            "icon_url": None,
-            "publisher_name": "New publisher",
-            "screenshot_urls": [],
-            "website": "New website",
-            "public_metrics_enabled": True,
-            "public_metrics_blacklist": "new metric1,new metric2",
-            "license": ["test1", "test", "testing"],
-        }
-
-        response = self.client.post(
-            self.endpoint_url,
-            data={"changes": json.dumps(changes), "snap_id": self.snap_id},
-        )
-
-        self.assertEqual(3, len(responses.calls))
-        called = responses.calls[0]
-        self.assertEqual(self.api_url, called.request.url)
-        self.assertEqual(
-            self.authorization, called.request.headers.get("Authorization")
-        )
-        called = responses.calls[1]
-        self.assertEqual(info_url, called.request.url)
-        self.assertEqual(
-            self.authorization, called.request.headers.get("Authorization")
-        )
-
-        self.assertEqual(response.status_code, 200)
-        self.assert_template_used("publisher/listing.html")
-
-        # Not updatable fields
-        self.assert_context("snap_id", self.snap_id)
-        self.assert_context("snap_name", self.snap_name)
-        self.assert_context("icon_url", None)
-        self.assert_context("publisher_name", "The publisher")
-        self.assert_context("username", "toto")
-        self.assert_context("screenshot_urls", [])
-        self.assert_context("snap_title", "Snap title")
-        self.assert_context("is_on_stable", False)
-        self.assert_context("public_metrics_enabled", False)
-        self.assert_context("public_metrics_blacklist", True)
-        self.assert_context("video_urls", [])
-        self.assert_context("license", "test OR testing")
-
-        # All updatable fields
-        self.assert_context("summary", "New summary")
-        self.assert_context("description", "New description")
-        self.assert_context("website", "New website")
-
-    @responses.activate
-    def test_return_error_invalid_field(self):
-        metadata_payload = {
-            "error_list": [
-                {
-                    "code": "invalid-field",
-                    "message": "error message",
-                    "extra": {"name": "description"},
-                }
-            ]
-        }
-
-        responses.add(
-            responses.PUT, self.api_url, json=metadata_payload, status=400
-        )
-
-        info_url = "https://dashboard.snapcraft.io/dev/api/snaps/info/{}"
-        info_url = info_url.format(self.snap_name)
-
-        payload = {
-            "snap_id": self.snap_id,
-            "snap_name": self.snap_name,
-            "title": "Snap title",
-            "summary": "This is a summary",
-            "description": "This is a description",
-            "media": [],
-            "publisher": {"display-name": "The publisher", "username": "toto"},
-            "private": True,
-            "channel_maps_list": [{"map": [{"info": "info"}]}],
-            "contact": "contact adress",
-            "website": "website_url",
-            "public_metrics_enabled": True,
-            "public_metrics_blacklist": True,
-            "license": "test OR testing",
-            "video_urls": [],
-            "categories": {"items": []},
-            "links": {},
-        }
-
-        responses.add(responses.GET, info_url, json=payload, status=200)
-        responses.add(
-            responses.GET,
-            "https://api.snapcraft.io/v2/snaps/categories?type=shared",
-            json=[],
-            status=200,
-        )
-
-        changes = {"description": "This is an updated description"}
-
-        response = self.client.post(
-            self.endpoint_url,
-            data={"changes": json.dumps(changes), "snap_id": self.snap_id},
-        )
-
-        self.assertEqual(3, len(responses.calls))
-        called = responses.calls[0]
-        self.assertEqual(self.api_url, called.request.url)
-        self.assertEqual(
-            self.authorization, called.request.headers.get("Authorization")
-        )
-        called = responses.calls[1]
-        self.assertEqual(info_url, called.request.url)
-        self.assertEqual(
-            self.authorization, called.request.headers.get("Authorization")
-        )
-
-        self.assertEqual(response.status_code, 200)
-        self.assert_template_used("publisher/listing.html")
-
-        self.assert_context("field_errors", {"description": "error message"})
-
-    @responses.activate
-    def test_return_error_udpate_with_failed_categories_api(self):
-        metadata_payload = {
-            "error_list": [{"code": "code", "message": "message"}]
-        }
-
-        responses.add(
-            responses.PUT, self.api_url, json=metadata_payload, status=400
-        )
-
-        info_url = "https://dashboard.snapcraft.io/dev/api/snaps/info/{}"
-        info_url = info_url.format(self.snap_name)
-
-        payload = {
-            "snap_id": self.snap_id,
-            "snap_name": self.snap_name,
-            "title": "Snap title",
-            "summary": "This is a summary",
-            "description": "This is a description",
-            "media": [],
-            "publisher": {"display-name": "The publisher", "username": "toto"},
-            "private": True,
-            "channel_maps_list": [{"map": [{"info": "info"}]}],
-            "contact": "contact address",
-            "website": "website_url",
-            "public_metrics_enabled": False,
-            "public_metrics_blacklist": True,
-            "license": "test OR testing",
-            "video_urls": [],
-            "categories": {"items": []},
-            "links": {},
-        }
-
-        responses.add(responses.GET, info_url, json=payload, status=200)
-        responses.add(
-            responses.GET,
-            "https://api.snapcraft.io/v2/snaps/categories?type=shared",
-            json=[],
-            status=400,
-        )
-
-        changes = {"description": "This is an updated description"}
-
-        self.client.post(
-            self.endpoint_url,
-            data={"changes": json.dumps(changes), "snap_id": self.snap_id},
-        )
-
-        self.assertEqual(3, len(responses.calls))
-        called = responses.calls[0]
-        self.assertEqual(self.api_url, called.request.url)
-        self.assertEqual(
-            self.authorization, called.request.headers.get("Authorization")
-        )
-        called = responses.calls[1]
-        self.assertEqual(info_url, called.request.url)
-        self.assertEqual(
-            self.authorization, called.request.headers.get("Authorization")
-        )
-
-        self.assert_context("categories", [])
+        assert response.status_code == 200
diff --git a/webapp/publisher/snaps/listing_views.py b/webapp/publisher/snaps/listing_views.py
index b7082b6519..38dde97413 100644
--- a/webapp/publisher/snaps/listing_views.py
+++ b/webapp/publisher/snaps/listing_views.py
@@ -4,7 +4,6 @@
 # Packages
 import bleach
 import flask
-from flask import json
 from canonicalwebteam.store_api.stores.snapstore import (
     SnapPublisher,
     SnapStore,
@@ -32,30 +31,49 @@
 
 def get_market_snap(snap_name):
     return flask.redirect(
-        flask.url_for(".get_listing_snap", snap_name=snap_name)
+        flask.url_for(".get_listing_data", snap_name=snap_name)
     )
 
 
 def redirect_post_market_snap(snap_name):
     return flask.redirect(
-        flask.url_for(".post_listing_snap", snap_name=snap_name)
+        flask.url_for(".post_listing_data", snap_name=snap_name)
     )
 
 
 @login_required
-def get_listing_snap(snap_name, is_json=False):
+def get_listing_data(snap_name):
     snap_details = publisher_api.get_snap_info(snap_name, flask.session)
 
     details_metrics_enabled = snap_details["public_metrics_enabled"]
     details_blacklist = snap_details.get("public_metrics_blacklist", [])
 
-    is_on_stable = logic.is_snap_on_stable(snap_details["channel_maps_list"])
-
     # Filter icon & screenshot urls from the media set.
     icon_urls, screenshot_urls, banner_urls = logic.categorise_media(
         snap_details["media"]
     )
 
+    primary_website = ""
+    if (
+        "website" in snap_details["links"]
+        and len(snap_details["links"]["website"]) > 0
+    ):
+        primary_website = snap_details["links"]["website"][0]
+
+    websites = []
+    if "website" in snap_details["links"]:
+        if len(snap_details["links"]["website"]) > 1:
+            snap_details["links"]["website"].pop(0)
+            for website in snap_details["links"]["website"]:
+                websites.append({"url": website})
+
+    def format_links(key):
+        result = []
+        if key in snap_details["links"]:
+            for url in snap_details["links"][key]:
+                result.append({"url": url})
+        return result
+
     licenses = []
     for license in helpers.get_licenses():
         licenses.append({"key": license["licenseId"], "name": license["name"]})
@@ -66,11 +84,6 @@ def get_listing_snap(snap_name, is_json=False):
     if " AND " not in license.upper() and " WITH " not in license.upper():
         license_type = "simple"
 
-    referrer = None
-
-    if flask.request.args.get("from"):
-        referrer = flask.request.args.get("from")
-
     try:
         categories_results = store_api.get_categories()
     except StoreApiError:
@@ -94,56 +107,73 @@ def get_listing_snap(snap_name, is_json=False):
     filename = "publisher/content/listing_tour.yaml"
     tour_steps = helpers.get_yaml(filename, typ="rt")
 
+    primary_category = ""
+    if len(snap_categories["categories"]) > 0:
+        primary_category = snap_categories["categories"][0]
+
+    secondary_category = ""
+    if len(snap_categories["categories"]) > 1:
+        secondary_category = snap_categories["categories"][1]
+
+    video_urls = None
+
+    if len(snap_details["video_urls"]) > 0:
+        video_urls = snap_details["video_urls"][0]
+
     context = {
-        "snap_id": snap_details["snap_id"],
-        "snap_name": snap_details["snap_name"],
-        "snap_title": snap_details["title"],
-        "snap_categories": snap_categories,
+        "title": snap_details["title"],
+        "video_urls": video_urls,
         "summary": snap_details["summary"],
         "description": snap_details["description"],
-        "icon_url": icon_urls[0] if icon_urls else None,
-        "publisher_name": snap_details["publisher"]["display-name"],
-        "username": snap_details["publisher"]["username"],
-        "screenshot_urls": screenshot_urls,
-        "banner_urls": banner_urls,
-        "contact": snap_details["contact"],
-        "private": snap_details["private"],
-        "website": snap_details["website"] or "",
+        "categories": categories,
+        "primary_category": primary_category,
+        "secondary_category": secondary_category,
+        "websites": websites,
+        "contacts": format_links("contact"),
+        "donations": format_links("donations"),
+        "source_code": format_links("source"),
+        "issues": format_links("issues"),
+        "primary_website": primary_website,
+        "snap_id": snap_details["snap_id"],
         "public_metrics_enabled": details_metrics_enabled,
         "public_metrics_blacklist": details_blacklist,
         "license": license,
         "license_type": license_type,
         "licenses": licenses,
-        "video_urls": snap_details["video_urls"],
-        "is_on_stable": is_on_stable,
-        "from": referrer,
-        "categories": categories,
-        "tour_steps": tour_steps,
-        "status": snap_details["status"],
+        "icon_url": icon_urls[0] if icon_urls else None,
+        "screenshot_urls": screenshot_urls,
+        "banner_urls": banner_urls,
         "update_metadata_on_release": snap_details[
             "update_metadata_on_release"
         ],
-        "links": snap_details["links"],
+        "tour_steps": tour_steps,
     }
 
-    if is_json:
-        return flask.jsonify(context)
-    else:
-        token = ""
-        if snap_details["links"]["website"]:
-            token = helpers.get_dns_verification_token(
-                snap_details["snap_name"], snap_details["links"]["website"][0]
-            )
-        return flask.render_template(
-            "publisher/listing.html",
-            **context,
-            listing_data=json.dumps(context),
-            dns_verification_token=token
+    res = {}
+    res["data"] = context
+    res["message"] = ""
+    res["success"] = True
+
+    return flask.jsonify(res)
+
+
+@login_required
+def get_listing_snap(snap_name):
+    snap_details = publisher_api.get_snap_info(snap_name, flask.session)
+    token = ""
+    if snap_details["links"]["website"]:
+        token = helpers.get_dns_verification_token(
+            snap_details["snap_name"], snap_details["links"]["website"][0]
         )
+    return flask.render_template(
+        "publisher/listing.html",
+        snap_name=snap_name,
+        dns_verification_token=token,
+    )
 
 
 @login_required
-def post_listing_snap(snap_name, is_json=False):
+def post_listing_data(snap_name):
     changes = None
     changed_fields = flask.request.form.get("changes")
 
@@ -218,22 +248,6 @@ def post_listing_snap(snap_name, is_json=False):
                 else:
                     error_list = error_list + api_response_error_list.errors
 
-            field_errors, other_errors = logic.invalid_field_errors(error_list)
-
-            details_metrics_enabled = snap_details["public_metrics_enabled"]
-            details_blacklist = snap_details.get(
-                "public_metrics_blacklist", []
-            )
-
-            is_on_stable = logic.is_snap_on_stable(
-                snap_details["channel_maps_list"]
-            )
-
-            # Filter icon & screenshot urls from the media set.
-            icon_urls, screenshot_urls, banner_urls = logic.categorise_media(
-                snap_details["media"]
-            )
-
             licenses = []
             for license in helpers.get_licenses():
                 licenses.append(
@@ -241,20 +255,6 @@ def post_listing_snap(snap_name, is_json=False):
                 )
 
             license = snap_details["license"]
-            license_type = "custom"
-
-            if (
-                " AND " not in license.upper()
-                and " WITH " not in license.upper()
-            ):
-                license_type = "simple"
-
-            try:
-                categories_results = store_api.get_categories()
-            except StoreApiError:
-                categories_results = []
-
-            categories = get_categories(categories_results)
 
             snap_categories = logic.replace_reserved_categories_key(
                 snap_details["categories"]
@@ -262,77 +262,11 @@ def post_listing_snap(snap_name, is_json=False):
 
             snap_categories = logic.filter_categories(snap_categories)
 
-            filename = "publisher/content/listing_tour.yaml"
-            tour_steps = helpers.get_yaml(filename, typ="rt")
-
-            context = {
-                # read-only values from details API
-                "snap_id": snap_details["snap_id"],
-                "snap_name": snap_details["snap_name"],
-                "snap_categories": snap_categories,
-                "icon_url": icon_urls[0] if icon_urls else None,
-                "username": snap_details["publisher"]["username"],
-                "screenshot_urls": screenshot_urls,
-                "banner_urls": banner_urls,
-                "display_title": snap_details["title"],
-                # values posted by user
-                "snap_title": (
-                    changes["title"]
-                    if "title" in changes
-                    else snap_details["title"] or ""
-                ),
-                "summary": (
-                    changes["summary"]
-                    if "summary" in changes
-                    else snap_details["summary"] or ""
-                ),
-                "description": (
-                    changes["description"]
-                    if "description" in changes
-                    else snap_details["description"] or ""
-                ),
-                "contact": (
-                    changes["contact"]
-                    if "contact" in changes
-                    else snap_details["contact"] or ""
-                ),
-                "private": snap_details["private"],
-                "website": (
-                    changes["website"]
-                    if "website" in changes
-                    else snap_details["website"] or ""
-                ),
-                "public_metrics_enabled": details_metrics_enabled,
-                "video_urls": (
-                    [changes["video_urls"]]
-                    if "video_urls" in changes
-                    else snap_details["video_urls"]
-                ),
-                "public_metrics_blacklist": details_blacklist,
-                "license": license,
-                "license_type": license_type,
-                "licenses": licenses,
-                "is_on_stable": is_on_stable,
-                "categories": categories,
-                "publisher_name": snap_details["publisher"]["display-name"],
-                "links": snap_details["links"],
-                # errors
-                "error_list": error_list,
-                "field_errors": field_errors,
-                "other_errors": other_errors,
-                "tour_steps": tour_steps,
-            }
-
-            if is_json:
-                return flask.jsonify(context)
-            else:
-                return flask.render_template(
-                    "publisher/listing.html", **context
-                )
+            res = {"success", True}
 
-    return flask.redirect(
-        flask.url_for(".get_listing_snap", snap_name=snap_name, is_json=True)
-    )
+            return flask.make_response(res, 200)
+
+    return flask.make_response({}, 200)
 
 
 @login_required
diff --git a/webapp/publisher/snaps/views.py b/webapp/publisher/snaps/views.py
index 45da910b99..07d57c1a0e 100644
--- a/webapp/publisher/snaps/views.py
+++ b/webapp/publisher/snaps/views.py
@@ -61,21 +61,14 @@
     methods=["GET"],
 )
 publisher_snaps.add_url_rule(
-    "/<snap_name>/listing.json",
-    view_func=listing_views.get_listing_snap,
+    "/api/<snap_name>/listing",
+    view_func=listing_views.get_listing_data,
     methods=["GET"],
-    defaults={"is_json": True},
-)
-publisher_snaps.add_url_rule(
-    "/<snap_name>/listing",
-    view_func=listing_views.post_listing_snap,
-    methods=["POST"],
 )
 publisher_snaps.add_url_rule(
-    "/<snap_name>/listing.json",
-    view_func=listing_views.post_listing_snap,
+    "/api/<snap_name>/listing",
+    view_func=listing_views.post_listing_data,
     methods=["POST"],
-    defaults={"is_json": True},
 )
 publisher_snaps.add_url_rule(
     "/<snap_name>/preview",
diff --git a/yarn.lock b/yarn.lock
index b0aa56c53c..de3ff995f1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6673,10 +6673,10 @@ react-fast-compare@^2.0.1:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
   integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
 
-react-hook-form@7.43.2:
-  version "7.43.2"
-  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.43.2.tgz#d8ff71956dc3de258dce19d4b1c7e1c6a0188e67"
-  integrity sha512-NvD3Oe2Y9hhqo2R4I4iJigDzSLpdMnzUpNMxlnzTbdiT7NT3BW0GxWCzEtwPudZMUPbZhNcSy1EcGAygyhDORg==
+react-hook-form@7.53.0:
+  version "7.53.0"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.53.0.tgz#3cf70951bf41fa95207b34486203ebefbd3a05ab"
+  integrity sha512-M1n3HhqCww6S2hxLxciEXy2oISPnAzxY7gvwVPrtlczTM/1dDadXgUxDpHMrMTblDOcm/AXtXxHwZ3jpg1mqKQ==
 
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"