Change name. Hack on image.

src/AppNav.tsx

@@ -6,7 +6,7 @@ export function AppNav() {
     <Navbar bg="dark" variant="dark" expand="sm" className="py-0">
       <Container className="me-auto">
         <Navbar.Brand as={Link} to="/">
-          N-DRIVE
+          J7-Bridge
         </Navbar.Brand>
         <Navbar.Toggle aria-controls="collapse-navbar-nav" />
         <Navbar.Collapse id="collapse-navbar-nav">
@@ -28,5 +28,5 @@ export function AppNav() {
 }
 
 export function Footer() {
-  return <p className="footer">Made with {"<3"} by James Pace.</p>;
+  return <p className="footer">Copyright 2026 James Pace</p>;
 }

src/Home.tsx

@@ -1,5 +1,5 @@
 import { AppNav, Footer } from "./AppNav.tsx";
-import { Container, Row, Col, Image } from "react-bootstrap";
+import { Container, Row, Col, Image, Card } from "react-bootstrap";
 import { atom, useAtom } from "jotai";
 import { atomWithQuery } from "jotai-tanstack-query";
 
@@ -15,7 +15,7 @@ const costmapImageQuery = async () => {
 const costmapImageAtom = atomWithQuery(() => ({
   queryKey: ["costmap_image"],
   queryFn: costmapImageQuery,
-    refetchInterval: 1000 // 1s
+  refetchInterval: 1000, // 1s
 }));
 
 export function Home() {
@@ -23,18 +23,23 @@ export function Home() {
 
   let costmapImage = () => {
     if (isPending) {
-        return (<p>"Loading..."</p>);
+      return <p>"Loading..."</p>;
     }
     if (isError) {
-        return(<p>"Error!"</p>);
+      return <p>"Error!"</p>;
     }
-      return (<Image src={data} />);
+    return <Image src={data} />;
   };
   return (
     <div>
       <AppNav />
-      <Container>
+      <Container className="vert-padded">
-          { costmapImage() }
+        <Card className="padded">
+          <Row>
+            <Col lg={8}>{costmapImage()}</Col>
+            <Col lg={4}></Col>
+          </Row>
+        </Card>
       </Container>
       <Footer />
     </div>