diff --git a/samples/Blazor.Toolkit.Samples.Client/Layout/MainLayout.razor b/samples/Blazor.Toolkit.Samples.Client/Layout/MainLayout.razor
index 0e1831a..f1ad34e 100644
--- a/samples/Blazor.Toolkit.Samples.Client/Layout/MainLayout.razor
+++ b/samples/Blazor.Toolkit.Samples.Client/Layout/MainLayout.razor
@@ -574,6 +574,9 @@
     .toc-item:hover {
         border-left-color: color-mix(in srgb, var(--accent) 28%, transparent) !important;
     }
+    .page-rtl .toc-item:hover {
+        border-right-color: color-mix(in srgb, var(--accent) 28%, transparent) !important;
+    }
 
     /* Existing UI rules */
     .search-popup.e-dialog.e-popup {
@@ -646,7 +649,8 @@
         padding: 0 5px;
     }
     .page-rtl .right-panel,
-    .page-rtl .top-left  {
+    .page-rtl .top-left,
+    .page-rtl .sidebar {
         direction: ltr;
     }
     .top-layout-title .syncfusion-logo {
diff --git a/samples/Blazor.Toolkit.Samples.Client/Layout/NavMenu.razor.css b/samples/Blazor.Toolkit.Samples.Client/Layout/NavMenu.razor.css
index 87b8feb..9701486 100644
--- a/samples/Blazor.Toolkit.Samples.Client/Layout/NavMenu.razor.css
+++ b/samples/Blazor.Toolkit.Samples.Client/Layout/NavMenu.razor.css
@@ -146,9 +146,10 @@ details[open] > .menu-summary::after {
 
 .sidebar ::deep li a.nav-link {
     font-size: .8125rem;
-    font-weight: 400;
+    font-weight: 600 !important;
     font-stretch: 100%;
     line-height: 1.45;
+    letter-spacing: .18px;
 }
 
 .open-page {
diff --git a/samples/Blazor.Toolkit.Samples.Client/Layout/RightToc.razor b/samples/Blazor.Toolkit.Samples.Client/Layout/RightToc.razor
index c2e5213..e03c2c1 100644
--- a/samples/Blazor.Toolkit.Samples.Client/Layout/RightToc.razor
+++ b/samples/Blazor.Toolkit.Samples.Client/Layout/RightToc.razor
@@ -129,7 +129,6 @@
     }
     .page-rtl .toc-item:hover {
         border-right: 3px solid var(--accent);
-        border-left: 0 !important; 
     }
     .toc-item.level-5 {
         padding-left: 0;
diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Buttons/ButtonGroup.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Buttons/ButtonGroup.razor
index 5862c54..f9aea29 100644
--- a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Buttons/ButtonGroup.razor
+++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Buttons/ButtonGroup.razor
@@ -185,7 +185,7 @@
 
 <CodePreview CodeSection="@IconsCode">
     <PreviewSection>
-        <div class="e-section">
+        <div id="icons" class="e-section">
             <label class="e-label">Icon-only</label>
             <SfButtonGroup>
                 <ButtonGroupButton aria-label="Bold"><span class="sb-icons e-bold"></span></ButtonGroupButton>
@@ -194,7 +194,7 @@
             </SfButtonGroup>
         </div>
 
-        <div class="e-section" style="margin-top:12px">
+        <div id="icons-text" class="e-section" style="margin-top:12px">
             <label class="e-label">Icon with text</label>
             <SfButtonGroup>
                 <ButtonGroupButton><span class="sb-icons e-align-left"></span>&nbsp;Left</ButtonGroupButton>
@@ -571,4 +571,12 @@
         color: var(--e-info-foreground, #6b7280);
         font-size: .9rem;
     }
+    #icons .e-btn-group .sb-icons::before,
+    #icons-text .e-btn-group .sb-icons::before {
+        transform: translateY(2px);
+    }
+    #icons .e-btn-group .sb-icons,
+    #icons-text .e-btn-group .sb-icons {
+        display: inline-flex;
+    }
 </style>
\ No newline at end of file
diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Calendars/Calendar.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Calendars/Calendar.razor
index 2a79b0f..e5fd5ce 100644
--- a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Calendars/Calendar.razor
+++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Calendars/Calendar.razor
@@ -98,7 +98,7 @@
 		<h5>Islamic Calendar</h5>
 	</Header>
 	<Content>
-		The Blazor Calendar component supports displaying the Islamic (Hijri) calendar. The Hijri calendar is a lunar calendar with 12 months and 354 or 355 days per year. To render the Islamic calendar, set the <code>CalendarMode</code> property to CalendarType.Islamic. This switches the calendar system used for display and selection.
+		The Blazor Calendar component supports displaying the Islamic (Hijri) Calendar. The Hijri Calendar is a lunar Calendar with 12 months and 354 or 355 days per year. To render the Islamic Calendar, set the <code>CalendarMode</code> property to CalendarType.Islamic. This switches the Calendar system used for display and selection.
 	</Content>
 </Description>
 
@@ -113,7 +113,7 @@
 		<h5>Week Number</h5>
 	</Header>
 	<Content>
-		The <code>WeekNumber</code> property is used to display week numbers alongside the calendar dates. This feature is particularly useful for business applications that reference ISO week numbers for planning and reporting purposes. Configure how the first week of the year is determined by using the <code>WeekRule</code> property (aligned with .NET CalendarWeekRule semantics).
+		The <code>WeekNumber</code> property is used to display week numbers alongside the Calendar dates. This feature is particularly useful for business applications that reference ISO week numbers for planning and reporting purposes. Configure how the first week of the year is determined by using the <code>WeekRule</code> property (aligned with .NET CalendarWeekRule semantics).
 	</Content>
 </Description>
 
diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Calendars/DatePicker.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Calendars/DatePicker.razor
index 4b1041b..f36f649 100644
--- a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Calendars/DatePicker.razor
+++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Calendars/DatePicker.razor
@@ -133,7 +133,7 @@
 
 <Description>
 	<Header>
-		<h5>Islamic Calendar</h5>
+		<h5>Islamic Mode</h5>
 	</Header>
 	<Content>
 		The DatePicker control supports displaying the <code>Islamic</code> calendar (Hijri calendar). Islamic calendar or Hijri calendar is a lunar calendar consisting of 12 months in a year of 354 or 355 days.Users can either select a date from the Islamic calendar or manually enter a date. Additionally, you can use the ConvertToHijri and ConvertToGregorian methods to parse dates.
diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Calendars/TimePicker.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Calendars/TimePicker.razor
index a3b5ab2..e5986ba 100644
--- a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Calendars/TimePicker.razor
+++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Calendars/TimePicker.razor
@@ -314,9 +314,9 @@
     <TimePickerMaskPlaceholder Hour=""hour"" Minute=""minute"" Second=""second""></TimePickerMaskPlaceholder>
 </SfTimePicker>
 code {
-	public DateTime? MaskTimeValue { get; set; } = new DateTime(2022, 12, 11, 11, 30, 00);
+	public DateTime? MaskTimeValue { get; set; } = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 11, 11, 30, 00);
 }";
-	public DateTime? MaskTimeValue { get; set; } = new DateTime(2022, 12, 11, 11, 30, 00);
+	public DateTime? MaskTimeValue { get; set; } = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 11, 11, 30, 00);
 
 	//TimeOnly
 	private string TimeOnlyCode => @"<SfTimePicker TValue=""TimeOnly"" @bind-Value=""@Value"" PlaceHolder=""Select a time""></SfTimePicker>";
diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/GettingStarted.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/GettingStarted.razor
index e4c1b20..bcf0332 100644
--- a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/GettingStarted.razor
+++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Charts/GettingStarted.razor
@@ -51,7 +51,7 @@
         <h5>Include Assets</h5>
     </Header>
     <Content>
-        <p>Include the Syncfusion theme CSS in your layout file (App.razor or _Host.cshtml). Add the following link in the <code>&lt;head&gt;</code> section:</p>
+        <p>Include the Syncfusion theme CSS in your layout file (App.razor or index.html). Add the following link in the <code>&lt;head&gt;</code> section:</p>
         <CodePreview FileName="HTML" IsCodeAlone="true" CodeSection="@CssAssets"></CodePreview>
         <p>Choose a theme that suits your application. Available themes include <code>bootstrap5</code>, <code>fluent</code>, <code>material</code>, and more.</p>
     </Content>
diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/LayoutSection/NoteSection.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/LayoutSection/NoteSection.razor
index 267e9df..1214f9a 100644
--- a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/LayoutSection/NoteSection.razor
+++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/LayoutSection/NoteSection.razor
@@ -53,4 +53,8 @@
 		line-height: 1.7;
 		color: #3c3240;
 	}
+
+	.page-rtl .note-section__header {
+		direction: rtl;
+	}
 </style>
diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Popups/Dialog.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Popups/Dialog.razor
index 063de3f..5f081cb 100644
--- a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Popups/Dialog.razor
+++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Popups/Dialog.razor
@@ -22,7 +22,7 @@
             <div>
                 <SfButton @onclick="@OpenDialog">Open Dialog</SfButton>
             </div>
-            <SfDialog Target="#target" Width="250px" @bind-Visible="@IsVisible" Header="Dialog Header" Content="Here dialog with Content property." ShowCloseIcon="true"></SfDialog>
+            <SfDialog Target="#target" Width="250px" @bind-Visible="@IsVisible" Header="Dialog Header" Content="Here Dialog with Content property." ShowCloseIcon="true"></SfDialog>
         </div>
         <style>
             #target {
@@ -37,7 +37,7 @@
         <h5>Modal Dialog</h5>
     </Header>
     <Content>
-        A modal dialog prevents users from interacting with the rest of the application until the dialog is closed. The <code>IsModal</code> property enables modal behavior by displaying an overlay behind the Dialog, ensuring users must complete their interaction with the Dialog before accessing other application content.
+        A modal Dialog prevents users from interacting with the rest of the application until the Dialog is closed. The <code>IsModal</code> property enables modal behavior by displaying an overlay behind the Dialog, ensuring users must complete their interaction with the Dialog before accessing other application content.
     </Content>
 </Description>
 
@@ -47,7 +47,7 @@
             <div>
                 <SfButton @onclick="@OpenModalDialog">Open Modal Dialog</SfButton>
             </div>
-            <SfDialog Target="#modaltarget" Width="250px" IsModal="true" @bind-Visible="@IsModalVisible" Header="Modal Dialog" Content="This is a modal dialog" ShowCloseIcon="true"></SfDialog>
+            <SfDialog Target="#modaltarget" Width="250px" IsModal="true" @bind-Visible="@IsModalVisible" Header="Modal Dialog" Content="This is a modal Dialog" ShowCloseIcon="true"></SfDialog>
         </div>
         <style>
             #modaltarget {
@@ -153,7 +153,7 @@
         <h5>Resizing Dialog</h5>
     </Header>
     <Content>
-        The resizable dialog can be created by setting the <code>EnableResize</code> property to true, which is used to change the size of a dialog dynamically and view its content with expanded mode. When enabled, users can interact with the dialog’s resize handles to modify its dimensions according to their needs. The <code>ResizeHandles</code> property configures the specific directions in which the dialog can be resized. Resize handles are interactive grip areas positioned on the dialog’s edges and corners that users can drag to modify the dialog dimensions.
+        The resizable Dialog can be created by setting the <code>EnableResize</code> property to true, which is used to change the size of a Dialog dynamically and view its content with expanded mode. When enabled, users can interact with the dialog’s resize handles to modify its dimensions according to their needs. The <code>ResizeHandles</code> property configures the specific directions in which the Dialog can be resized. Resize handles are interactive grip areas positioned on the dialog’s edges and corners that users can drag to modify the Dialog dimensions.
     </Content>
 </Description>
 
@@ -163,7 +163,7 @@
             <div>
                 <SfButton Content="Open Resize Dialog" @onclick="@OpenResizeDialog"></SfButton>
             </div>
-            <SfDialog Target="#target-resize" Width="300px" ShowCloseIcon="true" EnableResize="true" ResizeHandles="@dialogResizeDirections" @bind-Visible="@IsResizeVisible" Header="Resize Dialog" Content="This is a resizing dialog">
+            <SfDialog Target="#target-resize" Width="300px" ShowCloseIcon="true" EnableResize="true" ResizeHandles="@dialogResizeDirections" @bind-Visible="@IsResizeVisible" Header="Resize Dialog" Content="This is a resizing Dialog">
             </SfDialog>
         </div>
 
@@ -181,7 +181,7 @@
         <h5>Draggable Dialog</h5>
     </Header>
     <Content>
-        To enable dragging capabilities, set the <code>AllowDragging</code> property to true on the Dialog component. When enabled, users can drag the dialog by clicking and holding the dialog header area.
+        To enable dragging capabilities, set the <code>AllowDragging</code> property to true on the Dialog component. When enabled, users can drag the Dialog by clicking and holding the Dialog header area.
     </Content>
 </Description>
 
