Added 404 Page, Fixed settings appearance page, and redirected logo to /

src/app/not-found.tsx

@@ -0,0 +1,45 @@
+'use client'
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardTitle } from '@/components/ui/card';
+import { ShieldX } from 'lucide-react';
+import Image from 'next/image';
+
+export default function PageNotFound() {
+	return (
+		<div className="flex h-screen items-center justify-center">
+			{/* Container for mobile and desktop layouts */}
+			<div className="flex flex-col lg:flex-row items-center justify-center space-y-6 lg:space-y-0 lg:space-x-8">
+				{/* Cat gif on top for mobile, on the left for larger screens */}
+				<div className="flex-shrink-0">
+					<Image
+						src="/kitty.gif"
+						width={300}  // dont adjust unless you're weird
+						height={300}
+						alt="kitty"
+						className="rounded-lg" // rounded corner for kitty
+					/>
+				</div>
+
+				{/* the error card */}
+				<Card className="flex h-96 w-96 flex-col items-center justify-center">
+					<CardTitle className="mx-auto mb-2 flex flex-col items-center justify-center">
+						<ShieldX className="h-14 w-14" />
+						<h2 className="mt-2 text-3xl font-semibold">404 Error</h2>
+					</CardTitle>
+					<CardContent className="mt-4 text-center text-base">
+						Click below to go to the home page.<br /> 404 - Page not found
+					</CardContent>
+					<CardContent className="mt-4">
+						<Button
+							type="button"
+							onClick={() => (window.location.href = '/')}
+							className="text-muted-background text-black"
+						>
+							Go Home
+						</Button>
+					</CardContent>
+				</Card>
+			</div>
+		</div>
+	);
+}

src/app/settings/layout.tsx

@@ -11,7 +11,7 @@ export default function SettingsLayout({ children }: Readonly<{ children: React.
   return (
     <div className="flex">
       <div className="flex w-1/4 flex-col gap-2 p-4 pl-8 pt-8">
-        <NextLink href="/settings/apperance/">
+        <NextLink href="/settings/appearance/">
           <Button variant={pathname?.includes('/settings/appearance') ? 'secondary' : 'ghost'} className="w-full items-center justify-start gap-2">
             <Palette className="h-5 w-5" /> Appearance
           </Button>

src/components/navbar.tsx

@@ -5,6 +5,7 @@ import { usePathname } from 'next/navigation'
 import { Button } from './ui/button'
 import { useState } from 'react'
 import Sidebar from './sidebar'
+import Link from 'next/link' // Import the Link component
 
 export default function Navbar() {
   const [open, setOpen] = useState(false)
@@ -18,10 +19,11 @@ export default function Navbar() {
         <Button onClick={() => setOpen(true)} size="icon" variant="ghost">
           <Lucide.Menu className="h-7 w-7" />
         </Button>
-        <div className="flex items-center gap-2">
+        {/* Wrap the logo and text in a Link */}
+        <Link href="/" className="flex items-center gap-2">
           <Lucide.Radius className="h-8 w-8 rotate-180" />
           <h1 className="text-xl font-bold">Radius</h1>
-        </div>
+        </Link>
       </div>
 
       <Sidebar open={open} onOpenChange={setOpen} />