diff --git a/src/frontend/apps/desk/src/features/teams/components/CardCreateTeam.tsx b/src/frontend/apps/desk/src/features/teams/components/CardCreateTeam.tsx
new file mode 100644
index 0000000..a5e41cc
--- /dev/null
+++ b/src/frontend/apps/desk/src/features/teams/components/CardCreateTeam.tsx
@@ -0,0 +1,73 @@
+import { Button, Input, Loader } from '@openfun/cunningham-react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import IconGroup from '@/assets/icons/icon-group2.svg';
+import { Box, Card, StyledLink, Text, TextErrors } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
+
+import { useCreateTeam } from '../api';
+
+export const CardCreateTeam = () => {
+  const { t } = useTranslation();
+  const router = useRouter();
+  const {
+    mutate: createTeam,
+    isError,
+    isPending,
+    error,
+  } = useCreateTeam({
+    onSuccess: (team) => {
+      router.push(`/teams/${team.id}`);
+    },
+  });
+  const [teamName, setTeamName] = useState('');
+  const { colorsTokens } = useCunninghamTheme();
+
+  return (
+    <Card
+      className="p-b"
+      $height="70%"
+      $justify="space-between"
+      $width="100%"
+      $maxWidth="24rem"
+      $minWidth="22rem"
+      aria-label={t('Create new team card')}
+    >
+      <Box $gap="1rem">
+        <Box $align="center">
+          <IconGroup
+            width={44}
+            color={colorsTokens()['primary-text']}
+            aria-label={t('icon group')}
+          />
+          <Text as="h3" $textAlign="center">
+            {t('Name the team')}
+          </Text>
+        </Box>
+        <Input
+          fullWidth
+          type="text"
+          label={t('Team name')}
+          onChange={(e) => setTeamName(e.target.value)}
+          rightIcon={<span className="material-icons">edit</span>}
+        />
+        {isError && error && <TextErrors causes={error.cause} />}
+        {isPending && (
+          <Box $align="center">
+            <Loader />
+          </Box>
+        )}
+      </Box>
+      <Box $justify="space-between" $direction="row" $align="center">
+        <StyledLink href="/">
+          <Button color="secondary">{t('Cancel')}</Button>
+        </StyledLink>
+        <Button onClick={() => createTeam(teamName)} disabled={!teamName}>
+          {t('Create the team')}
+        </Button>
+      </Box>
+    </Card>
+  );
+};
diff --git a/src/frontend/apps/desk/src/features/teams/components/index.ts b/src/frontend/apps/desk/src/features/teams/components/index.ts
index 38dec09..92dda9f 100644
--- a/src/frontend/apps/desk/src/features/teams/components/index.ts
+++ b/src/frontend/apps/desk/src/features/teams/components/index.ts
@@ -1,2 +1,3 @@
+export * from './CardCreateTeam';
 export * from './Panel/Panel';
 export * from './TeamInfo';
diff --git a/src/frontend/apps/desk/src/pages/teams/create.tsx b/src/frontend/apps/desk/src/pages/teams/create.tsx
index 4498b76..59f3233 100644
--- a/src/frontend/apps/desk/src/pages/teams/create.tsx
+++ b/src/frontend/apps/desk/src/pages/teams/create.tsx
@@ -1,78 +1,15 @@
-import { Button, Input, Loader } from '@openfun/cunningham-react';
-import { useRouter } from 'next/navigation';
-import { ReactElement, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { ReactElement } from 'react';
 
-import IconGroup from '@/assets/icons/icon-group2.svg';
-import { Box, Card, StyledLink, Text } from '@/components';
-import { TextErrors } from '@/components/TextErrors';
-import { useCunninghamTheme } from '@/cunningham';
-import { useCreateTeam } from '@/features/teams';
+import { Box } from '@/components';
+import { CardCreateTeam } from '@/features/teams';
 import { NextPageWithLayout } from '@/types/next';
 
 import TeamLayout from './TeamLayout';
 
 const Page: NextPageWithLayout = () => {
-  const { t } = useTranslation();
-  const router = useRouter();
-  const {
-    mutate: createTeam,
-    isError,
-    isPending,
-    error,
-  } = useCreateTeam({
-    onSuccess: (team) => {
-      router.push(`/teams/${team.id}`);
-    },
-  });
-  const [teamName, setTeamName] = useState('');
-  const { colorsTokens } = useCunninghamTheme();
-
   return (
     <Box className="p-l" $justify="center" $align="start" $height="inherit">
-      <Card
-        className="p-b"
-        $height="70%"
-        $justify="space-between"
-        $width="100%"
-        $maxWidth="24rem"
-        $minWidth="22rem"
-        aria-label={t('Create new team card')}
-      >
-        <Box $gap="1rem">
-          <Box $align="center">
-            <IconGroup
-              width={44}
-              color={colorsTokens()['primary-text']}
-              aria-label={t('icon group')}
-            />
-            <Text as="h3" $textAlign="center">
-              {t('Name the team')}
-            </Text>
-          </Box>
-          <Input
-            fullWidth
-            type="text"
-            label={t('Team name')}
-            onChange={(e) => setTeamName(e.target.value)}
-            rightIcon={<span className="material-icons">edit</span>}
-          />
-          {isError && error && <TextErrors causes={error.cause} />}
-          {isPending && (
-            <Box $align="center">
-              <Loader />
-            </Box>
-          )}
-        </Box>
-        <Box $justify="space-between" $direction="row" $align="center">
-          <StyledLink href="/">
-            <Button color="secondary">{t('Cancel')}</Button>
-          </StyledLink>
-          <Button onClick={() => createTeam(teamName)} disabled={!teamName}>
-            {t('Create the team')}
-          </Button>
-        </Box>
-      </Card>
+      <CardCreateTeam />
     </Box>
   );
 };