diff --git a/components/molecules/ProfileHeroCard.tsx b/components/molecules/ProfileHeroCard.tsx
new file mode 100644
index 0000000..e01d1a3
--- /dev/null
+++ b/components/molecules/ProfileHeroCard.tsx
@@ -0,0 +1,105 @@
+import { Text, View } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { useTranslation } from "react-i18next";
+import { useAppTheme } from "@/hooks/use-app-theme";
+
+type ProfileHeroCardProps = {
+ email?: string | null;
+ firstname?: string | null;
+};
+
+export default function ProfileHeroCard({
+ email,
+ firstname,
+}: ProfileHeroCardProps) {
+ const { t } = useTranslation();
+ const { colors, shadows } = useAppTheme();
+
+ return (
+
+
+
+
+
+ {t("profile.title")}
+
+
+
+
+ {firstname || "SkinTrack"}
+
+
+ {email || "skintrack@routine.app"}
+
+
+
+
+
+
+
+
+
+
+
+ {t("profile.status")}
+
+
+ {t("profile.statusBody")}
+
+
+
+
+
+ {t("profile.skinSummary")}
+
+
+ 78%
+
+
+
+
+ );
+}
diff --git a/components/molecules/ProfilePreferenceSelector.tsx b/components/molecules/ProfilePreferenceSelector.tsx
new file mode 100644
index 0000000..f7e90a5
--- /dev/null
+++ b/components/molecules/ProfilePreferenceSelector.tsx
@@ -0,0 +1,61 @@
+import { Text, View } from "react-native";
+import PreferenceOptionButton from "@/components/atoms/PreferenceOptionButton";
+import { useAppTheme } from "@/hooks/use-app-theme";
+
+type ProfilePreferenceSelectorProps = {
+ activeValue: T;
+ backgroundColor: string;
+ subtitle: string;
+ title: string;
+ options: readonly T[];
+ optionsGapClassName?: string;
+ optionClassName?: string;
+ textClassName: string;
+ getLabel: (option: T) => string;
+ onSelect: (option: T) => void;
+};
+
+export default function ProfilePreferenceSelector({
+ activeValue,
+ backgroundColor,
+ subtitle,
+ title,
+ options,
+ optionsGapClassName = "gap-3",
+ optionClassName,
+ textClassName,
+ getLabel,
+ onSelect,
+}: ProfilePreferenceSelectorProps) {
+ const { colors } = useAppTheme();
+
+ return (
+
+
+ {title}
+
+
+ {subtitle}
+
+
+
+ {options.map((option) => (
+ onSelect(option)}
+ />
+ ))}
+
+
+ );
+}
diff --git a/components/molecules/ProfilePreferencesCard.tsx b/components/molecules/ProfilePreferencesCard.tsx
new file mode 100644
index 0000000..6d0a33e
--- /dev/null
+++ b/components/molecules/ProfilePreferencesCard.tsx
@@ -0,0 +1,61 @@
+import { View } from "react-native";
+import { useTranslation } from "react-i18next";
+import ProfileItem from "@/components/atoms/ProfileItem";
+import SectionHeader from "@/components/atoms/SectionHeader";
+import ProfilePreferenceSelector from "@/components/molecules/ProfilePreferenceSelector";
+import { SUPPORTED_LANGUAGES } from "@/i18n/resources";
+import type { AppLanguage } from "@/i18n/resources";
+import { useAppTheme } from "@/hooks/use-app-theme";
+import { setAppLanguage } from "@/services/language";
+
+type ProfilePreferencesCardProps = {
+ language: AppLanguage | undefined;
+};
+
+export default function ProfilePreferencesCard({
+ language,
+}: ProfilePreferencesCardProps) {
+ const { t } = useTranslation();
+ const { colors, shadows } = useAppTheme();
+
+ return (
+
+
+
+
+
+
+
+
+
+ t(`common.languages.${option}`)}
+ onSelect={(option) => {
+ void setAppLanguage(option);
+ }}
+ />
+
+
+ );
+}
diff --git a/components/molecules/ProfileSupportCard.tsx b/components/molecules/ProfileSupportCard.tsx
new file mode 100644
index 0000000..df580fc
--- /dev/null
+++ b/components/molecules/ProfileSupportCard.tsx
@@ -0,0 +1,29 @@
+import { View } from "react-native";
+import { useTranslation } from "react-i18next";
+import ProfileItem from "@/components/atoms/ProfileItem";
+import SectionHeader from "@/components/atoms/SectionHeader";
+import { useAppTheme } from "@/hooks/use-app-theme";
+
+export default function ProfileSupportCard() {
+ const { t } = useTranslation();
+ const { colors, shadows } = useAppTheme();
+
+ return (
+
+
+
+
+
+
+ );
+}