diff --git a/web/src/components/form/FontAwesome.svelte b/web/src/components/form/FontAwesome.svelte
index 4d31895..b0e54a2 100644
--- a/web/src/components/form/FontAwesome.svelte
+++ b/web/src/components/form/FontAwesome.svelte
@@ -75,6 +75,9 @@
     website: solidIcons.faGlobe,
     sourceCode: solidIcons.faCodeBranch,
     viewReport: solidIcons.faShieldHalved,
+
+    //Misc
+    ratingStar: solidIcons.faStar,
   };
 
   export let iconName: string;
diff --git a/web/src/components/things/IosAppDetailedInfo.astro b/web/src/components/things/IosAppDetailedInfo.astro
new file mode 100644
index 0000000..5f97645
--- /dev/null
+++ b/web/src/components/things/IosAppDetailedInfo.astro
@@ -0,0 +1,249 @@
+---
+
+import type { IoSApiResponse } from '@utils/fetch-ios-info';
+import { formatDate, timeAgo } from '@utils/dates-n-stuff'; 
+import FontAwesome from "@components/form/FontAwesome.svelte"
+
+
+interface Props {
+  iosData: IoSApiResponse;
+  url: string;
+};
+
+const { iosData, url } = Astro.props;
+
+const bytesToMb = (bytes: number) => (bytes / 1024 / 1024).toFixed(2);
+
+const makeRatingPercentage = (rating: number) => (rating / 5) * 100;
+
+const roundRatings = (rating: number) => Math.round(rating * 100) / 100;
+
+const putCommaInNumber = (num: number) => num.toLocaleString();
+
+---
+
+<div class="website-info-wrapper">
+  <div class="left">
+    <h4>App Info</h4>
+    <p class="website-title">
+      <img src={iosData.artworkUrl60} width="16" />
+      {iosData.trackName}
+    </p>
+    <p class="website-description">{iosData.description}</p>
+
+    <h4>Rating</h4>
+    <div class="star-rating">
+      <div class="back-stars">
+        <FontAwesome iconName="ratingStar" />
+        <FontAwesome iconName="ratingStar" />
+        <FontAwesome iconName="ratingStar" />
+        <FontAwesome iconName="ratingStar" />
+        <FontAwesome iconName="ratingStar" />
+        <div class="front-stars" style={`width: ${makeRatingPercentage(iosData.averageUserRating)}%`}>
+          <FontAwesome iconName="ratingStar" />
+          <FontAwesome iconName="ratingStar" />
+          <FontAwesome iconName="ratingStar" />
+          <FontAwesome iconName="ratingStar" />
+          <FontAwesome iconName="ratingStar" />
+        </div>
+      </div>
+    </div>
+    <p class="rating-description">
+      Rated {roundRatings(iosData.averageUserRating)} out of 5 stars by {putCommaInNumber(iosData.userRatingCount)} users
+    </p>
+
+    <h4>Version Info</h4>
+    <ul class="list-table">
+      <li title={iosData.releaseNotes}>
+        <span class="lbl">Current Version</span>
+        <span class="val">{iosData.version}</span>
+      </li>
+      <li>
+        <span class="lbl">Last Updated</span>
+        <span class="val">{formatDate(iosData.currentVersionReleaseDate)}</span>
+      </li>
+      <li>
+        <span class="lbl">First Released</span>
+        <span class="val">{formatDate(iosData.releaseDate)}</span>
+      </li>
+      <li>
+        <span class="lbl">Minimum iOS Version</span>
+        <span class="val">{iosData.minimumOsVersion}</span>
+      </li>
+      <li>
+        <span class="lbl">Device Models Supported</span>
+        <span class="val">{iosData.supportedDevices.length}</span>
+      </li>
+    </ul>
+  </div>
+  <div class="right">
+
+    <h4>App Details</h4>
+    <ul class="list-table">
+      <li>
+        <span class="lbl">IPA Size</span>
+        <span class="val">{bytesToMb(iosData.fileSizeBytes)} Mb</span>
+      </li>
+      <li>
+        <span class="lbl">Price</span>
+        <span class="val">{iosData.formattedPrice} ({iosData.currency})</span>
+      </li>
+      <li>
+        <span class="lbl">Age Advisory</span>
+        <span class="val">{iosData.contentAdvisoryRating}</span>
+      </li>
+      <li>
+        <span class="lbl">Supported Languages</span>
+        <span class="val" title={iosData.languageCodesISO2A.join(', ')}>{iosData.languageCodesISO2A.length}</span>
+      </li>
+      <li>
+        <span class="lbl">Developer</span>
+        <span class="val"><a href={iosData.artistViewUrl}>{iosData.sellerName}</a></span>
+      </li>
+      <li>
+        <span class="lbl">Bundle ID</span>
+        <span class="val">{iosData.bundleId}</span>
+      </li>
+    </ul>
+
+    <h4>Screenshots</h4>
+    <ul class="screenshots">
+      {iosData.screenshotUrls.map((url) => (
+        <li>
+          <img src={url} width="100" />
+        </li>
+      ))}
+    </ul>
+    
+  </div>
+</div>
+
+
+<style lang="scss">
+.website-info-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 1rem;
+  .left, .right {
+    width: calc(50% - 1rem);
+    @media screen and (max-width: 768px){
+      width: 100%;
+    }
+  }
+}
+
+h4 {
+  margin: 1rem 0 0 0;
+  font-size: 1.2rem;
+}
+p {
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  :global(svg) {
+    width: 1rem;
+  }
+  img {
+    border-radius: var(--curve-sm);
+  }
+}
+
+ul {
+  padding-left: 0;
+  list-style: none;
+  max-height: 300px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  img {
+    border-radius: var(--curve-sm);
+  }
+  .list-item {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 0.5rem;
+  }
+  &.list-table {
+    font-size: 0.9rem;
+    padding-left: 0;
+    li {
+      display: flex;
+      justify-content: space-between;
+      padding: 0.1rem 0;
+      .lbl {
+        font-weight: 400;
+      }
+      &:not(:last-child) {
+        border-bottom: 1px solid #5f53f440;
+      }
+    }
+  }
+}
+
+.website-title, .website-description {
+  font-size: 0.9rem;
+  opacity: 0.8;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;  
+  overflow: hidden;
+  border-left: 2px solid var(--accent-3);
+  padding-left: 0.5rem;
+}
+.website-title {
+  font-weight: 500;
+}
+.website-description {
+  font-style: italic;
+  -webkit-line-clamp: 3;
+}
+.explainer {
+  font-size: 0.8rem;
+  opacity: 0.8;
+  font-style: italic;
+}
+
+.star-rating {
+  position: relative;
+  display: inline-block;
+  margin: 1rem 0;
+  :global(svg) {
+    font-size: 2rem;
+    gap: 0;
+    margin: 0;
+    padding: 0;
+  }
+  .back-stars {
+    display: flex;
+    :global(svg) {
+      color: #ddddd8;
+    }
+    .front-stars {
+      position: absolute;
+      top: 0;
+      left: 0;
+      white-space: nowrap;
+      overflow: hidden;
+      width: 0;
+      display: flex;
+      :global(svg) {
+        color: #e8e800;
+      }
+    }
+  }
+}
+
+.rating-description {
+  font-size: 0.8rem;
+  opacity: 0.8;
+  font-style: italic;
+}
+
+.screenshots {
+  display: flex;
+  gap: 0.5rem;
+  overflow-x: auto;
+}
+
+</style>
diff --git a/web/src/components/things/ServiceCard.astro b/web/src/components/things/ServiceCard.astro
index 97645d6..ce1c22f 100644
--- a/web/src/components/things/ServiceCard.astro
+++ b/web/src/components/things/ServiceCard.astro
@@ -1,14 +1,10 @@
 ---
 
