diff --git a/extensions/apps/extensions/src/components/explore.tsx b/extensions/apps/extensions/src/components/explore.tsx
index 463d6a9083..6e7feeb95d 100644
--- a/extensions/apps/extensions/src/components/explore.tsx
+++ b/extensions/apps/extensions/src/components/explore.tsx
@@ -1,73 +1,79 @@
 import React from 'react';
-import AppList, { App } from '@akashaorg/design-system-components/lib/components/AppList';
+import AppList from '@akashaorg/design-system-components/lib/components/AppList';
 import Button from '@akashaorg/design-system-core/lib/components/Button';
 import Card from '@akashaorg/design-system-core/lib/components/Card';
-import Image from '@akashaorg/design-system-core/lib/components/Image';
 import Stack from '@akashaorg/design-system-core/lib/components/Stack';
 import Text from '@akashaorg/design-system-core/lib/components/Text';
+import ExtensionCard, {
+  ExtensionCardProps,
+} from '@akashaorg/design-system-components/lib/components/ExtensionCard';
+import { ReactNode } from '@tanstack/react-router';
+import { useTranslation } from 'react-i18next';
+import { getExtensionTypeLabel } from '../utils/extension-utils';
 
-type TLatestExtensionsCardProps = {
-  buttonLabel: string;
-  latestExtensionsLabel: string;
-  latestExtensions?: App[];
-  onViewAllClick: () => void;
-};
-
-export type TExploreProps = TLatestExtensionsCardProps & {
+export type TExploreProps = {
   titleLabel: string;
-  publicImgPath?: string;
-  assetExtension?: string;
-  sections: {
-    assetName?: string;
+  popularExtensions?: ExtensionCardProps[];
+  popularExtensionsLabel: string;
+  viewAllLabel: string;
+  cta: {
     title: string;
     description: string;
-    ctaNode: React.ReactNode;
-  }[];
+    action: ReactNode;
+  };
+  onViewAllClick: () => void;
 };
 
 export const Explore: React.FC<TExploreProps> = props => {
   const {
     titleLabel,
-    publicImgPath = '/images',
-    assetExtension = 'webp',
-    sections,
-    latestExtensionsLabel,
-    latestExtensions,
-    buttonLabel,
+    popularExtensions,
+    popularExtensionsLabel,
+    viewAllLabel,
+    cta,
     onViewAllClick,
   } = props;
+  const { t } = useTranslation('app-extensions');
 
   return (
     <Stack spacing="gap-y-4" customStyle="mb-2">
       <Text variant="h5">{titleLabel}</Text>
-      {sections.map((section, idx) => (
-        <React.Fragment key={section.title + idx}>
-          {!!latestExtensions?.length && idx === 1 && (
-            <Card padding="p-4">
-              <Stack spacing="gap-y-4">
-                <Stack direction="row" align="center" justify="between">
-                  <Text variant="h6">{latestExtensionsLabel}</Text>
-                  <Button variant="text" label={buttonLabel} onClick={onViewAllClick} />
-                </Stack>
-                <AppList apps={latestExtensions} onLoadMore={() => null} />
-              </Stack>
-            </Card>
-          )}
-          <Card key={section.title + idx} padding="p-4">
-            <Stack spacing="gap-y-3">
-              {section.assetName && (
-                <Image
-                  customStyle="object-contain rounded-2xl"
-                  src={`${publicImgPath}/${section.assetName}.${assetExtension}`}
-                />
-              )}
-              <Text variant="h6">{section.title}</Text>
-              <Text variant="body2">{section.description}</Text>
-              {section.ctaNode}
-            </Stack>
-          </Card>
-        </React.Fragment>
-      ))}
+      {popularExtensions?.length > 0 && (
+        <ExtensionCard
+          coverImageSrc={popularExtensions[0]?.coverImageSrc}
+          displayName={popularExtensions[0]?.displayName}
+          applicationType={popularExtensions[0]?.applicationType}
+          extensionTypeLabel={t('{{extensionTypeLabel}}', {
+            extensionTypeLabel: getExtensionTypeLabel(popularExtensions[0]?.applicationType),
+          })}
+          author={popularExtensions[0]?.author}
+          description={popularExtensions[0]?.description}
+          featured={true}
+          action={popularExtensions[0]?.action}
+        />
+      )}
+      {popularExtensions?.length > 1 && (
+        <Stack spacing="gap-y-4">
+          <Stack direction="row" align="center" spacing="gap-x-2">
+            <Text variant="h6">{popularExtensionsLabel}</Text>
+            <Button
+              variant="text"
+              size="md"
+              label={viewAllLabel}
+              onClick={onViewAllClick}
+              customStyle="ml-auto"
+            />
+          </Stack>
+          <AppList apps={popularExtensions.slice(1)} onLoadMore={() => null} />
+        </Stack>
+      )}
+      <Card padding="p-4">
+        <Stack spacing="gap-y-3">
+          <Text variant="h6">{cta.title}</Text>
+          <Text variant="body2">{cta.description}</Text>
+          {cta.action}
+        </Stack>
+      </Card>
     </Stack>
   );
 };
diff --git a/extensions/apps/extensions/src/components/extensions-hub.tsx b/extensions/apps/extensions/src/components/extensions-hub.tsx
index b6d1aa97a4..95661130f6 100644
--- a/extensions/apps/extensions/src/components/extensions-hub.tsx
+++ b/extensions/apps/extensions/src/components/extensions-hub.tsx
@@ -1,15 +1,16 @@
 import React from 'react';
-import AppList, { App } from '@akashaorg/design-system-components/lib/components/AppList';
+import AppList from '@akashaorg/design-system-components/lib/components/AppList';
 import Card from '@akashaorg/design-system-core/lib/components/Card';
 import Image from '@akashaorg/design-system-core/lib/components/Image';
 import Stack from '@akashaorg/design-system-core/lib/components/Stack';
 import Text from '@akashaorg/design-system-core/lib/components/Text';
+import { ExtensionCardProps } from '@akashaorg/design-system-components/lib/components/ExtensionCard';
 
 export type TExtensionsHubProps = {
   titleLabel: string;
   publicImgPath?: string;
   assetExtension?: string;
-  extensions?: App[];
+  extensions?: ExtensionCardProps[];
   sections: {
     assetName?: string;
     title: string;
diff --git a/extensions/apps/extensions/src/components/pages/explore.tsx b/extensions/apps/extensions/src/components/pages/explore.tsx
index 36c3fb3b32..3973290fc4 100644
--- a/extensions/apps/extensions/src/components/pages/explore.tsx
+++ b/extensions/apps/extensions/src/components/pages/explore.tsx
@@ -1,11 +1,13 @@
 import React from 'react';
+import Button from '@akashaorg/design-system-core/lib/components/Button';
+import routes, { DEVELOPER_MODE, EXTENSIONS } from '../../routes';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from '@tanstack/react-router';
-import { useRootComponentProps } from '@akashaorg/ui-awf-hooks';
+import { transformSource, useRootComponentProps } from '@akashaorg/ui-awf-hooks';
 import { ArrowLongRightIcon } from '@heroicons/react/24/outline';
-import Button from '@akashaorg/design-system-core/lib/components/Button';
 import { Explore } from '../explore';
-import routes, { DEVELOPER_MODE, EXTENSIONS } from '../../routes';
+import { AkashaAppApplicationType } from '@akashaorg/typings/lib/sdk/graphql-types-new';
+import { getExtensionTypeLabel } from '../../utils/extension-utils';
 
 export const ExplorePage: React.FC<unknown> = () => {
   const navigate = useNavigate();
@@ -36,65 +38,70 @@ export const ExplorePage: React.FC<unknown> = () => {
     });
   };
 
-  const handleAppClick = (appId: string) => {
-    navigate({
-      to: '/info/$appId',
-      params: {
-        appId,
-      },
-    });
-  };
-
   const handleCTAClick = () => {
     navigate({
       to: routes[DEVELOPER_MODE],
     });
   };
-  const latestExtensions = [];
+
+  //TODO: mock data
+  const popularExtensions = [
+    {
+      id: '',
+      coverImageSrc: null,
+      author: {
+        profileDID: 'k2t6wzhkhabz1ftv1zfwnlrzcz5yyg0fxyf580fkvzr22g8ra8fa8y7hpdz0jc',
+        name: 'AKASHA',
+        alternativeAvatars: null,
+        avatar: transformSource({
+          src: 'ipfs://bafkreidk5aoxy2bde5nc6w4l6slxos3lbj5n75y766irlrb7vnfxgv4hwu',
+          width: 192,
+          height: 192,
+        }),
+        nsfw: false,
+      },
+      displayName: t('Vibes Console'),
+      description: `${t("Dive into AKASHA WORLD's Vibes Console!")} 💫 ${t("Your spot to become a moderator, explore applicants, and curate content. Together, let's shape our vibrant community!")} 🌟🔍✨`,
+      applicationType: AkashaAppApplicationType.App,
+    },
+  ];
 
   return (
     <Explore
       titleLabel={t("What's new!")}
-      sections={[
-        {
-          assetName: t('vibes-console-explore'),
-          title: t('Vibes Console'),
-          description: `${t("Dive into AKASHA WORLD's Vibes Console!")} 💫 ${t("Your spot to become a moderator, explore applicants, and curate content. Together, let's shape our vibrant community!")} 🌟🔍✨`,
-          ctaNode: (
-            <Button
-              variant={isInstalled ? 'secondary' : 'primary'}
-              label={isInstalled ? t('Installed') : t('Open')}
-              customStyle="w-fit self-end"
-              onClick={() => handleButtonClick('@akashaorg/app-vibes-console')}
-            />
-          ),
-        },
-        {
-          title: t('Want to create your own extension?'),
-          description: t(
-            'Create awesome extensions, spark your imagination, and be part of an enthusiastic developer community!',
-          ),
-          ctaNode: (
-            <Button
-              size="md"
-              variant="text"
-              iconDirection="right"
-              icon={<ArrowLongRightIcon />}
-              label={t('Start your journey')}
-              customStyle="w-fit self-end"
-              onClick={handleCTAClick}
-            />
-          ),
-        },
-      ]}
-      latestExtensionsLabel={t('Latest Extensions')}
-      latestExtensions={latestExtensions.map(ext => ({
+      cta={{
+        title: t('Want to create your own extension?'),
+        description: t(
+          'Create awesome extensions, spark your imagination, and be part of an enthusiastic developer community!',
+        ),
+        action: (
+          <Button
+            size="md"
+            variant="text"
+            iconDirection="right"
+            icon={<ArrowLongRightIcon />}
+            label={t('Start your journey')}
+            customStyle="w-fit self-end"
+            onClick={handleCTAClick}
+          />
+        ),
+      }}
+      popularExtensionsLabel={t('Popular Extensions')}
+      popularExtensions={popularExtensions.map(ext => ({
         ...ext,
+        extensionTypeLabel: t('{{extensionTypeLabel}}', {
+          extensionTypeLabel: getExtensionTypeLabel(ext?.applicationType),
+        }),
         action: (
-          <Button variant="primary" label={t('Open')} onClick={() => handleAppClick(ext.id)} />
+          <Button
+            variant={isInstalled ? 'secondary' : 'primary'}
+            label={isInstalled ? t('Installed') : t('Open')}
+            onClick={() => handleButtonClick('@akashaorg/app-vibes-console')}
+            customStyle="w-fit self-end"
+          />
         ),
       }))}
-      buttonLabel={t('View All')}
+      viewAllLabel={t('View All')}
       onViewAllClick={handleViewAllLatestExtensions}
     />
   );
diff --git a/extensions/apps/extensions/src/components/pages/info-page/info-page.tsx b/extensions/apps/extensions/src/components/pages/info-page/info-page.tsx
index 035b8954f6..8897a68b1f 100644
--- a/extensions/apps/extensions/src/components/pages/info-page/info-page.tsx
+++ b/extensions/apps/extensions/src/components/pages/info-page/info-page.tsx
@@ -28,12 +28,12 @@ import Icon from '@akashaorg/design-system-core/lib/components/Icon';
 import CopyToClipboard from '@akashaorg/design-system-core/lib/components/CopyToClipboard';
 import ProfileAvatarButton from '@akashaorg/design-system-core/lib/components/ProfileAvatarButton';
 import Pill from '@akashaorg/design-system-core/lib/components/Pill';
-import { AkashaAppApplicationType } from '@akashaorg/typings/lib/sdk/graphql-types-new';
 import { useInstalledExtensions } from '@akashaorg/ui-awf-hooks/lib/use-installed-extensions';
 import { UninstallModal } from './uninstall-modal';
 import AppCoverImage from './AppCoverImage';
 import StackedAvatar from '@akashaorg/design-system-core/lib/components/StackedAvatar';
 import { AppInfoNotificationCards } from '@akashaorg/design-system-components/lib/components/AppInfo/notification-cards';
+import { getExtensionTypeLabel } from '../../../utils/extension-utils';
 
 type InfoPageProps = {
   appId: string;
@@ -150,22 +150,6 @@ export const InfoPage: React.FC<InfoPageProps> = ({ appId }) => {
   const appData = selectAkashaApp(appReq.data);
   const latestRelease = useMemo(() => selectLatestRelease(appReq.data), [appReq.data]);
 
-  const extensionTypeLabel = useMemo(() => {
-    if (!appData?.applicationType) {
-      return '';
-    }
-    switch (appData.applicationType) {
-      case AkashaAppApplicationType.App:
-        return t('App');
-      case AkashaAppApplicationType.Plugin:
-        return t('Plugin');
-      case AkashaAppApplicationType.Widget:
-        return t('Widget');
-      default:
-        return t('Other');
-    }
-  }, [appData?.applicationType, t]);
-
   const coverImageSrc = useMemo(() => {
     if (appData?.coverImage?.src) {
       return transformSource(appData.coverImage)?.src;
@@ -228,7 +212,9 @@ export const InfoPage: React.FC<InfoPageProps> = ({ appId }) => {
                   }}
                   nsfw={appData.nsfw}
                   nsfwLabel={'NSFW'}
-                  extensionTypeLabel={extensionTypeLabel}
+                  extensionTypeLabel={t('{{extensionTypeLabel}}', {
+                    extensionTypeLabel: getExtensionTypeLabel(appData?.applicationType),
+                  })}
                   share={{ label: t('Share'), icon: <ShareIcon /> }}
                   report={{
                     label: t('Flag'),
diff --git a/extensions/apps/extensions/src/components/pages/info-page/sub-pages/dev-info-page.tsx b/extensions/apps/extensions/src/components/pages/info-page/sub-pages/dev-info-page.tsx
index 89ce69ea69..d88585f11b 100644
--- a/extensions/apps/extensions/src/components/pages/info-page/sub-pages/dev-info-page.tsx
+++ b/extensions/apps/extensions/src/components/pages/info-page/sub-pages/dev-info-page.tsx
@@ -20,6 +20,7 @@ import Spinner from '@akashaorg/design-system-core/lib/components/Spinner';
 import { NetworkStatus } from '@apollo/client';
 import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
 import DefaultEmptyCard from '@akashaorg/design-system-components/lib/components/DefaultEmptyCard';
+import { getExtensionTypeLabel } from '../../../../utils/extension-utils';
 
 type DevInfoPageProps = {
   devDid: string;
@@ -102,8 +103,27 @@ export const DevInfoPage = (props: DevInfoPageProps) => {
         // @todo: we'll need to show the curated apps only. filtering will be made here
         ?.filter(() => true)
         .map(app => ({
-          ...app,
-          logoImage: transformSource(app.logoImage),
+          coverImageSrc: app?.coverImage?.src,
+          displayName: app?.displayName,
+          applicationType: app?.applicationType,
+          extensionTypeLabel: t('{{extensionTypeLabel}}', {
+            extensionTypeLabel: getExtensionTypeLabel(app?.applicationType),
+          }),
+          author: app.author
+            ? {
+                profileDID: app.author?.akashaProfile?.did?.id,
+                name: app.author?.akashaProfile?.name,
+                avatar: transformSource(app.author?.akashaProfile?.avatar?.default),
+                alternativeAvatars: app.author?.akashaProfile?.avatar.alternatives?.map(alt =>
+                  transformSource(alt),
+                ),
+                nsfw: app.author?.akashaProfile?.nsfw,
+              }
+            : null,
+          description: app?.description,
+          defaultLabel: t('Default'),
+          nsfwLabel: t('NSFW'),
+          nsfw: app?.nsfw,
           action: <Button onClick={handleAppOpen(app.name)} label={t('Open')} />,
         })),
     [appsReq.data, handleAppOpen, t],
diff --git a/extensions/apps/extensions/src/components/pages/installed-extensions/default-extensions-list.tsx b/extensions/apps/extensions/src/components/pages/installed-extensions/default-extensions-list.tsx
index b32bb23d8e..a9e7355a14 100644
--- a/extensions/apps/extensions/src/components/pages/installed-extensions/default-extensions-list.tsx
+++ b/extensions/apps/extensions/src/components/pages/installed-extensions/default-extensions-list.tsx
@@ -1,19 +1,18 @@
 import React from 'react';
 import getSDK from '@akashaorg/core-sdk';
 import AppList from '@akashaorg/design-system-components/lib/components/AppList';
-import Card from '@akashaorg/design-system-core/lib/components/Card';
 import Stack from '@akashaorg/design-system-core/lib/components/Stack';
 import Text from '@akashaorg/design-system-core/lib/components/Text';
 import Spinner from '@akashaorg/design-system-core/lib/components/Spinner';
 import Button from '@akashaorg/design-system-core/lib/components/Button';
 import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
-import { useRootComponentProps } from '@akashaorg/ui-awf-hooks';
+import { transformSource, useRootComponentProps } from '@akashaorg/ui-awf-hooks';
 import { useGetAppsByPublisherDidQuery } from '@akashaorg/ui-awf-hooks/lib/generated';
 import { selectApps } from '@akashaorg/ui-awf-hooks/lib/selectors/get-apps-by-publisher-did-query';
 import { useTranslation } from 'react-i18next';
-import { type InstalledExtension } from '@akashaorg/ui-awf-hooks/lib/use-installed-extensions';
 import { SortOrder } from '@akashaorg/typings/lib/sdk/graphql-types-new';
 import { useNavigate } from '@tanstack/react-router';
+import { getExtensionTypeLabel } from '../../../utils/extension-utils';
 
 export const DefaultExtensionsList = () => {
   const { t } = useTranslation('app-extensions');
@@ -42,62 +41,77 @@ export const DefaultExtensionsList = () => {
 
   const apps = selectApps(data);
 
-  const defaultExtensions: InstalledExtension[] = apps?.map(app => ({
-    name: app.name,
-    displayName: app.displayName,
-    logoImage: app.logoImage,
-    applicationType: app.applicationType,
-    description: app.description,
+  const defaultExtensions = apps?.map(app => ({
+    coverImageSrc: app?.coverImage?.src,
+    displayName: app?.displayName,
+    applicationType: app?.applicationType,
+    extensionTypeLabel: t('{{extensionTypeLabel}}', {
+      extensionTypeLabel: getExtensionTypeLabel(app?.applicationType),
+    }),
+    author: app.author
+      ? {
+          profileDID: app.author?.akashaProfile?.did?.id,
+          name: app.author?.akashaProfile?.name,
+          avatar: transformSource(app.author?.akashaProfile?.avatar?.default),
+          alternativeAvatars: app.author?.akashaProfile?.avatar.alternatives?.map(alt =>
+            transformSource(alt),
+          ),
+          nsfw: app.author?.akashaProfile?.nsfw,
+        }
+      : null,
+    description: app?.description,
+    nsfw: app?.nsfw,
+    defaultLabel: t('Default'),
+    nsfwLabel: t('NSFW'),
+    isDefaultWorldExtension: true,
     action: (
       <Button variant="secondary" label={t('Open')} onClick={() => handleAppClick(app.name)} />
     ),
   }));
 
   return (
-    <Card padding="p-4">
-      <Stack spacing="gap-y-4">
-        <Stack spacing="gap-y-2">
-          <Text variant="h6">{t('Default Extensions')}</Text>
-          <Text variant="body2" color={{ light: 'grey5', dark: 'grey6' }}>
-            {t(
-              'The default extensions are the ones that come preinstalled with AKASHA World. You cannot uninstall them.',
-            )}
-          </Text>
-        </Stack>
-        {
-          //@TODO replace with Loader component once its created
-        }
-        {loading && (
-          <Stack spacing="gap-y-5" align="center">
-            <Spinner />
-            <Text variant="button-md">{t('Loading default extensions')}</Text>
-          </Stack>
-        )}
-        {error && (
-          <ErrorLoader
-            title={
-              <Text variant="h5" align="center" selectable={false}>
-                {t(`Uh-oh! We couldn't load`)} <br />
-                {t(`the extensions list!`)}
-              </Text>
-            }
-            details={
-              <Text variant="body2" align="center" selectable={false} customStyle="w-60 sm:w-auto">
-                {t(`It seems there's a problem with the server. Please try again later!`)}
-              </Text>
-            }
-            type="list-not-available"
-            noWrapperCard={true}
-          />
-        )}
-        {defaultExtensions && (
-          <AppList
-            apps={defaultExtensions}
-            //@TODO implement pagination as the list can grow
-            onLoadMore={() => null}
-          />
-        )}
+    <Stack spacing="gap-y-4">
+      <Stack spacing="gap-y-2">
+        <Text variant="h6">{t('Default Extensions')}</Text>
+        <Text variant="body2" color={{ light: 'grey5', dark: 'grey6' }}>
+          {t(
+            'The default extensions are the ones that come preinstalled with AKASHA World. You cannot uninstall them.',
+          )}
+        </Text>
       </Stack>
-    </Card>
+      {
+        //@TODO replace with Loader component once its created
+      }
+      {loading && (
+        <Stack spacing="gap-y-5" align="center">
+          <Spinner />
+          <Text variant="button-md">{t('Loading default extensions')}</Text>
+        </Stack>
+      )}
+      {error && (
+        <ErrorLoader
+          title={
+            <Text variant="h5" align="center" selectable={false}>
+              {t(`Uh-oh! We couldn't load`)} <br />
+              {t(`the extensions list!`)}
+            </Text>
+          }
+          details={
+            <Text variant="body2" align="center" selectable={false} customStyle="w-60 sm:w-auto">
+              {t(`It seems there's a problem with the server. Please try again later!`)}
+            </Text>
+          }
+          type="list-not-available"
+          noWrapperCard={true}
+        />
+      )}
+      {defaultExtensions?.length > 0 && (
+        <AppList
+          apps={defaultExtensions}
+          //@TODO implement pagination as the list can grow
+          onLoadMore={() => null}
+        />
+      )}
+    </Stack>
   );
 };
diff --git a/extensions/apps/extensions/src/components/pages/installed-extensions/installed-extensions-list.tsx b/extensions/apps/extensions/src/components/pages/installed-extensions/installed-extensions-list.tsx
index 25f3cd849b..548b6fa9bd 100644
--- a/extensions/apps/extensions/src/components/pages/installed-extensions/installed-extensions-list.tsx
+++ b/extensions/apps/extensions/src/components/pages/installed-extensions/installed-extensions-list.tsx
@@ -13,8 +13,9 @@ import {
   type InstalledExtension,
   useInstalledExtensions,
 } from '@akashaorg/ui-awf-hooks/lib/use-installed-extensions';
-import { useAkashaStore, useRootComponentProps } from '@akashaorg/ui-awf-hooks';
+import { transformSource, useAkashaStore, useRootComponentProps } from '@akashaorg/ui-awf-hooks';
 import { useNavigate } from '@tanstack/react-router';
+import { getExtensionTypeLabel } from '../../../utils/extension-utils';
 
 const PUBLIC_IMAGE_PATH = '/images';
 
@@ -55,7 +56,25 @@ export const InstalledExtensionsList = () => {
   const { data, error, loading } = useInstalledExtensions();
 
   const addAction = (ext: InstalledExtension) => ({
-    ...ext,
+    coverImageSrc: ext?.coverImage?.src,
+    displayName: ext?.displayName,
+    applicationType: ext?.applicationType,
+    extensionTypeLabel: t('{{extensionTypeLabel}}', {
+      extensionTypeLabel: getExtensionTypeLabel(ext?.applicationType),
+    }),
+    author: ext.author
+      ? {
+          profileDID: ext.author?.did?.id,
+          name: ext.author?.name,
+          avatar: transformSource(ext.author?.avatar?.default),
+          alternativeAvatars: ext.author?.avatar.alternatives?.map(alt => transformSource(alt)),
+          nsfw: ext.author?.nsfw,
+        }
+      : null,
+    description: ext?.description,
+    nsfw: ext?.nsfw,
+    defaultLabel: t('Default'),
+    nsfwLabel: t('NSFW'),
     action: (
       <Button variant="secondary" label={t('Open')} onClick={() => handleAppClick(ext.name)} />
     ),
@@ -111,43 +130,41 @@ export const InstalledExtensionsList = () => {
         />
       )}
       {installedExtensions && (
-        <Card padding="p-4">
-          <Stack spacing="gap-y-3" align="center">
-            {!installedExtensions.length && (
-              <>
-                <Stack customStyle="h-52 w-52">
-                  <Image
-                    customStyle="object-contain"
-                    src={`${PUBLIC_IMAGE_PATH}/longbeam-notfound.webp`}
-                  />
-                </Stack>
-                <Text variant="h6">{t('No extensions installed yet!')}</Text>
-                <Stack align="center">
-                  <Text as="span" variant="body2" color={{ light: 'grey5', dark: 'grey6' }}>
-                    <Button
-                      variant="text"
-                      size="md"
-                      label={t('Discover')}
-                      onClick={handleDiscoverClick}
-                      customStyle="inline-block"
-                    />{' '}
-                    {t('cool extensions and install them')}
-                  </Text>
-                  <Text variant="body2" color={{ light: 'grey5', dark: 'grey6' }}>
-                    {t('to customize your world')}
-                  </Text>
-                </Stack>
-              </>
-            )}
-            {!!installedExtensions.length && (
-              <AppList
-                apps={installedExtensions}
-                //implementation requires pagination support on installed extensions service on sdk
-                onLoadMore={() => null}
-              />
-            )}
-          </Stack>
-        </Card>
+        <Stack spacing="gap-y-3" align="center">
+          {!installedExtensions.length && (
+            <>
+              <Stack customStyle="h-52 w-52">
+                <Image
+                  customStyle="object-contain"
+                  src={`${PUBLIC_IMAGE_PATH}/longbeam-notfound.webp`}
+                />
+              </Stack>
+              <Text variant="h6">{t('No extensions installed yet!')}</Text>
+              <Stack align="center">
+                <Text as="span" variant="body2" color={{ light: 'grey5', dark: 'grey6' }}>
+                  <Button
+                    variant="text"
+                    size="md"
+                    label={t('Discover')}
+                    onClick={handleDiscoverClick}
+                    customStyle="inline-block"
+                  />{' '}
+                  {t('cool extensions and install them')}
+                </Text>
+                <Text variant="body2" color={{ light: 'grey5', dark: 'grey6' }}>
+                  {t('to customize your world')}
+                </Text>
+              </Stack>
+            </>
+          )}
+          {!!installedExtensions.length && (
+            <AppList
+              apps={installedExtensions}
+              //implementation requires pagination support on installed extensions service on sdk
+              onLoadMore={() => null}
+            />
+          )}
+        </Stack>
       )}
     </>
   );
diff --git a/extensions/apps/extensions/src/utils/extension-utils.tsx b/extensions/apps/extensions/src/utils/extension-utils.tsx
index c9df78e8cd..91575418b0 100644
--- a/extensions/apps/extensions/src/utils/extension-utils.tsx
+++ b/extensions/apps/extensions/src/utils/extension-utils.tsx
@@ -1,4 +1,7 @@
-import { AkashaAppsStreamModerationStatus } from '@akashaorg/typings/lib/sdk/graphql-types-new';
+import {
+  AkashaAppApplicationType,
+  AkashaAppsStreamModerationStatus,
+} from '@akashaorg/typings/lib/sdk/graphql-types-new';
 import { ExtensionStatus } from '@akashaorg/typings/lib/ui';
 
 export const getExtensionStatus = (
@@ -35,3 +38,19 @@ export const getStatusIndicatorStyle = (
       return 'bg-grey6';
   }
 };
+
+export const getExtensionTypeLabel = (applicationType: AkashaAppApplicationType) => {
+  if (!applicationType) {
+    return '';
+  }
+  switch (applicationType) {
+    case AkashaAppApplicationType.App:
+      return 'App';
+    case AkashaAppApplicationType.Plugin:
+      return 'Plugin';
+    case AkashaAppApplicationType.Widget:
+      return 'Widget';
+    default:
+      return 'Other';
+  }
+};
diff --git a/libs/design-system-components/src/components/AppList/index.tsx b/libs/design-system-components/src/components/AppList/index.tsx
index dae9faac3d..0068e26e2f 100644
--- a/libs/design-system-components/src/components/AppList/index.tsx
+++ b/libs/design-system-components/src/components/AppList/index.tsx
@@ -1,28 +1,10 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 import DynamicInfiniteScroll, { DynamicInfiniteScrollProps } from '../DynamicInfiniteScroll';
-import Divider from '@akashaorg/design-system-core/lib/components/Divider';
-import ExtensionIcon from '@akashaorg/design-system-core/lib/components/ExtensionIcon';
-import Stack from '@akashaorg/design-system-core/lib/components/Stack';
-import Text from '@akashaorg/design-system-core/lib/components/Text';
-import AppAvatar from '@akashaorg/design-system-core/lib/components/AppAvatar';
-import {
-  AkashaAppApplicationType,
-  AppImageSource,
-} from '@akashaorg/typings/lib/sdk/graphql-types-new';
-
-export type App = {
-  displayName?: string;
-  logoImage?: AppImageSource;
-  description?: string;
-  applicationType?: AkashaAppApplicationType;
-  action?: ReactNode;
-};
+import ExtensionCard, { ExtensionCardProps } from '../ExtensionCard';
 
 export type AppListProps = {
-  apps: App[];
-  showAppTypeIndicator?: boolean;
-  overScan?: number;
-} & Pick<DynamicInfiniteScrollProps, 'hasNextPage' | 'loading' | 'onLoadMore'>;
+  apps: ExtensionCardProps[];
+} & Pick<DynamicInfiniteScrollProps, 'overScan' | 'hasNextPage' | 'loading' | 'onLoadMore'>;
 
 const ENTRY_HEIGHT = 92;
 
@@ -39,7 +21,6 @@ const ITEM_SPACING = 16;
  */
 const AppList: React.FC<AppListProps> = ({
   apps,
-  showAppTypeIndicator,
   loading,
   hasNextPage,
   onLoadMore,
@@ -51,46 +32,47 @@ const AppList: React.FC<AppListProps> = ({
       estimatedHeight={ENTRY_HEIGHT}
       overScan={overScan}
       itemSpacing={ITEM_SPACING}
+      lanes={2}
       hasNextPage={hasNextPage}
       loading={loading}
       onLoadMore={onLoadMore}
+      listWrapperStyle={
+        apps.length > 1
+          ? 'grid grid-cols-[repeat(auto-fit,_minmax(min(16rem,_100%),_1fr))] gap-4'
+          : 'flex'
+      }
     >
-      {({ index, itemIndex }) => {
-        const app = apps[itemIndex];
+      {({ itemIndex }) => {
+        const {
+          coverImageSrc,
+          displayName,
+          applicationType,
+          extensionTypeLabel,
+          author,
+          description,
+          action,
+          defaultLabel,
+          nsfwLabel,
+          isDefaultWorldExtension,
+          nsfw,
+          featured,
+        } = apps[itemIndex];
         return (
-          <Stack spacing="gap-y-4">
-            <Stack direction="row" justify="between" align="center" spacing="gap-x-8">
-              <Stack direction="row" spacing="gap-x-3">
-                <AppAvatar appType={app.applicationType} avatar={app.logoImage} />
-                <Stack direction="column" spacing="gap-y-1">
-                  <Stack direction="row" spacing="gap-2">
-                    <Text variant="button-sm">{app.displayName}</Text>
-                    {showAppTypeIndicator && (
-                      <Stack
-                        customStyle="w-[18px] h-[18px] rounded-full"
-                        background={{ light: 'secondaryLight', dark: 'secondaryDark' }}
-                        justify="center"
-                        align="center"
-                      >
-                        <ExtensionIcon type={app.applicationType} />
-                      </Stack>
-                    )}
-                  </Stack>
-                  <Text
-                    variant="footnotes2"
-                    weight="normal"
-                    color={{ light: 'grey4', dark: 'grey7' }}
-                    lineClamp={2}
-                  >
-                    {app.description || app.displayName}
-                  </Text>
-                </Stack>
-              </Stack>
-
-              {app.action}
-            </Stack>
-            {index < apps.length - 1 && <Divider />}
-          </Stack>
+          <ExtensionCard
+            coverImageSrc={coverImageSrc}
+            displayName={displayName}
+            applicationType={applicationType}
+            extensionTypeLabel={extensionTypeLabel}
+            author={author}
+            description={description}
+            action={action}
+            nsfw={nsfw}
+            featured={featured || apps.length === 1}
+            defaultLabel={defaultLabel}
+            nsfwLabel={nsfwLabel}
+            isDefaultWorldExtension={isDefaultWorldExtension}
+            customStyle="h-full"
+          />
         );
       }}
     </DynamicInfiniteScroll>
diff --git a/libs/design-system-components/src/components/DynamicInfiniteScroll/index.tsx b/libs/design-system-components/src/components/DynamicInfiniteScroll/index.tsx
index 1641897d5a..9d1fd70da9 100644
--- a/libs/design-system-components/src/components/DynamicInfiniteScroll/index.tsx
+++ b/libs/design-system-components/src/components/DynamicInfiniteScroll/index.tsx
@@ -27,13 +27,15 @@ export type DynamicInfiniteScrollProps = {
   enableScrollRestoration?: boolean;
   scrollRestorationStorageKey?: string;
   lastScrollRestorationKey?: string;
+  lanes?: number;
   overScan?: number;
   itemSpacing?: number;
   hasNextPage?: boolean;
   loading?: boolean;
-  customStyle?: string;
   header?: ReactElement;
   dataTestId?: string;
+  listWrapperStyle?: string;
+  customStyle?: string;
   onLoadMore: () => Promise<unknown> | void;
   children: (item: DynamicInfiniteScrollItem) => ReactElement;
 };
@@ -46,13 +48,15 @@ const DynamicInfiniteScroll: React.FC<DynamicInfiniteScrollProps> = props => {
     enableScrollRestoration = false,
     scrollRestorationStorageKey = 'storage-key',
     lastScrollRestorationKey,
+    lanes,
     overScan = 5,
     itemSpacing,
     hasNextPage,
     loading,
-    customStyle = '',
     header,
     dataTestId,
+    listWrapperStyle = '',
+    customStyle = '',
     onLoadMore,
     children,
   } = props;
@@ -97,7 +101,8 @@ const DynamicInfiniteScroll: React.FC<DynamicInfiniteScrollProps> = props => {
   }, [getHeaderHeight]);
 
   const virtualizer = useWindowVirtualizer({
-    count: count,
+    count,
+    lanes,
     overscan: overScan,
     gap: itemSpacing,
     initialMeasurementsCache: getInitialMeasurementsCache(),
@@ -149,7 +154,7 @@ const DynamicInfiniteScroll: React.FC<DynamicInfiniteScrollProps> = props => {
       >
         <Card
           data-offset={vListOffset}
-          customStyle={`flex flex-col absolute w-full top-0 left-0 translate-y-[${vListOffset}px] gap-y-[${itemSpacing}px]`}
+          customStyle={`flex flex-col absolute w-full top-0 left-0 translate-y-[${vListOffset}px] gap-y-[${itemSpacing}px] ${listWrapperStyle}`}
           type="plain"
         >
           {virtualItems.map((virtualItem, index, items) => (
diff --git a/libs/design-system-components/src/components/ExtensionCard/index.tsx b/libs/design-system-components/src/components/ExtensionCard/index.tsx
new file mode 100644
index 0000000000..b4af7ed752
--- /dev/null
+++ b/libs/design-system-components/src/components/ExtensionCard/index.tsx
@@ -0,0 +1,125 @@
+import React, { ReactNode } from 'react';
+import Stack from '@akashaorg/design-system-core/lib/components/Stack';
+import Card from '@akashaorg/design-system-core/lib/components/Card';
+import AppCoverImage from '@akashaorg/design-system-core/lib/components/AppCoverImage';
+import Text from '@akashaorg/design-system-core/lib/components/Text';
+import Pill from '@akashaorg/design-system-core/lib/components/Pill';
+import DidField from '@akashaorg/design-system-core/lib/components/DidField';
+import Avatar from '@akashaorg/design-system-core/lib/components/Avatar';
+import ProfileNameField from '@akashaorg/design-system-core/lib/components/ProfileNameField';
+import ExtensionIcon from '@akashaorg/design-system-core/lib/components/ExtensionIcon';
+import { Extension, Image } from '@akashaorg/typings/lib/ui';
+
+export type ExtensionCardProps = {
+  coverImageSrc: string;
+  displayName: string;
+  applicationType: Extension['applicationType'];
+  extensionTypeLabel: string;
+  author?: {
+    profileDID: string;
+    name: string;
+    avatar?: Image;
+    alternativeAvatars?: Image[];
+    nsfw?: boolean;
+  };
+  description: string;
+  defaultLabel?: string;
+  nsfwLabel?: string;
+  isDefaultWorldExtension?: boolean;
+  nsfw?: boolean;
+  featured?: boolean;
+  action?: ReactNode;
+  customStyle?: string;
+};
+
+const ExtensionCard: React.FC<ExtensionCardProps> = props => {
+  const {
+    coverImageSrc,
+    displayName,
+    applicationType,
+    extensionTypeLabel,
+    author,
+    description,
+    defaultLabel,
+    nsfwLabel,
+    isDefaultWorldExtension = false,
+    nsfw,
+    featured,
+    action,
+    customStyle = '',
+  } = props;
+
+  return (
+    <Card elevation="1" padding={16} radius={20} customStyle={customStyle}>
+      <Stack spacing="gap-y-4">
+        <AppCoverImage
+          src={coverImageSrc}
+          appType={applicationType}
+          isNSFW={nsfw}
+          customStyle={`${featured ? 'h-[9.625rem]' : 'h-[6.25rem]'} object-cover rounded-[0.625rem]`}
+        />
+        <Stack spacing="gap-y-3">
+          <Stack justify="between" align="center" direction="row" spacing="gap-y-1">
+            <Text variant="h6">{displayName}</Text>
+            <>{action}</>
+          </Stack>
+          <Stack direction="row" spacing="gap-x-2">
+            <Pill
+              color={{ light: 'secondaryLight', dark: 'white' }}
+              background={{ light: 'tertiaryLight', dark: 'tertiaryDark' }}
+              icon={<ExtensionIcon type={applicationType} size="xs" />}
+              weight="normal"
+              size="xs"
+              label={extensionTypeLabel}
+              type="info"
+            />
+            {isDefaultWorldExtension && (
+              <Pill
+                color={{ light: 'white', dark: 'black' }}
+                background={{ light: 'secondaryLight', dark: 'secondaryDark' }}
+                weight="normal"
+                size="xs"
+                label={defaultLabel}
+                type="info"
+              />
+            )}
+            {nsfw && (
+              <Pill
+                color={{ light: 'errorLight', dark: 'white' }}
+                background={{ light: 'errorFade', dark: 'errorDark' }}
+                weight="normal"
+                size="xs"
+                label={nsfwLabel}
+                type="info"
+              />
+            )}
+          </Stack>
+          <Stack direction="row" align="center" spacing="gap-x-2">
+            <Avatar
+              avatar={author?.avatar}
+              alternativeAvatars={author?.alternativeAvatars}
+              profileId={author?.profileDID}
+              isNSFW={author?.nsfw}
+              customStyle="shrink-0 cursor-pointer h-4 w-4"
+            />
+            <ProfileNameField
+              did={author?.profileDID}
+              profileName={author?.name}
+              color={{ light: 'grey4', dark: 'grey6' }}
+              weight="normal"
+              truncateText={true}
+              size="sm"
+              hover={true}
+            />
+            <DidField did={author?.profileDID} isValid={true} copiable={true} />
+          </Stack>
+          <Text variant="body2" {...(!featured && { lineClamp: 2 })}>
+            {description}
+          </Text>
+        </Stack>
+      </Stack>
+    </Card>
+  );
+};
+
+export default ExtensionCard;
diff --git a/libs/design-system-components/src/stories/dscomponents/app-list.stories.tsx b/libs/design-system-components/src/stories/dscomponents/app-list.stories.tsx
index 7e19341bf3..d93e45f246 100644
--- a/libs/design-system-components/src/stories/dscomponents/app-list.stories.tsx
+++ b/libs/design-system-components/src/stories/dscomponents/app-list.stories.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import Button from '@akashaorg/design-system-core/lib/components/Button';
 import AppList, { AppListProps } from '../../components/AppList';
+import { AkashaAppApplicationType } from '@akashaorg/typings/lib/sdk/graphql-types-new';
 
 const meta: Meta<AppListProps> = {
   title: 'DSComponents/Extensions/AppList',
@@ -15,17 +16,21 @@ export const Default: Story = {
     apps: [
       {
         displayName: 'Supercarts',
+        applicationType: AkashaAppApplicationType.App,
+        extensionTypeLabel: 'App',
         description:
           'Play with your friends in AKASHA World and enjoy a couple of puzzle games or drawing games or any kind of game!',
         action: <Button label="Install" variant="primary" />,
-        logoImage: { src: 'https://placebeard.it/360x360', height: 360, width: 360 },
+        coverImageSrc: 'https://placebeard.it/640x480',
       },
       {
         displayName: 'Articles App',
+        applicationType: AkashaAppApplicationType.App,
+        extensionTypeLabel: 'App',
         description:
           'Read articles written by AKASHA community you can also write your own articles or collaborate with other authors!',
         action: <Button label="Install" variant="primary" />,
-        logoImage: { src: 'https://placebeard.it/360x360', height: 360, width: 360 },
+        coverImageSrc: 'https://placebeard.it/640x480',
       },
     ],
     onLoadMore: () => Promise.resolve({}),
diff --git a/libs/design-system-components/src/stories/dscomponents/extension-card.stories.tsx b/libs/design-system-components/src/stories/dscomponents/extension-card.stories.tsx
new file mode 100644
index 0000000000..85f856eb51
--- /dev/null
+++ b/libs/design-system-components/src/stories/dscomponents/extension-card.stories.tsx
@@ -0,0 +1,92 @@
+import React from 'react';
+import Button from '@akashaorg/design-system-core/lib/components/Button';
+import type { Meta, StoryObj } from '@storybook/react';
+import ExtensionCard, { ExtensionCardProps } from '../../components/ExtensionCard';
+import { AkashaAppApplicationType } from '@akashaorg/typings/lib/sdk/graphql-types-new';
+
+const meta: Meta<ExtensionCardProps> = {
+  title: 'DSComponents/Cards/ExtensionCard',
+  component: ExtensionCard,
+};
+
+type Story = StoryObj<ExtensionCardProps>;
+
+export const Default: Story = {
+  args: {
+    displayName: 'Supercarts',
+    applicationType: AkashaAppApplicationType.App,
+    extensionTypeLabel: 'App',
+    author: {
+      profileDID: 'did:pkh:eip155:11155111:0xc2ccre32856a8d50c748d50a5991312d986208a8',
+      name: 'CoffeeLover',
+      avatar: { src: 'https://placebeard.it/360x360', height: 360, width: 360 },
+      alternativeAvatars: [{ src: 'https://placebeard.it/360x360', height: 360, width: 360 }],
+    },
+    description:
+      'Play with your friends in AKASHA World and enjoy a couple of puzzle games or drawing games or any kind of game!',
+    action: <Button label="Install" variant="primary" />,
+    coverImageSrc: 'https://placebeard.it/360x360',
+  },
+};
+
+export const FeaturedExtensionCard: Story = {
+  args: {
+    displayName: 'Supercarts',
+    applicationType: AkashaAppApplicationType.App,
+    extensionTypeLabel: 'App',
+    author: {
+      profileDID: 'did:pkh:eip155:11155111:0xc2ccre32856a8d50c748d50a5991312d986208a8',
+      name: 'CoffeeLover',
+      avatar: { src: 'https://placebeard.it/360x360', height: 360, width: 360 },
+      alternativeAvatars: [{ src: 'https://placebeard.it/360x360', height: 360, width: 360 }],
+    },
+    featured: true,
+    description:
+      'Play with your friends in AKASHA World and enjoy a couple of puzzle games or drawing games or any kind of game!',
+    action: <Button label="Install" variant="primary" />,
+    coverImageSrc: 'https://placebeard.it/360x360',
+  },
+};
+
+export const DefaultAppExtensionCard: Story = {
+  args: {
+    displayName: 'Supercarts',
+    applicationType: AkashaAppApplicationType.App,
+    extensionTypeLabel: 'App',
+    author: {
+      profileDID: 'did:pkh:eip155:11155111:0xc2ccre32856a8d50c748d50a5991312d986208a8',
+      name: 'CoffeeLover',
+      avatar: { src: 'https://placebeard.it/360x360', height: 360, width: 360 },
+      alternativeAvatars: [{ src: 'https://placebeard.it/360x360', height: 360, width: 360 }],
+    },
+    isDefaultWorldExtension: true,
+    defaultLabel: 'Default',
+    description:
+      'Play with your friends in AKASHA World and enjoy a couple of puzzle games or drawing games or any kind of game!',
+    action: <Button label="Install" variant="primary" />,
+    coverImageSrc: 'https://placebeard.it/360x360',
+  },
+};
+
+export const NSFWExtensionCard: Story = {
+  args: {
+    displayName: 'Supercarts',
+    applicationType: AkashaAppApplicationType.App,
+    extensionTypeLabel: 'App',
+    author: {
+      profileDID: 'did:pkh:eip155:11155111:0xc2ccre32856a8d50c748d50a5991312d986208a8',
+      name: 'CoffeeLover',
+      nsfw: true,
+      avatar: { src: 'https://placebeard.it/360x360', height: 360, width: 360 },
+      alternativeAvatars: [{ src: 'https://placebeard.it/360x360', height: 360, width: 360 }],
+    },
+    nsfw: true,
+    nsfwLabel: 'NSFW',
+    description:
+      'Play with your friends in AKASHA World and enjoy a couple of puzzle games or drawing games or any kind of game!',
+    action: <Button label="Install" variant="primary" />,
+    coverImageSrc: 'https://placebeard.it/360x360',
+  },
+};
+
+export default meta;
diff --git a/libs/design-system-components/src/stories/dscore/avatar.stories.tsx b/libs/design-system-components/src/stories/dscore/avatar.stories.tsx
index baef495ac9..63df4ecddf 100644
--- a/libs/design-system-components/src/stories/dscore/avatar.stories.tsx
+++ b/libs/design-system-components/src/stories/dscore/avatar.stories.tsx
@@ -43,6 +43,7 @@ export const NSFWAvatar: Story = {
   args: {
     profileId: 'did:pkh:eip155:5:0x36c703c4d22af437dc883e2e0884e57404e16493',
     avatar: { src: 'https://placebeard.it/360x360', height: 360, width: 360 },
+    size: 'xl',
     isNSFW: true,
   },
 };
diff --git a/libs/design-system-core/src/components/AppCoverImage/index.tsx b/libs/design-system-core/src/components/AppCoverImage/index.tsx
index d0baba4f39..db6b298f15 100644
--- a/libs/design-system-core/src/components/AppCoverImage/index.tsx
+++ b/libs/design-system-core/src/components/AppCoverImage/index.tsx
@@ -1,9 +1,13 @@
 import React, { useMemo } from 'react';
+import Stack from '../Stack';
+import Icon from '../Icon';
 import { AkashaAppApplicationType } from '@akashaorg/typings/lib/sdk/graphql-types-new';
+import { EyeSlashIcon } from '../Icon/hero-icons-outline';
 
 export type AppCoverImageProps = {
   src?: string;
   appType?: string;
+  isNSFW?: boolean;
   publicImgPath?: string;
   customStyle?: string;
 };
@@ -11,6 +15,7 @@ export type AppCoverImageProps = {
 const AppCoverImage = (props: AppCoverImageProps) => {
   const {
     src,
+    isNSFW,
     publicImgPath = '/images',
     appType = AkashaAppApplicationType.App,
     customStyle,
@@ -41,6 +46,22 @@ const AppCoverImage = (props: AppCoverImageProps) => {
     }
   }, [appType]);
 
+  if (isNSFW) {
+    return (
+      <Stack
+        align="center"
+        justify="center"
+        background={{ light: 'grey9', dark: 'grey5' }}
+        customStyle={customStyle}
+        fullWidth
+      >
+        {isNSFW && (
+          <Icon icon={<EyeSlashIcon />} color={{ light: 'errorLight', dark: 'errorDark' }} />
+        )}
+      </Stack>
+    );
+  }
+
   return (
     <picture className={`w-full overflow-hidden ${customStyle}`}>
       {src && <source srcSet={src} />}
diff --git a/libs/design-system-core/src/components/Pill/index.tsx b/libs/design-system-core/src/components/Pill/index.tsx
index 12f99be273..a6b28e6ac0 100644
--- a/libs/design-system-core/src/components/Pill/index.tsx
+++ b/libs/design-system-core/src/components/Pill/index.tsx
@@ -20,6 +20,7 @@ type ActionPillProps = Pick<
 
 export type InfoPillProps = Pick<TextProps, 'weight' | 'color' | 'customStyle'> & {
   label: string;
+  size?: PillSize;
   icon?: ReactElement;
   borderColor?: Color;
   background?: Color;
@@ -62,18 +63,27 @@ export type PillProps =
  **/
 const Pill: React.FC<PillProps> = props => {
   if (props.type === 'info') {
-    const { borderColor, background, color, icon, label, weight, customStyle, customTextStyle } =
-      props;
+    const {
+      borderColor,
+      background,
+      color,
+      label,
+      size = 'sm',
+      weight,
+      customStyle,
+      icon,
+      customTextStyle,
+    } = props;
 
     const borderStyle = borderColor ? `border ${getColorClasses(borderColor, 'border')}` : '';
     return (
       <Stack
+        direction="row"
         align="center"
         justify="center"
-        direction="row"
         spacing="gap-x-1"
         background={background}
-        customStyle={`min-h-min min-w-min rounded-full py-1 px-2 ${borderStyle} ${customStyle}`}
+        customStyle={`${PILL_SIZE_MAP[size]} ${borderStyle} ${customStyle}`}
       >
         {icon}
         <Text
diff --git a/libs/design-system-core/src/components/ProfileNameField/index.tsx b/libs/design-system-core/src/components/ProfileNameField/index.tsx
index 753c07dc5a..68cc8b283e 100644
--- a/libs/design-system-core/src/components/ProfileNameField/index.tsx
+++ b/libs/design-system-core/src/components/ProfileNameField/index.tsx
@@ -1,18 +1,21 @@
 import React from 'react';
-import Text from '../Text';
+import Text, { FontWeight } from '../Text';
 import Tooltip from '../Tooltip';
 import Stack from '../Stack';
 import Icon from '../Icon';
 import { ExclamationTriangleIcon } from '../Icon/hero-icons-outline';
 import { getDidNetworkType, truncateDid } from '../../utils/did-utils';
 import { getColorClasses } from '../../utils';
+import { Color } from '../types/common.types';
 
 export type ProfileNameFieldProps = {
   did: string;
   profileName?: string;
   nsfwLabel?: string;
   truncateText?: boolean;
+  weight?: FontWeight;
   size?: 'sm' | 'md' | 'lg';
+  color?: Color;
   showMissingNameWarning?: boolean;
   missingNameWarningLabel?: string;
   hover?: boolean;
@@ -48,6 +51,8 @@ const ProfileNameField: React.FC<ProfileNameFieldProps> = ({
   nsfwLabel = '',
   truncateText,
   size = 'sm',
+  weight = 'bold',
+  color,
   showMissingNameWarning,
   missingNameWarningLabel,
   hover = false,
@@ -71,7 +76,8 @@ const ProfileNameField: React.FC<ProfileNameFieldProps> = ({
       <Stack direction="row" spacing="gap-x-1">
         <Text
           variant={`button-${size}`}
-          weight="bold"
+          weight={weight}
+          color={color}
           truncate={true}
           customStyle={`${textTruncateStyle} ${textHoverStyle}`}
         >
diff --git a/libs/design-system-core/src/utils/generate-avatar-classes.ts b/libs/design-system-core/src/utils/generate-avatar-classes.ts
index 96bd2324fe..ee52b6141c 100644
--- a/libs/design-system-core/src/utils/generate-avatar-classes.ts
+++ b/libs/design-system-core/src/utils/generate-avatar-classes.ts
@@ -2,6 +2,7 @@ import { AvatarSize, AvatarBorderSize, AvatarBorderColor } from '../components/A
 import { Color } from '../components/types/common.types';
 
 export const avatarSizesMap = {
+  xxs: 'w-4 h-4',
   xs: 'w-6 h-6',
   sm: 'w-8 h-8',
   md: 'w-10 h-10',
@@ -11,6 +12,7 @@ export const avatarSizesMap = {
 };
 
 export const avatarBorderSizesMap = {
+  xxs: '1',
   xs: '1',
   sm: '2',
   md: '4',
diff --git a/libs/hooks/src/selectors/get-app-release-by-id-query.ts b/libs/hooks/src/selectors/get-app-release-by-id-query.ts
index cfa302ce9e..2e728832fb 100644
--- a/libs/hooks/src/selectors/get-app-release-by-id-query.ts
+++ b/libs/hooks/src/selectors/get-app-release-by-id-query.ts
@@ -1,6 +1,12 @@
 import { GetAppReleaseByIdQuery } from '@akashaorg/typings/lib/sdk/graphql-operation-types-new';
 import { isNodeWithId } from './selector-utils';
 
+export const selectApp = (data: GetAppReleaseByIdQuery) => {
+  if (isNodeWithId(data)) {
+    return data.node.application;
+  }
+};
+
 export const selectAppName = (data: GetAppReleaseByIdQuery) => {
   if (isNodeWithId(data)) {
     return data.node.application.name;
diff --git a/libs/hooks/src/use-installed-extensions.ts b/libs/hooks/src/use-installed-extensions.ts
index 0fd1f0d026..b4dafd7eb4 100644
--- a/libs/hooks/src/use-installed-extensions.ts
+++ b/libs/hooks/src/use-installed-extensions.ts
@@ -1,20 +1,22 @@
 import getSDK from '@akashaorg/core-sdk';
 import { useEffect, useState } from 'react';
-import {
-  selectAppName,
-  selectAppDisplayName,
-  selectAppLogoImage,
-  selectAppDescription,
-  selectAppType,
-} from './selectors/get-app-release-by-id-query';
+import { selectApp } from './selectors/get-app-release-by-id-query';
 import { useGetAppReleaseByIdLazyQuery } from './generated';
 import { AkashaApp } from '@akashaorg/typings/lib/sdk/graphql-types-new';
 import { InstalledExtensionSchema } from '@akashaorg/core-sdk/lib/db/installed-extensions.schema';
+import { AkashaProfile } from '@akashaorg/typings/lib/ui';
 
 export type InstalledExtension = Pick<
   AkashaApp,
-  'name' | 'displayName' | 'logoImage' | 'description' | 'applicationType'
->;
+  | 'name'
+  | 'displayName'
+  | 'logoImage'
+  | 'coverImage'
+  | 'description'
+  | 'applicationType'
+  | 'description'
+  | 'nsfw'
+> & { author: AkashaProfile };
 
 export const useInstalledExtensions = () => {
   const [appReleaseLazyQuery] = useGetAppReleaseByIdLazyQuery();
@@ -33,14 +35,12 @@ export const useInstalledExtensions = () => {
           const { data } = await appReleaseLazyQuery({
             variables: { id: installedExtension.releaseId },
           });
+          const appInfo = selectApp(data);
 
           return data
             ? {
-                name: selectAppName(data),
-                displayName: selectAppDisplayName(data),
-                logoImage: selectAppLogoImage(data),
-                description: selectAppDescription(data),
-                applicationType: selectAppType(data),
+                ...appInfo,
+                author: appInfo.author?.akashaProfile,
               }
             : null;
         };