diff --git a/changelog/v0.0.36/rate-limit-display-updated-when-mixed.yaml b/changelog/v0.0.36/rate-limit-display-updated-when-mixed.yaml
new file mode 100644
index 00000000..4eeebb1b
--- /dev/null
+++ b/changelog/v0.0.36/rate-limit-display-updated-when-mixed.yaml
@@ -0,0 +1,10 @@
+changelog:
+  - type: FIX
+    issueLink: https://github.com/solo-io/solo-projects/issues/7043
+    description: >-
+      Updates the rate limit UI element to show mixed values when there is a App which
+      has multiple subscriptions with different rate limits.
+  - type: FIX
+    issueLink: https://github.com/solo-io/solo-projects/issues/7066
+    description: >-
+      Fixes a bug where subscriptions incorrectly showed up as deleted.
diff --git a/projects/ui/src/Apis/api-types.ts b/projects/ui/src/Apis/api-types.ts
index b162e869..ddbfb1f8 100644
--- a/projects/ui/src/Apis/api-types.ts
+++ b/projects/ui/src/Apis/api-types.ts
@@ -2,6 +2,8 @@
 // Gloo Mesh Gateway Types
 //
 
+import { getEnumValues } from "../Utility/utility";
+
 type RateLimitPolicy = {
   unit: "UNKNOWN" | "SECOND" | "MINUTE" | "HOUR" | "DAY";
   requestsPerUnit: number;
@@ -171,8 +173,7 @@ export type OauthCredential = {
   idpClientName: string;
 };
 
-// This list of units is used both for the type and for the dropdown in the UI.
-const rateLimitUnits = [
+export enum RateLimitUnit {
   "UNKNOWN",
   "SECOND",
   "MINUTE",
@@ -180,16 +181,18 @@ const rateLimitUnits = [
   "DAY",
   "MONTH",
   "YEAR",
-] as const; // The 'as const' tells TypeScript to treat these as literal types
-export const rateLimitUnitOptions = rateLimitUnits.map((unit) => ({
-  value: unit,
-  label: unit,
-}));
-export type RateLimitUnit = (typeof rateLimitUnits)[number];
+}
+// This list of units is used both for the type and for the dropdown in the UI.
+export const rateLimitUnitOptions = getEnumValues(RateLimitUnit).map(
+  (unit) => ({
+    value: RateLimitUnit[unit],
+    label: RateLimitUnit[unit],
+  })
+);
 
 export type RateLimit = {
   requestsPerUnit: string;
-  unit: RateLimitUnit;
+  unit: string;
 };
 
 export type SubscriptionMetadata = {
diff --git a/projects/ui/src/Apis/gg_hooks.ts b/projects/ui/src/Apis/gg_hooks.ts
index 33732e14..979b6df0 100644
--- a/projects/ui/src/Apis/gg_hooks.ts
+++ b/projects/ui/src/Apis/gg_hooks.ts
@@ -56,7 +56,7 @@ export function useListFlatAppsForTeamsOmitErrors(teams: Team[]) {
   return { ...swrRes, data };
 }
 export function useGetAppDetails(id?: string) {
-  return useSwrWithAuth<App>(`/apps/${id}`);
+  return useSwrWithAuth<App>(`/apps/${id}`, id ?? null);
 }
 export function useListApiKeysForApp(appId: string) {
   return useSwrWithAuth<ApiKey[]>(`/apps/${appId}/api-keys`);
@@ -101,9 +101,11 @@ export function useListSubscriptionsForStatus(status: SubscriptionStatus) {
   }, [swrResponse]);
   return swrResponse;
 }
-export function useListSubscriptionsForApp(appId: string) {
+export function useListSubscriptionsForApp(appId: string | null) {
+  const endpoint = `/apps/${appId}/subscriptions`;
   const swrResponse = useSwrWithAuth<Subscription[] | SubscriptionsListError>(
-    `/apps/${appId}/subscriptions`
+    endpoint,
+    appId === null ? null : endpoint
   );
   useEffect(() => {
     if (isSubscriptionsListError(swrResponse.data)) {
diff --git a/projects/ui/src/Apis/utility.ts b/projects/ui/src/Apis/utility.ts
index ff180ea6..e37329bd 100644
--- a/projects/ui/src/Apis/utility.ts
+++ b/projects/ui/src/Apis/utility.ts
@@ -69,7 +69,7 @@ export async function fetchJSON(...args: Parameters<typeof fetch>) {
  */
 export const useSwrWithAuth = <T>(
   path: string,
-  swrKey?: string,
+  swrKey?: string | null,
   config?: Parameters<typeof useSWR<T>>[2]
 ) => {
   const { latestAccessToken } = useContext(AuthContext);
diff --git a/projects/ui/src/Components/Apps/Details/MetadataSection/AppMetadataSection.tsx b/projects/ui/src/Components/Apps/Details/MetadataSection/AppMetadataSection.tsx
index 3e41de86..8fc6b09b 100644
--- a/projects/ui/src/Components/Apps/Details/MetadataSection/AppMetadataSection.tsx
+++ b/projects/ui/src/Components/Apps/Details/MetadataSection/AppMetadataSection.tsx
@@ -3,7 +3,6 @@ import { App } from "../../../../Apis/api-types";
 import { DetailsPageStyles } from "../../../../Styles/shared/DetailsPageStyles";
 import { GridCardStyles } from "../../../../Styles/shared/GridCard.style";
 import { MetadataDisplay } from "../../../../Utility/AdminUtility/MetadataDisplay";
-import { EmptyData } from "../../../Common/EmptyData";
 
 const AppMetadataSection = ({ app }: { app: App }) => {
   //
@@ -14,17 +13,11 @@ const AppMetadataSection = ({ app }: { app: App }) => {
       <DetailsPageStyles.Title>Metadata</DetailsPageStyles.Title>
       <GridCardStyles.GridCard whiteBg wide>
         <Box px={"20px"} py={"25px"}>
-          {!!app.metadata?.rateLimit ? (
-            <MetadataDisplay
-              item={app}
-              customMetadata={app.metadata?.customMetadata}
-              rateLimitInfo={app.metadata?.rateLimit}
-            />
-          ) : (
-            <Box pt="10px">
-              <EmptyData title="No App metadata was found." />
-            </Box>
-          )}
+          <MetadataDisplay
+            item={app}
+            customMetadata={app.metadata?.customMetadata}
+            rateLimitInfo={app.metadata?.rateLimit}
+          />
         </Box>
       </GridCardStyles.GridCard>
     </DetailsPageStyles.Section>
diff --git a/projects/ui/src/Components/Common/SubscriptionsList/SubscriptionInfoCard/SubscriptionInfoCardAdminFooter.tsx b/projects/ui/src/Components/Common/SubscriptionsList/SubscriptionInfoCard/SubscriptionInfoCardAdminFooter.tsx
index 9876d793..595ad44a 100644
--- a/projects/ui/src/Components/Common/SubscriptionsList/SubscriptionInfoCard/SubscriptionInfoCardAdminFooter.tsx
+++ b/projects/ui/src/Components/Common/SubscriptionsList/SubscriptionInfoCard/SubscriptionInfoCardAdminFooter.tsx
@@ -19,8 +19,6 @@ const SubscriptionInfoCardAdminFooter = ({
   const [showRejectSubModal, setShowRejectSubModal] = useState(false);
   const [showDeleteSubModal, setShowDeleteSubModal] = useState(false);
 
-  const canDeleteSubscription = subscriptionState !== SubscriptionState.DELETED;
-
   //
   // Render
   //
@@ -50,7 +48,6 @@ const SubscriptionInfoCardAdminFooter = ({
             <Button
               color="danger"
               size="xs"
-              disabled={!canDeleteSubscription}
               onClick={() => setShowDeleteSubModal(true)}
             >
               Delete
diff --git a/projects/ui/src/Components/Common/SubscriptionsList/SubscriptionsUtility.ts b/projects/ui/src/Components/Common/SubscriptionsList/SubscriptionsUtility.ts
index c9c2651a..a1bf6c7c 100644
--- a/projects/ui/src/Components/Common/SubscriptionsList/SubscriptionsUtility.ts
+++ b/projects/ui/src/Components/Common/SubscriptionsList/SubscriptionsUtility.ts
@@ -5,7 +5,6 @@ export enum SubscriptionState {
   PENDING,
   APPROVED,
   REJECTED,
-  DELETED,
 }
 export const subscriptionStateMap = {
   [SubscriptionState.PENDING]: {
@@ -26,27 +25,15 @@ export const subscriptionStateMap = {
     accentColor: colors.darkRed,
     borderColor: colors.lightMidRed,
   },
-  [SubscriptionState.DELETED]: {
-    subscriptionState: SubscriptionState.DELETED,
-    label: "DELETED",
-    accentColor: colors.aprilGrey,
-    borderColor: colors.aprilGrey,
-  },
-};
-
-const dateHasValue = (dateString: string | undefined) => {
-  return !!dateString && new Date(dateString).getFullYear() !== 0;
 };
 
 export const GetSubscriptionState = (subscription: Subscription) => {
   if (!!subscription.approved) {
     return SubscriptionState.APPROVED;
   }
-  if (dateHasValue(subscription.deletedAt)) {
-    return SubscriptionState.DELETED;
-  }
   if (!!subscription.rejected) {
     return SubscriptionState.REJECTED;
   }
+  // Deleted subscriptions aren't returned from the API.
   return SubscriptionState.PENDING;
 };
diff --git a/projects/ui/src/Components/Common/WarningAlert.tsx b/projects/ui/src/Components/Common/WarningAlert.tsx
new file mode 100644
index 00000000..d7b8adfd
--- /dev/null
+++ b/projects/ui/src/Components/Common/WarningAlert.tsx
@@ -0,0 +1,38 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { WarningExclamation } from "../../Assets/Icons/Icons";
+import { borderRadiusConstants } from "../../Styles/constants";
+import { Color, svgColorReplace } from "../../Styles/utils";
+
+const AlertContainer = styled.div(
+  ({ theme }) => css`
+    padding: 12px;
+    background-color: ${theme.lightYellow};
+    border-radius: ${borderRadiusConstants.small};
+
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+
+    ${svgColorReplace(theme.darkYellowDark20 as Color)};
+    > svg {
+      margin-right: 10px;
+      min-width: 24px;
+    }
+
+    * {
+      line-height: 1.3rem;
+      font-size: 0.95rem;
+      color: ${theme.darkYellowDark20};
+    }
+  `
+);
+
+export function WarningAlert(props: { children?: React.ReactNode }) {
+  return (
+    <AlertContainer>
+      <WarningExclamation width={"24px"} height={"24px"} />
+      <div>{props.children}</div>
+    </AlertContainer>
+  );
+}
diff --git a/projects/ui/src/Styles/colors.ts b/projects/ui/src/Styles/colors.ts
index d8c35710..b24d72fa 100644
--- a/projects/ui/src/Styles/colors.ts
+++ b/projects/ui/src/Styles/colors.ts
@@ -80,7 +80,10 @@ const colorMap = {
   pumpkinOrangeLight10: Color(baseColors.pumpkinOrange).lighten(0.1).hex(),
   pumpkinOrangeLight20: Color(baseColors.pumpkinOrange).lighten(0.2).hex(),
 
+  lightYellowLight1: Color(baseColors.lightYellow).lighten(0.02).hex(),
   midYellowDark20: Color(baseColors.midYellow).darken(0.2).hex(),
+  darkYellowDark10: Color(baseColors.darkYellow).darken(0.1).hex(),
+  darkYellowDark20: Color(baseColors.darkYellow).darken(0.2).hex(),
 } as const;
 
 const semanticColorMap = {
diff --git a/projects/ui/src/Styles/global-styles/index.ts b/projects/ui/src/Styles/global-styles/index.ts
index 90a952a6..2a390f25 100644
--- a/projects/ui/src/Styles/global-styles/index.ts
+++ b/projects/ui/src/Styles/global-styles/index.ts
@@ -7,7 +7,7 @@ import "./style-reset.css";
 // prettier-ignore
 import "./fontFace.css";
 // prettier-ignore
-import "./graphiql.min.css";
+// import "./graphiql.min.css";
 // prettier-ignore
 import "./highlight.js.min.css";
 
diff --git a/projects/ui/src/Utility/AdminUtility/MetadataDisplay.tsx b/projects/ui/src/Utility/AdminUtility/MetadataDisplay.tsx
index e9792125..6570b44e 100644
--- a/projects/ui/src/Utility/AdminUtility/MetadataDisplay.tsx
+++ b/projects/ui/src/Utility/AdminUtility/MetadataDisplay.tsx
@@ -1,8 +1,10 @@
 import { Box } from "@mantine/core";
 import { useEffect, useState } from "react";
 import { App, RateLimit, Subscription } from "../../Apis/api-types";
+import { useIsAdmin } from "../../Context/AuthContext";
+import { useInArea } from "../utility";
 import { CustomMetadataEditor } from "./CustomMetadataEditor";
-import { RateLimitEditor } from "./RateLimitEditor";
+import { RateLimitSection } from "./RateLimitSection";
 
 export interface SharedMetadataProps {
   item: App | Subscription;
@@ -21,6 +23,7 @@ export const MetadataDisplay = ({
 }: SharedMetadataProps & {
   onIsWideChange?: (newIsWide: boolean) => void;
 }) => {
+  const isAdmin = useIsAdmin();
   const [isEditingCustomMetadata, setIsEditingCustomMetadata] = useState(false);
   const [isEditingRateLimit, setIsEditingRateLimit] = useState(false);
 
@@ -28,30 +31,42 @@ export const MetadataDisplay = ({
     onIsWideChange?.(isEditingCustomMetadata || isEditingCustomMetadata);
   }, [isEditingCustomMetadata, isEditingRateLimit]);
 
+  const inAppDetailsPage = useInArea([`apps/${props.item.id}`]);
+  const isSubscription = "apiProductId" in props.item;
+
+  // This component is reused for apps and subscription rate limit & metadata.
+  // Here we show the rate limit when:
+  // - This is an admin
+  // - We are on the app details page
+  // - This is a subscription
+  const showingRateLimit = !!isAdmin || inAppDetailsPage || isSubscription;
+
   return (
-    <Box sx={{ textAlign: "left" }}>
-      <Box mb={!!customMetadata || !!isEditingCustomMetadata ? "10px" : "0px"}>
-        <CustomMetadataEditor
-          isEditingCustomMetadata={isEditingCustomMetadata}
-          onIsEditingCustomMetadataChange={(value) =>
-            setIsEditingCustomMetadata(value)
-          }
-          customMetadata={customMetadata}
-          rateLimitInfo={rateLimitInfo}
-          {...props}
-        />
-      </Box>
-      <Box mb="10px">
-        <RateLimitEditor
-          isEditingRateLimit={isEditingRateLimit}
-          onIsEditingRateLimitChange={(newIsEditingRateLimit) =>
-            setIsEditingRateLimit(newIsEditingRateLimit)
-          }
-          customMetadata={customMetadata}
-          rateLimitInfo={rateLimitInfo}
-          {...props}
-        />
-      </Box>
+    <Box sx={{ textAlign: "left", width: "100%" }}>
+      <CustomMetadataEditor
+        isEditingCustomMetadata={isEditingCustomMetadata}
+        onIsEditingCustomMetadataChange={(value) =>
+          setIsEditingCustomMetadata(value)
+        }
+        customMetadata={customMetadata}
+        rateLimitInfo={rateLimitInfo}
+        {...props}
+      />
+      {showingRateLimit && (
+        <Box mb="10px">
+          <RateLimitSection
+            inAppDetailsPage={inAppDetailsPage}
+            isSubscription={isSubscription}
+            isEditingRateLimit={isEditingRateLimit}
+            onIsEditingRateLimitChange={(newIsEditingRateLimit) =>
+              setIsEditingRateLimit(newIsEditingRateLimit)
+            }
+            customMetadata={customMetadata}
+            rateLimitInfo={rateLimitInfo}
+            {...props}
+          />
+        </Box>
+      )}
     </Box>
   );
 };
diff --git a/projects/ui/src/Utility/AdminUtility/RateLimitEditor.tsx b/projects/ui/src/Utility/AdminUtility/RateLimitEditor.tsx
index 22f4a5f1..8068d15e 100644
--- a/projects/ui/src/Utility/AdminUtility/RateLimitEditor.tsx
+++ b/projects/ui/src/Utility/AdminUtility/RateLimitEditor.tsx
@@ -10,27 +10,33 @@ import {
 } from "../../Apis/gg_hooks";
 import { Button } from "../../Components/Common/Button";
 import { useIsAdmin } from "../../Context/AuthContext";
+import { colors } from "../../Styles";
 import { shallowEquals } from "../utility";
 import { SharedMetadataProps } from "./MetadataDisplay";
 
+export type RateLimitEditorProps = SharedMetadataProps & {
+  inAppDetailsPage: boolean;
+  isSubscription: boolean;
+  isEditingRateLimit: boolean;
+  onIsEditingRateLimitChange: (newIsEditinRateLimit: boolean) => void;
+};
+
 export const RateLimitEditor = ({
   item,
   isEditingRateLimit,
   customMetadata,
   rateLimitInfo,
   onIsEditingRateLimitChange,
-}: SharedMetadataProps & {
-  isEditingRateLimit: boolean;
-  onIsEditingRateLimitChange: (newIsEditinRateLimit: boolean) => void;
-}) => {
+}: RateLimitEditorProps) => {
   //
   //  region State
   //
   const initialRateLimitInfo = rateLimitInfo ?? {
     // This is the default if no rate limit is specified.
     requestsPerUnit: "0",
-    unit: "UNKNOWN",
+    unit: RateLimitUnit[RateLimitUnit.UNKNOWN],
   };
+  const rateLimitExists = !!rateLimitInfo;
   let initialRPU = 0;
   try {
     initialRPU = Number.parseInt(initialRateLimitInfo.requestsPerUnit ?? "0");
@@ -129,7 +135,7 @@ export const RateLimitEditor = ({
       {/* 
       // region Edit/Save Buttons 
       */}
-      {isAdmin ? (
+      {isAdmin && (
         <Flex gap="10px">
           <Button
             type="button"
@@ -152,59 +158,66 @@ export const RateLimitEditor = ({
             </Button>
           )}
         </Flex>
-      ) : (
-        <Text size="lg">Rate Limit</Text>
       )}
 
-      <Box sx={{ paddingTop: isAdmin ? "15px" : "5px", paddingBottom: "5px" }}>
-        {/* 
-        // region Text Inputs 
-        */}
-        <Flex gap="10px">
-          <Flex sx={{ flexBasis: "50%" }}>
-            <Flex direction="column" sx={{ flexGrow: 1 }}>
-              <Text size="md">
-                <label htmlFor="rpu-input">Requests Per Unit</label>
-              </Text>
-              <NumberInput
-                required
-                type="number"
-                disabled={!isEditingRateLimit}
-                ref={requestsPerUnitRef}
-                id="rpu-input"
-                placeholder="Requests Per Unit"
-                autoComplete="off"
-                value={requestsPerUnit}
-                onChange={(value) => {
-                  setRequestsPerUnit(value === "" ? 0 : value);
-                }}
-              />
+      {!rateLimitExists && !isEditingRateLimit ? (
+        <Text size="sm" mt="10px" color={colors.septemberGrey}>
+          No Rate Limit was found.
+        </Text>
+      ) : (
+        <Box
+          sx={{ paddingTop: isAdmin ? "12px" : "5px", paddingBottom: "5px" }}
+        >
+          {/* 
+          // region Text Inputs 
+          */}
+          <Flex gap="10px">
+            <Flex sx={{ flexBasis: "50%" }}>
+              <Flex direction="column" sx={{ flexGrow: 1 }}>
+                <Text size="md">
+                  <label htmlFor="rpu-input">Requests Per Unit</label>
+                </Text>
+                <NumberInput
+                  required
+                  type="number"
+                  min={0}
+                  disabled={!isEditingRateLimit}
+                  ref={requestsPerUnitRef}
+                  id="rpu-input"
+                  placeholder="Requests Per Unit"
+                  autoComplete="off"
+                  value={requestsPerUnit}
+                  onChange={(value) => {
+                    setRequestsPerUnit(value === "" ? 0 : value);
+                  }}
+                />
+              </Flex>
             </Flex>
-          </Flex>
 
-          <Flex sx={{ flexBasis: "50%", flexGrow: 1 }}>
-            <Flex direction="column" sx={{ flexGrow: 1 }}>
-              <Text size="md">
-                <label htmlFor="unit-input">Unit</label>
-              </Text>
-              <Select
-                required
-                disabled={!isEditingRateLimit}
-                id="unit-input"
-                data={rateLimitUnitOptions}
-                onChange={(value: RateLimitUnit | null) => {
-                  if (!!value) {
-                    setUnit(value);
-                  }
-                }}
-                value={unit}
-                placeholder="Unit"
-                autoComplete="off"
-              />
+            <Flex sx={{ flexBasis: "50%", flexGrow: 1 }}>
+              <Flex direction="column" sx={{ flexGrow: 1 }}>
+                <Text size="md">
+                  <label htmlFor="unit-input">Unit</label>
+                </Text>
+                <Select
+                  required
+                  disabled={!isEditingRateLimit}
+                  id="unit-input"
+                  data={rateLimitUnitOptions}
+                  onChange={(value: string | null) => {
+                    if (!!value) {
+                      setUnit(value);
+                    }
+                  }}
+                  value={unit}
+                  placeholder="Unit"
+                  autoComplete="off"
+                />
+              </Flex>
             </Flex>
           </Flex>
-        </Flex>
-      </Box>
+        </Box>
+      )}
     </form>
   );
 };
diff --git a/projects/ui/src/Utility/AdminUtility/RateLimitSection.tsx b/projects/ui/src/Utility/AdminUtility/RateLimitSection.tsx
new file mode 100644
index 00000000..4403e497
--- /dev/null
+++ b/projects/ui/src/Utility/AdminUtility/RateLimitSection.tsx
@@ -0,0 +1,64 @@
+import { Box, Text } from "@mantine/core";
+import { useState } from "react";
+import { useListSubscriptionsForApp } from "../../Apis/gg_hooks";
+import { Button } from "../../Components/Common/Button";
+import { WarningAlert } from "../../Components/Common/WarningAlert";
+import { useIsAdmin } from "../../Context/AuthContext";
+import { RateLimitEditor, RateLimitEditorProps } from "./RateLimitEditor";
+
+export const RateLimitSection = ({ ...props }: RateLimitEditorProps) => {
+  //
+  //  region State
+  //
+  const isAdmin = useIsAdmin();
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const { data: appSubscriptions } = useListSubscriptionsForApp(
+    isExpanded && !props.isSubscription && isAdmin ? props.item.id : null
+  );
+
+  //
+  // region Render
+  //
+  return (
+    <>
+      <Text size="lg" mb={isAdmin ? "10px" : "0px"}>
+        Rate Limit
+      </Text>
+      {isAdmin && !isExpanded && !props.isSubscription ? (
+        <Button size="xs" variant="outline" onClick={() => setIsExpanded(true)}>
+          View Rate Limit Information
+        </Button>
+      ) : (
+        <RateLimitEditor {...props} />
+      )}
+
+      {/* Admins will see this message when editing the App Rate Limits. */}
+      {!props.isSubscription && !!appSubscriptions && (
+        <Box mt={"10px"}>
+          <WarningAlert>
+            Please note that Subscriptions are able to override this Apps Rate
+            Limit value.
+            <Box mb="5px" />
+            {Array.isArray(appSubscriptions) && (
+              <>
+                This App has {appSubscriptions.length} Subscription
+                {appSubscriptions.length === 1 ? "" : "s"}.
+              </>
+            )}
+          </WarningAlert>
+        </Box>
+      )}
+
+      {/* Non-admins will see this message on their App details pages. */}
+      {!props.isSubscription && !!props.inAppDetailsPage && !isAdmin && (
+        <Box mt={"10px"}>
+          <WarningAlert>
+            Please note that Subscriptions are able to override this Apps Rate
+            Limit value.
+          </WarningAlert>
+        </Box>
+      )}
+    </>
+  );
+};