diff --git a/packages/features.classroom/eslint.config.js b/packages/features.classroom/eslint.config.js
new file mode 100644
index 00000000..15768bd7
--- /dev/null
+++ b/packages/features.classroom/eslint.config.js
@@ -0,0 +1,3 @@
+import config from 'common.eslint';
+
+export default config;
diff --git a/packages/features.classroom/index.ts b/packages/features.classroom/index.ts
new file mode 100644
index 00000000..d0fda843
--- /dev/null
+++ b/packages/features.classroom/index.ts
@@ -0,0 +1 @@
+export { SubjectBadge } from './src';
diff --git a/packages/features.classroom/package.json b/packages/features.classroom/package.json
new file mode 100644
index 00000000..9d9b0cde
--- /dev/null
+++ b/packages/features.classroom/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "features.classroom",
+  "version": "0.0.0",
+  "type": "module",
+  "exports": {
+    ".": "./index.ts"
+  },
+  "license": "MIT",
+  "scripts": {
+    "dev": "tsc --watch",
+    "lint": "eslint \"**/*.{ts,tsx}\""
+  },
+  "dependencies": {
+    "common.services": "*",
+    "@xipkg/badge": "2.0.12",
+    "@xipkg/utils": "1.8.0",
+    "@xipkg/tooltip": "2.1.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.19.0",
+    "@types/node": "^20.3.1",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
+    "@xipkg/eslint": "3.2.0",
+    "@xipkg/tailwind": "0.8.1",
+    "@xipkg/typescript": "latest",
+    "common.eslint": "*",
+    "common.typescript": "*",
+    "eslint": "^9.19.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.18",
+    "globals": "^15.14.0",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.22.0"
+  },
+  "peerDependencies": {
+    "react": "19"
+  },
+  "description": "classroom features",
+  "author": "xi.effect"
+}
diff --git a/packages/features.classroom/src/index.ts b/packages/features.classroom/src/index.ts
new file mode 100644
index 00000000..11159c0a
--- /dev/null
+++ b/packages/features.classroom/src/index.ts
@@ -0,0 +1 @@
+export { SubjectBadge } from './ui';
diff --git a/packages/features.classroom/src/ui/SubjectBadge.tsx b/packages/features.classroom/src/ui/SubjectBadge.tsx
new file mode 100644
index 00000000..488c7ac5
--- /dev/null
+++ b/packages/features.classroom/src/ui/SubjectBadge.tsx
@@ -0,0 +1,38 @@
+import { Badge } from '@xipkg/badge';
+import { cn } from '@xipkg/utils';
+import { useSubjectsById } from 'common.services';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@xipkg/tooltip';
+
+type SubjectBadgePropsT = {
+  subject_id: number;
+  className?: string;
+  textStyles?: string;
+  isTooltip?: boolean;
+};
+
+export const SubjectBadge = ({
+  subject_id,
+  className,
+  textStyles,
+  isTooltip = false,
+}: SubjectBadgePropsT) => {
+  const { data: subject } = useSubjectsById(subject_id);
+
+  const badgeContent = (
+    <Badge
+      size="m"
+      className={cn('text-gray-80 bg-gray-5 rounded-lg border-none px-2 py-1', className)}
+    >
+      <span className={textStyles}>{subject?.name}</span>
+    </Badge>
+  );
+
+  if (!isTooltip) return badgeContent;
+
+  return (
+    <Tooltip delayDuration={1000}>
+      <TooltipTrigger asChild>{badgeContent}</TooltipTrigger>
+      <TooltipContent>{subject?.name}</TooltipContent>
+    </Tooltip>
+  );
+};
diff --git a/packages/features.classroom/src/ui/index.ts b/packages/features.classroom/src/ui/index.ts
new file mode 100644
index 00000000..91d6bc1f
--- /dev/null
+++ b/packages/features.classroom/src/ui/index.ts
@@ -0,0 +1 @@
+export { SubjectBadge } from './SubjectBadge';
diff --git a/packages/features.classroom/tsconfig.json b/packages/features.classroom/tsconfig.json
new file mode 100644
index 00000000..e7fb6267
--- /dev/null
+++ b/packages/features.classroom/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "include": ["src/**/*", "../common.services/src/payments/useGetRecipientInvoiceByTutor.ts"],
+  "extends": ["common.typescript/tsconfig.app.json"],
+  "exclude": ["dist", "build", "node_modules"]
+}
diff --git a/packages/pages.classrooms/package.json b/packages/pages.classrooms/package.json
index 109e2f41..e9177356 100644
--- a/packages/pages.classrooms/package.json
+++ b/packages/pages.classrooms/package.json
@@ -32,7 +32,8 @@
     "features.group.add": "*",
     "features.invites": "*",
     "features.students.list": "*",
