diff --git a/apps/cyberstorm-remix/app/p/components/ReportPackage/ReportPackage.css b/apps/cyberstorm-remix/app/p/components/ReportPackage/ReportPackage.css
new file mode 100644
index 000000000..538779a17
--- /dev/null
+++ b/apps/cyberstorm-remix/app/p/components/ReportPackage/ReportPackage.css
@@ -0,0 +1,24 @@
+@layer nimbus-layout {
+  .report-package__block {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    align-items: flex-start;
+    align-self: stretch;
+  }
+
+  .report-package__label {
+    color: var(--color-text-primary);
+    font-weight: var(--font-weight-regular);
+    font-size: var(--font-size-body-lg);
+    font-style: normal;
+    line-height: var(--line-height-md);
+  }
+
+  .report-package__textarea {
+    > textarea {
+      width: 100%;
+      height: 10rem;
+    }
+  }
+}
diff --git a/apps/cyberstorm-remix/app/p/components/ReportPackage/ReportPackage.tsx b/apps/cyberstorm-remix/app/p/components/ReportPackage/ReportPackage.tsx
new file mode 100644
index 000000000..b57632958
--- /dev/null
+++ b/apps/cyberstorm-remix/app/p/components/ReportPackage/ReportPackage.tsx
@@ -0,0 +1,204 @@
+import { useEffect, useReducer, useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faFlagSwallowtail } from "@fortawesome/pro-solid-svg-icons";
+
+import {
+  Modal,
+  NewButton,
+  NewIcon,
+  NewSelect,
+  NewTextInput,
+  type SelectOption,
+  useToast,
+} from "@thunderstore/cyberstorm";
+import {
+  type RequestConfig,
+  type PackageListingReportRequestData,
+  packageListingReport,
+} from "@thunderstore/thunderstore-api";
+
+import { useStrongForm } from "cyberstorm/utils/StrongForm/useStrongForm";
+import "./ReportPackage.css";
+
+const reportOptions: SelectOption<PackageListingReportRequestData["reason"]>[] =
+  [
+    { value: "Spam", label: "Spam" },
+    { value: "Malware", label: "Malware" },
+    { value: "Reupload", label: "Reupload" },
+    { value: "CopyrightOrLicense", label: "Copyright Or License" },
+    { value: "WrongCommunity", label: "Wrong Community" },
+    { value: "WrongCategories", label: "Wrong Categories" },
+    { value: "Other", label: "Other" },
+  ];
+
+function ReportPackageButton(props: { onClick: () => void }) {
+  return (
+    <NewButton
+      onClick={props.onClick}
+      tooltipText="Report Package"
+      csVariant="secondary"
+      csModifiers={["only-icon"]}
+    >
+      <NewIcon csMode="inline" noWrapper>
+        <FontAwesomeIcon icon={faFlagSwallowtail} />
+      </NewIcon>
+    </NewButton>
+  );
+}
+
+ReportPackageButton.displayName = "ReportPackageButton";
+
+interface ReportPackageFormProps {
+  community: string;
+  namespace: string;
+  package: string;
+  config: () => RequestConfig;
+  toast: ReturnType<typeof useToast>;
+}
+
+interface ReportPackageModalProps {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+}
+
+function ReportPackageForm(
+  props: ReportPackageFormProps & ReportPackageModalProps
+) {
+  const { config, toast, isOpen, setIsOpen, ...requestParams } = props;
+
+  function formFieldUpdateAction(
+    state: PackageListingReportRequestData,
+    action: {
+      field: keyof PackageListingReportRequestData;
+      value: PackageListingReportRequestData[keyof PackageListingReportRequestData];
+    }
+  ) {
+    return {
+      ...state,
+      [action.field]: action.value,
+    };
+  }
+
+  const [formInputs, updateFormFieldState] = useReducer(formFieldUpdateAction, {
+    reason: "Other",
+    description: "",
+  });
+
+  type SubmitorOutput = Awaited<ReturnType<typeof packageListingReport>>;
+
+  async function submitor(data: typeof formInputs): Promise<SubmitorOutput> {
+    return await packageListingReport({
+      config: config,
+      params: requestParams,
+      queryParams: {},
+      data: { reason: data.reason, description: data.description },
+    });
+  }
+
+  type InputErrors = {
+    [key in keyof typeof formInputs]?: string | string[];
+  };
+
+  const strongForm = useStrongForm<
+    typeof formInputs,
+    PackageListingReportRequestData,
+    Error,
+    SubmitorOutput,
+    Error,
+    InputErrors
+  >({
+    inputs: formInputs,
+    submitor,
+    onSubmitSuccess: () => {
+      toast.addToast({
+        csVariant: "success",
+        children: `Package reported`,
+        duration: 4000,
+      });
+      setIsOpen(false);
+    },
+    onSubmitError: (error) => {
+      toast.addToast({
+        csVariant: "danger",
+        children: `Error occurred: ${error.message || "Unknown error"}`,
+        duration: 8000,
+      });
+    },
+  });
+
+  return (
+    <Modal
+      titleContent="Report Package"
+      csSize="small"
+      open={props.isOpen}
+      onOpenChange={props.setIsOpen}
+    >
+      <Modal.Body>
+        <div className="report-package__block">
+          <p className="report-package__label">Reason</p>
+          <NewSelect
+            name={"reason"}
+            options={reportOptions}
+            placeholder="Please select..."
+            value={formInputs.reason}
+            onChange={(value) => {
+              updateFormFieldState({ field: "reason", value: value });
+            }}
+            id="reason"
+            csSize="small"
+          />
+        </div>
+        <div className="report-package__block">
+          <p className="report-package__label">
+            Additional information (optional)
+          </p>
+          <NewTextInput
+            value={formInputs.description || ""}
+            onChange={(e) => {
+              updateFormFieldState({
+                field: "description",
+                value: e.target.value,
+              });
+            }}
+            placeholder="Invalid submission"
+            csSize="textarea"
+            rootClasses="report-package__textarea"
+          />
+        </div>
+      </Modal.Body>
+      <Modal.Footer>
+        <NewButton csVariant="success" onClick={strongForm.submit}>
+          Submit
+        </NewButton>
+      </Modal.Footer>
+    </Modal>
+  );
+}
+
+ReportPackageForm.displayName = "ReportPackageForm";
+
+export function useReportPackage(formProps: Promise<ReportPackageFormProps>) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [props, setProps] = useState<ReportPackageFormProps | null>(null);
+
+  async function awaitAndSetProps() {
+    if (!props) {
+      setProps(await formProps);
+    }
+  }
+
+  useEffect(() => {
+    awaitAndSetProps();
+  }, [formProps, props]);
+
+  const button = <ReportPackageButton onClick={() => setIsOpen(true)} />;
+
+  const form = props && (
+    <ReportPackageForm {...{ isOpen, setIsOpen }} {...props} />
+  );
+
+  return {
+    ReportPackageButton: button,
+    ReportPackageForm: form,
+  };
+}
diff --git a/apps/cyberstorm-remix/app/p/packageListing.css b/apps/cyberstorm-remix/app/p/packageListing.css
index 2e9ccdfb6..5f932c86f 100644
--- a/apps/cyberstorm-remix/app/p/packageListing.css
+++ b/apps/cyberstorm-remix/app/p/packageListing.css
@@ -76,36 +76,6 @@
     justify-content: space-between;
   }
 
