diff --git a/resources/js/Layouts/AppLayout.jsx b/resources/js/Layouts/AppLayout.jsx
index 10c037c..e4faa1b 100644
--- a/resources/js/Layouts/AppLayout.jsx
+++ b/resources/js/Layouts/AppLayout.jsx
@@ -1,14 +1,14 @@
import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar';
import { AppSidebar } from '@/Components/ui/app-sidebar.jsx';
import { Separator } from "@radix-ui/react-separator";
-import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb";
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList } from "@/components/ui/breadcrumb";
import { Toaster } from '@/components/ui/toaster';
import { Button } from '@/components/ui/button';
import { Moon, Settings, Sun } from 'lucide-react';
import { Link, usePage } from '@inertiajs/react';
import { useEffect, useState } from "react";
import { Tooltip, TooltipProvider, TooltipTrigger } from "@radix-ui/react-tooltip";
-import { TooltipContent } from "@/Components/ui/tooltip.jsx";
+import { TooltipContent } from "@/components/ui/tooltip.jsx";
export default function AppLayout({ auth, header, children, toolbar }) {
diff --git a/resources/js/Layouts/AuthenticatedLayout.jsx b/resources/js/Layouts/AuthenticatedLayout.jsx
index a52677b..bb32a31 100644
--- a/resources/js/Layouts/AuthenticatedLayout.jsx
+++ b/resources/js/Layouts/AuthenticatedLayout.jsx
@@ -1,7 +1,7 @@
-import ApplicationLogo from '@/Components/ApplicationLogo';
-import Dropdown from '@/Components/Dropdown';
-import NavLink from '@/Components/NavLink';
-import ResponsiveNavLink from '@/Components/ResponsiveNavLink';
+import ApplicationLogo from '@/components/ApplicationLogo';
+import Dropdown from '@/components/Dropdown';
+import NavLink from '@/components/NavLink';
+import ResponsiveNavLink from '@/components/ResponsiveNavLink';
import { Link, usePage } from '@inertiajs/react';
import { useState } from 'react';
diff --git a/resources/js/Pages/Comic/Read.jsx b/resources/js/Pages/Comic/Read.jsx
index f0ad196..45cbc2b 100644
--- a/resources/js/Pages/Comic/Read.jsx
+++ b/resources/js/Pages/Comic/Read.jsx
@@ -2,7 +2,7 @@ import { Head, Link, router } from '@inertiajs/react';
import AppLayout from '@/Layouts/AppLayout.jsx';
import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
import { BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb.jsx";
-import { Button } from "@/components/ui/button.jsx";
+import { Button } from "@/components/ui/button";
import { ChevronFirst, ChevronLast, Rows3, Settings } from "lucide-react";
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog";
import PrimaryButton from "@/components/PrimaryButton.jsx";
@@ -12,6 +12,7 @@ import { TooltipContent } from "@/components/ui/tooltip.jsx";
import { throttle } from "lodash";
export default function Read({ auth, comic, chapter }) {
+
const [readingMode, setReadingMode] = useState('rtl'); // rtl, utd
const [isTwoPagesPerScreen, setIsTwoPagePerScreen] = useState(false);
const [currentImage, setCurrentImage] = useState(1);
@@ -280,7 +281,7 @@ export default function Read({ auth, comic, chapter }) {
} toolbar={ }>
- { chapter.chapter.name } - { comic.comic.name }
+ { chapter.chapter.name.concat(" - ", comic.comic.name) }