-    "features.table": "*"
+    "features.table": "*",
+    "features.classroom": "*"
   },
   "devDependencies": {
     "@eslint/js": "^9.19.0",
diff --git a/packages/pages.classrooms/src/ui/components/cards/Card.tsx b/packages/pages.classrooms/src/ui/components/cards/Card.tsx
index 1b30bb54..8650689a 100644
--- a/packages/pages.classrooms/src/ui/components/cards/Card.tsx
+++ b/packages/pages.classrooms/src/ui/components/cards/Card.tsx
@@ -13,7 +13,7 @@ import { StatusBadge } from './StatusBadge';
 import { useCurrentUser, useDeleteClassroom, useUserByRole } from 'common.services';
 import { ClassroomPropsT } from '../../../types';
 import { useNavigate, useSearch } from '@tanstack/react-router';
-import { SubjectBadge } from './SubjectBadge';
+import { SubjectBadge } from 'features.classroom';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@xipkg/tooltip';
 import { Avatar, AvatarFallback, AvatarImage } from '@xipkg/avatar';
 
@@ -87,11 +87,18 @@ export const Card: React.FC<ClassroomPropsT & { deleted?: boolean }> = ({
       onClick={handleClick}
       className="hover:bg-gray-5 border-gray-30 bg-gray-0 relative flex cursor-pointer justify-between rounded-2xl border p-4"
     >
-      <div className="flex flex-col gap-4">
-        <div className="mt-auto mr-8 flex items-center gap-2">
+      <div className="flex max-w-full flex-col gap-4">
+        <div className="mt-auto mr-8 flex w-full max-w-[calc(100%-32px)] items-center gap-2">
           <StatusBadge status={status} kind={kind} deleted={deleted} />
 
-          {subject_id && <SubjectBadge subject_id={subject_id} />}
+          {subject_id && (
+            <SubjectBadge
+              subject_id={subject_id}
+              className="flex-1 overflow-hidden"
+              textStyles="truncate max-w-full"
+              isTooltip
+            />
+          )}
         </div>
         <div className="flex flex-row gap-2">
           {kind === 'individual' && (
diff --git a/packages/pages.classrooms/src/ui/components/cards/SubjectBadge.tsx b/packages/pages.classrooms/src/ui/components/cards/SubjectBadge.tsx
deleted file mode 100644
index 06278dcc..00000000
--- a/packages/pages.classrooms/src/ui/components/cards/SubjectBadge.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Badge } from '@xipkg/badge';
-
-import { useSubjectsById } from 'common.services';
-
-type SubjectBadgePropsT = {
-  subject_id: number;
-};
-
-export const SubjectBadge = ({ subject_id }: SubjectBadgePropsT) => {
-  const { data: subject } = useSubjectsById(subject_id);
-
-  return (
-    <Badge
-      size="m"
-      className="text-gray-80 bg-gray-5 line-clamp-1 w-auto rounded-lg border-none px-2 py-1"
-    >
-      {subject?.name}
-    </Badge>
-  );
-};
diff --git a/packages/pages.classrooms/src/ui/components/grids/CardsGridTutor.tsx b/packages/pages.classrooms/src/ui/components/grids/CardsGridTutor.tsx
index 2dc15156..e882f720 100644
--- a/packages/pages.classrooms/src/ui/components/grids/CardsGridTutor.tsx
+++ b/packages/pages.classrooms/src/ui/components/grids/CardsGridTutor.tsx
@@ -35,7 +35,7 @@ export const CardsGridTutor = () => {
 
   return (
     <div ref={parentRef} className="h-[calc(100vh-204px)] w-full overflow-auto pr-4">
-      <div className="max-xs:gap-4 grid grid-cols-1 gap-8 min-[550px]:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(320px,1fr))] gap-8">
         {items.map((classroom) => (
           <div key={classroom.id} className="classroom-card">
             <Card {...classroom} />
diff --git a/packages/pages.main/package.json b/packages/pages.main/package.json
index 28167eb1..ec9c9a9c 100644
--- a/packages/pages.main/package.json
+++ b/packages/pages.main/package.json
@@ -35,6 +35,7 @@
     "features.group.add": "*",
     "features.materials.duplicate": "*",
     "features.invoice.card": "*",
+    "features.classroom": "*",
     "pages.classrooms": "*",
     "pages.materials": "*",
     "react-hook-form": "^7.55.0",
diff --git a/packages/pages.main/src/ui/components/Classrooms/Classroom.tsx b/packages/pages.main/src/ui/components/Classrooms/Classroom.tsx
index 2e403579..696f27c2 100644
--- a/packages/pages.main/src/ui/components/Classrooms/Classroom.tsx
+++ b/packages/pages.main/src/ui/components/Classrooms/Classroom.tsx
@@ -5,7 +5,7 @@ import { Arrow, Conference } from '@xipkg/icons';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@xipkg/tooltip';
 import { Avatar, AvatarFallback, AvatarImage } from '@xipkg/avatar';
 import { useCurrentUser, useUserByRole } from 'common.services';
-import { SubjectBadge } from './SubjectBadge';
+import { SubjectBadge } from 'features.classroom';
 
 type UserAvatarPropsT = {
   classroom: IndividualClassroomT;
@@ -85,7 +85,12 @@ export const Classroom = ({ classroom, isLoading }: ClassroomProps) => {
       </Tooltip>
 
       {classroom.subject_id ? (
-        <SubjectBadge subject_id={classroom.subject_id} />
+        <SubjectBadge
+          subject_id={classroom.subject_id}
+          isTooltip
+          className="max-w-[calc(100%-32px)] overflow-hidden"
+          textStyles="truncate max-w-full"
+        />
       ) : (
         <div className="h-7 w-7" />
       )}
diff --git a/packages/pages.main/src/ui/components/Classrooms/SubjectBadge.tsx b/packages/pages.main/src/ui/components/Classrooms/SubjectBadge.tsx
deleted file mode 100644
index cd50ba7b..00000000
--- a/packages/pages.main/src/ui/components/Classrooms/SubjectBadge.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Badge } from '@xipkg/badge';
-
-import { useSubjectsById } from 'common.services';
-
-type SubjectBadgePropsT = {
-  subject_id: number;
-};
-
-export const SubjectBadge = ({ subject_id }: SubjectBadgePropsT) => {
-  const { data: subject } = useSubjectsById(subject_id);
-
-  return (
-    <Badge size="m" className="text-gray-80 bg-gray-5 rounded-lg border-none px-2 py-1">
-      {subject?.name}
-    </Badge>
-  );
-};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b9e91718..2006514c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1057,6 +1057,70 @@ importers:
         specifier: ^8.22.0
         version: 8.53.0(eslint@9.39.2)(typescript@5.7.3)
 
+  packages/features.classroom:
+    dependencies:
+      '@xipkg/badge':
+        specifier: 2.0.12
+        version: 2.0.12(react@19.2.3)
+      '@xipkg/tooltip':
+        specifier: 2.1.0
+        version: 2.1.0(@types/react-dom@19.2.3)(@types/react@19.2.8)(react-dom@19.2.3)(react@19.2.3)
+      '@xipkg/utils':
+        specifier: 1.8.0
+        version: 1.8.0(react@19.2.3)
+      common.services:
+        specifier: '*'
+        version: link:../common.services
+      react:
+        specifier: '19'
+        version: 19.2.3
+    devDependencies:
+      '@eslint/js':
+        specifier: ^9.19.0
+        version: 9.39.2
+      '@types/node':
+        specifier: ^20.3.1
+        version: 20.19.30
+      '@types/react':
+        specifier: ^19.0.2
+        version: 19.2.8
+      '@types/react-dom':
+        specifier: ^19.0.2
+        version: 19.2.3(@types/react@19.2.8)
+      '@xipkg/eslint':
+        specifier: 3.2.0
+        version: 3.2.0(eslint-plugin-jsx-a11y@6.10.2)(eslint@9.39.2)(turbo@2.7.5)(typescript@5.7.3)
+      '@xipkg/tailwind':
+        specifier: 0.8.1
+        version: 0.8.1
+      '@xipkg/typescript':
+        specifier: latest
+        version: 0.2.0
+      common.eslint:
+        specifier: '*'
+        version: link:../common.eslint
+      common.typescript:
+        specifier: '*'
+        version: link:../common.typescript
+      eslint:
+        specifier: ^9.19.0
+        version: 9.39.2
+      eslint-plugin-react-hooks:
+        specifier: ^5.0.0
+        version: 5.2.0(eslint@9.39.2)
+      eslint-plugin-react-refresh:
+        specifier: ^0.4.18
+        version: 0.4.18(eslint@9.39.2)
+      globals:
+        specifier: ^15.14.0
+        version: 15.15.0
+      typescript:
+        specifier: ~5.7.2
+        version: 5.7.3
+      typescript-eslint:
+        specifier: ^8.22.0
+        version: 8.53.0(eslint@9.39.2)(typescript@5.7.3)
+
   packages/features.group.add:
     dependencies:
       '@hookform/resolvers':
@@ -3315,6 +3379,9 @@ importers:
       common.ui:
         specifier: '*'
         version: link:../common.ui
+      features.classroom:
+        specifier: '*'
+        version: link:../features.classroom
       features.group.add:
         specifier: '*'
         version: link:../features.group.add
@@ -3754,6 +3821,9 @@ importers:
       common.ui:
         specifier: '*'
         version: link:../common.ui
+      features.classroom:
+        specifier: '*'
+        version: link:../features.classroom
       features.group.add:
         specifier: '*'
         version: link:../features.group.add