diff --git a/frontend/apps/mobile/app/(app)/event/[id].tsx b/frontend/apps/mobile/app/(app)/event/[id].tsx
index f0fc7475..7e376075 100644
--- a/frontend/apps/mobile/app/(app)/event/[id].tsx
+++ b/frontend/apps/mobile/app/(app)/event/[id].tsx
@@ -14,21 +14,23 @@ import {
   useGetEventOccurrencesByEventId,
   useGetOrganization,
   useGetReviewAggregate,
+  useGetReviewByEventId,
 } from "@skillspark/api-client";
-import type { EventOccurrence, Organization } from "@skillspark/api-client";
+import type { EventOccurrence, Organization, Review } from "@skillspark/api-client";
 import { IconSymbol } from "@/components/ui/icon-symbol";
 import { RATING_OPTIONS } from "@/constants/ratings";
 import { AppColors, Shadows } from "@/constants/theme";
 import { useOrgLinks } from "@/hooks/useOrgLinks";
 import { BookmarkButton } from "@/components/BookmarkButton";
+import { ReviewCard } from "@/components/ReviewCard";
 import { useTranslation } from "react-i18next";
 import { AboutPage } from "@/components/AboutPage";
 import { ShareModal } from "@/components/ShareModal";
 import { formatLocation } from "@/utils/format";
 import { getRatingOption } from "@/utils/ratings";
 import { EventImage } from "@/components/EventImage";
-import { ExpandableText } from "@/components/ExpandableText";
 import { ErrorScreen } from "@/components/ErrorScreen";