@@ -221,7 +221,7 @@
             <SfDialog Target="#btn-target" Width="250px" ShowCloseIcon="true" @bind-Visible="@IsButtonVisible">
                 <DialogTemplates>
                     <Header> Dialog </Header>
-                    <Content>This is a standard dialog with footer buttons</Content>
+                    <Content>This is a standard Dialog with footer buttons</Content>
                 </DialogTemplates>
                 <DialogButtons>
                     <DialogButton Content="OK" IsPrimary="true" OnClick="@OnOkClick" />
@@ -245,7 +245,7 @@
         <h5>Full Screen</h5>
     </Header>
     <Content>
-        You can show the dialog in full screen by passing <code>true</code> as argument to the dialog <code>ShowAsync</code> method. By using the Visible property, you can prevent the dialog from showing initially.
+        You can show the Dialog in full screen by passing <code>true</code> as argument to the Dialog <code>ShowAsync</code> method. By using the Visible property, you can prevent the Dialog from showing initially.
     </Content>
 </Description>
 
@@ -261,7 +261,7 @@
                 <Content>
                     <div style="padding:16px; line-height:1.7;">
                         <p>General knowledge helps people connect ideas across science, history, geography, technology, and daily life. It is the kind of information that makes conversations easier, decision-making clearer, and learning more enjoyable. For example, knowing how weather changes, why oceans influence climate, or how the internet connects devices gives a broader view of the world around us. Small facts often lead to bigger understanding, and that is why general knowledge remains useful in school, work, and everyday situations.</p>
-                        <p>In a full-screen dialog, this kind of descriptive content works well because it creates room for comfortable reading and smooth scrolling. Users can focus on the message without feeling constrained by a small panel, and the larger layout gives the demo a more polished presentation. A clear header, readable spacing, and meaningful text together improve the visual balance of the component and make the experience feel more complete, modern, and practical.</p>
+                        <p>In a full-screen Dialog, this kind of descriptive content works well because it creates room for comfortable reading and smooth scrolling. Users can focus on the message without feeling constrained by a small panel, and the larger layout gives the demo a more polished presentation. A clear header, readable spacing, and meaningful text together improve the visual balance of the component and make the experience feel more complete, modern, and practical.</p>
                     </div>
                 </Content>
             </DialogTemplates>
@@ -302,14 +302,14 @@
         <h5>Predefined Dialog</h5>
     </Header>
     <Content>
-        <p>The <code>SfDialogService</code> enables predefined dialogs (<b>Alert</b>, <b>Confirm</b>, <b>Prompt</b>) that can be invoked from code without declaring dialog components in each page. To use these features in a real project you must register Syncfusion services and add the dialog provider at app root.</p>
+        <p>The <code>SfDialogService</code> enables Predefined dialogs (<b>Alert</b>, <b>Confirm</b>, <b>Prompt</b>) that can be invoked from code without declaring Dialog components in each page. To use these features in a real project you must register Syncfusion services and add the Dialog provider at app root.</p>
 
         <h6>Register And Dialog Service</h6>
         <p>Add the Syncfusion services and register <code>SfDialogService</code> in <code>Program.cs</code> (or your startup file):</p>
         <CodePreview FileName="Program.cs" IsCodeAlone="true" CodeSection="builder.Services.AddScoped<SfDialogService/>();"></CodePreview>
 
         <h6>Add The Dialog Provider</h6>
-        <p>Place the dialog provider near the root of the app (for example in <code>App.razor</code> or your main layout) so predefined dialogs can render correctly:</p>
+        <p>Place the Dialog provider near the root of the app (for example in <code>App.razor</code> or your main layout) so Predefined dialogs can render correctly:</p>
         <CodePreview FileName="MainLayout.razor" IsCodeAlone="true" CodeSection="<SfDialogProvider/>"></CodePreview>
 
         <p>With these steps completed you can call <code>DialogService.AlertAsync</code>, <code>DialogService.ConfirmAsync</code>, and <code>DialogService.PromptAsync</code> from pages, components or services and capture results via the returned <code>Task</code>.</p>
@@ -335,7 +335,7 @@
     <div>
         <SfButton @onclick=""@OpenDialog"">Open Dialog</SfButton>
     </div>