-  .report-package__body {
-    align-items: stretch;
-  }
-
-  .report-package__block {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    align-items: flex-start;
-  }
-
-  .report-package__label {
-    color: var(--color-text-primary);
-    font-weight: var(--font-weight-regular);
-    font-size: var(--font-size-body-lg);
-    font-style: normal;
-    line-height: var(--line-height-md);
-  }
-
-  .report-package__textarea {
-    > textarea {
-      width: 100%;
-      height: 10rem;
-    }
-  }
-
-  .report-package__footer {
-    justify-content: flex-end;
-  }
-
   .package-listing__package-content-section {
     display: flex;
     flex: 1 0 0;
diff --git a/apps/cyberstorm-remix/app/p/packageListing.tsx b/apps/cyberstorm-remix/app/p/packageListing.tsx
index 3e5a0864d..0e5d5b0aa 100644
--- a/apps/cyberstorm-remix/app/p/packageListing.tsx
+++ b/apps/cyberstorm-remix/app/p/packageListing.tsx
@@ -4,7 +4,6 @@ import {
   Suspense,
   useEffect,
   useMemo,
-  useReducer,
   useRef,
   useState,
 } from "react";
@@ -34,8 +33,8 @@ import { faArrowUpRight, faLips } from "@fortawesome/pro-solid-svg-icons";
 import { CopyButton } from "app/commonComponents/CopyButton/CopyButton";
 import { PageHeader } from "app/commonComponents/PageHeader/PageHeader";
 import TeamMembers from "app/p/components/TeamMembers/TeamMembers";
+import { useReportPackage } from "app/p/components/ReportPackage/ReportPackage";
 import { type OutletContextShape } from "app/root";
-import { useStrongForm } from "cyberstorm/utils/StrongForm/useStrongForm";
 import { isPromise } from "cyberstorm/utils/typeChecks";
 import {
   getPublicEnvVariables,
@@ -50,11 +49,9 @@ import {
   NewButton,
   NewIcon,
   NewLink,
-  NewSelect,
   NewTag,
   NewTextInput,
   RelativeTime,
-  type SelectOption,
   SkeletonBox,
   Tabs,
   ThunderstoreLogo,
@@ -71,8 +68,6 @@ import {
   fetchPackagePermissions,
   packageListingApprove,
   packageListingReject,
-  packageListingReport,
-  type PackageListingReportRequestData,
   type RequestConfig,
 } from "@thunderstore/thunderstore-api";
 import { ApiAction } from "@thunderstore/ts-api-react-actions";
@@ -186,6 +181,16 @@ export default function PackageListing() {
   const [isLiked, setIsLiked] = useState(false);
   const toast = useToast();
 
+  const { ReportPackageButton, ReportPackageForm } = useReportPackage(
+    Promise.resolve(listing).then((listingData) => ({
+      community: listingData.community_identifier,
+      namespace: listingData.namespace,
+      package: listingData.name,
+      config,
+      toast,
+    }))
+  );
+
   const fetchAndSetRatedPackages = async () => {
     const rp = await dapper.getRatedPackages();
     if (isPromise(listing)) {
@@ -375,19 +380,6 @@ export default function PackageListing() {
                   )}
                 </Await>
               </Suspense>
-
-              {/* Report modal is here, so that it can be reused in both desktop on mobile */}
-              {/* <Modal popoverId={"reportPackage"} csSize="small">
-                <ReportPackageForm
-                  // communityId={listing.community_identifier}
-                  // namespaceId={listing.namespace}
-                  // packageId={listing.name}
-                  // id={listing.id}
-                  id={"206"}
-                  toast={toast}
-                  config={outletContext.requestConfig}
-                />
-              </Modal> */}
               <div className="package-listing__narrow-actions">
                 <button
                   popoverTarget="packageDetailDrawer"
@@ -449,6 +441,8 @@ export default function PackageListing() {
                     )}
                   </Await>
                 </Suspense>
+
+                {ReportPackageButton}
               </div>
               <Suspense
                 fallback={
@@ -592,24 +586,29 @@ export default function PackageListing() {
                 </Await>
               </Suspense>
               <div className="package-listing-sidebar__main">
-                <Suspense
-                  fallback={
-                    <SkeletonBox className="package-listing-sidebar__actions-skeleton" />
-                  }
-                >
-                  <Await resolve={listingAndTeamPromise}>
-                    {(resolvedValue) => (
-                      <Actions
-                        team={resolvedValue[1]}
-                        listing={resolvedValue[0]}
-                        isLiked={isLiked}
-                        currentUser={currentUser}
-                        likeUpdateTrigger={fetchAndSetRatedPackages}
-                        requestConfig={config}
-                      />
-                    )}
-                  </Await>
-                </Suspense>
+                <div className="package-listing-sidebar__actions">
+                  <Suspense
+                    fallback={
+                      <SkeletonBox className="package-listing-sidebar__actions-skeleton" />
+                    }
+                  >
+                    <Await resolve={listingAndTeamPromise}>
+                      {(resolvedValue) => (
+                        <Actions
+                          team={resolvedValue[1]}
+                          listing={resolvedValue[0]}
+                          isLiked={isLiked}
+                          currentUser={currentUser}
+                          likeUpdateTrigger={fetchAndSetRatedPackages}
+                          requestConfig={config}
+                        />
+                      )}
+                    </Await>
+                  </Suspense>
+
+                  {ReportPackageButton}
+                </div>
+
                 <Suspense
                   fallback={
                     <SkeletonBox className="package-listing-sidebar__skeleton" />
@@ -641,6 +640,8 @@ export default function PackageListing() {
           </div>
         </section>
       </div>
+
+      {ReportPackageForm}
     </>
   );
 }
@@ -799,146 +800,6 @@ function ReviewPackageForm(props: {
 
 ReviewPackageForm.displayName = "ReviewPackageForm";
 
-const reportOptions: SelectOption<
-  | "Spam"
-  | "Malware"
-  | "Reupload"
-  | "CopyrightOrLicense"
-  | "WrongCommunity"
-  | "WrongCategories"
-  | "Other"
->[] = [
-  { value: "Spam", label: "Spam" },
-  { value: "Malware", label: "Malware" },
-  { value: "Reupload", label: "Reupload" },
-  { value: "CopyrightOrLicense", label: "Copyright Or License" },
-  { value: "WrongCommunity", label: "Wrong Community" },
-  { value: "WrongCategories", label: "Wrong Categories" },
-  { value: "Other", label: "Other" },
-];
-
-function ReportPackageForm(props: {
-  // communityId: string;
-  // namespaceId: string;
-  // packageId: string;
-  id: string;
-  config: () => RequestConfig;
-  toast: ReturnType<typeof useToast>;
-}) {
-  const {
-    // communityId,
-    // namespaceId,
-    // packageId,
-    id,
-    toast,
-    config,
-  } = props;
-
-  function formFieldUpdateAction(
-    state: PackageListingReportRequestData,
-    action: {
-      field: keyof PackageListingReportRequestData;
-      value: PackageListingReportRequestData[keyof PackageListingReportRequestData];
-    }
-  ) {
-    return {
-      ...state,
-      [action.field]: action.value,
-    };
-  }
-
-  const [formInputs, updateFormFieldState] = useReducer(formFieldUpdateAction, {
-    reason: "Other",
-    description: "",
-  });
-
-  type SubmitorOutput = Awaited<ReturnType<typeof packageListingReport>>;
-
-  async function submitor(data: typeof formInputs): Promise<SubmitorOutput> {
-    return await packageListingReport({
-      config: config,
-      params: { id: id },
-      queryParams: {},
-      data: { reason: data.reason, description: data.description },
-    });
-  }
-
-  type InputErrors = {
-    [key in keyof typeof formInputs]?: string | string[];
-  };
-
-  const strongForm = useStrongForm<
-    typeof formInputs,
-    PackageListingReportRequestData,
-    Error,
-    SubmitorOutput,
-    Error,
-    InputErrors
-  >({
-    inputs: formInputs,
-    submitor,
-    onSubmitSuccess: () => {
-      toast.addToast({
-        csVariant: "success",
-        children: `Package reported`,
-        duration: 4000,
-      });
-    },
-    onSubmitError: (error) => {
-      toast.addToast({
-        csVariant: "danger",
-        children: `Error occurred: ${error.message || "Unknown error"}`,
-        duration: 8000,
-      });
-    },
-  });
-
-  return (
-    <div className="modal-content">
-      <div className="modal-content__header">Report Package</div>
-      <div className="modal-content__body report-package__body">
-        <div className="report-package__block">
-          <p className="report-package__label">Reason</p>
-          <NewSelect
-            name={"role"}
-            options={reportOptions}
-            placeholder="Please select..."
-            value={formInputs.reason}
-            onChange={(value) => {
-              updateFormFieldState({ field: "reason", value: value });
-            }}
-            id="role"
-          />
-        </div>
-        <div className="report-package__block">
-          <p className="report-package__label">
-            Additional information (optional)
-          </p>
-          <NewTextInput
-            value={formInputs.description || ""}
-            onChange={(e) => {
-              updateFormFieldState({
-                field: "description",
-                value: e.target.value,
-              });
-            }}
-            placeholder="Invalid submission"
-            csSize="textarea"
-            rootClasses="report-package__textarea"
-          />
-        </div>
-      </div>
-      <div className="modal-content__footer report-package__footer">
-        <NewButton csVariant="success" onClick={strongForm.submit}>
-          Submit
-        </NewButton>
-      </div>
-    </div>
-  );
-}
-
-ReportPackageForm.displayName = "ReportPackageForm";
-
 function packageTags(
   listing: Awaited<ReturnType<DapperTsInterface["getPackageListingDetails"]>>,
   community: Awaited<ReturnType<DapperTsInterface["getCommunity"]>>
@@ -1122,7 +983,7 @@ const Actions = memo(function Actions(props: {
     requestConfig,
   } = props;
   return (
-    <div className="package-listing-sidebar__actions">
+    <>
       <NewButton
         primitiveType="link"
         href={listing.download_url}
@@ -1166,20 +1027,7 @@ const Actions = memo(function Actions(props: {
           <FontAwesomeIcon icon={faThumbsUp} />
         </NewIcon>
       </NewButton>
-      {/* <NewButton
-            // primitiveType="button"
-            tooltipText="Report"
-            csVariant={"secondary"}
-            csSize="big"
-            csModifiers={["only-icon"]}
-            popoverTarget="reportPackage"
-            popoverTargetAction="show"
-          >
-            <NewIcon csMode="inline" noWrapper>
-              <FontAwesomeIcon icon={faFlagSwallowtail} />
-            </NewIcon>
-          </NewButton> */}
-    </div>
+    </>
   );
 });
 
diff --git a/packages/thunderstore-api/src/post/packageListing.ts b/packages/thunderstore-api/src/post/packageListing.ts
index 079b267d1..cfcf73116 100644
--- a/packages/thunderstore-api/src/post/packageListing.ts
+++ b/packages/thunderstore-api/src/post/packageListing.ts
@@ -108,10 +108,7 @@ export function packageListingReport(
   >
 ) {
   const { config, params, data } = props;
-  // This will most likely change to a dedicated cyberstorm API endpoint, which is commented right now.
-  // const path = `/api/cyberstorm/listing/${params.community}/${params.namespace}/${params.package}/report/`;
-  const path = `/api/experimental/package-listing/${params.id}/report/`;
-
+  const path = `/api/cyberstorm/listing/${params.community}/${params.namespace}/${params.package}/report/`;
   return apiFetch({
     args: {
       config,
diff --git a/packages/thunderstore-api/src/schemas/requestSchemas.ts b/packages/thunderstore-api/src/schemas/requestSchemas.ts
index 76dc83fff..b9057b1a9 100644
--- a/packages/thunderstore-api/src/schemas/requestSchemas.ts
+++ b/packages/thunderstore-api/src/schemas/requestSchemas.ts
@@ -450,11 +450,9 @@ export type PackageListingRejectRequestData = z.infer<
 
 // PackageListingReportRequest
 export const packageListingReportRequestParamsSchema = z.object({
-  // This will most likely change to a dedicated cyberstorm endpoint, so the params will change to the commented ones.
-  id: z.string(),
-  // community: z.string(),
-  // namespace: z.string(),
-  // package: z.string(),
+  community: z.string(),
+  namespace: z.string(),
+  package: z.string(),
 });
 
 export type PackageListingReportRequestParams = z.infer<
@@ -462,7 +460,7 @@ export type PackageListingReportRequestParams = z.infer<
 >;
 
 export const packageListingReportRequestDataSchema = z.object({
-  version: z.number().optional(),
+  version: z.number().optional(), // TODO: use SemVer string
   reason: z.enum([
     "Spam",
     "Malware",