diff --git a/src/app/(app)/[lang]/kozelet/ontevekenykorok/page.tsx b/src/app/(app)/[lang]/kozelet/ontevekenykorok/page.tsx
index 469c6ed..be1bcd9 100644
--- a/src/app/(app)/[lang]/kozelet/ontevekenykorok/page.tsx
+++ b/src/app/(app)/[lang]/kozelet/ontevekenykorok/page.tsx
@@ -1,28 +1,64 @@
+import {
+  OrganizationCard,
+  type OrganizationCardProps,
+} from "@/components/common/OrganizationCard";
 import { PageHeader } from "@/components/common/PageHeader";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Separator } from "@/components/ui/separator";
-import { Button } from "@/components/ui/button";
 import { getDictionary } from "@/get-dictionary";
 import { Locale } from "@/i18n-config";
-import Image from "next/image";
-import { getSocialIcon, getSocialPriority, getSocialName } from "@/lib/social-utils";
 
-type Kor = {
+type Organization = {
   id: string;
   title: string;
   description: string[];
   social_title: string;
   social_links: { label: string; url: string }[];
   images?: string[];
+  stats?: OrganizationCardProps["stats"];
+  events?: OrganizationCardProps["events"];
+  activities?: OrganizationCardProps["activities"];
+  departments?: OrganizationCardProps["departments"];
+  target_audience?: OrganizationCardProps["targetAudience"];
+  targetAudience?: OrganizationCardProps["targetAudience"];
+  join_url?: string;
+  joinUrl?: string;
+  join_text?: string;
+  joinText?: string;
 };
 
+function getContactLabel(label: string) {
+  return label.replace(/:$/, "");
+}
+
+function getOrganizationCardProps(
+  organization: Organization,
+  locale: Locale,
+): OrganizationCardProps {
+  return {
+    name: organization.title,
+    stats: organization.stats,
+    presentation: organization.description,
+    events: organization.events,
+    activities: organization.activities,
+    departments: organization.departments,
+    targetAudience:
+      organization.targetAudience ?? organization.target_audience,
+    socialLinks: organization.social_links,
+    galleryImages: organization.images,
+    imageBasePath: "/ontevekenykorok",
+    joinUrl: organization.joinUrl ?? organization.join_url,
+    joinText: organization.joinText ?? organization.join_text,
+    labels: { contacts: getContactLabel(organization.social_title) },
+    locale,
+  };
+}
+
 export default async function OntevekenyKorokPage({
   params,
 }: {
   params: Promise<{ lang: Locale }>;
 }) {
   const { lang } = await params;
-  const dictionary = await getDictionary(lang, 'ontevekeny_korok');
+  const dictionary = await getDictionary(lang, "ontevekeny_korok");
   const data = dictionary.ontevekeny_korok;
 
   if (!data) {
@@ -31,81 +67,15 @@ export default async function OntevekenyKorokPage({
 
   return (
     <div className="min-h-screen">
-      <div className="container mx-auto px-2 md:px-4 py-8">
+      <div className="container mx-auto px-2 py-8 md:px-4">
         <PageHeader title={data.title} />
 
         <div className="space-y-12">
-          {data.korok.map((kor: Kor) => (
-            <Card key={kor.id} className="overflow-hidden bg-white shadow-md hover:shadow-lg transition-shadow">
-              <CardHeader>
-                <CardTitle className="text-2xl text-ehk-dark-red">
-                  {kor.title}
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                <div className="space-y-4 text-muted-foreground leading-relaxed text-justify mb-8">
-                  {kor.description.map((para: string, pIdx: number) => (
-                    <p key={`p-${kor.id}-${pIdx}`}>{para}</p>
-                  ))}
-                </div>
-
-                {/* Image Grid / Gallery */}
-                {kor.images && kor.images.length > 0 && (
-                  <div className={`grid gap-4 mb-8 ${
-                    kor.images.length === 1 ? 'grid-cols-1' : 
-                    kor.images.length === 2 ? 'grid-cols-1 md:grid-cols-2' : 
-                    'grid-cols-1 md:grid-cols-3'
-                  }`}>
-                    {kor.images.map((img: string, imgIdx: number) => (
-                      <div key={`img-${kor.id}-${imgIdx}`} className={`relative w-full ${kor.images!.length === 1 ? 'bg-slate-50 flex items-center justify-center' : kor.images!.length === 2 ? 'aspect-square md:aspect-[4/3] bg-slate-50 flex items-center justify-center p-4' : 'aspect-square bg-slate-50 flex items-center justify-center p-4'} rounded-md overflow-hidden border border-slate-100 shadow-sm`}>
-                        {kor.images!.length === 1 ? (
-                          /* eslint-disable-next-line @next/next/no-img-element */
-                          <img
-                            src={`/ontevekenykorok/${img}`}
-                            alt={`${kor.title} image ${imgIdx + 1}`}
-                            className="w-full h-auto max-h-[450px] object-contain"
-                          />
-                        ) : (
-                          <Image
-                            src={`/ontevekenykorok/${img}`}
-                            alt={`${kor.title} image ${imgIdx + 1}`}
-                            fill
-                            className="object-contain p-2"
-                          />
-                        )}
-                      </div>
-                    ))}
-                  </div>
-                )}
-                
-                <Separator className="mb-6" />
-                
-                <div>
-                  <h4 className="font-medium text-gray-900 mb-3">{kor.social_title}</h4>
-                  <div className="flex flex-wrap gap-x-3 gap-y-3">
-                    {[...kor.social_links]
-                      .sort((a: {label: string, url: string}, b: {label: string, url: string}) => getSocialPriority(a.label) - getSocialPriority(b.label))
-                      .map((link: {label: string, url: string}, lIdx: number) => (
-                      <Button
-                        key={`link-${kor.id}-${lIdx}`}
-                        variant="outline"
-                        className="rounded-full gap-2 hover:bg-slate-100 hover:text-ehk-dark-red transition-colors"
-                        asChild
-                      >
-                        <a
-                          href={link.url}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                        >
-                          {getSocialIcon(link.label)}
-                          {getSocialName(link.label, lang)}
-                        </a>
-                      </Button>
-                    ))}
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
+          {(data.korok as Organization[]).map((kor) => (
+            <OrganizationCard
+              key={kor.id}
+              {...getOrganizationCardProps(kor, lang)}
+            />
           ))}
         </div>
       </div>
diff --git a/src/app/(app)/[lang]/kozelet/szakkollegiumok/page.tsx b/src/app/(app)/[lang]/kozelet/szakkollegiumok/page.tsx
index 70e5f1b..b182145 100644
--- a/src/app/(app)/[lang]/kozelet/szakkollegiumok/page.tsx
+++ b/src/app/(app)/[lang]/kozelet/szakkollegiumok/page.tsx
@@ -1,28 +1,66 @@
+import {
+  OrganizationCard,
+  type OrganizationCardProps,
+} from "@/components/common/OrganizationCard";
 import { PageHeader } from "@/components/common/PageHeader";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Separator } from "@/components/ui/separator";
-import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
 import { getDictionary } from "@/get-dictionary";
 import { Locale } from "@/i18n-config";
-import Image from "next/image";
-import { getSocialIcon, getSocialPriority, getSocialName } from "@/lib/social-utils";
 
-type Team = {
+type Organization = {
   id: string;
   title: string;
   description: string[];
   social_title: string;
   social_links: { label: string; url: string }[];
   images?: string[];
+  stats?: OrganizationCardProps["stats"];
+  events?: OrganizationCardProps["events"];
+  activities?: OrganizationCardProps["activities"];
+  departments?: OrganizationCardProps["departments"];
+  target_audience?: OrganizationCardProps["targetAudience"];
+  targetAudience?: OrganizationCardProps["targetAudience"];
+  join_url?: string;
+  joinUrl?: string;
+  join_text?: string;
+  joinText?: string;
 };
 
+function getContactLabel(label: string) {
+  return label.replace(/:$/, "");
+}
+
+function getOrganizationCardProps(
+  organization: Organization,
+  locale: Locale,
+  imageBasePath: string,
+): OrganizationCardProps {
+  return {
+    name: organization.title,
+    stats: organization.stats,
+    presentation: organization.description,
+    events: organization.events,
+    activities: organization.activities,
+    departments: organization.departments,
+    targetAudience:
+      organization.targetAudience ?? organization.target_audience,
+    socialLinks: organization.social_links,
+    galleryImages: organization.images,
+    imageBasePath,
+    joinUrl: organization.joinUrl ?? organization.join_url,
+    joinText: organization.joinText ?? organization.join_text,
+    labels: { contacts: getContactLabel(organization.social_title) },
+    locale,
+  };
+}
+
 export default async function SzakkollegiumokPage({
   params,
 }: {
   params: Promise<{ lang: Locale }>;
 }) {
   const { lang } = await params;
-  const dictionary = await getDictionary(lang, 'advanced_colleges');
+  const dictionary = await getDictionary(lang, "advanced_colleges");
   const data = dictionary.advanced_colleges;
 
   if (!data) {
@@ -31,159 +69,36 @@ export default async function SzakkollegiumokPage({
 
   return (
     <div className="min-h-screen">
-      <div className="container mx-auto px-2 md:px-4 py-8">
+      <div className="container mx-auto px-2 py-8 md:px-4">
         <PageHeader title={data.title} />
-        
-        {/* Intro section, if any */}
+
         {data.description && data.description.length > 0 && (
-          <Card className="mx-auto mb-12 bg-white/50 backdrop-blur-sm border-slate-200/60 shadow-sm">
+          <Card className="mx-auto mb-12 border-slate-200/60 bg-white/50 shadow-sm backdrop-blur-sm">
             <CardContent className="pt-6">
-              <div className="space-y-4 text-gray-700 leading-relaxed text-lg text-justify">
-                {data.description.map((para: string) => (
-                  <p key={para.substring(0, 32)}>{para}</p>
+              <div className="space-y-4 text-justify text-lg leading-relaxed text-gray-700">
+                {data.description.map((paragraph: string) => (
+                  <p key={paragraph.substring(0, 32)}>{paragraph}</p>
                 ))}
               </div>
             </CardContent>
           </Card>
         )}
 
-        <Card className="mx-auto mb-12 bg-white/50 backdrop-blur-sm border-slate-200/60 shadow-sm">
-          <CardHeader>
-            <CardTitle className="text-3xl text-ehk-dark-red">{data.muszak.title}</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-4 text-gray-700 leading-relaxed text-lg text-justify">
-              {data.muszak.description.map((para: string) => (
-                <p key={para.substring(0, 32)}>{para}</p>
-              ))}
-            </div>
-            
-            {data.muszak.images && data.muszak.images.length > 0 && (
-              <div className="mt-8 mb-4 w-full bg-slate-50 flex items-center justify-center rounded-md overflow-hidden border border-slate-100 shadow-sm">
-                {/* eslint-disable-next-line @next/next/no-img-element */}
-                <img
-                  src={`/szakkollegium/${data.muszak.images[0]}`}
-                  alt={data.muszak.title}
-                  className="w-full h-auto max-h-[450px] object-contain"
-                />
-              </div>
-            )}
-
-            <div className="mt-8 pt-6 border-t border-slate-200/60">
-              <h3 className="font-semibold text-lg mb-4">{data.muszak.social_title}</h3>
-              <div className="flex flex-wrap gap-3">
-                {[...data.muszak.social_links]
-                  .sort((a: {label: string, url: string}, b: {label: string, url: string}) => getSocialPriority(a.label) - getSocialPriority(b.label))
-                  .map((link: {label: string, url: string}) => (
-                  <Button
-                    key={`muszak-link-${link.url}`}
-                    variant="outline"
-                    className="rounded-full gap-2 hover:bg-slate-100 hover:text-ehk-dark-red transition-colors"
-                    asChild
-                  >
-                    <a
-                      href={link.url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      {getSocialIcon(link.label)}
-                      {getSocialName(link.label, lang)}
-                    </a>
-                  </Button>
-                ))}
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
         <div className="space-y-12">
-          {data.teams.map((team: Team) => {
-            const imageCount = team.images?.length || 0;
-            let gridColsClass = 'grid-cols-1 md:grid-cols-3';
-            if (imageCount === 1) {
-              gridColsClass = 'grid-cols-1';
-            } else if (imageCount === 2) {
-              gridColsClass = 'grid-cols-1 md:grid-cols-2';
-            }
-
-            return (
-              <Card key={team.id} className="overflow-hidden bg-white shadow-md hover:shadow-lg transition-shadow">
-                <CardHeader>
-                  <CardTitle className="text-2xl text-ehk-dark-red">
-                    {team.title}
-                  </CardTitle>
-                </CardHeader>
-                <CardContent>
-                  <div className="space-y-4 text-muted-foreground leading-relaxed text-justify mb-8">
-                    {team.description.map((para: string) => (
-                      <p key={para.substring(0, 32)}>{para}</p>
-                    ))}
-                  </div>
-
-                  {/* Image Grid / Gallery */}
-                  {team.images && team.images.length > 0 && (
-                    <div className={`grid gap-4 mb-8 ${gridColsClass}`}>
-                      {team.images.map((img: string, imgIdx: number) => {
-                        let containerClass = 'aspect-square bg-slate-50 flex items-center justify-center p-4';
-                        if (imageCount === 1) {
-                          containerClass = 'bg-slate-50 flex items-center justify-center';
-                        } else if (imageCount === 2) {
-                          containerClass = 'aspect-square md:aspect-[4/3] bg-slate-50 flex items-center justify-center p-4';
-                        }
+          <OrganizationCard
+            {...getOrganizationCardProps(
+              data.muszak as Organization,
+              lang,
+              "/szakkollegium",
+            )}
+          />
 
-                        return (
-                          <div key={`img-${team.id}-${imgIdx}`} className={`relative w-full ${containerClass} rounded-md overflow-hidden border border-slate-100 shadow-sm`}>
-                            {imageCount === 1 ? (
-                              /* eslint-disable-next-line @next/next/no-img-element */
-                              <img
-                                src={`/szakkollegium/${img}`}
-                                alt={`${team.title} - ${imgIdx + 1}`}
-                                className="w-full h-auto max-h-[450px] object-contain"
-                              />
-                            ) : (
-                              <Image
-                                src={`/szakkollegium/${img}`}
-                                alt={`${team.title} - ${imgIdx + 1}`}
-                                fill
-                                className="object-contain p-2"
-                              />
-                            )}
-                          </div>
-                        );
-                      })}
-                    </div>
-                  )}
-                  
-                  <Separator className="mb-6" />
-                  
-                  <div>
-                    <h4 className="font-medium text-gray-900 mb-3">{team.social_title}</h4>
-                    <div className="flex flex-wrap gap-x-3 gap-y-3">
-                      {[...team.social_links]
-                        .sort((a: {label: string, url: string}, b: {label: string, url: string}) => getSocialPriority(a.label) - getSocialPriority(b.label))
-                        .map((link: {label: string, url: string}) => (
-                        <Button
-                          key={`link-${team.id}-${link.url}`}
-                          variant="outline"
-                          className="rounded-full gap-2 hover:bg-slate-100 hover:text-ehk-dark-red transition-colors"
-                          asChild
-                        >
-                          <a
-                            href={link.url}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                          >
-                            {getSocialIcon(link.label)}
-                            {getSocialName(link.label, lang)}
-                          </a>
-                        </Button>
-                      ))}
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-            );
-          })}
+          {(data.teams as Organization[]).map((team) => (
+            <OrganizationCard
+              key={team.id}
+              {...getOrganizationCardProps(team, lang, "/szakkollegium")}
+            />
+          ))}
         </div>
       </div>
     </div>
diff --git a/src/app/(app)/[lang]/kozelet/versenycsapatok/page.tsx b/src/app/(app)/[lang]/kozelet/versenycsapatok/page.tsx
index 1c1c332..7f50d80 100644
--- a/src/app/(app)/[lang]/kozelet/versenycsapatok/page.tsx
+++ b/src/app/(app)/[lang]/kozelet/versenycsapatok/page.tsx
@@ -1,28 +1,65 @@
+import {
+  OrganizationCard,
+  type OrganizationCardProps,
+} from "@/components/common/OrganizationCard";
 import { PageHeader } from "@/components/common/PageHeader";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Separator } from "@/components/ui/separator";
-import { Button } from "@/components/ui/button";
 import { getDictionary } from "@/get-dictionary";
 import { Locale } from "@/i18n-config";
-import Image from "next/image";
-import { getSocialIcon, getSocialPriority, getSocialName } from "@/lib/social-utils";
 
-type Team = {
+type Organization = {
   id: string;
   title: string;
   description: string[];
   social_title: string;
   social_links: { label: string; url: string }[];
   images?: string[];
+  stats?: OrganizationCardProps["stats"];
+  events?: OrganizationCardProps["events"];
+  activities?: OrganizationCardProps["activities"];
+  departments?: OrganizationCardProps["departments"];
+  target_audience?: OrganizationCardProps["targetAudience"];
+  targetAudience?: OrganizationCardProps["targetAudience"];
+  join_url?: string;
+  joinUrl?: string;
+  join_text?: string;
+  joinText?: string;
 };
 
+function getContactLabel(label: string) {
+  return label.replace(/:$/, "");
+}
+
+function getOrganizationCardProps(
+  organization: Organization,
+  locale: Locale,
+  imageBasePath?: string,
+): OrganizationCardProps {
+  return {
+    name: organization.title,
+    stats: organization.stats,
+    presentation: organization.description,
+    events: organization.events,
+    activities: organization.activities,
+    departments: organization.departments,
+    targetAudience:
+      organization.targetAudience ?? organization.target_audience,
+    socialLinks: organization.social_links,
+    galleryImages: organization.images,
+    imageBasePath,
+    joinUrl: organization.joinUrl ?? organization.join_url,
+    joinText: organization.joinText ?? organization.join_text,
+    labels: { contacts: getContactLabel(organization.social_title) },
+    locale,
+  };
+}
+
 export default async function VersenycsapatokPage({
   params,
 }: {
   params: Promise<{ lang: Locale }>;
 }) {
   const { lang } = await params;
-  const dictionary = await getDictionary(lang, 'competition_teams');
+  const dictionary = await getDictionary(lang, "competition_teams");
   const data = dictionary.competition_teams;
 
   if (!data) {
@@ -31,135 +68,20 @@ export default async function VersenycsapatokPage({
 
   return (
     <div className="min-h-screen">
-      <div className="container mx-auto px-2 md:px-4 py-8">
+      <div className="container mx-auto px-2 py-8 md:px-4">
         <PageHeader title={data.title} />
 
-        <Card className="mx-auto mb-12 bg-white/50 backdrop-blur-sm border-slate-200/60 shadow-sm">
-          <CardHeader>
-            <CardTitle className="text-3xl text-ehk-dark-red">{data.mvk.title}</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-4 text-gray-700 leading-relaxed text-lg text-justify">
-              {data.mvk.description.map((para: string) => (
-                <p key={para.substring(0, 32)}>{para}</p>
-              ))}
-            </div>
-            
-            <div className="mt-8 pt-6 border-t border-slate-200/60">
-              <h3 className="font-semibold text-lg mb-4">{data.mvk.social_title}</h3>
-              <div className="flex flex-wrap gap-3">
-                {[...data.mvk.social_links]
-                  .sort((a: {label: string, url: string}, b: {label: string, url: string}) => getSocialPriority(a.label) - getSocialPriority(b.label))
-                  .map((link: {label: string, url: string}) => (
-                  <Button
-                    key={`mvk-link-${link.url}`}
-                    variant="outline"
-                    className="rounded-full gap-2 hover:bg-slate-100 hover:text-ehk-dark-red transition-colors"
-                    asChild
-                  >
-                    <a
-                      href={link.url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      {getSocialIcon(link.label)}
-                      {getSocialName(link.label, lang)}
-                    </a>
-                  </Button>
-                ))}
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
         <div className="space-y-12">
-          {data.teams.map((team: Team) => {
-            const imageCount = team.images?.length || 0;
-            let gridColsClass = 'grid-cols-1 md:grid-cols-3';
-            if (imageCount === 1) {
-              gridColsClass = 'grid-cols-1';
-            } else if (imageCount === 2) {
-              gridColsClass = 'grid-cols-1 md:grid-cols-2';
-            }
-
-            return (
-              <Card key={team.id} className="overflow-hidden bg-white shadow-md hover:shadow-lg transition-shadow">
-                <CardHeader>
-                  <CardTitle className="text-2xl text-ehk-dark-red">
-                    {team.title}
-                  </CardTitle>
-                </CardHeader>
-                <CardContent>
-                  <div className="space-y-4 text-muted-foreground leading-relaxed text-justify mb-8">
-                    {team.description.map((para: string) => (
-                      <p key={para.substring(0, 32)}>{para}</p>
-                    ))}
-                  </div>
-
-                  {/* Image Grid / Gallery */}
-                  {team.images && team.images.length > 0 && (
-                    <div className={`grid gap-4 mb-8 ${gridColsClass}`}>
-                      {team.images.map((img: string, imgIdx: number) => {
-                        let containerClass = 'aspect-square bg-slate-50 flex items-center justify-center p-4';
-                        if (imageCount === 1) {
-                          containerClass = 'bg-slate-50 flex items-center justify-center';
-                        } else if (imageCount === 2) {
-                          containerClass = 'aspect-square md:aspect-[4/3] bg-slate-50 flex items-center justify-center p-4';
-                        }
+          <OrganizationCard
+            {...getOrganizationCardProps(data.mvk as Organization, lang)}
+          />
 
-                        return (
-                          <div key={`img-${team.id}-${imgIdx}`} className={`relative w-full ${containerClass} rounded-md overflow-hidden border border-slate-100 shadow-sm`}>
-                            {imageCount === 1 ? (
-                              /* eslint-disable-next-line @next/next/no-img-element */
-                              <img
-                                src={`/versenycsapatok/${img}`}
-                                alt={`${team.title} - ${imgIdx + 1}`}
-                                className="w-full h-auto max-h-[450px] object-contain"
-                              />
-                            ) : (
-                              <Image
-                                src={`/versenycsapatok/${img}`}
-                                alt={`${team.title} - ${imgIdx + 1}`}
-                                fill
-                                className="object-contain p-2"
-                              />
-                            )}
-                          </div>
-                        );
-                      })}
-                    </div>
-                  )}
-                  
-                  <Separator className="mb-6" />
-                  
-                  <div>
-                    <h4 className="font-medium text-gray-900 mb-3">{team.social_title}</h4>
-                    <div className="flex flex-wrap gap-x-3 gap-y-3">
-                      {[...team.social_links]
-                        .sort((a: {label: string, url: string}, b: {label: string, url: string}) => getSocialPriority(a.label) - getSocialPriority(b.label))
-                        .map((link: {label: string, url: string}) => (
-                        <Button
-                          key={`link-${team.id}-${link.url}`}
-                          variant="outline"
-                          className="rounded-full gap-2 hover:bg-slate-100 hover:text-ehk-dark-red transition-colors"
-                          asChild
-                        >
-                          <a
-                            href={link.url}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                          >
-                            {getSocialIcon(link.label)}
-                            {getSocialName(link.label, lang)}
-                          </a>
-                        </Button>
-                      ))}
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-            );
-          })}
+          {(data.teams as Organization[]).map((team) => (
+            <OrganizationCard
+              key={team.id}
+              {...getOrganizationCardProps(team, lang, "/versenycsapatok")}
+            />
+          ))}
         </div>
       </div>
     </div>
diff --git a/src/components/common/OrganizationCard.tsx b/src/components/common/OrganizationCard.tsx
new file mode 100644
index 0000000..750a95f
--- /dev/null
+++ b/src/components/common/OrganizationCard.tsx
@@ -0,0 +1,93 @@
+import {
+  ContactsSection,
+  DepartmentsSection,
+  EventsSection,
+  GallerySection,
+  InlineListSection,
+  JoinCta,
+  OrganizationCardHeader,
+  PresentationSection,
+  RichTextSection,
+} from "@/components/common/organization-card/sections";
+import type { OrganizationCardProps } from "@/components/common/organization-card/types";
+import { getOrganizationCardLabels } from "@/components/common/organization-card/utils";
+import { getSocialPriority } from "@/lib/social-utils";
+import { cn } from "@/lib/utils";
+
+export type {
+  OrganizationCardLabels,
+  OrganizationCardProps,
+  OrganizationEvent,
+  OrganizationGalleryImage,
+  OrganizationSocialLink,
+  OrganizationStat,
+} from "@/components/common/organization-card/types";
+
+export function OrganizationCard({
+  name,
+  stats,
+  presentation,
+  events,
+  activities,
+  departments,
+  targetAudience,
+  socialLinks,
+  galleryImages,
+  imageBasePath = "",
+  joinUrl,
+  joinText,
+  labels,
+  locale = "hu",
+  className,
+}: Readonly<OrganizationCardProps>) {
+  const sectionLabels = { ...getOrganizationCardLabels(locale), ...labels };
+  const sortedSocialLinks = socialLinks
+    ? [...socialLinks].sort(
+        (a, b) => getSocialPriority(a.label) - getSocialPriority(b.label),
+      )
+    : [];
+
+  return (
+    <article
+      className={cn(
+        "overflow-hidden rounded-lg border border-border bg-white shadow-sm",
+        className,
+      )}
+    >
+      <OrganizationCardHeader name={name} stats={stats} />
+
+      <div className="space-y-7 px-5 pb-7 sm:px-7 md:px-8 md:pb-8">
+        <PresentationSection
+          title={sectionLabels.presentation}
+          content={presentation}
+        />
+        <EventsSection title={sectionLabels.events} events={events} />
+        <InlineListSection
+          title={sectionLabels.activities}
+          items={activities}
+        />
+        <DepartmentsSection
+          title={sectionLabels.departments}
+          departments={departments}
+        />
+        <RichTextSection
+          title={sectionLabels.targetAudience}
+          content={targetAudience}
+        />
+        <ContactsSection
+          title={sectionLabels.contacts}
+          links={sortedSocialLinks}
+          locale={locale}
+        />
+        <GallerySection
+          title={sectionLabels.gallery}
+          images={galleryImages}
+          imageBasePath={imageBasePath}
+          organizationName={name}
+        />
+      </div>
+
+      <JoinCta href={joinUrl}>{joinText ?? sectionLabels.join}</JoinCta>
+    </article>
+  );
+}
diff --git a/src/components/common/organization-card/sections/ContactsSection.tsx b/src/components/common/organization-card/sections/ContactsSection.tsx
new file mode 100644
index 0000000..1b48ebb
--- /dev/null
+++ b/src/components/common/organization-card/sections/ContactsSection.tsx
@@ -0,0 +1,43 @@
+import type { Locale } from "@/i18n-config";
+import { getSocialIcon, getSocialName } from "@/lib/social-utils";
+
+import type { OrganizationSocialLink } from "../types";
+import { Section } from "./Section";
+
+export function ContactsSection({
+  title,
+  links,
+  locale,
+}: Readonly<{
+  title: string;
+  links: readonly OrganizationSocialLink[];
+  locale: Locale;
+}>) {
+  if (!links.length) {
+    return null;
+  }
+
+  return (
+    <Section title={title}>
+      <div className="flex flex-wrap gap-2.5">
+        {links.map((link) => {
+          const socialName = getSocialName(link.label, locale);
+
+          return (
+            <a
+              key={`${link.label}-${link.url}`}
+              href={link.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label={socialName}
+              title={socialName}
+              className="inline-flex h-8 w-8 items-center justify-center rounded-md text-foreground transition-colors hover:bg-ehk-light-red/5 hover:text-ehk-dark-red focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ehk-dark-red"
+            >
+              {getSocialIcon(link.label, "h-5 w-5")}
+            </a>
+          );
+        })}
+      </div>
+    </Section>
+  );
+}
diff --git a/src/components/common/organization-card/sections/EventsSection.tsx b/src/components/common/organization-card/sections/EventsSection.tsx
new file mode 100644
index 0000000..f6235c9
--- /dev/null
+++ b/src/components/common/organization-card/sections/EventsSection.tsx
@@ -0,0 +1,71 @@
+import { CalendarDays, MapPin } from "lucide-react";
+
+import { parseFormattedText } from "@/utils/parseFormattedText";
+
+import type { OrganizationEvent } from "../types";
+import { Section } from "./Section";
+
+function EventCard({ event }: Readonly<{ event: OrganizationEvent }>) {
+  return (
+    <div className="h-full rounded-lg border border-border bg-muted/35 p-4 transition-colors hover:border-ehk-light-red/40 hover:bg-white">
+      <h4 className="font-semibold text-foreground">{event.title}</h4>
+      {event.description && (
+        <p className="mt-2 text-sm leading-6 text-muted-foreground">
+          {parseFormattedText(event.description)}
+        </p>
+      )}
+      {(event.date || event.location) && (
+        <div className="mt-3 flex flex-col gap-2 text-xs text-muted-foreground sm:flex-row sm:flex-wrap">
+          {event.date && (
+            <span className="inline-flex items-center gap-1.5">
+              <CalendarDays className="h-3.5 w-3.5" />
+              {event.date}
+            </span>
+          )}
+          {event.location && (
+            <span className="inline-flex items-center gap-1.5">
+              <MapPin className="h-3.5 w-3.5" />
+              {event.location}
+            </span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function EventsSection({
+  title,
+  events,
+}: Readonly<{
+  title: string;
+  events?: readonly OrganizationEvent[];
+}>) {
+  if (!events?.length) {
+    return null;
+  }
+
+  return (
+    <Section title={title}>
+      <div className="grid gap-3 md:grid-cols-2">
+        {events.map((event) =>
+          event.href ? (
+            <a
+              key={`${event.title}-${event.href}`}
+              href={event.href}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="block h-full"
+            >
+              <EventCard event={event} />
+            </a>
+          ) : (
+            <div key={event.title}>
+              <EventCard event={event} />
+            </div>
+          ),
+        )}
+      </div>
+    </Section>
+  );
+}
diff --git a/src/components/common/organization-card/sections/GallerySection.tsx b/src/components/common/organization-card/sections/GallerySection.tsx
new file mode 100644
index 0000000..3dbad47
--- /dev/null
+++ b/src/components/common/organization-card/sections/GallerySection.tsx
@@ -0,0 +1,45 @@
+import Image from "next/image";
+
+import type { OrganizationGalleryImage } from "../types";
+import {
+  getImageAlt,
+  resolveImageSrc,
+} from "../utils";
+import { Section } from "./Section";
+
+export function GallerySection({
+  title,
+  images,
+  imageBasePath,
+  organizationName,
+}: Readonly<{
+  title: string;
+  images?: readonly OrganizationGalleryImage[];
+  imageBasePath: string;
+  organizationName: string;
+}>) {
+  if (!images?.length) {
+    return null;
+  }
+
+  return (
+    <Section title={title}>
+      <div className="-mx-5 flex snap-x gap-4 overflow-x-auto px-5 pb-2 sm:-mx-7 sm:px-7 md:-mx-8 md:px-8">
+        {images.map((image, index) => (
+          <div
+            key={`${resolveImageSrc(image, imageBasePath)}-${index}`}
+            className="relative aspect-[4/3] w-[min(78vw,320px)] shrink-0 snap-start overflow-hidden rounded-lg border border-border bg-muted sm:w-80"
+          >
+            <Image
+              src={resolveImageSrc(image, imageBasePath)}
+              alt={getImageAlt(image, organizationName, index)}
+              fill
+              sizes="(max-width: 640px) 78vw, 320px"
+              className="object-cover"
+            />
+          </div>
+        ))}
+      </div>
+    </Section>
+  );
+}
diff --git a/src/components/common/organization-card/sections/Header.tsx b/src/components/common/organization-card/sections/Header.tsx
new file mode 100644
index 0000000..f08c8f2
--- /dev/null
+++ b/src/components/common/organization-card/sections/Header.tsx
@@ -0,0 +1,36 @@
+import type { OrganizationStat } from "../types";
+import { getStatLabel } from "../utils";
+
+export function OrganizationCardHeader({
+  name,
+  stats,
+}: Readonly<{
+  name: string;
+  stats?: readonly OrganizationStat[];
+}>) {
+  return (
+    <div className="px-5 pb-5 pt-6 sm:px-7 md:px-8 md:pb-6 md:pt-7">
+      <div className="space-y-3">
+        <h2 className="font-playfair text-2xl font-semibold leading-tight text-foreground sm:text-3xl">
+          {name}
+        </h2>
+
+        {Boolean(stats?.length) && (
+          <dl className="flex flex-col gap-2 text-sm text-muted-foreground sm:flex-row sm:flex-wrap sm:items-center sm:gap-x-0">
+            {stats?.map((stat) => (
+              <div
+                key={`${stat.label}-${stat.value}`}
+                className="flex items-center gap-2 sm:after:mx-4 sm:after:h-1 sm:after:w-1 sm:after:rounded-full sm:after:bg-ehk-light-red sm:last:after:hidden"
+              >
+                <dt className="font-semibold text-muted-foreground">
+                  {getStatLabel(stat.label)}:
+                </dt>
+                <dd className="font-semibold text-foreground">{stat.value}</dd>
+              </div>
+            ))}
+          </dl>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/common/organization-card/sections/JoinCta.tsx b/src/components/common/organization-card/sections/JoinCta.tsx
new file mode 100644
index 0000000..c1014d4
--- /dev/null
+++ b/src/components/common/organization-card/sections/JoinCta.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import { ArrowRight, Users } from "lucide-react";
+
+export function JoinCta({
+  href,
+  children,
+}: Readonly<{
+  href?: string;
+  children: React.ReactNode;
+}>) {
+  if (!href) {
+    return null;
+  }
+
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="group flex items-center justify-between gap-4 bg-ehk-dark-red px-5 py-4 text-white transition-colors hover:bg-ehk-light-red sm:px-7 md:px-8"
+    >
+      <span className="inline-flex items-center gap-2 text-sm font-semibold sm:text-base">
+        <Users className="h-4 w-4" />
+        {children}
+      </span>
+      <ArrowRight className="h-5 w-5 transition-transform group-hover:translate-x-1" />
+    </a>
+  );
+}
diff --git a/src/components/common/organization-card/sections/ListSections.tsx b/src/components/common/organization-card/sections/ListSections.tsx
new file mode 100644
index 0000000..0a79300
--- /dev/null
+++ b/src/components/common/organization-card/sections/ListSections.tsx
@@ -0,0 +1,55 @@
+import { Section } from "./Section";
+
+export function InlineListSection({
+  title,
+  items,
+}: Readonly<{
+  title: string;
+  items?: readonly string[];
+}>) {
+  if (!items?.length) {
+    return null;
+  }
+
+  return (
+    <Section title={title}>
+      <ul className="flex flex-col gap-2 text-sm font-semibold text-foreground sm:flex-row sm:flex-wrap sm:items-center sm:gap-x-0">
+        {items.map((item, index) => (
+          <li
+            key={`${item}-${index}`}
+            className="flex items-center gap-2 sm:after:mx-4 sm:after:h-1 sm:after:w-1 sm:after:rounded-full sm:after:bg-ehk-light-red sm:last:after:hidden"
+          >
+            <span>{item}</span>
+          </li>
+        ))}
+      </ul>
+    </Section>
+  );
+}
+
+export function DepartmentsSection({
+  title,
+  departments,
+}: Readonly<{
+  title: string;
+  departments?: readonly string[];
+}>) {
+  if (!departments?.length) {
+    return null;
+  }
+
+  return (
+    <Section title={title}>
+      <ul className="flex flex-wrap gap-2">
+        {departments.map((department) => (
+          <li
+            key={department}
+            className="rounded-full border border-ehk-light-red/20 bg-ehk-light-red/5 px-3.5 py-1.5 text-sm font-semibold text-foreground"
+          >
+            {department}
+          </li>
+        ))}
+      </ul>
+    </Section>
+  );
+}
diff --git a/src/components/common/organization-card/sections/Section.tsx b/src/components/common/organization-card/sections/Section.tsx
new file mode 100644
index 0000000..daafad4
--- /dev/null
+++ b/src/components/common/organization-card/sections/Section.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+type SectionProps = Readonly<{
+  title: string;
+  children: React.ReactNode;
+  className?: string;
+  bordered?: boolean;
+}>;
+
+export function Section({
+  title,
+  children,
+  className,
+  bordered = true,
+}: SectionProps) {
+  return (
+    <section
+      className={cn(
+        "space-y-4",
+        bordered && "border-t border-border pt-6 md:pt-7",
+        className,
+      )}
+    >
+      <h3 className="text-xs font-bold uppercase tracking-normal text-ehk-dark-red">
+        {title}
+      </h3>
+      {children}
+    </section>
+  );
+}
diff --git a/src/components/common/organization-card/sections/TextSections.tsx b/src/components/common/organization-card/sections/TextSections.tsx
new file mode 100644
index 0000000..32afe71
--- /dev/null
+++ b/src/components/common/organization-card/sections/TextSections.tsx
@@ -0,0 +1,43 @@
+import type { TextContent } from "../types";
+import { renderTextContent } from "../utils";
+import { Section } from "./Section";
+
+export function PresentationSection({
+  title,
+  content,
+}: Readonly<{
+  title: string;
+  content?: TextContent;
+}>) {
+  if (!content) {
+    return null;
+  }
+
+  return (
+    <Section title={title} bordered={false}>
+      <div className="richtext text-sm leading-7 text-foreground/85 sm:text-base">
+        {renderTextContent(content)}
+      </div>
+    </Section>
+  );
+}
+
+export function RichTextSection({
+  title,
+  content,
+}: Readonly<{
+  title: string;
+  content?: TextContent;
+}>) {
+  if (!content) {
+    return null;
+  }
+
+  return (
+    <Section title={title}>
+      <div className="richtext text-sm leading-7 text-foreground/85 sm:text-base">
+        {renderTextContent(content)}
+      </div>
+    </Section>
+  );
+}
diff --git a/src/components/common/organization-card/sections/index.ts b/src/components/common/organization-card/sections/index.ts
new file mode 100644
index 0000000..614d730
--- /dev/null
+++ b/src/components/common/organization-card/sections/index.ts
@@ -0,0 +1,7 @@
+export { ContactsSection } from "./ContactsSection";
+export { DepartmentsSection, InlineListSection } from "./ListSections";
+export { EventsSection } from "./EventsSection";
+export { GallerySection } from "./GallerySection";
+export { JoinCta } from "./JoinCta";
+export { OrganizationCardHeader } from "./Header";
+export { PresentationSection, RichTextSection } from "./TextSections";
diff --git a/src/components/common/organization-card/types.ts b/src/components/common/organization-card/types.ts
new file mode 100644
index 0000000..da98ef2
--- /dev/null
+++ b/src/components/common/organization-card/types.ts
@@ -0,0 +1,59 @@
+import type { ReactNode } from "react";
+
+import type { Locale } from "@/i18n-config";
+
+export type TextContent = string | readonly string[] | ReactNode;
+
+export type OrganizationStat = {
+  label: string;
+  value: string | number;
+};
+
+export type OrganizationEvent = {
+  title: string;
+  description?: string;
+  date?: string;
+  location?: string;
+  href?: string;
+};
+
+export type OrganizationGalleryImage =
+  | string
+  | {
+      src: string;
+      alt?: string;
+    };
+
+export type OrganizationSocialLink = {
+  label: string;
+  url: string;
+};
+
+export type OrganizationCardLabels = {
+  presentation: string;
+  events: string;
+  activities: string;
+  departments: string;
+  targetAudience: string;
+  contacts: string;
+  gallery: string;
+  join: string;
+};
+
+export type OrganizationCardProps = {
+  name: string;
+  stats?: readonly OrganizationStat[];
+  presentation?: TextContent;
+  events?: readonly OrganizationEvent[];
+  activities?: readonly string[];
+  departments?: readonly string[];
+  targetAudience?: TextContent;
+  socialLinks?: readonly OrganizationSocialLink[];
+  galleryImages?: readonly OrganizationGalleryImage[];
+  imageBasePath?: string;
+  joinUrl?: string;
+  joinText?: string;
+  labels?: Partial<OrganizationCardLabels>;
+  locale?: Locale;
+  className?: string;
+};
diff --git a/src/components/common/organization-card/utils.tsx b/src/components/common/organization-card/utils.tsx
new file mode 100644
index 0000000..bd8ab80
--- /dev/null
+++ b/src/components/common/organization-card/utils.tsx
@@ -0,0 +1,85 @@
+import React from "react";
+
+import type { Locale } from "@/i18n-config";
+import { parseFormattedText } from "@/utils/parseFormattedText";
+
+import type {
+  OrganizationCardLabels,
+  OrganizationGalleryImage,
+  TextContent,
+} from "./types";
+
+const labelsByLocale: Record<Locale, OrganizationCardLabels> = {
+  hu: {
+    presentation: "Bemutatás",
+    events: "Kiemelt események",
+    activities: "Tevékenységek",
+    departments: "Tagozatok",
+    targetAudience: "Kinek ajánljuk?",
+    contacts: "Elérhetőségek",
+    gallery: "Galéria",
+    join: "Csatlakozom!",
+  },
+  en: {
+    presentation: "Presentation",
+    events: "Featured events",
+    activities: "Activities",
+    departments: "Departments",
+    targetAudience: "Who is it for?",
+    contacts: "Contact",
+    gallery: "Gallery",
+    join: "Join us",
+  },
+};
+
+export function getOrganizationCardLabels(locale: Locale) {
+  return labelsByLocale[locale] ?? labelsByLocale.hu;
+}
+
+export function renderTextContent(content: TextContent) {
+  if (Array.isArray(content)) {
+    return (
+      <div className="space-y-4">
+        {content.map((paragraph, index) => (
+          <p key={`${paragraph.slice(0, 28)}-${index}`}>
+            {parseFormattedText(paragraph)}
+          </p>
+        ))}
+      </div>
+    );
+  }
+
+  if (typeof content === "string") {
+    return <p>{parseFormattedText(content)}</p>;
+  }
+
+  return content;
+}
+
+export function resolveImageSrc(
+  image: OrganizationGalleryImage,
+  imageBasePath: string,
+) {
+  const source = typeof image === "string" ? image : image.src;
+  if (source.startsWith("/") || source.startsWith("http")) {
+    return source;
+  }
+
+  return `${imageBasePath}/${source}`;
+}
+
+export function getImageAlt(
+  image: OrganizationGalleryImage,
+  organizationName: string,
+  index: number,
+) {
+  if (typeof image !== "string" && image.alt) {
+    return image.alt;
+  }
+
+  return `${organizationName} - ${index + 1}`;
+}
+
+export function getStatLabel(label: string) {
+  return label.replace(/:$/, "");
+}
diff --git a/src/lib/social-utils.tsx b/src/lib/social-utils.tsx
index 9ce858b..94034bd 100644
--- a/src/lib/social-utils.tsx
+++ b/src/lib/social-utils.tsx
@@ -1,72 +1,201 @@
-import { 
-  ExternalLink,
-  Facebook,
-  Instagram,
-  Linkedin,
-  Youtube,
-  Globe,
-  Link as LinkIcon,
-  MessageCircle
-} from "lucide-react";
-import { Locale } from "@/i18n-config";
+import { ExternalLink, Globe, Mail } from "lucide-react";
 import React from "react";
 
-export function TiktokIcon({ className }: Readonly<{ className?: string }>) {
+import { Locale } from "@/i18n-config";
+
+type SocialIconProps = Readonly<{ className?: string }>;
+
+function FacebookIcon({ className }: SocialIconProps) {
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className={className}
+    >
+      <path d="M24 12.073C24 5.405 18.627 0 12 0S0 5.405 0 12.073C0 18.1 4.388 23.094 10.125 24v-8.437H7.078v-3.49h3.047V9.413c0-3.025 1.792-4.697 4.533-4.697 1.312 0 2.686.236 2.686.236v2.97H15.83c-1.49 0-1.955.93-1.955 1.885v2.266h3.328l-.532 3.49h-2.796V24C19.612 23.094 24 18.1 24 12.073Z" />
+    </svg>
+  );
+}
+
+function InstagramIcon({ className }: SocialIconProps) {
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className={className}
+    >
+      <path d="M7.8 2h8.4A5.806 5.806 0 0 1 22 7.8v8.4a5.806 5.806 0 0 1-5.8 5.8H7.8A5.806 5.806 0 0 1 2 16.2V7.8A5.806 5.806 0 0 1 7.8 2Zm-.2 2A3.604 3.604 0 0 0 4 7.6v8.8A3.604 3.604 0 0 0 7.6 20h8.8a3.604 3.604 0 0 0 3.6-3.6V7.6A3.604 3.604 0 0 0 16.4 4H7.6Zm9.65 1.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5ZM12 7.25a4.75 4.75 0 1 1 0 9.5 4.75 4.75 0 0 1 0-9.5Zm0 2a2.75 2.75 0 1 0 0 5.5 2.75 2.75 0 0 0 0-5.5Z" />
+    </svg>
+  );
+}
+
+function LinkedInIcon({ className }: SocialIconProps) {
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className={className}
+    >
+      <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.047c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286ZM5.337 7.433a2.063 2.063 0 1 1 0-4.126 2.063 2.063 0 0 1 0 4.126ZM7.119 20.452H3.555V9h3.564v11.452ZM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003Z" />
+    </svg>
+  );
+}
+
+function YouTubeIcon({ className }: SocialIconProps) {
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className={className}
+    >
+      <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814ZM9.545 15.568V8.432L15.818 12l-6.273 3.568Z" />
+    </svg>
+  );
+}
+
+export function TiktokIcon({ className }: SocialIconProps) {
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className={className}
+    >
+      <path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07Z" />
+    </svg>
+  );
+}
+
+export function XSocialIcon({ className }: SocialIconProps) {
   return (
-    <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" className={className}>
-      <path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/>
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className={className}
+    >
+      <path d="M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993Zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182Z" />
     </svg>
   );
 }
 
-export function XSocialIcon({ className }: Readonly<{ className?: string }>) {
+function ThreadsIcon({ className }: SocialIconProps) {
   return (
-    <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" className={className}>
-      <path d="M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z"/>
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className={className}
+    >
+      <path d="M12.04 2C7.02 2 4 5.28 4 11.91 4 18.71 7.27 22 12.49 22c4.42 0 7.36-2.5 7.36-6.04 0-2.29-1.3-4.17-3.6-5.13-.28-3.19-2.06-4.91-5.04-4.91-1.86 0-3.42.76-4.37 2.14l1.78 1.24c.6-.84 1.44-1.25 2.51-1.25 1.55 0 2.47.81 2.77 2.42-.58-.09-1.17-.12-1.78-.09-2.75.16-4.43 1.64-4.34 3.83.08 1.95 1.78 3.23 4.1 3.1 2.3-.13 3.76-1.4 4.26-3.74.9.63 1.37 1.45 1.37 2.41 0 2.19-1.89 3.75-4.94 3.75-3.96 0-6.2-2.64-6.2-7.82 0-5.17 2.04-7.64 5.67-7.64 2.87 0 4.64 1.44 5.34 4.34l2.22-.59C18.62 4.05 16 2 12.04 2Zm.01 13.13c-1.05.06-1.76-.36-1.8-1.08-.04-.82.74-1.35 2.06-1.42.63-.04 1.25.02 1.85.16-.18 1.44-.88 2.27-2.11 2.34Z" />
     </svg>
   );
 }
 
-export function getSocialIcon(label: string) {
+function LinktreeIcon({ className }: SocialIconProps) {
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className={className}
+    >
+      <path d="m13.736 5.852 4.004-4.116 2.324 2.392-4.032 4.004h5.708v3.36h-5.736l4.06 4.06-2.324 2.38-5.74-5.824-5.74 5.824-2.324-2.38 4.06-4.06H2.26v-3.36h5.708L3.936 4.128 6.26 1.736l4.004 4.116V0h3.472v5.852ZM10.264 16.8h3.472V24h-3.472v-7.2Z" />
+    </svg>
+  );
+}
+
+export function getSocialIcon(label: string, className = "h-4 w-4") {
   const l = label.toLowerCase();
-  if (l.includes('facebook')) return <Facebook className="h-4 w-4" />;
-  if (l.includes('instagram')) return <Instagram className="h-4 w-4" />;
-  if (l.includes('linkedin')) return <Linkedin className="h-4 w-4" />;
-  if (l.includes('youtube')) return <Youtube className="h-4 w-4" />;
-  if (l.includes('tiktok')) return <TiktokIcon className="h-4 w-4" />;
-  if (l === 'x' || l.includes('twitter')) return <XSocialIcon className="h-4 w-4" />;
-  if (l.includes('linktr.ee')) return <LinkIcon className="h-4 w-4" />;
-  if (l.includes('threads')) return <MessageCircle className="h-4 w-4" />;
-  if (l.includes('weblap') || l.includes('web') || l.includes('honlap') || l.includes('mvk.bme.hu') || l.includes('.hu') || l.includes('.eu') || l.includes('.com') || l.includes('.org')) return <Globe className="h-4 w-4" />;
-  return <ExternalLink className="h-4 w-4" />;
+  if (l.includes("facebook")) return <FacebookIcon className={className} />;
+  if (l.includes("instagram")) return <InstagramIcon className={className} />;
+  if (l.includes("linkedin")) return <LinkedInIcon className={className} />;
+  if (l.includes("youtube")) return <YouTubeIcon className={className} />;
+  if (l.includes("tiktok")) return <TiktokIcon className={className} />;
+  if (l === "x" || l.includes("twitter")) {
+    return <XSocialIcon className={className} />;
+  }
+  if (l.includes("linktr.ee")) return <LinktreeIcon className={className} />;
+  if (l.includes("threads")) return <ThreadsIcon className={className} />;
+  if (l.includes("@") || l.includes("email") || l.includes("e-mail")) {
+    return <Mail className={className} />;
+  }
+  if (
+    l.includes("weblap") ||
+    l.includes("web") ||
+    l.includes("honlap") ||
+    l.includes("mvk.bme.hu") ||
+    l.includes(".hu") ||
+    l.includes(".eu") ||
+    l.includes(".com") ||
+    l.includes(".org")
+  ) {
+    return <Globe className={className} />;
+  }
+  return <ExternalLink className={className} />;
 }
 
 export function getSocialPriority(label: string) {
   const l = label.toLowerCase();
-  if (l.includes('weblap') || l.includes('web') || l.includes('honlap') || l.includes('mvk.bme.hu') || l.includes('.hu') || l.includes('.eu') || l.includes('.com') || l.includes('.org')) return 1;
-  if (l.includes('facebook')) return 2;
-  if (l.includes('instagram')) return 3;
-  if (l.includes('linkedin')) return 4;
-  if (l.includes('youtube')) return 5;
-  if (l === 'x' || l.includes('twitter')) return 6;
-  if (l.includes('tiktok')) return 7;
-  if (l.includes('threads')) return 8;
-  if (l.includes('linktr.ee')) return 9;
-  return 10;
+  if (
+    l.includes("weblap") ||
+    l.includes("web") ||
+    l.includes("honlap") ||
+    l.includes("mvk.bme.hu") ||
+    l.includes(".hu") ||
+    l.includes(".eu") ||
+    l.includes(".com") ||
+    l.includes(".org")
+  ) {
+    return 1;
+  }
+  if (l.includes("facebook")) return 2;
+  if (l.includes("instagram")) return 3;
+  if (l.includes("linkedin")) return 4;
+  if (l.includes("youtube")) return 5;
+  if (l === "x" || l.includes("twitter")) return 6;
+  if (l.includes("tiktok")) return 7;
+  if (l.includes("threads")) return 8;
+  if (l.includes("linktr.ee")) return 9;
+  if (l.includes("@") || l.includes("email") || l.includes("e-mail")) return 10;
+  return 11;
 }
 
-export function getSocialName(label: string, lang: Locale = 'hu') {
+export function getSocialName(label: string, lang: Locale = "hu") {
   const l = label.toLowerCase().trim();
-  
-  // Specific mappings for known social platforms
-  if (l.includes('facebook')) return 'Facebook';
-  if (l.includes('instagram')) return 'Instagram';
-  if (l.includes('linkedin')) return 'LinkedIn';
-  if (l.includes('youtube')) return 'YouTube';
-  if (l.includes('tiktok')) return 'TikTok';
-  if (l === 'x' || l.includes('twitter')) return 'X (Twitter)';
-  if (l.includes('linktr.ee')) return 'Linktree';
-  if (l.includes('threads')) return 'Threads';
-  if (l.includes('weblap') || l.includes('web') || l.includes('honlap') || l.includes('mvk.bme.hu') || l.includes('.hu') || l.includes('.eu') || l.includes('.com') || l.includes('.org')) return lang === 'hu' ? 'Weblap' : 'Website';
+
+  if (l.includes("facebook")) return "Facebook";
+  if (l.includes("instagram")) return "Instagram";
+  if (l.includes("linkedin")) return "LinkedIn";
+  if (l.includes("youtube")) return "YouTube";
+  if (l.includes("tiktok")) return "TikTok";
+  if (l === "x" || l.includes("twitter")) return "X (Twitter)";
+  if (l.includes("linktr.ee")) return "Linktree";
+  if (l.includes("threads")) return "Threads";
+  if (l.includes("@") || l.includes("email") || l.includes("e-mail")) return "Email";
+  if (
+    l.includes("weblap") ||
+    l.includes("web") ||
+    l.includes("honlap") ||
+    l.includes("mvk.bme.hu") ||
+    l.includes(".hu") ||
+    l.includes(".eu") ||
+    l.includes(".com") ||
+    l.includes(".org")
+  ) {
+    return lang === "hu" ? "Weblap" : "Website";
+  }
   return label;
-}
\ No newline at end of file
+}