-import Button from '@components/form/Button.astro';
-import { parseMarkdown, formatLink } from '@utils/parse-markdown';
+import { formatLink } from '@utils/parse-markdown';
 import type { Service } from 'src/types/Service';
 import FontAwesome from '@components/form/FontAwesome.svelte';
-import DeleteListing from '@components/things/DeleteListing.svelte';
 import { slugify } from '@utils/fetch-data';
 
-import GitHubMetrics from '@components/things/ItemGitHubMetrics.astro';
-
 interface Props {
   service: Service;
   categoryName: string;
@@ -77,7 +73,7 @@ const {
         </a>
       }
       <a href={`/${slugify(categoryName)}/${slugify(sectionName)}/${slugify(service.name)}`}>
-        <FontAwesome iconName="viewReport" /> View Report
+        <FontAwesome iconName="viewReport" /> View Report ➔
       </a>
 
     </div>
@@ -146,6 +142,8 @@ const {
       -webkit-box-orient: vertical;  
       overflow: hidden;
       margin: 0.5rem 0;
+      width: calc(100% - 2rem);
+      overflow-x: hidden;
     }
   }
 
diff --git a/web/src/pages/[...listing].astro b/web/src/pages/[...listing].astro
index c7a338d..454f27e 100644
--- a/web/src/pages/[...listing].astro
+++ b/web/src/pages/[...listing].astro
@@ -7,6 +7,7 @@ import GitHubDetailedInfo from '@components/things/GitHubDetailedInfo.astro';
 import PrivacyPolicyDetails from '@components/things/PrivacyPolicyDetails.astro';
 import WebsiteDetailedInfo from '@components/things/WebsiteDetailedInfo.astro';
 import DockerDetailedInfo from '@components/things/DockerDetailedInfo.astro';
