diff --git a/src/app/[locale]/(groups)/groups/[id]/page.tsx b/src/app/[locale]/(groups)/groups/[id]/page.tsx
index 4cc63f82..9d5988cb 100644
--- a/src/app/[locale]/(groups)/groups/[id]/page.tsx
+++ b/src/app/[locale]/(groups)/groups/[id]/page.tsx
@@ -10,6 +10,7 @@ import ContentArticle from '@/components/ContentArticle/ContentArticle';
 import ContactCard from '@/components/ContactCard/ContactCard';
 import i18nService from '@/services/i18nService';
 import ActionLink from '@/components/ActionButton/ActionLink';
+import GroupAvatar from '@/components/GroupAvatar/GroupAvatar';
 
 export const revalidate = 3600;
 
@@ -58,6 +59,16 @@ const mainContent = async (locale: string, id: string) => {
           : gammaGroup?.superGroup.svDescription
       }
       titleSide={side}
+      titleLeft={
+        <GroupAvatar
+          groupAvatarUrl={
+            gammaGroup?.superGroup.id
+              ? GammaService.getSuperGroupAvatarURL(gammaGroup.superGroup.id)
+              : '/smurf.svg'
+          }
+          groupName={group.prettyName}
+        />
+      }
     >
       <MarkdownView content={en ? group.descriptionEn : group.descriptionSv} />
       <h2>{l.groups.members}</h2>
diff --git a/src/components/ContentArticle/ContentArticle.module.scss b/src/components/ContentArticle/ContentArticle.module.scss
index 06d890de..9f07678e 100644
--- a/src/components/ContentArticle/ContentArticle.module.scss
+++ b/src/components/ContentArticle/ContentArticle.module.scss
@@ -2,6 +2,12 @@
   display: flex;
   flex-direction: row;
   align-items: center;
+  gap: 1rem;
+}
+
+.titleLeft {
+  display: flex;
+  align-items: center;
 }
 
 .titleRight {
diff --git a/src/components/ContentArticle/ContentArticle.tsx b/src/components/ContentArticle/ContentArticle.tsx
index dc3e6fba..b218bf7c 100644
--- a/src/components/ContentArticle/ContentArticle.tsx
+++ b/src/components/ContentArticle/ContentArticle.tsx
@@ -7,6 +7,7 @@ interface ContentArticleProps {
   title: string;
   subtitle?: string;
   titleSide?: React.ReactNode;
+  titleLeft?: React.ReactNode;
   children: React.ReactNode;
 }
 
@@ -14,6 +15,7 @@ const ContentArticle = (a: ContentArticleProps) => {
   return (
     <ContentPane>
       <div className={style.title}>
+        {a.titleLeft && <div className={style.titleLeft}>{a.titleLeft}</div>}
         <h1>{a.title}</h1>
         {a.subtitle && (
           <>
diff --git a/src/components/GroupAvatar/GroupAvatar.module.scss b/src/components/GroupAvatar/GroupAvatar.module.scss
new file mode 100644
index 00000000..1dfd2778
--- /dev/null
+++ b/src/components/GroupAvatar/GroupAvatar.module.scss
@@ -0,0 +1,11 @@
+.picture {
+  width: 4rem;
+  height: 4rem;
+  object-fit: cover;
+}
+
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/src/components/GroupAvatar/GroupAvatar.tsx b/src/components/GroupAvatar/GroupAvatar.tsx
new file mode 100644
index 00000000..bd216c47
--- /dev/null
+++ b/src/components/GroupAvatar/GroupAvatar.tsx
@@ -0,0 +1,22 @@
+import FallbackImage from '../FallbackImage/FallbackImage';
+import styles from './GroupAvatar.module.scss';
+
+const GroupAvatar = ({
+  groupAvatarUrl,
+  groupName
+}: {
+  groupAvatarUrl: string;
+  groupName: string;
+}) => {
+  return (
+    <div className={styles.container}>
+      <FallbackImage
+        src={groupAvatarUrl}
+        className={styles.picture}
+        alt={'Group avatar for ' + groupName}
+      />
+    </div>
+  );
+};
+
+export default GroupAvatar;
diff --git a/src/services/gammaService.ts b/src/services/gammaService.ts
index 103a0b1a..239b70cc 100644
--- a/src/services/gammaService.ts
+++ b/src/services/gammaService.ts
@@ -33,6 +33,10 @@ export default class GammaService {
     return `${this.gammaUrl}/images/group/banner/${gid}`;
   }
 
+  static getSuperGroupAvatarURL(gid: string) {
+    return `${this.gammaUrl}/images/super-group/avatar/${gid}`;
+  }
+
   static isSuperGroupActive(sg: { type: string }) {
     return activeGroupTypes.includes(sg.type);
   }