-    <SfDialog Target=""#target"" Width=""250px"" @bind-Visible=""@IsVisible"" Header=""Dialog Header"" Content=""Here dialog with Content property."" ShowCloseIcon=""true""></SfDialog>
+    <SfDialog Target=""#target"" Width=""250px"" @bind-Visible=""@IsVisible"" Header=""Dialog Header"" Content=""Here Dialog with Content property."" ShowCloseIcon=""true""></SfDialog>
 </div>
     <style>
         #target {
@@ -355,7 +355,7 @@
     <div>
         <SfButton @onclick=""@OpenModalDialog"">Open Modal Dialog</SfButton>
      </div>
-    <SfDialog Target=""#modaltarget"" Width=""250px"" IsModal=""true"" @bind-Visible=""@IsModalVisible"" Header=""Modal Dialog"" Content=""This is a modal dialog"" ShowCloseIcon=""true""></SfDialog>
+    <SfDialog Target=""#modaltarget"" Width=""250px"" IsModal=""true"" @bind-Visible=""@IsModalVisible"" Header=""Modal Dialog"" Content=""This is a modal Dialog"" ShowCloseIcon=""true""></SfDialog>
 </div>
 
 <style>
@@ -402,7 +402,7 @@
     <div>
         <SfButton Content=""Open Resize Dialog"" @onclick=""@OpenResizeDialog""></SfButton>
     </div>
-    <SfDialog Target=""#target-resize"" Width=""300px"" ShowCloseIcon=""true"" EnableResize=""true"" ResizeHandles=""@dialogResizeDirections"" @bind-Visible=""@IsResizeVisible"" Header=""Resize Dialog"" Content=""This is a resizing dialog"">
+    <SfDialog Target=""#target-resize"" Width=""300px"" ShowCloseIcon=""true"" EnableResize=""true"" ResizeHandles=""@dialogResizeDirections"" @bind-Visible=""@IsResizeVisible"" Header=""Resize Dialog"" Content=""This is a resizing Dialog"">
     </SfDialog>
 </div>
 
@@ -428,7 +428,7 @@
     <SfDialog Target=""#btn-target"" Width=""250px"" ShowCloseIcon=""true"" @bind-Visible=""@IsButtonVisible"">
         <DialogTemplates>
             <Header> Dialog </Header>
-            <Content>This is a standard dialog with footer buttons</Content>
+            <Content>This is a standard Dialog with footer buttons</Content>
         </DialogTemplates>
         <DialogButtons>
             <DialogButton Content=""OK"" IsPrimary=""true"" OnClick=""@OnOkClick"" />
@@ -523,7 +523,7 @@
         <Content>
             <div style=""padding:16px; line-height:1.7;"">
                 <p>General knowledge helps people connect ideas across science, history, geography, technology, and daily life. It is the kind of information that makes conversations easier, decision-making clearer, and learning more enjoyable. For example, knowing how weather changes, why oceans influence climate, or how the internet connects devices gives a broader view of the world around us. Small facts often lead to bigger understanding, and that is why general knowledge remains useful in school, work, and everyday situations.</p>
-                <p>In a full-screen dialog, this kind of descriptive content works well because it creates room for comfortable reading and smooth scrolling. Users can focus on the message without feeling constrained by a small panel, and the larger layout gives the demo a more polished presentation. A clear header, readable spacing, and meaningful text together improve the visual balance of the component and make the experience feel more complete, modern, and practical.</p>
+                <p>In a full-screen Dialog, this kind of descriptive content works well because it creates room for comfortable reading and smooth scrolling. Users can focus on the message without feeling constrained by a small panel, and the larger layout gives the demo a more polished presentation. A clear header, readable spacing, and meaningful text together improve the visual balance of the component and make the experience feel more complete, modern, and practical.</p>
             </div>
         </Content>
     </DialogTemplates>
diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Getting Started/BlazorWebApp.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Getting Started/BlazorWebApp.razor
index 68cf91f..44135d6 100644
--- a/samples/Blazor.Toolkit.Samples.Client/Pages/Getting Started/BlazorWebApp.razor	
+++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Getting Started/BlazorWebApp.razor	
@@ -101,7 +101,7 @@ cd BlazorWebApp"></CodePreview>
 		<h5>Add Stylesheet Reference</h5>
 	</Header>
 	<Content>
