diff --git a/examples/kendo-react-freemium/src/App.tsx b/examples/kendo-react-freemium/src/App.tsx
index edd41298..93e8198b 100644
--- a/examples/kendo-react-freemium/src/App.tsx
+++ b/examples/kendo-react-freemium/src/App.tsx
@@ -8,6 +8,7 @@ import Tasks from "./pages/Tasks";
 import Settings from "./pages/Settings";
 import Team from "./pages/Team";
 import Task from "./pages/Task";
+import NewTask from "./pages/NewTask";
 
 export default function App() {
   return (
@@ -20,6 +21,7 @@ export default function App() {
                 <Route path="/projects" element={<Projects />} />
                 <Route path="/tasks" element={<Tasks />} />
                 <Route path="/tasks/:taskId" element={<Task />} />
+                <Route path="/tasks/new" element={<NewTask />} />
                 <Route path="/team-management" element={<TeamManagement />} />
                 <Route path="/team-management/:teamId" element={<Team />} />
                 <Route path="/settings" element={<Settings />} />
diff --git a/examples/kendo-react-freemium/src/pages/Home.tsx b/examples/kendo-react-freemium/src/pages/Home.tsx
index 8f4d98f9..55a3965e 100644
--- a/examples/kendo-react-freemium/src/pages/Home.tsx
+++ b/examples/kendo-react-freemium/src/pages/Home.tsx
@@ -7,7 +7,6 @@ import { Calendar } from "@progress/kendo-react-dateinputs";
 import { ListView, ListViewItemWrapper } from "@progress/kendo-react-listview";
 import { pencilIcon, plusIcon, trashIcon } from "@progress/kendo-svg-icons";
 import { tasksData, listData, projectsData, teamsData } from "./data";
-import React from "react";
 import { useNavigate } from "react-router-dom";
 
 const ListItemRender = (props: any) => {
@@ -24,27 +23,18 @@ const ListItemRender = (props: any) => {
 
 export default function Home() {
     const navigate = useNavigate();
-    const [showAllProjects, setShowAllProjects] = React.useState(false);
-    const [showAllTeams, setShowAllTeams] = React.useState(false);
-    const [showAllTasks, setShowAllTasks] = React.useState(false);
-
     const handleSeeAllProjectsClick = () => {
-        setShowAllProjects(!showAllProjects);
+        navigate('/projects');
     };
 
     const handleSeeAllTeamsClick = () => {
-        setShowAllTeams(!showAllTeams);
+        navigate('/team-management');
     };
 
     const handleSeeAllTasksClick = () => {
-        setShowAllTasks(!showAllTasks);
+        navigate('/tasks');
     }
 
-    const projectsToShow = showAllProjects ? projectsData : projectsData.slice(0, 5);
-    const teamsToShow = showAllTeams ? teamsData : teamsData.slice(0, 4);
-
-    const tasksToShow = showAllTasks ? tasksData : tasksData.slice(0, 5);
-
   return (
     <>
       <div style={{ minHeight: 'calc(100vh - 106px)'}} className="bg-linear-[119deg,_#F8F9FF_-1.78%,_#F3F2FF_47.75%,_#E6F5FF_97.28%] p-10">
@@ -57,8 +47,8 @@ export default function Home() {
                     </CardHeader>
                     <CardBody>
                               <div className="grid grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-2">
-                                  {projectsToShow.map((project, index) => {
-                                      return <Card key={'project-' + index}>
+                                  {projectsData.slice(0, 5).map((project, index) => {
+                                      return <Card key={'project-' + index} className={`${index === 3 || index === 4 ? 'hidden 2xl:flex' : ''}`}>
                                           <CardBody className="flex flex-col justify-between">
                                               <div onClick={() => navigate('/projects')} className="cursor-pointer">
                                                 <CardTitle className="font-medium line-clamp-5 h-25.5">{project.ProjectName}</CardTitle>
@@ -80,7 +70,7 @@ export default function Home() {
                         </div>
                     </CardBody>
                     <CardFooter className="border-0 p-2">
-                              <Button fillMode="flat" themeColor="primary" onClick={handleSeeAllProjectsClick}>{!showAllProjects ? 'See all' : 'Collapse'}</Button>
+                              <Button fillMode="flat" themeColor="primary" onClick={handleSeeAllProjectsClick}>See all</Button>
                     </CardFooter>
                 </Card>
             </div>
@@ -93,7 +83,7 @@ export default function Home() {
                         <CardTitle className="font-medium">Teams</CardTitle>
                     </CardHeader>
                     <CardBody className="flex flex-col gap-2">
-                        {teamsToShow.map((team, index) => {
+                        {teamsData.slice(0, 4).map((team, index) => {
                             return <Card key={'team-' + index}>
                                     <div onClick={() => navigate('/team-management')} className="cursor-pointer">
                                 <CardBody className="flex items-center">
@@ -108,7 +98,7 @@ export default function Home() {
                         })}
                     </CardBody>
                     <CardFooter className="border-0 p-2">
-                        <Button fillMode="flat" themeColor="primary" onClick={handleSeeAllTeamsClick}>{!showAllTeams ? 'See all' : 'Collapse'}</Button>
+                        <Button fillMode="flat" themeColor="primary" onClick={handleSeeAllTeamsClick}>See all</Button>
                     </CardFooter>
                 </Card>
             </div>
@@ -129,13 +119,13 @@ export default function Home() {
                         <CardTitle className="font-medium">Tasks</CardTitle>
                     </CardHeader>
                     <CardBody className="h-full overflow-y-hidden">
-                        <Grid className="h-full" data={tasksToShow}>
+                        <Grid className="h-full" data={tasksData}>
                             <GridColumn field="taskName" title="Task Name" />
                             <GridColumn field="status" title="Status" width={115} />
                         </Grid>
                     </CardBody>
                     <CardFooter className="border-0 p-2">
-                              <Button fillMode="flat" themeColor="primary" onClick={handleSeeAllTasksClick}>{!showAllTasks ? 'See all' : 'Collapse'}</Button>
+                              <Button fillMode="flat" themeColor="primary" onClick={handleSeeAllTasksClick}>See all</Button>
                     </CardFooter>
                 </Card>
             </div>
diff --git a/examples/kendo-react-freemium/src/pages/NewTask.tsx b/examples/kendo-react-freemium/src/pages/NewTask.tsx
new file mode 100644
index 00000000..5395baa0
--- /dev/null
+++ b/examples/kendo-react-freemium/src/pages/NewTask.tsx
@@ -0,0 +1,230 @@
+import { useParams } from "react-router";
+import { useNavigate } from "react-router-dom";
+import { priorities, projectManagers, projectsData, tasksData, taskTags } from "./data";
+import { Button } from "@progress/kendo-react-buttons";
+import { Avatar, Breadcrumb, BreadcrumbLinkMouseEvent, ExpansionPanel, ExpansionPanelContent } from "@progress/kendo-react-layout";
+import { homeIcon, folderIcon, trashIcon, checkIcon } from "@progress/kendo-svg-icons";
+import { SvgIcon } from "@progress/kendo-react-common";
+import { Reveal } from '@progress/kendo-react-animation';
+import React, { ReactElement } from "react";
+import { TextArea } from "@progress/kendo-react-inputs";
+import { DropDownList, ListItemProps, MultiSelect, TagData } from "@progress/kendo-react-dropdowns";
+import { DateInput } from "@progress/kendo-react-dateinputs";
+import { FloatingLabel } from "@progress/kendo-react-labels";
+import { Badge } from "@progress/kendo-react-indicators";
+
+interface DataModel {
+  id: string;
+  text?: string;
+  icon?: React.ReactNode;
+}
+
+export default function Task() {
+  let params = useParams();
+  const navigate = useNavigate();
+  const [projExpanded, setProjExpanded] = React.useState(true);
+  const [dateExpanded, setDateExpanded] = React.useState(true);
+  const [assigneeExpanded, setAssigneeExpanded] = React.useState(true);
+  const [priorityExpanded, setPriorityExpanded] = React.useState(true);
+  const [statusExpanded, setStatusExpanded] = React.useState(true);
+  const [tagsExpanded, setTagsExpanded] = React.useState(true);
+  const [project, setProject] = React.useState<string>();
+  const [assignee, setAssignee] = React.useState<string[]>();
+  const [dueDate, setDueDate] = React.useState<Date>();
+  const [priority, setPriority] = React.useState<string>();
+  const [status, setStatus] = React.useState<string>();
+  const [tag, setTag] = React.useState<string[]>();
+  const projects = projectsData.map(proj => { return proj.ProjectName }).slice(0, 10);
+  const assignees = tasksData.map(task => { return task.assignedTo });
+  const statuses = tasksData.map(task => { return task.status });
+
+  const breadcrumbItems: DataModel[] = [
+    {
+        id: "home",
+        icon: <SvgIcon icon={homeIcon} />,
+    },
+    {
+        id: "tasks",
+        text: "Tasks",
+    },
+    {
+        id: `${params.taskId}`,
+        text: `New Task`,
+    }
+  ];
+
+  const handleItemSelect = (e: BreadcrumbLinkMouseEvent) => {
+    if (e.id === 'home') {
+      navigate('/');
+    } else if (e.id === 'tasks') {
+      navigate('/tasks');
+    }
+  }
+
+  const tagRender = (tagData: TagData, li: ReactElement<any>) => React.cloneElement(li, li.props, [
+    <span key={assignees.indexOf(tagData.data[0])} className="k-chip-label">
+    <Avatar rounded="full" type="image" size="small" className="k-chip-avatar mr-1">
+      <img src={projectManagers.map(manager => manager.name === tagData.data[0] ? manager.avatarSrc : "").filter(src => src !== "")[0]} alt="user-image" />
+    </Avatar>
+    {tagData.data[0]}
+    </span>, li.props.children]);
+
+  const itemRender = (li: React.ReactElement<HTMLLIElement>, itemProps: ListItemProps) => {
+    const index = itemProps.index;
+    console.log(itemProps);
+    const itemChildren = (
+      <span key={index}>
+        <Avatar rounded="full" type="image" size="small" className="mr-1">
+            <img src={projectManagers.map(manager => manager.name === itemProps.dataItem ? manager.avatarSrc : "").filter(src => src !== "")[0]} alt="user-image" />
+          </Avatar>
+            {li.props.children as any} {index}
+        </span>
+    );
+
+    return React.cloneElement(li, li.props, itemChildren);
+};
+
+  const priorityValueRender = (element: React.ReactElement<HTMLSpanElement>, value: any) => {
+    if (!value) {
+        return element;
+    }
+
+    const children = [
+      <Badge
+          key={value}
+          rounded="full"
+          position="inside"
+          className="!relative !z-0"
+          themeColor={
+            value === "Urgent"
+              ? "error"
+              : value === "Medium priority"
+              ? "warning"
+              : value === "Low priority"
+              ? "success"
+              : value === "Routine"
+              ? "tertiary"
+              : "primary"
+          }
+        >
+          {element.props.children as any}
+        </Badge>
+    ];
+
+    return React.cloneElement(element, { ...element.props }, children);
+  };
+
+  const priorityItemRender = (li: React.ReactElement<HTMLLIElement>, itemProps: ListItemProps) => {
+    const itemChildren = (
+      <Badge
+      rounded="full"
+      position="inside"
+      className="!relative !z-0"
+      themeColor={
+        itemProps.dataItem === "Urgent"
+          ? "error"
+          : itemProps.dataItem === "Medium priority"
+          ? "warning"
+          : itemProps.dataItem === "Low priority"
+          ? "success"
+          : itemProps.dataItem === "Routine"
+          ? "tertiary"
+          : "primary"
+      }
+    >
+      {li.props.children as any}
+    </Badge>
+    );
+
+    return React.cloneElement(li, li.props, itemChildren);
+};
+
+  return (
+      <>
+          <div style={{minHeight: 'calc(100vh - 106px)'}} className="flex flex-col p-10 gap-6">
+            <Breadcrumb data={breadcrumbItems} onItemSelect={handleItemSelect} className="!bg-app-surface" />
+
+            <h1 className="text-4xl">New Task</h1>
+
+            <div className="grid grid-cols-12 gap-6">
+                  <div className="col-span-6 lg:col-span-8">
+                      <TextArea rows={30} className="rounded-t-2xl"/>
+                      <div className="bg-surface-alt border-1 border-t-0 border-border rounded-b-2xl px-4 py-2">
+                          <div className="hidden lg:flex gap-1">
+                              <Button svgIcon={checkIcon} themeColor="primary" size="large">Save changes</Button>
+                              <Button svgIcon={folderIcon} fillMode="flat" size="large" className="ml-auto">Archive Task</Button>
+                              <Button svgIcon={trashIcon} fillMode="flat" themeColor="error" size="large">Delete task</Button>
+                          </div>
+                          <div className="flex lg:hidden gap-1">
+                              <Button svgIcon={checkIcon} themeColor="primary" size="large">Save changes</Button>
+                              <Button svgIcon={folderIcon} fillMode="flat" size="large" className="ml-auto">Archive Task</Button>
+                              <Button svgIcon={trashIcon} fillMode="flat" themeColor="error" size="large">Delete task</Button>
+                          </div>
+                      </div>
+                  </div>
+
+                  <div className="col-span-6 lg:col-span-4 flex flex-col gap-2">
+                      <ExpansionPanel title="Project" expanded={projExpanded} onAction={() => setProjExpanded(!projExpanded)} className="rounded-2xl">
+                          <Reveal>
+                            {projExpanded && <ExpansionPanelContent>
+                              <FloatingLabel label="Choose project" editorId={'project'} editorValue={project} className="flex">
+                                  <DropDownList size="large" value={project} onChange={e => setProject(e.value as string)} data={projects} />
+                                </FloatingLabel>
+                              </ExpansionPanelContent>}
+                          </Reveal>
+                        </ExpansionPanel>
+                        <ExpansionPanel title="Assigned to" expanded={assigneeExpanded} onAction={() => setAssigneeExpanded(!assigneeExpanded)} className="rounded-2xl">
+                          <Reveal>
+                              {assigneeExpanded && <ExpansionPanelContent>
+                                <FloatingLabel label="Select assignee(s)" editorId={'assignee'} editorValue={assigneeExpanded} className="flex">
+                                    <MultiSelect size="large" data={assignees} value={assignee} onChange={e => setAssignee([...e.value] as string[])} tagRender={tagRender} itemRender={itemRender} />
+                                </FloatingLabel>
+                              </ExpansionPanelContent>}
+                          </Reveal>
+                      </ExpansionPanel>
+                      <ExpansionPanel title="Due Date" expanded={dateExpanded} onAction={() => setDateExpanded(!dateExpanded)} className="rounded-2xl">
+                          <Reveal>
+                              {dateExpanded && <ExpansionPanelContent>
+                                <FloatingLabel label="Set due date" editorId={'due-date'} editorValue={dateExpanded} className="flex">
+                                    <DateInput size="large" value={dueDate} onChange={e => setDueDate(e.value as Date)} />
+                                </FloatingLabel>
+                              </ExpansionPanelContent>}
+                          </Reveal>
+                      </ExpansionPanel>
+                      <ExpansionPanel title="Priority" expanded={priorityExpanded} onAction={() => setPriorityExpanded(!priorityExpanded)} className="rounded-2xl">
+                          <Reveal>
+                            {priorityExpanded && <ExpansionPanelContent>
+                                <FloatingLabel label="Choose project" editorId={'priority'} editorValue={priority} className="flex">
+                                  <DropDownList size="large" value={priority} onChange={e => setPriority(e.value as string)} data={priorities} valueRender={priorityValueRender} itemRender={priorityItemRender} />
+                                </FloatingLabel>
+                              </ExpansionPanelContent>}
+                          </Reveal>
+                        </ExpansionPanel>
+                      <ExpansionPanel title="Status" expanded={statusExpanded} onAction={() => setStatusExpanded(!statusExpanded)} className="rounded-2xl">
+                          <Reveal>
+                              {statusExpanded && <ExpansionPanelContent>
+                                <FloatingLabel label="Select status" editorId={'status'} editorValue={statusExpanded} className="flex">
+                                    <DropDownList size="large" data={statuses} value={status} onChange={e => setStatus(e.value as string)} />
+                                </FloatingLabel>
+                              </ExpansionPanelContent>}
+                          </Reveal>
+                      </ExpansionPanel>
+                      <ExpansionPanel title="Tags" expanded={tagsExpanded} onAction={() => setTagsExpanded(!tagsExpanded)} className="rounded-2xl">
+                          <Reveal>
+                              {tagsExpanded && <ExpansionPanelContent>
+                                <FloatingLabel label="Select tags" editorId={'tags'} editorValue={tagsExpanded} className="flex">
+                                    <MultiSelect size="large" data={taskTags} value={tag} onChange={e => setTag([...e.value] as string[])} />
+                                </FloatingLabel>
+                              </ExpansionPanelContent>}
+                          </Reveal>
+                      </ExpansionPanel>
+                  </div>
+              </div>
+
+          </div>
+           <div className="bg-surface-alt color-subtle p-2 text-center">
+               <span>Copyright &#169; 2025 Progress Software. All rights reserved.</span>
+           </div>
+       </>
+  )
+}
\ No newline at end of file
diff --git a/examples/kendo-react-freemium/src/pages/Settings.tsx b/examples/kendo-react-freemium/src/pages/Settings.tsx
index 9e2cf9ec..d63ca5b3 100644
--- a/examples/kendo-react-freemium/src/pages/Settings.tsx
+++ b/examples/kendo-react-freemium/src/pages/Settings.tsx
@@ -129,7 +129,7 @@ export default function Settings() {
                   </div>
                   <span className="text-lg text-subtle font-bold">Contacts</span>
                   <div className="grid grid-cols-2 gap-6">
-                      <FloatingLabel label="Country" editorId={'country'} editorValue={countryValue}>
+                      <FloatingLabel label="Country" editorId={'country'} editorValue={countryValue} optional={true}>
                         <TextBox size="large" value={countryValue} onChange={e => setCountryValue(e.value as string)} suffix={() => {
                           return (
                           <InputSuffix>
@@ -137,7 +137,7 @@ export default function Settings() {
                           </InputSuffix>)
                         }} />
                           </FloatingLabel>
-                      <FloatingLabel label="City" editorId={'city'} editorValue={cityValue}>
+                      <FloatingLabel label="City" editorId={'city'} editorValue={cityValue} optional={true}>
                           <TextBox size="large" value={cityValue} onChange={e => setCityValue(e.value as string)} suffix={() => {
                             return (
                             <InputSuffix>
@@ -145,7 +145,7 @@ export default function Settings() {
                             </InputSuffix>)
                           }}/>
                       </FloatingLabel>
-                      <FloatingLabel label="Address" editorId={'address'} editorValue={addressValue}>
+                      <FloatingLabel label="Address" editorId={'address'} editorValue={addressValue} optional={true}>
                           <TextBox size="large" value={addressValue} onChange={e => setAddresslValue(e.value as string)} suffix={() => {
                             return (
                             <InputSuffix>
diff --git a/examples/kendo-react-freemium/src/pages/Task.tsx b/examples/kendo-react-freemium/src/pages/Task.tsx
index db515ca2..99ea5750 100644
--- a/examples/kendo-react-freemium/src/pages/Task.tsx
+++ b/examples/kendo-react-freemium/src/pages/Task.tsx
@@ -1,6 +1,6 @@
 import { useParams } from "react-router";
 import { useNavigate } from "react-router-dom";
-import { priorities, projectManagers, projectsData, tasksData } from "./data";
+import { priorities, projectManagers, projectsData, tasksData, taskTags } from "./data";
 import { Button } from "@progress/kendo-react-buttons";
 import { Avatar, Breadcrumb, BreadcrumbLinkMouseEvent, ExpansionPanel, ExpansionPanelContent } from "@progress/kendo-react-layout";
 import { homeIcon, folderIcon, trashIcon, checkIcon } from "@progress/kendo-svg-icons";
@@ -37,8 +37,7 @@ export default function Task() {
   const [tag, setTag] = React.useState(tasksData.filter(task => task.taskId === params.taskId)[0].tags as string[]);
   const projects = projectsData.map(proj => { return proj.ProjectName }).slice(0, 10);
   const assignees = tasksData.map(task => { return task.assignedTo });
-  const statuses = tasksData.map(task => { return task.status });
-  const tags = tasksData.map(task => { return task.tags });
+  const statuses = tasksData.map(task => { return task.status });;
 
   const breadcrumbItems: DataModel[] = [
     {
@@ -225,7 +224,7 @@ Monitor key metrics post-launch to evaluate the effectiveness of the content man
                       <ExpansionPanel title="Priority" expanded={priorityExpanded} onAction={() => setPriorityExpanded(!priorityExpanded)} className="rounded-2xl">
                           <Reveal>
                             {priorityExpanded && <ExpansionPanelContent>
-                                <FloatingLabel label="Priority" editorId={'priority'} editorValue={priority} className="flex">
+                                <FloatingLabel label="Choose project" editorId={'priority'} editorValue={priority} className="flex">
                                   <DropDownList size="large" value={priority} onChange={e => setPriority(e.value as string)} data={priorities} valueRender={priorityValueRender} itemRender={priorityItemRender} />
                                 </FloatingLabel>
                               </ExpansionPanelContent>}
@@ -234,7 +233,7 @@ Monitor key metrics post-launch to evaluate the effectiveness of the content man
                       <ExpansionPanel title="Status" expanded={statusExpanded} onAction={() => setStatusExpanded(!statusExpanded)} className="rounded-2xl">
                           <Reveal>
                               {statusExpanded && <ExpansionPanelContent>
-                                <FloatingLabel label="Select assignee(s)" editorId={'status'} editorValue={statusExpanded} className="flex">
+                                <FloatingLabel label="Select status" editorId={'status'} editorValue={statusExpanded} className="flex">
                                     <DropDownList size="large" data={statuses} value={status} onChange={e => setStatus(e.value as string)} />
                                 </FloatingLabel>
                               </ExpansionPanelContent>}
@@ -244,7 +243,7 @@ Monitor key metrics post-launch to evaluate the effectiveness of the content man
                           <Reveal>
                               {tagsExpanded && <ExpansionPanelContent>
                                 <FloatingLabel label="Select tags" editorId={'tags'} editorValue={tagsExpanded} className="flex">
-                                    <MultiSelect size="large" data={tags} value={tag} onChange={e => setTag([...e.value] as string[])} />
+                                    <MultiSelect size="large" data={taskTags} value={tag} onChange={e => setTag([...e.value] as string[])} />
                                 </FloatingLabel>
                               </ExpansionPanelContent>}
                           </Reveal>
diff --git a/examples/kendo-react-freemium/src/pages/Tasks.tsx b/examples/kendo-react-freemium/src/pages/Tasks.tsx
index a0be8afc..90ec48a6 100644
--- a/examples/kendo-react-freemium/src/pages/Tasks.tsx
+++ b/examples/kendo-react-freemium/src/pages/Tasks.tsx
@@ -32,6 +32,10 @@ export default function Tasks() {
     }
   };
 
+  const addNewTask = () => {
+    navigate("/tasks/new");
+  };
+
   const filterChange = (event: GridFilterChangeEvent) => {
     setFilter(event.filter);
     setData(filterBy(tasksData, event.filter));
@@ -66,7 +70,7 @@ export default function Tasks() {
 
       <div className="flex flex-wrap items-center justify-between">
         <h1 className="text-4xl">Tasks</h1>
-        <Button themeColor="primary" fillMode="outline" svgIcon={plusIcon}>Add new task</Button>
+        <Button themeColor="primary" fillMode="outline" svgIcon={plusIcon} onClick={addNewTask}>Add new task</Button>
       </div>
 
       <Grid
diff --git a/examples/kendo-react-freemium/src/pages/data.ts b/examples/kendo-react-freemium/src/pages/data.ts
index ba6dfafd..456fd148 100644
--- a/examples/kendo-react-freemium/src/pages/data.ts
+++ b/examples/kendo-react-freemium/src/pages/data.ts
@@ -153,6 +153,24 @@ export const projectsData = [
 ];
 
 // TASKS PAGE
+export const taskTags = [
+  "Feature Development",
+  "Phase 1",
+  "Research",
+  "Q1 Release",
+  "Client",
+  "Internal",
+  "Innovation",
+  "Maintenance",
+  "Java",
+  "Python",
+  "JavaScript",
+  "React",
+  "Node.js",
+  "SQL",
+  "Bug Fix"
+];
+
 export const tasksData = [
   {
     taskId: '2213',