+import LogoBgWrapper from "@/components/LogoBgWrapper";
 import { useState } from "react";
 
 function EventOccurrenceDetail({
@@ -66,6 +68,24 @@ function EventOccurrenceDetail({
   const totalReviews = aggregate?.total_reviews ?? 0;
   const ratingOption = getRatingOption(avgRating);
 
+  const { data: reviewsResp } = useGetReviewByEventId(
+    occurrence.event.id,
+    { page: 1, page_size: 5, sort_by: "highest" },
+    { query: { enabled: !!occurrence.event.id && totalReviews > 0 } },
+  );
+  const rawReviews =
+    reviewsResp?.status === 200 ? (reviewsResp.data as Review[]) : [];
+  const previewReview =
+    rawReviews.length > 0
+      ? rawReviews.reduce<Review>(
+          (best, r) =>
+            Math.abs(r.rating - avgRating) < Math.abs(best.rating - avgRating)
+              ? r
+              : best,
+          rawReviews[0],
+        )
+      : null;
+
   return (
     <SafeAreaView className="flex-1 bg-white" edges={["top", "bottom"]}>
       {/* Header */}
@@ -89,7 +109,7 @@ function EventOccurrenceDetail({
           style={{ color: AppColors.primaryText }}
           numberOfLines={1}
         >
-          {translate("org.class")}
+          {occurrence.event.title}
         </Text>
         <View className="w-8" />
       </View>
@@ -107,36 +127,42 @@ function EventOccurrenceDetail({
         </View>
 
         {/* White content card overlapping image */}
-        <View className="bg-white rounded-t-[28px] -mt-7 px-[22px] pb-6">
+        <View className="bg-white -mt-7 px-[22px] pb-6">
           {/* Drag handle */}
           <View
             className="w-[38px] h-1 rounded-sm self-center mt-3 mb-3.5"
-            style={{ backgroundColor: AppColors.borderLight }}
           />
 
           {/* Title row with bookmark + share */}
           <View className="mb-1">
-            <View className="absolute top-0 right-0 items-center z-10">
+            <View className="absolute top-0 right-0 flex-row items-center gap-2 z-10">
               <TouchableOpacity
                 onPress={() => setShareVisible(true)}
                 activeOpacity={0.7}
+                className="h-9 w-9 items-center justify-center rounded-full border-2"
+                style={{ borderColor: AppColors.borderLight }}
               >
                 <IconSymbol
                   name="square.and.arrow.up"
-                  size={28}
-                  color={AppColors.primaryText}
+                  size={18}
+                  color={AppColors.secondaryText}
                 />
               </TouchableOpacity>
-              <BookmarkButton eventId={occurrence.event.id} />
+              <BookmarkButton
+                eventId={occurrence.event.id}
+                iconSize={18}
+                className="h-9 w-9 items-center justify-center rounded-full border-2"
+                style={{ borderColor: AppColors.borderLight }}
+              />
             </View>
             <Text
-              className="mr-10 text-[26px] font-nunito-bold leading-8"
+              className="mr-24 text-[26px] font-nunito-bold leading-8"
               style={{ color: AppColors.primaryText }}
             >
               {occurrence.event.title}
             </Text>
           </View>
-
+<LogoBgWrapper>
           {/* Location */}
           <View className="flex-row items-center gap-1 mb-2">
             <IconSymbol name="location" size={22} color={AppColors.mutedText} />
@@ -165,34 +191,41 @@ function EventOccurrenceDetail({
             </View>
           )}
 
-          {!!orgId && (
+          {/* Bookings this week */}
+          <View className="flex-row items-center gap-1 mb-2">
+            <IconSymbol
+              name="flame.fill"
+              size={18}
+              color={AppColors.primaryBlue}
+            />
+            <Text
+              className="text-[14px] font-nunito"
+              style={{ color: AppColors.primaryBlue }}
+            >
+              {occurrence.curr_enrolled}+ {translate("event.bookingsThisWeek")}
+            </Text>
+          </View>
+
+          {/* Org badge */}
+          {!!orgName && !!orgId && (
             <TouchableOpacity
               onPress={() => router.push(`../org/${orgId}`)}
-              className="flex-row items-center gap-1 mb-2"
+              activeOpacity={0.7}
+              className="self-start px-4 py-1.5 rounded-full mt-1"
+              style={{ backgroundColor: AppColors.savedBackground }}
             >
-              <IconSymbol
-                name="person.fill"
-                size={22}
-                color={AppColors.mutedText}
-              />
               <Text
-                className="text-[14px] font-nunito underline"
-                style={{ color: AppColors.mutedText }}
+                className="text-[13px] font-nunito-bold"
+                style={{ color: AppColors.primaryBlue }}
               >
                 {orgName}
               </Text>
             </TouchableOpacity>
           )}
-
-          {/* Bookings this week */}
-          <Text
-            className="text-[14px] font-nunito"
-            style={{ color: AppColors.primaryBlue }}
-          >
-            {occurrence.curr_enrolled}+ {translate("event.bookingsThisWeek")}
-          </Text>
+          </LogoBgWrapper>
         </View>
 
+        
         {/* About card */}
         <View
           className="mx-4 mb-4 rounded-2xl bg-white p-5"
@@ -226,41 +259,57 @@ function EventOccurrenceDetail({
             style={Shadows.card}
           >
             <Text
-              className="mb-3 font-nunito-bold text-[18px]"
+              className="mb-4 font-nunito-bold text-[18px]"
               style={{ color: AppColors.primaryText }}
             >
               {translate("event.reviews")}
             </Text>
 
-            {/* Aggregate rating */}
             {totalReviews > 0 ? (
-              <View className="flex-row items-center gap-2">
-                <Image
-                  source={ratingOption.image}
-                  style={{ width: 22, height: 22 }}
-                />
-                <Text
-                  className="text-[15px] font-nunito-bold"
-                  style={{ color: AppColors.primaryText }}
-                >
-                  {translate(ratingOption.labelKey!)}
-                </Text>
-                <Text
-                  className="text-[13px] font-nunito"
-                  style={{ color: AppColors.subtleText }}
-                >
-                  ({totalReviews})
-                </Text>
+              <View className="flex-row gap-3 items-start mb-2">
+                {/* Left: aggregate number + smiley + count */}
+                <View className="items-center">
+                  <Text
+                    className="font-nunito-bold"
+                    style={{ color: AppColors.primaryText, fontSize: 40, lineHeight: 48 }}
+                  >
+                    {avgRating % 1 === 0
+                      ? avgRating.toFixed(0)
+                      : avgRating.toFixed(1)}
+                  </Text>
+                  <Image
+                    source={ratingOption.image}
+                    style={{ width: 44, height: 44 }}
+                  />
+                  <Text
+                    className="text-[12px] font-nunito mt-1"
+                    style={{ color: AppColors.subtleText }}
+                  >
+                    ({totalReviews})
+                  </Text>
+                </View>
+
+                {/* Right: preview review (no avatar — aggregate smiley already on left) */}
+                {previewReview && (
+                  <View className="flex-1 -mr-5">
+                    <ReviewCard review={previewReview} hideAvatar />
+                  </View>
+                )}
               </View>
             ) : (
               <Text
-                className="text-[13px] font-nunito"
+                className="text-[13px] font-nunito mb-2"
                 style={{ color: AppColors.subtleText }}
               >
                 {translate("review.noReviews")}
               </Text>
             )}
-            <View className="mt-4 items-center">
+
+            <View
+              style={{ height: 0.5, backgroundColor: AppColors.borderLight }}
+              className="mt-2 mb-3"
+            />
+            <View className="items-center">
               <Text
                 className="text-[13px] font-nunito underline"
                 style={{ color: AppColors.primaryText }}
@@ -292,6 +341,8 @@ function EventOccurrenceDetail({
             </Text>
           </TouchableOpacity>
         </View>
+        
+        
       </ScrollView>
 
       <ShareModal
diff --git a/frontend/apps/mobile/app/(app)/org/[id].tsx b/frontend/apps/mobile/app/(app)/org/[id].tsx
index f085563b..b710f24d 100644
--- a/frontend/apps/mobile/app/(app)/org/[id].tsx
+++ b/frontend/apps/mobile/app/(app)/org/[id].tsx
@@ -2,7 +2,6 @@ import { useState } from "react";
 import { Image } from "expo-image";
 import {
   ActivityIndicator,
-  Pressable,
   ScrollView,
   Text,
   TouchableOpacity,
@@ -10,20 +9,26 @@ import {
 } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { useLocalSearchParams, useRouter } from "expo-router";
-import { useGetLocationById, useGetOrganization } from "@skillspark/api-client";
-import type { Location, Organization } from "@skillspark/api-client";
-import { SvgXml } from "react-native-svg";
+import {
+  useGetEventReviewsForOrganization,
+  useGetLocationById,
+  useGetOrganization,
+} from "@skillspark/api-client";
+import type {
+  Location,
+  Organization,
+  SimpleReviewAggregate,
+} from "@skillspark/api-client";
 import { ErrorScreen } from "@/components/ErrorScreen";
 import { IconSymbol } from "@/components/ui/icon-symbol";
 import { ThemedText } from "@/components/themed-text";
 import { AppColors, Shadows } from "@/constants/theme";
-import { ExpandableText } from "@/components/ExpandableText";
 import { useThemeColor } from "@/hooks/use-theme-color";
-import { useOrgLinks } from "@/hooks/useOrgLinks";
+import { AboutPage } from "@/components/AboutPage";
+import { EventRatingCard } from "@/components/EventRatingCard";
 import { useTranslation } from "react-i18next";
 import * as Linking from "expo-linking";
 import { ShareModal } from "@/components/ShareModal";
-import { EMPTY_FACE_SVG } from "@/constants/avatarFaces";
 import { RatingSmiley } from "@/components/RatingSmiley";
 import LogoBgWrapper from "@/components/LogoBgWrapper";
 
@@ -38,11 +43,21 @@ function OrgDetail({
   const { t: translate } = useTranslation();
   const backgroundColor = useThemeColor({}, "background");
   const borderColor = useThemeColor({}, "borderColor");
-  const { openLink, hasLinks } = useOrgLinks(org.links ?? []);
-  const [aboutExpanded, setAboutExpanded] = useState(false);
-  const [aboutTruncated, setAboutTruncated] = useState(false);
   const [shareVisible, setShareVisible] = useState(false);
 
+  const totalOrgReviews = org.review_summary?.total_reviews ?? 0;
+  const { data: previewResp } = useGetEventReviewsForOrganization(
+    org.id,
+    { page: 1, page_size: 1, sort_by: "most_rated" },
+    { query: { enabled: !!org.id && totalOrgReviews > 0 } },
+  );
+  const previewEvent =
+    previewResp?.status === 200 &&
+    Array.isArray(previewResp.data) &&
+    previewResp.data.length > 0
+      ? (previewResp.data[0] as SimpleReviewAggregate)
+      : null;
+
   const cardStyle = {
     shadowColor: "#000",
     shadowOpacity: 0.08,
@@ -144,59 +159,13 @@ function OrgDetail({
             className="mx-4 mb-4 rounded-2xl bg-white p-5"
             style={cardStyle}
           >
-            <Text className="mb-2.5 text-[18px] font-nunito-bold">
-              {translate("org.about")}
-            </Text>
-            <Text
-              numberOfLines={aboutExpanded ? undefined : 4}
-              onTextLayout={(e) => {
-                if (!aboutExpanded)
-                  setAboutTruncated(e.nativeEvent.lines.length >= 4);
-              }}
-              className={`text-sm leading-[22px] ${
-                aboutTruncated ? "mb-1" : "mb-4"
-              }`}
-              style={{ color: AppColors.secondaryText }}
-            >
-              {org.about ?? ""}
-            </Text>
-            {aboutTruncated && (
-              <Pressable
-                onPress={() => setAboutExpanded((prev) => !prev)}
-                className="mb-4"
-              >
-                <Text
-                  className="text-[13px] font-semibold"
-                  style={{ color: AppColors.primaryText }}
-                >
-                  {aboutExpanded
-                    ? translate("event.seeLess")
-                    : translate("event.seeMore")}
-                </Text>
-              </Pressable>
-            )}
-            {hasLinks && (
-              <View className="flex-row flex-wrap gap-2.5">
-                {(org.links ?? []).map((link, index) => (
-                  <Pressable
-                    key={index}
-                    onPress={() => openLink(link.href)}
-                    className="rounded-full px-5 py-2.5 items-center"
-                    style={{ backgroundColor: AppColors.borderLight }}
-                  >
-                    <Text
-                      className="text-[13px] font-semibold"
-                      style={{ color: AppColors.primaryText }}
-                    >
-                      {link.label}
-                    </Text>
-                  </Pressable>
-                ))}
-              </View>
-            )}
+            <AboutPage
+              description={org.about ?? ""}
+              links={org.links ?? []}
+            />
           </View>
 
-          {/* Rating card */}
+          {/* Reviews card */}
           <TouchableOpacity
             activeOpacity={0.8}
             onPress={() => router.push(`/org/${org.id}/reviews`)}
@@ -205,38 +174,73 @@ function OrgDetail({
               className="mx-4 mb-4 rounded-2xl bg-white p-5"
               style={cardStyle}
             >
-              <Text className="mb-4 text-[24px] font-nunito-bold">
+              <Text
+                className="mb-4 font-nunito-bold text-[18px]"
+                style={{ color: AppColors.primaryText }}
+              >
                 {translate("org.reviews")}
               </Text>
-              {org.review_summary && org.review_summary.total_reviews > 0 ? (
-                <View className="flex-row items-center justify-center">
-                  <View className="flex-1 items-center">
+
+              {totalOrgReviews > 0 ? (
+                <View className="flex-row gap-3 items-start mb-2">
+                  {/* Left: aggregate number + smiley + count */}
+                  <View className="items-center">
+                    <Text
+                      className="font-nunito-bold"
+                      style={{ color: AppColors.primaryText, fontSize: 40, lineHeight: 48 }}
+                    >
+                      {org.review_summary!.average_rating % 1 === 0
+                        ? org.review_summary!.average_rating.toFixed(0)
+                        : org.review_summary!.average_rating.toFixed(1)}
+                    </Text>
                     <RatingSmiley
-                      rating={org.review_summary.average_rating}
-                      width={80}
-                      height={80}
+                      rating={org.review_summary!.average_rating}
+                      width={44}
+                      height={44}
                     />
-                  </View>
-                  <View className="flex-1 items-center">
-                    <Text className="text-[36px] font-nunito-bold leading-[44px]">
-                      {org.review_summary.average_rating.toFixed(1)}
-                    </Text>
                     <Text
-                      className="text-[13px] font-nunito"
+                      className="text-[12px] font-nunito mt-1"
                       style={{ color: AppColors.subtleText }}
                     >
-                      ({org.review_summary.total_reviews})
+                      ({totalOrgReviews})
                     </Text>
                   </View>
+
+                  {/* Right: preview event rating card */}
+                  {previewEvent && (
+                    <View className="flex-1">
+                      <EventRatingCard
+                        event={previewEvent.event}
+                        aggregate={previewEvent}
+                        onPress={() => router.push(`/org/${org.id}/reviews`)}
+                      />
+                    </View>
+                  )}
                 </View>
               ) : (
-                <View className="flex-row items-center gap-3 py-4 justify-center">
-                  <SvgXml xml={EMPTY_FACE_SVG} width={36} height={36} />
-                  <Text className="text-[16px] font-nunito">
-                    {translate("review.noReviews")}
-                  </Text>
-                </View>
+                <Text
+                  className="text-[13px] font-nunito mb-2"
+                  style={{ color: AppColors.subtleText }}
+                >
+                  {translate("review.noReviews")}
+                </Text>
               )}
+
+              <View
+                style={{
+                  height: 0.5,
+                  backgroundColor: AppColors.borderLight,
+                }}
+                className="mt-2 mb-3"
+              />
+              <View className="items-center">
+                <Text
+                  className="text-[13px] font-nunito underline"
+                  style={{ color: AppColors.primaryText }}
+                >
+                  {translate("event.seeMoreReviews")}
+                </Text>
+              </View>
             </View>
           </TouchableOpacity>
 
diff --git a/frontend/apps/mobile/components/AboutPage.tsx b/frontend/apps/mobile/components/AboutPage.tsx
index f0ad5b76..f6e5e215 100644
--- a/frontend/apps/mobile/components/AboutPage.tsx
+++ b/frontend/apps/mobile/components/AboutPage.tsx
@@ -15,6 +15,7 @@ export function AboutPage({ description, links }: AboutPageProps) {
   const { t: translate } = useTranslation();
   const [expanded, setExpanded] = useState(false);
   const [truncated, setTruncated] = useState(false);
+  const [measured, setMeasured] = useState(false);
 
   return (
     <View>
@@ -25,10 +26,14 @@ export function AboutPage({ description, links }: AboutPageProps) {
         {translate("event.about")}
       </Text>
       <Text
-        numberOfLines={expanded ? undefined : 4}
+        numberOfLines={!measured ? undefined : expanded ? undefined : 4}
         onTextLayout={(e) => {
-          if (!expanded) setTruncated(e.nativeEvent.lines.length >= 4);
+          if (!measured) {
+            setMeasured(true);
+            setTruncated(e.nativeEvent.lines.length > 4);
+          }
         }}
+        style={{ opacity: measured ? 1 : 0 }}
         className="text-sm text-gray-500 leading-relaxed mb-1"
       >
         {description}
diff --git a/frontend/apps/mobile/components/BookmarkButton.tsx b/frontend/apps/mobile/components/BookmarkButton.tsx
index 9ce6ebba..40774caa 100644
--- a/frontend/apps/mobile/components/BookmarkButton.tsx
+++ b/frontend/apps/mobile/components/BookmarkButton.tsx
@@ -1,4 +1,4 @@
-import { TouchableOpacity } from "react-native";
+import { StyleProp, TouchableOpacity, ViewStyle } from "react-native";
 import { useQueryClient } from "@tanstack/react-query";
 import {
   useCreateSaved,
@@ -20,12 +20,18 @@ interface BookmarkButtonProps {
   // Controlled mode: pass these to skip the internal fetch
   isBookmarked?: boolean;
   savedEntryId?: string;
+  iconSize?: number;
+  className?: string;
+  style?: StyleProp<ViewStyle>;
 }
 
 export function BookmarkButton({
   eventId,
   isBookmarked: isBookmarkedProp,
   savedEntryId,
+  iconSize = 40,
+  className,
+  style,
 }: BookmarkButtonProps) {
   const queryClient = useQueryClient();
   const { guardianId } = useAuthContext();
@@ -115,10 +121,12 @@ export function BookmarkButton({
       onPress={handlePress}
       activeOpacity={0.7}
       disabled={isPending}
+      className={className}
+      style={style}
     >
       <MaterialIcons
         name={isBookmarked ? "bookmark" : "bookmark-border"}
-        size={40}
+        size={iconSize}
         color={isPending ? AppColors.placeholderText : AppColors.primaryText}
       />
     </TouchableOpacity>
diff --git a/frontend/apps/mobile/components/ReviewCard.tsx b/frontend/apps/mobile/components/ReviewCard.tsx
index 29ea77ae..75a8fb22 100644
--- a/frontend/apps/mobile/components/ReviewCard.tsx
+++ b/frontend/apps/mobile/components/ReviewCard.tsx
@@ -19,7 +19,7 @@ function timeAgo(dateStr: string, translate: (key: string) => string) {
     : `${years} ${translate("time.yearsAgo")}`;
 }
 
-export function ReviewCard({ review }: { review: Review }) {
+export function ReviewCard({ review, hideAvatar }: { review: Review; hideAvatar?: boolean }) {
   const { t: translate } = useTranslation();
   const match = RATING_OPTIONS.find((r) => r.rating === review.rating);
 
@@ -36,9 +36,11 @@ export function ReviewCard({ review }: { review: Review }) {
 
   return (
     <View className="flex-row gap-3 p-4 rounded-2xl">
-      <View className="items-center pt-1">
-        {match && <Image source={match.image} className="w-9 h-9" />}
-      </View>
+      {!hideAvatar && (
+        <View className="items-center pt-1">
+          {match && <Image source={match.image} className="w-9 h-9" />}
+        </View>
+      )}
 
       <View className="flex-1 gap-2">
         <Text