added forms and refactored component names

src/pages/Dashboard.tsx

@@ -1,10 +1,22 @@
 import FrontCameraOverviewCard from "../components/FrontCameraOverview/FrontCameraOverviewCard";
 import Sightings from "../components/PlateStack/Sightings";
 import RearCameraOverviewCard from "../components/RearCameraOverview/RearCameraOverviewCard";
+import { useNavigate } from "react-router";
+import { useSwipeable } from "react-swipeable";
 
 const Dashboard = () => {
+  const navigate = useNavigate();
+
+  const handlers = useSwipeable({
+    onSwipedDown: () => navigate("/system-settings"),
+    trackMouse: true,
+  });
+
   return (
-    <div className="mx-auto grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 gap-2 px-2 sm:px-4 lg:px-0 w-full">
+    <div
+      className="mx-auto grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 gap-2 px-2 sm:px-4 lg:px-0 w-full"
+      {...handlers}
+    >
       <FrontCameraOverviewCard />
       <RearCameraOverviewCard />
       <Sightings title="Front Camera Sightings" />

src/pages/SystemSettings.tsx

@@ -0,0 +1,12 @@
+import Output from "../components/Output/Output";
+
+const SystemSettings = () => {
+  return (
+    <div className="mx-auto grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 gap-2 px-2 sm:px-4 lg:px-0 w-full">
+      <Output />
+      <Output />
+    </div>
+  );
+};
+
+export default SystemSettings;