+import IosAppDetailedInfo from '@components/things/IosAppDetailedInfo.astro';
 import SocialShare from '@components/form/Social.astro';
 import DataActions from '@components/things/DataActions.svelte';
 import type { AwesomePrivacy, Section, Service } from '../types/Service';
@@ -15,6 +16,7 @@ import { fetchGitHubStats } from '@utils/fetch-repo-info';
 import { fetchTosdrPrivacy } from '@utils/fetch-privacy-policy';
 import { fetchWebsiteInfo } from '@utils/fetch-website-info';
 import { fetchDockerData } from '@utils/fetch-docker-instructions';
+import { fetchIosInfo } from '@utils/fetch-ios-info';
 import { parseMarkdown, formatLink } from '@utils/parse-markdown';
 import { site } from '@utils/config';
 import FontAwesome from '@components/form/FontAwesome.svelte';
@@ -32,6 +34,7 @@ const {
   url,
   github,
   tosdrId,
+  iosApp,
   icon,
   followWith,
   securityAudited,
@@ -134,6 +137,7 @@ const ignoredSites = ['github.gom', 'wikipedia.'];
 // Fetch detailed data about the services GitHub repo, privacy policy and website
 const githubData = github ? await fetchGitHubStats(github) : null;
 const privacyData = tosdrId ? await fetchTosdrPrivacy(tosdrId) : null;
+const iosData = iosApp ? await fetchIosInfo(iosApp) : null;
 const dockerData = await fetchDockerData(name);
 const websiteData = (url && !ignoredSites.some(ignoredSite => url.includes(ignoredSite))) ? await fetchWebsiteInfo(url) : null;
 
@@ -243,13 +247,18 @@ const getApiEndpoint = () => {
         <GitHubDetailedInfo gitHubData={githubData} repo={github} />
       </section>
     )}
-
     { websiteData && (
       <section>
         <h3>{name} Website</h3>
         <WebsiteDetailedInfo url={url} websiteInfo={websiteData} />
       </section>
     )}
+    { iosData && (
+      <section>
+        <h3>{name} iOS App</h3>
+        <IosAppDetailedInfo url={url} iosData={iosData} />
+      </section>
+    )}
     { dockerData && dockerData.found && (
     <section>
       <h3>{name} Docker</h3>
diff --git a/web/src/types/Service.ts b/web/src/types/Service.ts
index e681949..6b8ac4e 100644
--- a/web/src/types/Service.ts
+++ b/web/src/types/Service.ts
@@ -17,6 +17,7 @@ export interface Service {
   openSource?: boolean;
   acceptsCrypto?: boolean;
   tosdrId?: string;
+  iosApp?: string;
 }
 
 export interface Section {