-		<p>Add the Syncfusion Blazor Toolkit theme stylesheet reference to the <code>Head</code> section in your <code>App.razor</code> or <code>_Host.cshtml</code> file:</p>
+		<p>Add the Syncfusion Blazor Toolkit theme stylesheet reference to the <code>Head</code> section in your <code>App.razor</code> file</p>
 		<p><b>Common Stylesheet (All Components)</b></p>
 		<p>Use the combined common stylesheet <code>fluent.min.css</code> which contains base styles and utilities shared across all components. This is the recommended stylesheet for most applications.</p>
 		<CodePreview FileName="App.razor (Common)" IsCodeAlone="true" CodeSection="@AppHeadCommon"></CodePreview>
diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Getting Started/BlazorWebAssemblyApp.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Getting Started/BlazorWebAssemblyApp.razor
index e74f125..2a68fca 100644
--- a/samples/Blazor.Toolkit.Samples.Client/Pages/Getting Started/BlazorWebAssemblyApp.razor	
+++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Getting Started/BlazorWebAssemblyApp.razor	
@@ -81,7 +81,7 @@ cd BlazorWebAssemblyApp"></CodePreview>
 		<h5>Add Stylesheet Reference</h5>
 	</Header>
 	<Content>
-		<p>Add the Syncfusion Blazor Toolkit theme stylesheet reference to the <code>Head</code> section in your <code>index.html</code> file:</p>
+		<p>Add the Syncfusion Blazor Toolkit theme stylesheet reference to the <code>Head</code> section in your <code>index.html</code> file</p>
 		<p><b>Common Stylesheet (All Components)</b></p>
 		<p>Use the combined common stylesheet <code>fluent.min.css</code> which contains base styles and utilities shared across all components. This is the recommended stylesheet for most applications.</p>
 		<CodePreview FileName="index.html (Common)" IsCodeAlone="true" CodeSection="@IndexHeadCommon"></CodePreview>
diff --git a/src/Components/Calendars/Base/Renderer/CalendarBaseRender.razor b/src/Components/Calendars/Base/Renderer/CalendarBaseRender.razor
index eb43e9e..123a340 100644
--- a/src/Components/Calendars/Base/Renderer/CalendarBaseRender.razor
+++ b/src/Components/Calendars/Base/Renderer/CalendarBaseRender.razor
@@ -31,7 +31,7 @@
     bool isValid = true;
     var rowCount = this.CellsCount / this.Count;
     <div class="@this.ContentElementClass">
