diff --git a/.changeset/seven-carrots-report.md b/.changeset/seven-carrots-report.md
new file mode 100644
index 000000000..d62e7e3d9
--- /dev/null
+++ b/.changeset/seven-carrots-report.md
@@ -0,0 +1,9 @@
+---
+"flowbite-react": patch
+---
+
+fix(ui): Toggle Switch - styles
+
+- RTL
+- broken switch when label too long
+- bring back animations
diff --git a/apps/web/examples/forms/forms.toggleSwitch.tsx b/apps/web/examples/forms/forms.toggleSwitch.tsx
index 3e4e91cdb..5eee03524 100644
--- a/apps/web/examples/forms/forms.toggleSwitch.tsx
+++ b/apps/web/examples/forms/forms.toggleSwitch.tsx
@@ -16,7 +16,7 @@ export function Component() {
   const [switch3, setSwitch3] = useState(true);
 
   return (
-    <div className="flex max-w-md flex-col gap-4">
+    <div className="flex max-w-md flex-col items-start gap-4">
       <ToggleSwitch checked={switch1} label="Toggle me" onChange={setSwitch1} />
       <ToggleSwitch checked={switch2} label="Toggle me (checked)" onChange={setSwitch2} />
       <ToggleSwitch checked={false} disabled label="Toggle me (disabled)" onChange={() => undefined} />
@@ -33,7 +33,7 @@ export function Component() {
   const [switch3, setSwitch3] = useState(true);
 
   return (
-    <div className="flex max-w-md flex-col gap-4">
+    <div className="flex max-w-md flex-col items-start gap-4">
       <ToggleSwitch checked={switch1} label="Toggle me" onChange={setSwitch1} />
       <ToggleSwitch checked={switch2} label="Toggle me (checked)" onChange={setSwitch2} />
       <ToggleSwitch checked={false} disabled label="Toggle me (disabled)" onChange={() => undefined} />
diff --git a/packages/ui/src/components/ToggleSwitch/theme.ts b/packages/ui/src/components/ToggleSwitch/theme.ts
index 6f6d5cffb..78257bf8d 100644
--- a/packages/ui/src/components/ToggleSwitch/theme.ts
+++ b/packages/ui/src/components/ToggleSwitch/theme.ts
@@ -3,17 +3,17 @@ import type { FlowbiteToggleSwitchTheme } from "./ToggleSwitch";
 
 export const toggleSwitchTheme: FlowbiteToggleSwitchTheme = createTheme({
   root: {
-    base: "group relative flex items-center rounded-lg focus:outline-none",
+    base: "group flex rounded-lg focus:outline-none",
     active: {
       on: "cursor-pointer",
       off: "cursor-not-allowed opacity-50",
     },
-    label: "ml-3 text-sm font-medium text-gray-900 dark:text-gray-300",
+    label: "ms-3 mt-0.5 text-start text-sm font-medium text-gray-900 dark:text-gray-300",
   },
   toggle: {
-    base: "rounded-full border after:rounded-full after:bg-white group-focus:ring-4 group-focus:ring-cyan-500/25",
+    base: "relative rounded-full border after:absolute after:rounded-full after:bg-white after:transition-all group-focus:ring-4 group-focus:ring-cyan-500/25",
     checked: {
-      on: "after:translate-x-full after:border-white",
+      on: "after:translate-x-full after:border-white rtl:after:-translate-x-full",
       off: "border-gray-200 bg-gray-200 dark:border-gray-600 dark:bg-gray-700",
       color: {
         blue: "border-cyan-700 bg-cyan-700",
@@ -36,9 +36,9 @@ export const toggleSwitchTheme: FlowbiteToggleSwitchTheme = createTheme({
       },
     },
     sizes: {
-      sm: "h-5 w-9 after:absolute after:left-[2px] after:top-[2px] after:h-4 after:w-4",
-      md: "h-6 w-11 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5",
-      lg: "h-7 w-14 after:absolute after:left-[4px] after:top-0.5 after:h-6 after:w-6",
+      sm: "h-5 w-9 min-w-9 after:left-px after:top-px after:h-4 after:w-4 rtl:after:right-px",
+      md: "h-6 w-11 min-w-11 after:left-px after:top-px after:h-5 after:w-5 rtl:after:right-px",
+      lg: "h-7 w-14 min-w-14 after:left-1 after:top-0.5 after:h-6 after:w-6 rtl:after:right-1",
     },
   },
 });