diff --git a/src/app/(app)/[lang]/sport/sportpalya-tamogatas/components/GymSupportContent.tsx b/src/app/(app)/[lang]/sport/sportpalya-tamogatas/components/GymSupportContent.tsx
index 2e2e2da..f832095 100644
--- a/src/app/(app)/[lang]/sport/sportpalya-tamogatas/components/GymSupportContent.tsx
+++ b/src/app/(app)/[lang]/sport/sportpalya-tamogatas/components/GymSupportContent.tsx
@@ -1,6 +1,6 @@
-import React, {ReactNode} from 'react';
+import { ReactNode } from 'react';
 import { Card, CardContent } from '@/components/ui/card';
-import { parseFormattedText } from '@/utils/parseFormattedText'; 
+import { parseFormattedText } from '@/utils/parseFormattedText';
 
 interface SportpalyaTamogatasContentData {
   title: string;
@@ -34,109 +34,77 @@ interface SportpalyaTamogatasContentData {
 
 export default function SportpalyaTamogatasContent({ content }: { content: SportpalyaTamogatasContentData }) {
   return (
-    <div className="flex flex-col gap-4 md:gap-6 lg:px-4 px-2 py-8">
-      {/* Introduction */}
-      <Card className="group hover:shadow-md transition-all duration-300">
-        <CardContent className="p-3 md:p-6">
-          <div className="flex flex-col gap-2 md:gap-3">
-            <Paragraph>
-            {parseFormattedText(content.description)}
-            </Paragraph>
-          </div>
-        </CardContent>
-      </Card>
+    <div className="flex flex-col gap-4 rounded-b-2xl border-x border-b border-[#e9e2d6] bg-[#fffefc] p-4 md:p-8">
+      <SectionCard title={content.application.title}>
+        <Paragraph>{parseFormattedText(content.application.description)}</Paragraph>
+      </SectionCard>
 
-      {/* Application */}
-      <Card className="group hover:shadow-md transition-all duration-300">
-        <CardContent className="p-3 md:p-6">
-          <div className="flex flex-col gap-2 md:gap-3">
-            <h3 className="font-bold text-xl leading-tight text-gray-900 group-hover:text-[#862633] transition-colors">
-              {content.application.title}
-            </h3>
-            <Paragraph>{parseFormattedText(content.application.description)}</Paragraph>
-          </div>
-        </CardContent>
-      </Card>
+      <SectionCard title={content.period.title}>
+        <TextList items={content.period.items} />
+      </SectionCard>
 
-      {/* Support Period and Location */}
-      <Card className="group hover:shadow-md transition-all duration-300">
-        <CardContent className="p-3 md:p-6">
-          <div className="flex flex-col gap-2 md:gap-3">
-            <h3 className="font-bold text-xl leading-tight text-gray-900 group-hover:text-[#862633] transition-colors">
-              {content.period.title}
-            </h3>
-            <div className="space-y-2 text-gray-700">
-              <ul className="list-disc pl-5 space-y-2">
-                {content.period.items.map((item, i) => (
-                <li key={i}>{parseFormattedText(item)}</li>
-                ))}
-              </ul>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
+      <SectionCard title={content.condition.title}>
+        <Paragraph>{parseFormattedText(content.condition.intro)}</Paragraph>
+        <TextList items={content.condition.items} ordered />
+        <NoticeBox>{parseFormattedText(content.condition.outro)}</NoticeBox>
+      </SectionCard>
 
-      {/* Conditions */}
-      <Card className="group hover:shadow-md transition-all duration-300">
-        <CardContent className="p-3 md:p-6">
-          <div className="flex flex-col gap-2 md:gap-3">
-            <h3 className="font-bold text-xl leading-tight text-gray-900 group-hover:text-[#862633] transition-colors">
-              {content.condition.title}
-            </h3>
-            <p>{parseFormattedText(content.condition.intro)}</p>
-            <ol className="list-decimal pl-5 space-y-1">
-              {content.condition.items.map((item, i) => (
-              <li key={i}>{parseFormattedText(item)}</li>
-              ))}
-            </ol>
-            <div className="mt-4 p-3 bg-gray-50 rounded-lg border border-gray-100 text-sm font-semibold">
-              {parseFormattedText(content.condition.outro)}
-            </div>
-          </div>
-        </CardContent>
-      </Card>
+      <SectionCard title={content.selection.title}>
+        <Paragraph>{parseFormattedText(content.selection.description)}</Paragraph>
+        <TextList items={content.selection.items} />
+      </SectionCard>
 
-      {/* Selection */}
-      <Card className="group hover:shadow-md transition-all duration-300">
-        <CardContent className="p-3 md:p-6">
-          <div className="flex flex-col gap-2 md:gap-3">
-            <h3 className="font-bold text-xl leading-tight text-gray-900 group-hover:text-[#862633] transition-colors">
-              {content.selection.title}
-            </h3>
-            <Paragraph>{parseFormattedText(content.selection.description)}</Paragraph>
-            <ul className="list-disc pl-5 space-y-1">
-              {content.selection.items.map((item, i) => (
-                <li key={i}>{parseFormattedText(item)}</li>
-              ))}
-            </ul>
-          </div>
-        </CardContent>
-      </Card>
+      <SectionCard title={content.result.title}>
+        <TextList items={content.result.items} />
+      </SectionCard>
 
-      {/* Result */}
-      <Card className="group hover:shadow-md transition-all duration-300">
-        <CardContent className="p-3 md:p-6">
-          <div className="flex flex-col gap-2 md:gap-3">
-            <h3 className="font-bold text-xl leading-tight text-gray-900 group-hover:text-[#862633] transition-colors">
-              {content.result.title}
-            </h3>
-            <ul className="list-disc pl-5 space-y-1">
-              {content.result.items.map((item, i) => (
-                <li key={i}>{parseFormattedText(item)}</li>
-              ))}
-            </ul>
-          </div>
-        </CardContent>
-      </Card>
-      <p className="text-center text-sm text-gray-400 italic mt-4">{parseFormattedText(content.footer)}</p>
+      <p className="px-2 text-center font-open-sans text-sm italic leading-[1.6] text-[#6e6660]">
+        {parseFormattedText(content.footer)}
+      </p>
     </div>
   );
 };
 
+function SectionCard({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <Card className="rounded-2xl border-[#e9e2d6] bg-transparent py-0 shadow-none">
+      <CardContent className="flex flex-col gap-4 p-4">
+        <h2 className="font-playfair text-base font-semibold leading-[1.4] text-black">
+          {title}
+        </h2>
+        <div className="h-px w-full bg-[#e9e2d6]" />
+        <div className="flex flex-col gap-4 font-open-sans text-sm leading-[1.6] text-black">
+          {children}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
 function Paragraph({ children }: { children: ReactNode }) {
   return (
-    <div className="prose max-w-none text-gray-700 richtext">
-      <p>{children}</p>
+    <p className="richtext max-w-none">{children}</p>
+  );
+}
+
+function TextList({ items, ordered = false }: { items: string[]; ordered?: boolean }) {
+  const ListTag = ordered ? 'ol' : 'ul';
+
+  return (
+    <ListTag className={`${ordered ? 'list-decimal' : 'list-disc'} space-y-2 pl-5 marker:text-[#862633]`}>
+      {items.map((item, index) => (
+        <li key={`${item}-${index}`} className="pl-1">
+          {parseFormattedText(item)}
+        </li>
+      ))}
+    </ListTag>
+  );
+}
+
+function NoticeBox({ children }: { children: ReactNode }) {
+  return (
+    <div className="richtext rounded-2xl border border-[#e9e2d6] bg-[#f9f4f0] px-4 py-2 font-open-sans text-sm leading-[1.6] text-[#6b0f1a]">
+      {children}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/app/(app)/[lang]/sport/sportpalya-tamogatas/page.tsx b/src/app/(app)/[lang]/sport/sportpalya-tamogatas/page.tsx
index 5ce2ec9..7628853 100644
--- a/src/app/(app)/[lang]/sport/sportpalya-tamogatas/page.tsx
+++ b/src/app/(app)/[lang]/sport/sportpalya-tamogatas/page.tsx
@@ -2,22 +2,28 @@ import { getDictionary } from '@/get-dictionary';
 import type { Locale } from '@/i18n-config';
 import GymSupportContent from './components/GymSupportContent';
 import { PageHeader } from '@/components/common/PageHeader';
+import { parseFormattedText } from '@/utils/parseFormattedText';
+
 type SportpalyaTamogatasPageProps = {
   params: Promise<{ lang: Locale }>;
 };
+
 export default async function SportpalyaTamogatasPage({
   params,
 }: SportpalyaTamogatasPageProps) {
   const { lang } = await params;
-  const dictionary = await getDictionary(lang, 'sport');  
+  const dictionary = await getDictionary(lang, 'sport');
+  const content = dictionary.sport.sportpalyaTamogatas;
+
   return (
-    <div className="min-h-screen bg-gray-50">
-      <div className="container mx-auto px-2 md:px-4 py-8">
-          <PageHeader title={dictionary.sport.sportpalyaTamogatas.title} />
-          <GymSupportContent 
-            content={dictionary.sport.sportpalyaTamogatas} 
-          />
+    <div className="min-h-screen bg-[#f9f4f0]">
+      <div className="container mx-auto max-w-5xl px-3 py-6 md:px-8 md:py-8">
+        <PageHeader
+          title={content.title}
+          subtitle={parseFormattedText(content.description)}
+        />
+        <GymSupportContent content={content} />
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/app/(app)/[lang]/sport/sportterem-igenyles/components/SportteremContent.tsx b/src/app/(app)/[lang]/sport/sportterem-igenyles/components/SportteremContent.tsx
index 06fe62f..9936ad0 100644
--- a/src/app/(app)/[lang]/sport/sportterem-igenyles/components/SportteremContent.tsx
+++ b/src/app/(app)/[lang]/sport/sportterem-igenyles/components/SportteremContent.tsx
@@ -5,199 +5,133 @@ import { parseFormattedText } from '@/utils/parseFormattedText';
 interface SportteremContentData {
   title: string;
   description: string;
-  facilities: { 
-    title: string; 
-    items: string[] 
+  facilities: {
+    title: string;
+    items: string[];
   };
-  conditions: { 
-    title: string; 
-    description: string 
+  conditions: {
+    title: string;
+    description: string;
   };
-  process: { 
-    title: string; 
-    description: string; 
-    warning: string 
+  process: {
+    title: string;
+    description: string;
+    warning: string;
   };
-  requiredData: { 
-    title: string; 
-    intro: string; 
-    items: string[] 
+  requiredData: {
+    title: string;
+    intro: string;
+    items: string[];
   };
-  selection: { 
-    title: string; 
-    intro: string; 
-    items: string[]; 
-    warning: string 
+  selection: {
+    title: string;
+    intro: string;
+    items: string[];
+    warning: string;
   };
-  usage: { 
+  usage: {
     title: string;
-    items: string[] 
+    items: string[];
   };
-  costs: { 
-    title: string; 
-    description: string; 
-    items: string[] 
+  costs: {
+    title: string;
+    description: string;
+    items: string[];
   };
-  contact: { 
-    title: string; 
-    description: string 
+  contact: {
+    title: string;
+    description: string;
   };
   footer: string;
 }
 
-
 export default function SportteremContent({ content }: { content: SportteremContentData }) {
   return (
-    <div className="flex flex-col gap-4 md:gap-6 lg:px-4 px-2 py-8">
+    <div className="flex flex-col gap-4 rounded-b-2xl border-x border-b border-[#e9e2d6] bg-[#fffefc] p-4 md:p-8">
+      <SectionCard title={content.facilities.title}>
+        <TextList items={content.facilities.items} />
+      </SectionCard>
+
+      <SectionCard title={content.conditions.title}>
+        <Paragraph>{parseFormattedText(content.conditions.description)}</Paragraph>
+      </SectionCard>
 
-      {/* Introduction */}
-      <Card className="group hover:shadow-md transition-all duration-300">
-        <CardContent className="p-3 md:p-6">
-          <div className="flex flex-col gap-2 md:gap-3">
-            <Paragraph>
-            {parseFormattedText(content.description)}
-            </Paragraph>
-          </div>
-        </CardContent>
-      </Card>
+      <SectionCard title={content.process.title}>
+        <Paragraph>{parseFormattedText(content.process.description)}</Paragraph>
+        <WarningBox>{parseFormattedText(content.process.warning)}</WarningBox>
+      </SectionCard>
 
-      {/* Facilities */}
-      <Card className="group hover:shadow-md transition-all duration-300">
-        <CardContent className="p-3 md:p-6">
-          <div className="flex flex-col gap-2 md:gap-3">
-            <h3 className="font-bold text-xl leading-tight text-gray-900 group-hover:text-[#862633] transition-colors">
-              {content.facilities.title}
-            </h3>
-            <div className="space-y-2 text-gray-700">
-              <ul className="list-disc pl-5 space-y-2">
-                {content.facilities.items.map((item, i) => (
-                <li key={i}>{parseFormattedText(item)}</li>
-                ))}
-              </ul>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
+      <SectionCard title={content.requiredData.title}>
+        <Paragraph>{parseFormattedText(content.requiredData.intro)}</Paragraph>
+        <TextList items={content.requiredData.items} />
+      </SectionCard>
 
-      {/* Conditions */}
-      <Card className="group hover:shadow-md transition-all duration-300">
-        <CardContent className="p-3 md:p-6">
-          <div className="flex flex-col gap-2 md:gap-3">
-            <h3 className="font-bold text-xl leading-tight text-gray-900 group-hover:text-[#862633] transition-colors">
-              {content.conditions.title}
-            </h3>
-            <Paragraph>{parseFormattedText(content.conditions.description)}</Paragraph>
-          </div>
-        </CardContent>
-      </Card>
+      <SectionCard title={content.selection.title}>
+        <Paragraph>{parseFormattedText(content.selection.intro)}</Paragraph>
+        <TextList items={content.selection.items} />
+        <WarningBox>{parseFormattedText(content.selection.warning)}</WarningBox>
+      </SectionCard>
 
-      {/* Process & Deadlines */}
-      <Card className="group hover:shadow-md transition-all duration-300">
-        <CardContent className="p-3 md:p-6">
-          <div className="flex flex-col gap-2 md:gap-3">
-            <h3 className="font-bold text-xl leading-tight text-gray-900 group-hover:text-[#862633] transition-colors">
-              {content.process.title}
-            </h3>
-            <Paragraph>{parseFormattedText(content.process.description)}</Paragraph>
-            <div className="mt-4 p-3 bg-gray-50 rounded-lg border border-gray-100 text-sm font-semibold">
-              {parseFormattedText(content.process.warning)}
-            </div>
-          </div>
-        </CardContent>
-      </Card>
+      <SectionCard title={content.usage.title}>
+        <TextList items={content.usage.items} />
+      </SectionCard>
 
-      {/* Required Data */}
-      <Card className="group hover:shadow-md transition-all duration-300">
-        <CardContent className="p-3 md:p-6">
-          <div className="flex flex-col gap-2 md:gap-3">
-            <h3 className="font-bold text-xl leading-tight text-gray-900 group-hover:text-[#862633] transition-colors">
-              {content.requiredData.title}
-            </h3>
-            <p>{parseFormattedText(content.requiredData.intro)}</p>
-            <ul className="list-disc pl-5 space-y-1">
-              {content.requiredData.items.map((item, i) => (
-                <li key={i}>{parseFormattedText(item)}</li>
-              ))}
-            </ul>
-          </div>
-        </CardContent>
-      </Card>
+      <SectionCard title={content.costs.title}>
+        <Paragraph>{parseFormattedText(content.costs.description)}</Paragraph>
+        <TextList items={content.costs.items} />
+      </SectionCard>
 
-      {/* Selection Criteria */}
-      <Card className="group hover:shadow-md transition-all duration-300">
-        <CardContent className="p-3 md:p-6">
-          <div className="flex flex-col gap-2 md:gap-3">
-            <h3 className="font-bold text-xl leading-tight text-gray-900 group-hover:text-[#862633] transition-colors">
-              {content.selection.title}
-            </h3>
-            <p>{parseFormattedText(content.selection.intro)}</p>
-            <ul className="list-disc pl-5 space-y-1">
-              {content.selection.items.map((item, i) => (
-                <li key={i}>{parseFormattedText(item)}</li>
-              ))}
-            </ul>
-            <div className="mt-4 p-3 bg-gray-50 rounded-lg border border-gray-100 text-sm font-semibold">
-              {parseFormattedText(content.selection.warning)}
-            </div>
-          </div>
-        </CardContent>
-      </Card>
+      <SectionCard title={content.contact.title}>
+        <Paragraph>{parseFormattedText(content.contact.description)}</Paragraph>
+      </SectionCard>
 
-      {/* Rules & usage */}
-      <Card className="group hover:shadow-md transition-all duration-300">
-        <CardContent className="p-3 md:p-6">
-          <div className="flex flex-col gap-2 md:gap-3">
-            <h3 className="font-bold text-xl leading-tight text-gray-900 group-hover:text-[#862633] transition-colors">
-              {content.usage.title}
-            </h3>
-            <ul className="list-disc pl-5 space-y-1">
-              {content.usage.items.map((item, i) => (
-                <li key={i}>{parseFormattedText(item)}</li>
-              ))}
-            </ul>
-          </div>
-        </CardContent>
-      </Card>
+      <p className="px-2 text-center font-open-sans text-sm italic leading-[1.6] text-[#6e6660]">
+        {parseFormattedText(content.footer)}
+      </p>
+    </div>
+  );
+}
 
-      {/* Costs */}
-      <Card className="group hover:shadow-md transition-all duration-300">
-        <CardContent className="p-3 md:p-6">
-          <div className="flex flex-col gap-2 md:gap-3">
-            <h3 className="font-bold text-xl leading-tight text-gray-900 group-hover:text-[#862633] transition-colors">
-              {content.costs.title}
-            </h3>
-            <Paragraph>{parseFormattedText(content.costs.description)}</Paragraph>
-            <ul className="list-disc pl-5 space-y-1">
-              {content.costs.items.map((item, i) => (
-                <li key={i}>{parseFormattedText(item)}</li>
-              ))}
-            </ul>
-          </div>
-        </CardContent>
-      </Card>
+function SectionCard({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <Card className="rounded-2xl border-[#e9e2d6] bg-white py-0 shadow-none">
+      <CardContent className="flex flex-col gap-4 p-4">
+        <h2 className="font-playfair text-base font-semibold leading-[1.4] text-black">
+          {title}
+        </h2>
+        <div className="h-px w-full bg-[#e9e2d6]" />
+        <div className="flex flex-col gap-4 font-open-sans text-sm leading-[1.6] text-black">
+          {children}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
 
-      {/* Kapcsolattartás */}
-      <Card className="group hover:shadow-md transition-all duration-300">
-        <CardContent className="p-3 md:p-6">
-          <div className="flex flex-col gap-2 md:gap-3">
-            <h3 className="font-bold text-xl leading-tight text-gray-900 group-hover:text-[#862633] transition-colors">
-              {content.contact.title}
-            </h3>
-            <Paragraph>{parseFormattedText(content.contact.description)}</Paragraph>
-          </div>
-        </CardContent>
-      </Card>
+function Paragraph({ children }: { children: ReactNode }) {
+  return (
+    <p className="richtext max-w-none">{children}</p>
+  );
+}
 
-      <p className="text-center text-sm text-gray-400 italic mt-4">{parseFormattedText(content.footer)}</p>
+function TextList({ items, ordered = false }: { items: string[]; ordered?: boolean }) {
+  const ListTag = ordered ? 'ol' : 'ul';
 
-    </div>
+  return (
+    <ListTag className={`${ordered ? 'list-decimal' : 'list-disc'} space-y-2 pl-5 marker:text-[#862633]`}>
+      {items.map((item, index) => (
+        <li key={`${item}-${index}`} className="pl-1">
+          {parseFormattedText(item)}
+        </li>
+      ))}
+    </ListTag>
   );
-};
+}
 
-function Paragraph({ children }: { children: ReactNode }) {
+function WarningBox({ children }: { children: ReactNode }) {
   return (
-    <div className="prose max-w-none text-gray-700 richtext">
-      <p>{children}</p>
+    <div className="richtext rounded-2xl border border-[#d3afaf] bg-[#ffe6e6] px-4 py-2 font-open-sans text-sm leading-[1.6] text-[#6b0f1a]">
+      {children}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/app/(app)/[lang]/sport/sportterem-igenyles/page.tsx b/src/app/(app)/[lang]/sport/sportterem-igenyles/page.tsx
index 8e17fb9..99733d2 100644
--- a/src/app/(app)/[lang]/sport/sportterem-igenyles/page.tsx
+++ b/src/app/(app)/[lang]/sport/sportterem-igenyles/page.tsx
@@ -2,22 +2,28 @@ import { getDictionary } from '@/get-dictionary';
 import type { Locale } from '@/i18n-config';
 import SportteremContent from './components/SportteremContent';
 import { PageHeader } from '@/components/common/PageHeader';
+import { parseFormattedText } from '@/utils/parseFormattedText';
+
 type SportteremIgenylesPageProps = {
   params: Promise<{ lang: Locale }>;
 };
+
 export default async function SportteremIgenylesPage({
   params,
 }: SportteremIgenylesPageProps) {
   const { lang } = await params;
-  const dictionary = await getDictionary(lang, 'sport');  
+  const dictionary = await getDictionary(lang, 'sport');
+  const content = dictionary.sport.sportterem;
+
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-[#f9f4f0]">
       <div className="container mx-auto px-2 md:px-4 py-8">
-        <PageHeader title={dictionary.sport.sportterem.title} />
-        <SportteremContent 
-          content={dictionary.sport.sportterem} 
+        <PageHeader
+          title={content.title}
+          subtitle={parseFormattedText(content.description)}
         />
+        <SportteremContent content={content} />
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/common/PageHeader.tsx b/src/components/common/PageHeader.tsx
index 16c5c9d..c656887 100644
--- a/src/components/common/PageHeader.tsx
+++ b/src/components/common/PageHeader.tsx
@@ -7,8 +7,8 @@ import { ArrowLeft } from "lucide-react";
 
 export interface PageHeaderProps {
   title: string;
-  subtitle?: string;
-  description?: string; // fallback for subtitle (backward compatibility)
+  subtitle?: React.ReactNode;
+  description?: React.ReactNode; // fallback for subtitle (backward compatibility)
   tags?: string[];
   onBack?: () => void;
   backHref?: string;