-        <table tabindex="0" class="@CONTENT_TABLE" role="grid" aria-label="calendar" @onkeydown="OnCalendarKeyDownAsync">
+        <table tabindex="0" class="@CONTENT_TABLE" role="grid" aria-label="calendar" @onkeydown="OnCalendarKeyDownAsync" @onkeydown:preventDefault="@_isNotTabKey">
             @if (CalendarView == CalendarView.Month)
             {
                 <CalendarTableHeader TCalendarHeader="TValue" CalendarRenderView="CalendarView"></CalendarTableHeader>
diff --git a/src/Components/Calendars/Base/Renderer/CalendarBaseRender.razor.cs b/src/Components/Calendars/Base/Renderer/CalendarBaseRender.razor.cs
index fccf58c..f157f30 100644
--- a/src/Components/Calendars/Base/Renderer/CalendarBaseRender.razor.cs
+++ b/src/Components/Calendars/Base/Renderer/CalendarBaseRender.razor.cs
@@ -22,6 +22,7 @@ public partial class CalendarBaseRender<TValue> : CalendarBase<TValue>
     {
         internal ElementReference TableBodyEle { get; set; }
         private bool _isShiftKey;
+        private bool _isNotTabKey = true;
         private static readonly char[] _separatorChar = ['_'];
         private static readonly string[] _calendarKeys =
         [
@@ -35,10 +36,15 @@ public partial class CalendarBaseRender<TValue> : CalendarBase<TValue>
 
         private async Task OnCalendarKeyDownAsync(KeyboardEventArgs e)
         {
+            _isNotTabKey = true;
             if (e is null || Parent is null)
             {
                 return;
             }
+            if (e.Key == "Tab")
+            {
+                _isNotTabKey = false;
+            }
             string action = MapKeyToAction(e);
             CellDetails? focused = Parent.CellListData?.FirstOrDefault(c => !string.IsNullOrEmpty(c.ClassList) && c.ClassList.Contains("e-focused-date", StringComparison.CurrentCulture));
             CellDetails? selected = Parent.CellListData?.FirstOrDefault(c => !string.IsNullOrEmpty(c.ClassList) && c.ClassList.Contains("e-selected", StringComparison.CurrentCulture));
diff --git a/src/Components/Calendars/DateTimePicker/SfDateTimePicker.razor.cs b/src/Components/Calendars/DateTimePicker/SfDateTimePicker.razor.cs
index de27b0c..fe97c26 100644
--- a/src/Components/Calendars/DateTimePicker/SfDateTimePicker.razor.cs
+++ b/src/Components/Calendars/DateTimePicker/SfDateTimePicker.razor.cs
@@ -177,19 +177,20 @@ private async Task KeyActionHandlerAsync(KeyboardEventArgs args)
             {
                 return;
             }
-
-            // If time popup is rendered, handle time list keyboard actions
-            if (IsListRender)
-            {
-                await HandleTimePopupKeyboardAsync(args).ConfigureAwait(false);
-            }
-            // If time popup is not rendered, delegate to DatePicker's keyboard handling
-            else
+            await InvokeAsync(async () =>
             {
-                await HandleDatePickerKeyboardAsync(args).ConfigureAwait(false);
-            }
+                // If time popup is rendered, handle time list keyboard actions
+                if (IsListRender)
+                {
+                    await HandleTimePopupKeyboardAsync(args).ConfigureAwait(false);
+                }
+                // If time popup is not rendered, delegate to DatePicker's keyboard handling
+                else
+                {
+                    await HandleDatePickerKeyboardAsync(args).ConfigureAwait(false);
+                }
+            }).ConfigureAwait(false);
 
-            // Invoke the OnKeyDown event callback if assigned
             if (OnKeyDown.HasDelegate)
             {
                 await OnKeyDown.InvokeAsync(args).ConfigureAwait(false);
@@ -265,25 +266,36 @@ private async Task HandleDatePickerKeyboardAsync(KeyboardEventArgs args)
             {
                 if (!IsCalendarRender && !IsListRender)
                 {
-                    // No popup is open: open calendar popup
-                    IsDatePickerPopup = true;
-                    await StrictModeUpdateAsync().ConfigureAwait(false);
-                    await UpdateInputAsync().ConfigureAwait(false);
-                    await ChangeTriggerAsync(args).ConfigureAwait(false);
-                    await OpenPopupAsync(args).ConfigureAwait(false);
+                    await InvokeAsync(async () =>
+                    {
+                        IsDatePickerPopup = true;
+                        await StrictModeUpdateAsync().ConfigureAwait(false);
+                        await UpdateInputAsync().ConfigureAwait(false);
+                        await ChangeTriggerAsync(args).ConfigureAwait(false);
+                        await OpenPopupAsync(args).ConfigureAwait(false);
+                        StateHasChanged();
+                    }).ConfigureAwait(false);
                 }
                 else if (IsCalendarRender && !IsListRender)
                 {
-                    // Calendar popup is open: open time popup
-                    await KeyboardTimePopupActionAsync().ConfigureAwait(false);
+                    await InvokeAsync(KeyboardTimePopupActionAsync).ConfigureAwait(false);
                 }
-                // If time popup is already open, do nothing (it's already handled by HandleTimePopupKeyboardAsync)
             }
             // Handle Alt+Up arrow: close calendar popup and return focus
-            else if (args.Code == "ArrowUp" && args.AltKey && IsCalendarRender && !IsListRender)
+            else if (args.Code == "ArrowUp" && args.AltKey)
             {
-                await HidePopupAsync().ConfigureAwait(false);
-                await FocusAsync().ConfigureAwait(false);
+                if (IsListRender)
+                {
+                    await HidePopupAsync().ConfigureAwait(false);
+                }
+                else if (IsCalendarRender)
+                {
+                    await InvokeAsync(async () =>
+                    {
+                        await HidePopupAsync().ConfigureAwait(false);
+                        await FocusAsync().ConfigureAwait(false);
+                    }).ConfigureAwait(false);
+                }
             }
             // For all other keys, delegate to DatePicker's keyboard handling
             else
@@ -304,20 +316,16 @@ private async Task HandleDatePickerKeyboardAsync(KeyboardEventArgs args)
         /// </remarks>
         private async Task DelegateToDatePickerKeyboardAsync(KeyboardEventArgs args)
         {
-            // Build the key action string based on the keyboard event
             string keyAction = MapInputKeyToAction(args);
             if (!string.IsNullOrEmpty(keyAction))
             {
-                // Convert KeyboardEventArgs to KeyActions format for DatePicker's handler
-                // Note: KeyActions expects MouseEventArgs, but we initialize with default values
-                // since we're delegating keyboard events through DatePicker's handler
                 KeyActions keyArgs = new()
                 {
                     Action = keyAction,
                     Events = new MouseEventArgs() { },
                     Key = args.Code
                 };
-            await InputKeyActionHandleAsync(keyArgs, CurrentValueAsString, true).ConfigureAwait(false);
+                await InputKeyActionHandleAsync(keyArgs, CurrentValueAsString, true).ConfigureAwait(false);
             }
         }
 
@@ -738,9 +746,16 @@ private async Task IsValidTimeAsync()
         protected override async Task KeyboardTimePopupActionAsync()
         {
             await HidePopupAsync().ConfigureAwait(false);
+            IsDatePickerPopup = false;
+            if (TimeIcon is not null)
+            {
+                TimeIcon = SfBaseUtils.AddClass(TimeIcon, ACTIVE);
+            }
+
+            await Task.Yield();
             if (!IsListRender)
             {
-                await ShowTimePopupAsync().ConfigureAwait(false);
+                await OpenPopupAsync(null).ConfigureAwait(false);
             }
         }
 
diff --git a/src/wwwroot/scripts/resize.js b/src/wwwroot/scripts/resize.js
index 768d535..c5f9283 100644
--- a/src/wwwroot/scripts/resize.js
+++ b/src/wwwroot/scripts/resize.js
@@ -28,6 +28,9 @@ const Resize = (function (exports) {
         (args.direction || '').split(' ').forEach(d => {
             if (!d || !d.trim()) return;
             var iconClass = d === 'south-east' ? 'e-toolkit-icons e-resizer-right ' : 'e-toolkit-icons ';
+            if (args.proxy.enableRtl && d === 'south-west') {
+                iconClass += 'e-resizer-right ';
+            }
             if (dialogBorderResize.indexOf(d) >= 0) setBorderResizeElm(d);
             else targetElement.appendChild(sfBlazorToolkit.base.createElement('div', { className: iconClass + RESIZE_HANDLER + ' e-' + d }));
         });
diff --git a/src/wwwroot/styles/uploader.scss b/src/wwwroot/styles/uploader.scss
index 4b3b329..2f7626c 100644
--- a/src/wwwroot/styles/uploader.scss
+++ b/src/wwwroot/styles/uploader.scss
@@ -262,9 +262,11 @@ $uploader-actions-border-radius: $radius-0 $radius-0 $radius-6 $radius-6 !defaul
         min-height: $form-upload-file-list-height;
         padding-bottom: $form-upload-file-list-padding-bottom;
         padding-top: $form-upload-file-list-padding-top;
+        overflow-x: hidden;
 
         #{if(&, '&', '*')} .e-file-container {
           top: $upload-zer-padding-margin;
+          overflow: hidden;
 
           #{if(&, '&', '*')} .e-hidden-input {
             display: none;
@@ -291,6 +293,8 @@ $uploader-actions-border-radius: $radius-0 $radius-0 $radius-6 $radius-6 !defaul
             padding-bottom: $upload-zer-padding-margin;
             padding-top: $form-upload-file-name-padding;
             position: relative;
+            overflow-wrap: break-word;
+            word-break: break-word;
           }
         }
 
@@ -340,6 +344,7 @@ $uploader-actions-border-radius: $radius-0 $radius-0 $radius-6 $radius-6 !defaul
         line-height: $list-line-height;
         min-height: $li-min-height;
         position: relative;
+        overflow-x: hidden;
 
         .e-file-container {
           display: block;
@@ -583,6 +588,16 @@ $uploader-actions-border-radius: $radius-0 $radius-0 $radius-6 $radius-6 !defaul
               width: $file-container-height;
             }
 
+            #{if(&, '&', '*')} .e-file-status,
+            #{if(&, '&', '*')} .e-file-information {
+              clear: both;
+              direction: ltr;
+              float: $float-right;
+              position: relative;
+              text-align: right;
+              width: $file-container-height;
+            }
+
             #{if(&, '&', '*')} .e-upload-progress-wrap {
               float: $float-right;
               position: initial;