diff --git a/examples/kendo-react-freemium/src/pages/Home.tsx b/examples/kendo-react-freemium/src/pages/Home.tsx
index ce0db41a..b0fce0e3 100644
--- a/examples/kendo-react-freemium/src/pages/Home.tsx
+++ b/examples/kendo-react-freemium/src/pages/Home.tsx
@@ -34,44 +34,44 @@ export default function Home() {
         <div className="grid grid-cols-[360px_1fr] lg:grid-cols-12 xl:grid-cols-[1fr_2fr_360px] gap-6">
             <div className="col-span-2 lg:col-span-6 xl:col-span-2">
                 <Card className="rounded-2xl">
-                    <CardHeader className="!border-0">
-                        <CardTitle className="!font-medium">Projects</CardTitle>
+                    <CardHeader className="border-0">
+                        <CardTitle className="font-medium">Projects</CardTitle>
                     </CardHeader>
                     <CardBody>
                         <div className="grid grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-2">
                             <Card>
-                                <CardBody className="!flex !flex-col !justify-between">
-                                    <CardTitle className="line-clamp-5 h-25.5">AI-Powered Bug Tracking and Resolution System</CardTitle>
-                                    <div><Badge themeColor="warning" rounded="full" position={'inside'}  align={{vertical: 'bottom', horizontal: 'start'}} className="!relative">Medium priority</Badge></div>
+                                <CardBody className="flex flex-col justify-between">
+                                    <CardTitle className="font-medium line-clamp-5 h-25.5">AI-Powered Bug Tracking and Resolution System</CardTitle>
+                                    <div><Badge themeColor="warning" rounded="full" position={'inside'}  align={{vertical: 'bottom', horizontal: 'start'}} className="relative z-0">Medium priority</Badge></div>
                                 </CardBody>
                             </Card>
                             <Card>
-                                <CardBody className="!flex !flex-col !justify-between">
-                                    <CardTitle className="line-clamp-5 h-25.5">Virtual Reality Training Module for Employee Onboarding</CardTitle>
-                                    <div><Badge themeColor="success" rounded="full" position={'inside'}  align={{vertical: 'bottom', horizontal: 'start'}} className="!relative">Low priority</Badge></div>
+                                <CardBody className="flex flex-col justify-between">
+                                    <CardTitle className="font-medium line-clamp-5 h-25.5">Virtual Reality Training Module for Employee Onboarding</CardTitle>
+                                    <div><Badge themeColor="success" rounded="full" position={'inside'}  align={{vertical: 'bottom', horizontal: 'start'}} className="relative z-0">Low priority</Badge></div>
                                 </CardBody>
                             </Card>
                             <Card>
-                                <CardBody className="!flex !flex-col !justify-between">
-                                    <CardTitle className="line-clamp-5 h-25.5">Online Learning Management System (LMS)</CardTitle>
-                                    <div><Badge themeColor="error" rounded="full" position={'inside'}  align={{vertical: 'bottom', horizontal: 'start'}} className="!relative">Urgent</Badge></div>
+                                <CardBody className="flex flex-col justify-between">
+                                    <CardTitle className="font-medium line-clamp-5 h-25.5">Online Learning Management System (LMS)</CardTitle>
+                                    <div><Badge themeColor="error" rounded="full" position={'inside'}  align={{vertical: 'bottom', horizontal: 'start'}} className="relative z-0">Urgent</Badge></div>
                                 </CardBody>
                             </Card>
                             <Card className="hidden xl:flex">
-                                <CardBody className="!flex !flex-col !justify-between">
-                                    <CardTitle className="line-clamp-5 h-25.5">Telehealth and Health Tracking Application</CardTitle>
-                                    <div><Badge themeColor="success" rounded="full" position={'inside'}  align={{vertical: 'bottom', horizontal: 'start'}} className="!relative">Low priority</Badge></div>
+                                <CardBody className="flex flex-col justify-between">
+                                    <CardTitle className="font-medium line-clamp-5 h-25.5">Telehealth and Health Tracking Application</CardTitle>
+                                    <div><Badge themeColor="success" rounded="full" position={'inside'}  align={{vertical: 'bottom', horizontal: 'start'}} className="relative z-0">Low priority</Badge></div>
                                 </CardBody>
                             </Card>
                             <Card className="hidden 2xl:flex">
-                                <CardBody className="!flex !flex-col !justify-between">
-                                    <CardTitle className="line-clamp-5 h-25.5">Market Research and Analytics Tool</CardTitle>
-                                    <div><Badge themeColor="success" rounded="full" position={'inside'}  align={{vertical: 'bottom', horizontal: 'start'}} className="!relative">Low priority</Badge></div>
+                                <CardBody className="flex flex-col justify-between">
+                                    <CardTitle className="font-medium line-clamp-5 h-25.5">Market Research and Analytics Tool</CardTitle>
+                                    <div><Badge themeColor="success" rounded="full" position={'inside'}  align={{vertical: 'bottom', horizontal: 'start'}} className="relative z-0">Low priority</Badge></div>
                                 </CardBody>
                             </Card>
                         </div>
                     </CardBody>
-                    <CardFooter className="!border-0 !p-2">
+                    <CardFooter className="border-0 !p-2">
                         <Button fillMode="flat" themeColor="primary">See all</Button>
                     </CardFooter>
                 </Card>
@@ -81,16 +81,16 @@ export default function Home() {
             </div>
             <div className="col-span-1 col-span-md-4 lg:col-span-2 xl:col-span-1 h-72.5 lg:h-116">
                 <Card className="rounded-2xl">
-                    <CardHeader className="!border-0">
-                        <CardTitle className="!font-medium">Teams</CardTitle>
+                    <CardHeader className="border-0">
+                        <CardTitle className="font-medium">Teams</CardTitle>
                     </CardHeader>
                     <CardBody className="flex flex-col gap-2">
                         <Card>
                             <CardBody className="flex items-center">
                                 <Avatar>FE</Avatar>
                                 <div className="hidden lg:block">
-                                    <CardTitle className="!m-0">Frontend</CardTitle>
-                                    <CardSubtitle className="!m-0 truncate">10 members</CardSubtitle>
+                                    <CardTitle className="m-0 font-medium">Frontend</CardTitle>
+                                    <CardSubtitle className="m-0 truncate text-subtle">10 members</CardSubtitle>
                                 </div>
                             </CardBody>
                         </Card>
@@ -98,8 +98,8 @@ export default function Home() {
                             <CardBody className="flex items-center">
                                 <Avatar themeColor="secondary">BE</Avatar>
                                 <div className="hidden lg:block">
-                                    <CardTitle className="!m-0">Backend</CardTitle>
-                                    <CardSubtitle className="!m-0 truncate">10 members</CardSubtitle>
+                                    <CardTitle className="m-0 font-medium">Backend</CardTitle>
+                                    <CardSubtitle className="m-0 truncate text-subtle">10 members</CardSubtitle>
                                 </div>
                             </CardBody>
                         </Card>
@@ -107,8 +107,8 @@ export default function Home() {
                             <CardBody className="flex items-center">
                                 <Avatar themeColor="tertiary">DO</Avatar>
                                 <div className="hidden lg:block">
-                                    <CardTitle className="!m-0">DevOps</CardTitle>
-                                    <CardSubtitle className="!m-0 truncate">10 members</CardSubtitle>
+                                    <CardTitle className="m-0 font-medium">DevOps</CardTitle>
+                                    <CardSubtitle className="m-0 truncate text-subtle">10 members</CardSubtitle>
                                 </div>
                             </CardBody>
                         </Card>
@@ -116,21 +116,21 @@ export default function Home() {
                             <CardBody className="flex items-center">
                                 <Avatar>QA</Avatar>
                                 <div className="hidden lg:block">
-                                    <CardTitle className="!m-0">QA</CardTitle>
-                                    <CardSubtitle className="!m-0 truncate">10 members</CardSubtitle>
+                                    <CardTitle className="m-0 font-medium">QA</CardTitle>
+                                    <CardSubtitle className="m-0 truncate text-subtle">10 members</CardSubtitle>
                                 </div>
                             </CardBody>
                         </Card>
                     </CardBody>
-                    <CardFooter className="!border-0 !p-2">
+                    <CardFooter className="border-0 !p-2">
                         <Button fillMode="flat" themeColor="primary">See all</Button>
                     </CardFooter>
                 </Card>
             </div>
             <div className="col-span-2 lg:col-span-5 xl:col-span-1 h-116">
                 <Card className="rounded-2xl h-full">
-                    <CardHeader className="!border-0 !flex !justify-between !items-center">
-                        <CardTitle className="!font-medium">To-Do List</CardTitle>
+                    <CardHeader className="border-0 !flex !justify-between !items-center">
+                        <CardTitle className="font-medium">To-Do List</CardTitle>
                         <Button fillMode="flat" themeColor="primary" svgIcon={plusIcon}>Add more tasks</Button>
                     </CardHeader>
                     <CardBody className="h-full overflow-y-hidden">
@@ -140,8 +140,8 @@ export default function Home() {
             </div>
             <div className="col-span-2 lg:col-span-5 xl:col-span-1 h-116">
                 <Card className="rounded-2xl h-full">
-                    <CardHeader className="!border-0 !flex !justify-between !items-center">
-                        <CardTitle className="!font-medium">Tasks</CardTitle>
+                    <CardHeader className="border-0 !flex !justify-between !items-center">
+                        <CardTitle className="font-medium">Tasks</CardTitle>
                     </CardHeader>
                     <CardBody className="h-full overflow-y-hidden">
                         <Grid className="h-full" data={gridData}>
@@ -149,7 +149,7 @@ export default function Home() {
                             <GridColumn field="status" title="Status" editable={false} filterable={false} />
                         </Grid>
                     </CardBody>
-                    <CardFooter className="!border-0 !p-2">
+                    <CardFooter className="border-0 !p-2">
                         <Button fillMode="flat" themeColor="primary">See all</Button>
                     </CardFooter>
                 </Card>