Added working System config, NOT working WiFi & modem and Session pages as placeholders. Also added NPED images.

src/components/UI/Card.tsx

@@ -10,7 +10,7 @@ const Card = ({ children, className }: CardProps) => {
   return (
     <div
       className={clsx(
-        "bg-[#253445] rounded-lg mt-6 mx-4 px-4 py-4 shadow-2xl overflow-y-auto md:row-span-1",
+        "bg-[#253445] rounded-lg mt-4 mx-4 px-4 py-4 shadow-2xl overflow-y-auto md:row-span-1",
         className
       )}
     >

src/components/UI/CardHeader.tsx

@@ -1,24 +1,29 @@
 import type { IconProp } from "@fortawesome/fontawesome-svg-core";
-
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import clsx from "clsx";
 
 type CameraOverviewHeaderProps = {
   title: string;
   icon?: IconProp;
+  img?: string;
 };
 
-const CardHeader = ({ title, icon }: CameraOverviewHeaderProps) => {
+
+const CardHeader = ({ title, icon, img }: CameraOverviewHeaderProps) => {
   return (
     <div
       className={clsx(
-        "w-full border-b border-gray-600 flex flex-row items-center space-x-2 md:mb-6"
+        "w-full border-b border-gray-600 flex flex-row items-center md:mb-6"
       )}
     >
-      {icon && <FontAwesomeIcon icon={icon} className="size-4" />}
-      <h2 className="text-xl">{title}</h2>
+      <div className="flex items-center space-x-2">
+        {icon && <FontAwesomeIcon icon={icon} className="size-4" />}
+        <h2 className="text-xl">{title}</h2>
+      </div>
+      {img && <img src={img} alt="Logo" width={100} height={50} className="ml-auto" />}
     </div>
   );
 };
 
+
 export default CardHeader;

src/components/UI/Header.tsx

@@ -1,21 +1,29 @@
 import { Link } from "react-router";
 import Logo from "/MAV.svg";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faSliders } from "@fortawesome/free-solid-svg-icons";
+import { faGear } from "@fortawesome/free-solid-svg-icons";
+import { faListCheck } from "@fortawesome/free-solid-svg-icons";
 
 const Header = () => {
   return (
     <div className="relative bg-[#253445] border-b border-gray-500 items-center mx-auto px-2 sm:px-6 lg:px-8 p-4 flex flex-row justify-between">
+      {/* Left: Logo */}
       <div className="w-30">
         <Link to={"/"}>
-          <img src={Logo} alt="Logo" width={100} height={100} />
+          <img src={Logo} alt="Logo" width={150} height={150} />
+        </Link>
+      </div>
+      <div className="flex items-center space-x-8">
+        <Link to={"/session-settings"}>
+          <FontAwesomeIcon icon={faListCheck} />
+        </Link>
+        <Link to={"/system-settings"}>
+          <FontAwesomeIcon icon={faGear} />
         </Link>
       </div>
-      <Link to={"/system-settings"}>
-        <FontAwesomeIcon icon={faSliders} />
-      </Link>
     </div>
   );
 };
 
+
 export default Header;