diff --git a/src/components/animation/spotlight.tsx b/src/components/animation/spotlight.tsx
index 2c3264ac3..e429997d5 100644
--- a/src/components/animation/spotlight.tsx
+++ b/src/components/animation/spotlight.tsx
@@ -33,10 +33,10 @@ export const Spotlight = ({
 			<motion.div
 				animate={{ x: [0, xOffset, 0] }}
 				transition={{ duration, repeat: Infinity, repeatType: "reverse", ease: "easeInOut" }}
-				className="pointer-events-none absolute start-0 top-0 z-40 h-svh w-svw"
+				className="pointer-events-none absolute inset-s-0 top-0 z-40 h-svh w-svw"
 			>
 				<div
-					className="absolute start-0 top-0"
+					className="absolute inset-s-0 top-0"
 					style={{
 						width: `${width}px`,
 						height: `${height}px`,
@@ -46,7 +46,7 @@ export const Spotlight = ({
 				/>
 
 				<div
-					className="absolute start-0 top-0 origin-top-left"
+					className="absolute inset-s-0 top-0 origin-top-left"
 					style={{
 						height: `${height}px`,
 						width: `${smallWidth}px`,
@@ -56,7 +56,7 @@ export const Spotlight = ({
 				/>
 
 				<div
-					className="absolute start-0 top-0 origin-top-left"
+					className="absolute inset-s-0 top-0 origin-top-left"
 					style={{
 						height: `${height}px`,
 						width: `${smallWidth}px`,
@@ -68,7 +68,7 @@ export const Spotlight = ({
 
 			<motion.div
 				animate={{ x: [0, -xOffset, 0] }}
-				className="pointer-events-none absolute end-0 top-0 z-40 h-svh w-svw"
+				className="pointer-events-none absolute inset-e-0 top-0 z-40 h-svh w-svw"
 				transition={{
 					duration,
 					repeat: Infinity,
@@ -77,7 +77,7 @@ export const Spotlight = ({
 				}}
 			>
 				<div
-					className="absolute end-0 top-0"
+					className="absolute inset-e-0 top-0"
 					style={{
 						width: `${width}px`,
 						height: `${height}px`,
@@ -87,7 +87,7 @@ export const Spotlight = ({
 				/>
 
 				<div
-					className="absolute end-0 top-0 origin-top-right"
+					className="absolute inset-e-0 top-0 origin-top-right"
 					style={{
 						height: `${height}px`,
 						width: `${smallWidth}px`,
@@ -97,7 +97,7 @@ export const Spotlight = ({
 				/>
 
 				<div
-					className="absolute end-0 top-0 origin-top-right"
+					className="absolute inset-e-0 top-0 origin-top-right"
 					style={{
 						height: `${height}px`,
 						width: `${smallWidth}px`,
diff --git a/src/components/layout/breakpoint-indicator.tsx b/src/components/layout/breakpoint-indicator.tsx
index ea68c6a99..bebe94182 100644
--- a/src/components/layout/breakpoint-indicator.tsx
+++ b/src/components/layout/breakpoint-indicator.tsx
@@ -11,8 +11,8 @@ export function BreakpointIndicator({ position = "bottom-right" }: BreakpointInd
 	const isBottom = position.includes("bottom");
 
 	const top = isTop ? "top-0" : "bottom-0";
-	const right = isRight ? "end-0" : "start-0";
-	const left = isLeft ? "start-0" : "end-0";
+	const right = isRight ? "inset-e-0" : "inset-s-0";
+	const left = isLeft ? "inset-s-0" : "inset-e-0";
 	const bottom = isBottom ? "bottom-0" : "top-0";
 
 	return (
diff --git a/src/components/resume/preview.tsx b/src/components/resume/preview.tsx
index 8263d65fd..4cafac1d9 100644
--- a/src/components/resume/preview.tsx
+++ b/src/components/resume/preview.tsx
@@ -147,7 +147,7 @@ function PageContainer({ pageIndex, pageLayout, pageClassName, showPageNumbers =
 	return (
 		<div data-page-index={pageIndex} className="relative">
 			{showPageNumbers && totalNumberOfPages > 1 && (
-				<div className="absolute start-0 -top-6 print:hidden">
+				<div className="absolute inset-s-0 -top-6 print:hidden">
 					<span className="font-medium text-foreground text-xs">
 						<Trans>
 							Page {pageNumber} of {totalNumberOfPages}
@@ -161,7 +161,7 @@ function PageContainer({ pageIndex, pageLayout, pageClassName, showPageNumbers =
 			</div>
 
 			{metadata.page.format !== "free-form" && pageHeight > maxPageHeight && (
-				<div className="absolute start-0 top-full mt-4 print:hidden">
+				<div className="absolute inset-s-0 top-full mt-4 print:hidden">
 					<a
 						rel="noopener"
 						target="_blank"
diff --git a/src/components/resume/templates/chikorita.tsx b/src/components/resume/templates/chikorita.tsx
index a0afa72cb..3731100b6 100644
--- a/src/components/resume/templates/chikorita.tsx
+++ b/src/components/resume/templates/chikorita.tsx
@@ -38,7 +38,7 @@ export function ChikoritaTemplate({ pageIndex, pageLayout }: TemplateProps) {
 		<div className="template-chikorita page-content">
 			{/* Sidebar Background */}
 			{!fullWidth && (
-				<div className="page-sidebar-background pointer-events-none absolute inset-y-0 z-0 w-(--page-sidebar-width) shrink-0 bg-(--page-primary-color) ltr:end-0 rtl:start-0" />
+				<div className="page-sidebar-background pointer-events-none absolute inset-y-0 z-0 w-(--page-sidebar-width) shrink-0 bg-(--page-primary-color) ltr:inset-e-0 rtl:inset-s-0" />
 			)}
 
 			<div className="flex">
diff --git a/src/components/resume/templates/ditgar.tsx b/src/components/resume/templates/ditgar.tsx
index ef0f67f47..b14724f99 100644
--- a/src/components/resume/templates/ditgar.tsx
+++ b/src/components/resume/templates/ditgar.tsx
@@ -37,7 +37,7 @@ export function DitgarTemplate({ pageIndex, pageLayout }: TemplateProps) {
 		<div className="template-ditgar page-content">
 			{/* Sidebar Background */}
 			{(!fullWidth || isFirstPage) && (
-				<div className="page-sidebar-background pointer-events-none absolute inset-y-0 z-0 w-(--page-sidebar-width) shrink-0 bg-(--page-primary-color)/20 ltr:start-0 rtl:end-0" />
+				<div className="page-sidebar-background pointer-events-none absolute inset-y-0 z-0 w-(--page-sidebar-width) shrink-0 bg-(--page-primary-color)/20 ltr:inset-s-0 rtl:inset-e-0" />
 			)}
 
 			<div className="flex">
diff --git a/src/components/resume/templates/gengar.tsx b/src/components/resume/templates/gengar.tsx
index f1b5f2f2f..8e5fc371f 100644
--- a/src/components/resume/templates/gengar.tsx
+++ b/src/components/resume/templates/gengar.tsx
@@ -27,7 +27,7 @@ export function GengarTemplate({ pageIndex, pageLayout }: TemplateProps) {
 		<div className="template-gengar page-content">
 			{/* Sidebar Background */}
 			{(!fullWidth || isFirstPage) && (
-				<div className="page-sidebar-background pointer-events-none absolute inset-y-0 z-0 w-(--page-sidebar-width) shrink-0 bg-(--page-primary-color)/20 ltr:start-0 rtl:end-0" />
+				<div className="page-sidebar-background pointer-events-none absolute inset-y-0 z-0 w-(--page-sidebar-width) shrink-0 bg-(--page-primary-color)/20 ltr:inset-s-0 rtl:inset-e-0" />
 			)}
 
 			<div className="flex">
diff --git a/src/components/resume/templates/glalie.tsx b/src/components/resume/templates/glalie.tsx
index 4b546b9e3..d1996d204 100644
--- a/src/components/resume/templates/glalie.tsx
+++ b/src/components/resume/templates/glalie.tsx
@@ -27,7 +27,7 @@ export function GlalieTemplate({ pageIndex, pageLayout }: TemplateProps) {
 		<div className="template-glalie page-content">
 			{/* Sidebar Background */}
 			{(!fullWidth || isFirstPage) && (
-				<div className="page-sidebar-background pointer-events-none absolute inset-y-0 z-0 w-(--page-sidebar-width) shrink-0 bg-(--page-primary-color)/20 ltr:start-0 rtl:end-0" />
+				<div className="page-sidebar-background pointer-events-none absolute inset-y-0 z-0 w-(--page-sidebar-width) shrink-0 bg-(--page-primary-color)/20 ltr:inset-s-0 rtl:inset-e-0" />
 			)}
 
 			<div className="flex">
diff --git a/src/components/ui/alert.tsx b/src/components/ui/alert.tsx
index e3e2f2c57..ea14a252d 100644
--- a/src/components/ui/alert.tsx
+++ b/src/components/ui/alert.tsx
@@ -49,7 +49,7 @@ function AlertDescription({ className, ...props }: React.ComponentProps<"div">)
 }
 
 function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
-	return <div data-slot="alert-action" className={cn("absolute end-3 top-2.5", className)} {...props} />;
+	return <div data-slot="alert-action" className={cn("absolute inset-e-3 top-2.5", className)} {...props} />;
 }
 
 export { Alert, AlertTitle, AlertDescription, AlertAction };
diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx
index f587f602e..4e59700a3 100644
--- a/src/components/ui/avatar.tsx
+++ b/src/components/ui/avatar.tsx
@@ -50,7 +50,7 @@ function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
 		<span
 			data-slot="avatar-badge"
 			className={cn(
-				"absolute end-0 bottom-0 z-10 inline-flex select-none items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background",
+				"absolute inset-e-0 bottom-0 z-10 inline-flex select-none items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background",
 				"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
 				"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
 				"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
diff --git a/src/components/ui/context-menu.tsx b/src/components/ui/context-menu.tsx
index 18284d6c1..1b7ad8341 100644
--- a/src/components/ui/context-menu.tsx
+++ b/src/components/ui/context-menu.tsx
@@ -129,7 +129,7 @@ function ContextMenuCheckboxItem({
 			checked={checked}
 			{...props}
 		>
-			<span className="pointer-events-none absolute end-2">
+			<span className="pointer-events-none absolute inset-e-2">
 				<ContextMenuPrimitive.ItemIndicator>
 					<CheckIcon />
 				</ContextMenuPrimitive.ItemIndicator>
@@ -153,7 +153,7 @@ function ContextMenuRadioItem({
 			)}
 			{...props}
 		>
-			<span className="pointer-events-none absolute end-2">
+			<span className="pointer-events-none absolute inset-e-2">
 				<ContextMenuPrimitive.ItemIndicator>
 					<CheckIcon />
 				</ContextMenuPrimitive.ItemIndicator>
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
index 342628119..8b852567e 100644
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -102,7 +102,7 @@ function DropdownMenuCheckboxItem({ className, children, checked, disabled, ...p
 			checked={checked}
 			{...props}
 		>
-			<span className="pointer-events-none absolute start-2 flex size-3.5 items-center justify-center">
+			<span className="pointer-events-none absolute inset-s-2 flex size-3.5 items-center justify-center">
 				<DropdownMenuItemIndicatorPrimitive initial={{ opacity: 0, scale: 0.5 }} animate={{ opacity: 1, scale: 1 }}>
 					<CheckIcon className="size-4" />
 				</DropdownMenuItemIndicatorPrimitive>
@@ -131,7 +131,7 @@ function DropdownMenuRadioItem({ className, children, disabled, ...props }: Drop
 			)}
 			{...props}
 		>
-			<span className="pointer-events-none absolute start-2 flex size-3.5 items-center justify-center">
+			<span className="pointer-events-none absolute inset-s-2 flex size-3.5 items-center justify-center">
 				<DropdownMenuItemIndicatorPrimitive layoutId="dropdown-menu-item-indicator-radio">
 					<CircleIcon className="size-2 fill-current" />
 				</DropdownMenuItemIndicatorPrimitive>
diff --git a/src/components/ui/resizable.tsx b/src/components/ui/resizable.tsx
index 8d2a93fdb..e92325df1 100644
--- a/src/components/ui/resizable.tsx
+++ b/src/components/ui/resizable.tsx
@@ -27,7 +27,7 @@ function ResizableSeparator({
 		<ResizablePrimitive.Separator
 			data-slot="resizable-handle"
 			className={cn(
-				"relative flex w-px items-center justify-center bg-transparent transition-colors after:absolute after:inset-y-0 after:start-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[separator='active']:bg-sky-700 data-[separator='hover']:bg-sky-700 data-[panel-group-direction=vertical]:after:start-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+				"relative flex w-px items-center justify-center bg-transparent transition-colors after:absolute after:inset-s-1/2 after:inset-y-0 after:w-1 after:-translate-x-1/2 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[separator='active']:bg-sky-700 data-[separator='hover']:bg-sky-700 data-[panel-group-direction=vertical]:after:inset-s-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
 				className,
 			)}
 			{...props}
diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
index 891986d83..d930d53e9 100644
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@@ -50,7 +50,7 @@ function SheetContent({
 				data-slot="sheet-content"
 				data-side={side}
 				className={cn(
-					"data-[side=right]:data-closed:slide-out-to-end-10 data-[side=right]:data-open:slide-in-from-end-10 data-[side=left]:data-closed:slide-out-to-start-10 data-[side=left]:data-open:slide-in-from-start-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col gap-4 bg-background bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=top]:inset-x-0 data-[side=left]:inset-y-0 data-[side=right]:inset-y-0 data-[side=left]:start-0 data-[side=right]:end-0 data-[side=top]:top-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=left]:h-full data-[side=right]:h-full data-[side=top]:h-auto data-[side=left]:w-3/4 data-[side=right]:w-3/4 data-closed:animate-out data-open:animate-in data-[side=bottom]:border-t data-[side=left]:border-r data-[side=top]:border-b data-[side=right]:border-l data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+					"data-[side=right]:data-closed:slide-out-to-end-10 data-[side=right]:data-open:slide-in-from-end-10 data-[side=left]:data-closed:slide-out-to-start-10 data-[side=left]:data-open:slide-in-from-start-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col gap-4 bg-background bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=left]:inset-s-0 data-[side=right]:inset-e-0 data-[side=bottom]:inset-x-0 data-[side=top]:inset-x-0 data-[side=left]:inset-y-0 data-[side=right]:inset-y-0 data-[side=top]:top-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=left]:h-full data-[side=right]:h-full data-[side=top]:h-auto data-[side=left]:w-3/4 data-[side=right]:w-3/4 data-closed:animate-out data-open:animate-in data-[side=bottom]:border-t data-[side=left]:border-r data-[side=top]:border-b data-[side=right]:border-l data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
 					className,
 				)}
 				{...props}
@@ -58,7 +58,7 @@ function SheetContent({
 				{children}
 				{showCloseButton && (
 					<SheetPrimitive.Close data-slot="sheet-close" asChild>
-						<Button variant="ghost" className="absolute end-4 top-4" size="icon-sm">
+						<Button variant="ghost" className="absolute inset-e-4 top-4" size="icon-sm">
 							<XIcon />
 							<span className="sr-only">Close</span>
 						</Button>
diff --git a/src/components/ui/sidebar.tsx b/src/components/ui/sidebar.tsx
index 3c47c5f76..99a521166 100644
--- a/src/components/ui/sidebar.tsx
+++ b/src/components/ui/sidebar.tsx
@@ -203,8 +203,8 @@ function Sidebar({
 				className={cn(
 					"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] ease-in-out md:flex",
 					side === "left"
-						? "start-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
-						: "end-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+						? "inset-s-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+						: "inset-e-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
 					variant === "floating" || variant === "inset"
 						? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
 						: "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
@@ -258,12 +258,12 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
 			onClick={toggleSidebar}
 			title="Toggle Sidebar"
 			className={cn(
-				"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-in-out after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=right]:start-0 group-data-[side=left]:-end-4 sm:flex",
+				"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-in-out after:absolute after:inset-s-1/2 after:inset-y-0 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-inset-e-4 group-data-[side=right]:inset-s-0 sm:flex",
 				"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
 				"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
 				"group-data-[collapsible=offcanvas]:translate-x-0 hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:after:left-full",
-				"[[data-side=left][data-collapsible=offcanvas]_&]:-end-2",
-				"[[data-side=right][data-collapsible=offcanvas]_&]:-start-2",
+				"[[data-side=left][data-collapsible=offcanvas]_&]:-inset-e-2",
+				"[[data-side=right][data-collapsible=offcanvas]_&]:-inset-s-2",
 				className,
 			)}
 			{...props}
@@ -387,7 +387,7 @@ function SidebarGroupAction({
 			data-slot="sidebar-group-action"
 			data-sidebar="group-action"
 			className={cn(
-				"absolute end-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+				"absolute inset-e-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
 				"after:absolute after:-inset-2 md:after:hidden",
 				"group-data-[collapsible=icon]:hidden",
 				className,
@@ -512,7 +512,7 @@ function SidebarMenuAction({
 			data-slot="sidebar-menu-action"
 			data-sidebar="menu-action"
 			className={cn(
-				"absolute end-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+				"absolute inset-e-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
 				"after:absolute after:-inset-2 md:after:hidden",
 				"peer-data-[size=sm]/menu-button:top-1",
 				"peer-data-[size=default]/menu-button:top-1.5",
@@ -533,7 +533,7 @@ function SidebarMenuBadge({ className, ...props }: React.ComponentProps<"div">)
 			data-slot="sidebar-menu-badge"
 			data-sidebar="menu-badge"
 			className={cn(
-				"pointer-events-none absolute end-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 font-medium text-sidebar-foreground text-xs tabular-nums",
+				"pointer-events-none absolute inset-e-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 font-medium text-sidebar-foreground text-xs tabular-nums",
 				"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
 				"peer-data-[size=sm]/menu-button:top-1",
 				"peer-data-[size=default]/menu-button:top-1.5",
diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
index 2ecc8c494..a34993aa0 100644
--- a/src/components/ui/switch.tsx
+++ b/src/components/ui/switch.tsx
@@ -34,7 +34,7 @@ function Switch({ className, pressedWidth = 20, startIcon, endIcon, thumbIcon, .
 				{thumbIcon && (
 					<SwitchIconPrimitive
 						position="thumb"
-						className="-translate-1/2 absolute start-1/2 top-1/2 text-neutral-400 dark:text-neutral-500 [&_svg]:size-[9px]"
+						className="-translate-1/2 absolute inset-s-1/2 top-1/2 text-neutral-400 dark:text-neutral-500 [&_svg]:size-[9px]"
 					>
 						{thumbIcon}
 					</SwitchIconPrimitive>
@@ -44,7 +44,7 @@ function Switch({ className, pressedWidth = 20, startIcon, endIcon, thumbIcon, .
 			{startIcon && (
 				<SwitchIconPrimitive
 					position="left"
-					className="absolute start-0.5 top-1/2 -translate-y-1/2 text-neutral-400 dark:text-neutral-500 [&_svg]:size-[9px]"
+					className="absolute inset-s-0.5 top-1/2 -translate-y-1/2 text-neutral-400 dark:text-neutral-500 [&_svg]:size-[9px]"
 				>
 					{startIcon}
 				</SwitchIconPrimitive>
@@ -52,7 +52,7 @@ function Switch({ className, pressedWidth = 20, startIcon, endIcon, thumbIcon, .
 			{endIcon && (
 				<SwitchIconPrimitive
 					position="right"
-					className="absolute end-0.5 top-1/2 -translate-y-1/2 text-neutral-500 dark:text-neutral-400 [&_svg]:size-[9px]"
+					className="absolute inset-e-0.5 top-1/2 -translate-y-1/2 text-neutral-500 dark:text-neutral-400 [&_svg]:size-[9px]"
 				>
 					{endIcon}
 				</SwitchIconPrimitive>
diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
index 7ab798462..b5de2d4de 100644
--- a/src/components/ui/tabs.tsx
+++ b/src/components/ui/tabs.tsx
@@ -52,7 +52,7 @@ function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPr
 				"relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-full border border-transparent px-3 py-1 font-medium text-foreground/60 text-sm transition-all hover:text-foreground focus-visible:border-ring focus-visible:outline-1 focus-visible:outline-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 				"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
 				"data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
-				"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-end-1 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+				"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=vertical]/tabs:after:-inset-e-1 group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
 				className,
 			)}
 			{...props}
diff --git a/src/routes/_home/-sections/donate.tsx b/src/routes/_home/-sections/donate.tsx
index e09f5276d..24bab149f 100644
--- a/src/routes/_home/-sections/donate.tsx
+++ b/src/routes/_home/-sections/donate.tsx
@@ -131,8 +131,8 @@ export const DonationBanner = () => (
 			<FloatingIcon icon={HeartIcon} className="bottom-[20%] left-[20%]" delay={2.5} />
 
 			{/* Gradient Orbs */}
-			<div className="absolute -start-32 top-1/4 size-64 rounded-full bg-primary/5 blur-3xl" />
-			<div className="absolute -end-32 bottom-1/4 size-64 rounded-full bg-rose-500/5 blur-3xl" />
+			<div className="absolute -inset-s-32 top-1/4 size-64 rounded-full bg-primary/5 blur-3xl" />
+			<div className="absolute -inset-e-32 bottom-1/4 size-64 rounded-full bg-rose-500/5 blur-3xl" />
 		</div>
 
 		<div className="container relative px-8">
@@ -146,8 +146,8 @@ export const DonationBanner = () => (
 			>
 				<div aria-hidden="true" className="relative mb-6">
 					<PulsingHeart />
-					<SparkleEffect className="-end-4 -top-2" />
-					<SparkleEffect className="-start-3 bottom-0" />
+					<SparkleEffect className="-inset-e-4 -top-2" />
+					<SparkleEffect className="-inset-s-3 bottom-0" />
 				</div>
 
 				<motion.h2
diff --git a/src/routes/_home/-sections/footer.tsx b/src/routes/_home/-sections/footer.tsx
index ddbaef264..494b1ef40 100644
--- a/src/routes/_home/-sections/footer.tsx
+++ b/src/routes/_home/-sections/footer.tsx
@@ -134,7 +134,7 @@ function FooterLink({ url, label }: FooterLinkItem) {
 					initial={{ width: 0, opacity: 0 }}
 					animate={isHovered ? { width: "100%", opacity: 1 } : { width: 0, opacity: 0 }}
 					transition={{ duration: 0.25, ease: "easeOut" }}
-					className="pointer-events-none absolute start-0 -bottom-0.5 h-px rounded bg-primary"
+					className="pointer-events-none absolute inset-s-0 -bottom-0.5 h-px rounded bg-primary"
 				/>
 			</a>
 		</li>
diff --git a/src/routes/_home/-sections/hero.tsx b/src/routes/_home/-sections/hero.tsx
index 154faf6b6..701255e72 100644
--- a/src/routes/_home/-sections/hero.tsx
+++ b/src/routes/_home/-sections/hero.tsx
@@ -119,7 +119,7 @@ export function Hero() {
 			<motion.div
 				aria-hidden="true"
 				role="presentation"
-				className="absolute start-1/2 bottom-8 -translate-x-1/2"
+				className="absolute inset-s-1/2 bottom-8 -translate-x-1/2"
 				initial={{ opacity: 0 }}
 				animate={{ opacity: 1 }}
 				transition={{ delay: 2, duration: 1 }}
diff --git a/src/routes/_home/-sections/prefooter.tsx b/src/routes/_home/-sections/prefooter.tsx
index f6e1ef343..56909bb68 100644
--- a/src/routes/_home/-sections/prefooter.tsx
+++ b/src/routes/_home/-sections/prefooter.tsx
@@ -7,8 +7,8 @@ export function Prefooter() {
 		<section id="prefooter" className="relative overflow-hidden py-16 md:py-24">
 			{/* Background decoration */}
 			<div aria-hidden="true" className="pointer-events-none absolute inset-0">
-				<div className="absolute start-1/4 top-0 size-96 rounded-full bg-primary/5 blur-3xl" />
-				<div className="absolute end-1/4 bottom-0 size-96 rounded-full bg-primary/5 blur-3xl" />
+				<div className="absolute inset-s-1/4 top-0 size-96 rounded-full bg-primary/5 blur-3xl" />
+				<div className="absolute inset-e-1/4 bottom-0 size-96 rounded-full bg-primary/5 blur-3xl" />
 			</div>
 
 			<div className="relative space-y-8">
diff --git a/src/routes/_home/-sections/statistics.tsx b/src/routes/_home/-sections/statistics.tsx
index 53fcf480c..df3fd9682 100644
--- a/src/routes/_home/-sections/statistics.tsx
+++ b/src/routes/_home/-sections/statistics.tsx
@@ -47,7 +47,7 @@ function StatisticCard({ statistic, index }: StatisticCardProps) {
 			{/* Background decoration */}
 			<div aria-hidden="true" className="pointer-events-none absolute inset-0 overflow-hidden">
 				<motion.div
-					className="absolute start-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-primary/2"
+					className="absolute inset-s-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-primary/2"
 					initial={{ scale: 0.8, opacity: 0 }}
 					whileInView={{ scale: 1, opacity: 1 }}
 					viewport={{ once: true }}
diff --git a/src/routes/_home/-sections/templates.tsx b/src/routes/_home/-sections/templates.tsx
index ba2bffb10..382c2d7c9 100644
--- a/src/routes/_home/-sections/templates.tsx
+++ b/src/routes/_home/-sections/templates.tsx
@@ -23,7 +23,7 @@ function TemplateItem({ metadata }: TemplateItemProps) {
 				<div className="absolute inset-0 bg-linear-to-t from-black/70 via-black/20 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
 
 				{/* Template name on hover */}
-				<div className="absolute start-0 end-0 bottom-0 translate-y-full p-4 transition-transform duration-300 group-hover:translate-y-0">
+				<div className="absolute inset-x-0 bottom-0 translate-y-full p-4 transition-transform duration-300 group-hover:translate-y-0">
 					<p className="font-semibold text-white drop-shadow-lg">{metadata.name}</p>
 				</div>
 
diff --git a/src/routes/_home/-sections/testimonials.tsx b/src/routes/_home/-sections/testimonials.tsx
index 2a4cdf5de..502e6eee2 100644
--- a/src/routes/_home/-sections/testimonials.tsx
+++ b/src/routes/_home/-sections/testimonials.tsx
@@ -115,10 +115,10 @@ export function Testimonials() {
 
 			<div className="relative">
 				{/* Left fade */}
-				<div className="pointer-events-none absolute start-0 top-0 bottom-0 z-10 w-16 bg-linear-to-r from-background to-transparent sm:w-24 md:w-32 lg:w-48" />
+				<div className="pointer-events-none absolute inset-s-0 top-0 bottom-0 z-10 w-16 bg-linear-to-r from-background to-transparent sm:w-24 md:w-32 lg:w-48" />
 
 				{/* Right fade */}
-				<div className="pointer-events-none absolute end-0 top-0 bottom-0 z-10 w-16 bg-linear-to-l from-background to-transparent sm:w-24 md:w-32 lg:w-48" />
+				<div className="pointer-events-none absolute inset-e-0 top-0 bottom-0 z-10 w-16 bg-linear-to-l from-background to-transparent sm:w-24 md:w-32 lg:w-48" />
 
 				<div className="flex flex-col gap-y-6">
 					<MarqueeRow testimonials={row1} rowId="row1" direction="left" duration={50} />
diff --git a/src/routes/_home/route.tsx b/src/routes/_home/route.tsx
index 7b5acccd2..cbf694c26 100644
--- a/src/routes/_home/route.tsx
+++ b/src/routes/_home/route.tsx
@@ -11,7 +11,7 @@ function RouteComponent() {
 		<>
 			<a
 				href="#main-content"
-				className="sr-only focus:not-sr-only focus:fixed focus:start-4 focus:top-4 focus:z-100 focus:rounded-md focus:bg-background focus:px-4 focus:py-2 focus:text-foreground focus:shadow-lg focus:ring-2 focus:ring-ring"
+				className="sr-only focus:not-sr-only focus:fixed focus:inset-s-4 focus:top-4 focus:z-100 focus:rounded-md focus:bg-background focus:px-4 focus:py-2 focus:text-foreground focus:shadow-lg focus:ring-2 focus:ring-ring"
 			>
 				<Trans>Skip to main content</Trans>
 			</a>
diff --git a/src/routes/builder/$resumeId/-components/edge.tsx b/src/routes/builder/$resumeId/-components/edge.tsx
index f7bfe4f05..1c3318aec 100644
--- a/src/routes/builder/$resumeId/-components/edge.tsx
+++ b/src/routes/builder/$resumeId/-components/edge.tsx
@@ -10,7 +10,7 @@ export function BuilderSidebarEdge({ side, children }: Props) {
 		<div
 			className={cn(
 				"absolute inset-y-0 hidden w-12 flex-col items-center justify-between bg-popover py-2.5 sm:flex",
-				side === "left" ? "start-0 border-r" : "end-0 border-l",
+				side === "left" ? "inset-s-0 border-r" : "inset-e-0 border-l",
 			)}
 		>
 			{children}
diff --git a/src/routes/dashboard/-components/header.tsx b/src/routes/dashboard/-components/header.tsx
index 3a1b0a3b8..59e3d4c3a 100644
--- a/src/routes/dashboard/-components/header.tsx
+++ b/src/routes/dashboard/-components/header.tsx
@@ -11,7 +11,7 @@ type Props = {
 export function DashboardHeader({ title, icon: IconComponent, className }: Props) {
 	return (
 		<div className={cn("relative flex items-center justify-center gap-x-2.5 md:justify-start", className)}>
-			<SidebarTrigger className="absolute start-0 md:hidden" />
+			<SidebarTrigger className="absolute inset-s-0 md:hidden" />
 			<IconComponent weight="light" className="size-5" />
 			<h1 className="font-medium text-xl tracking-tight">{title}</h1>
 		</div>