From 58023c4dbc832e4efece560f38dd02f2d475abfb Mon Sep 17 00:00:00 2001
From: Michael Housh <michael@mhoush.com>
Date: Wed, 28 Jan 2026 10:26:59 -0500
Subject: [PATCH] feat: Adds view snapshot tests

---
 Package.resolved                              |   20 +-
 Package.swift                                 |   19 +
 Sources/DatabaseClient/Projects.swift         |    2 +-
 .../HTMLSnapshotTesting/Snapshotting.swift    |   22 +
 Sources/ManualDCore/Project.swift             |   26 +-
 Sources/ManualDCore/User.swift                |   12 +
 Sources/ManualDCore/UserProfile.swift         |   25 +
 .../ManualDClientTests.swift                  |   48 +-
 .../ViewControllerTests.swift                 |  208 +++
 .../ViewControllerTests/login.1.html          |   79 +
 .../ViewControllerTests/projectDetail.1.html  |  251 +++
 .../ViewControllerTests/projectDetail.2.html  |  593 +++++++
 .../ViewControllerTests/projectDetail.3.html  |  236 +++
 .../ViewControllerTests/projectDetail.4.html  |  366 ++++
 .../ViewControllerTests/projectDetail.5.html  |  442 +++++
 .../ViewControllerTests/projectDetail.6.html  | 1559 +++++++++++++++++
 .../ViewControllerTests/projectIndex.1.html   |  111 ++
 .../ViewControllerTests/signup.1.html         |   79 +
 .../ViewControllerTests/userProfile.1.html    |  159 ++
 19 files changed, 4221 insertions(+), 36 deletions(-)
 create mode 100644 Sources/HTMLSnapshotTesting/Snapshotting.swift
 create mode 100644 Tests/ViewControllerTests/ViewControllerTests.swift
 create mode 100644 Tests/ViewControllerTests/__Snapshots__/ViewControllerTests/login.1.html
 create mode 100644 Tests/ViewControllerTests/__Snapshots__/ViewControllerTests/projectDetail.1.html
 create mode 100644 Tests/ViewControllerTests/__Snapshots__/ViewControllerTests/projectDetail.2.html
 create mode 100644 Tests/ViewControllerTests/__Snapshots__/ViewControllerTests/projectDetail.3.html
 create mode 100644 Tests/ViewControllerTests/__Snapshots__/ViewControllerTests/projectDetail.4.html
 create mode 100644 Tests/ViewControllerTests/__Snapshots__/ViewControllerTests/projectDetail.5.html
 create mode 100644 Tests/ViewControllerTests/__Snapshots__/ViewControllerTests/projectDetail.6.html
 create mode 100644 Tests/ViewControllerTests/__Snapshots__/ViewControllerTests/projectIndex.1.html
 create mode 100644 Tests/ViewControllerTests/__Snapshots__/ViewControllerTests/signup.1.html
 create mode 100644 Tests/ViewControllerTests/__Snapshots__/ViewControllerTests/userProfile.1.html

diff --git a/Package.resolved b/Package.resolved
index 5858eb1..8cc2eb4 100644
--- a/Package.resolved
+++ b/Package.resolved
@@ -1,5 +1,5 @@
 {
-  "originHash" : "5d6dad57209ac74e3c47d8e8eb162768b81c9e63e15df87d29019d46a13cfec2",
+  "originHash" : "c3efcfd33bc1490f59ae406e4e5292027b2d01cafee9fc625652213505df50fb",
   "pins" : [
     {
       "identity" : "async-http-client",
@@ -226,6 +226,15 @@
         "version" : "4.2.0"
       }
     },
+    {
+      "identity" : "swift-custom-dump",
+      "kind" : "remoteSourceControl",
+      "location" : "https://github.com/pointfreeco/swift-custom-dump",
+      "state" : {
+        "revision" : "93a8aa4937030b606de42f44b17870249f49af0b",
+        "version" : "1.3.4"
+      }
+    },
     {
       "identity" : "swift-dependencies",
       "kind" : "remoteSourceControl",
@@ -361,6 +370,15 @@
         "version" : "2.9.1"
       }
     },
+    {
+      "identity" : "swift-snapshot-testing",
+      "kind" : "remoteSourceControl",
+      "location" : "https://github.com/pointfreeco/swift-snapshot-testing",
+      "state" : {
+        "revision" : "a8b7c5e0ed33d8ab8887d1654d9b59f2cbad529b",
+        "version" : "1.18.7"
+      }
+    },
     {
       "identity" : "swift-syntax",
       "kind" : "remoteSourceControl",
diff --git a/Package.swift b/Package.swift
index ff70882..8e01c5d 100644
--- a/Package.swift
+++ b/Package.swift
@@ -10,6 +10,7 @@ let package = Package(
     .library(name: "AuthClient", targets: ["AuthClient"]),
     .library(name: "DatabaseClient", targets: ["DatabaseClient"]),
     .library(name: "FileClient", targets: ["FileClient"]),
+    .library(name: "HTMLSnapshotTesting", targets: ["HTMLSnapshotTesting"]),
     .library(name: "PdfClient", targets: ["PdfClient"]),
     .library(name: "ProjectClient", targets: ["ProjectClient"]),
     .library(name: "ManualDCore", targets: ["ManualDCore"]),
@@ -23,6 +24,7 @@ let package = Package(
     .package(url: "https://github.com/vapor/fluent-sqlite-driver.git", from: "4.6.0"),
     .package(url: "https://github.com/apple/swift-nio.git", from: "2.65.0"),
     .package(url: "https://github.com/pointfreeco/swift-dependencies", from: "1.0.0"),
+    .package(url: "https://github.com/pointfreeco/swift-snapshot-testing", from: "1.12.0"),
     .package(url: "https://github.com/pointfreeco/swift-url-routing.git", from: "0.6.2"),
     .package(url: "https://github.com/pointfreeco/vapor-routing.git", from: "0.1.3"),
     .package(url: "https://github.com/pointfreeco/swift-case-paths.git", from: "1.6.0"),
@@ -84,6 +86,13 @@ let package = Package(
         .product(name: "DependenciesMacros", package: "swift-dependencies"),
       ]
     ),
+    .target(
+      name: "HTMLSnapshotTesting",
+      dependencies: [
+        .product(name: "Elementary", package: "elementary"),
+        .product(name: "SnapshotTesting", package: "swift-snapshot-testing"),
+      ]
+    ),
     .target(
       name: "PdfClient",
       dependencies: [
@@ -156,5 +165,15 @@ let package = Package(
         .product(name: "Vapor", package: "vapor"),
       ]
     ),
+    .testTarget(
+      name: "ViewControllerTests",
+      dependencies: [
+        .target(name: "ViewController"),
+        .target(name: "HTMLSnapshotTesting"),
+      ],
+      resources: [
+        .copy("__Snapshots__")
+      ]
+    ),
   ]
 )
diff --git a/Sources/DatabaseClient/Projects.swift b/Sources/DatabaseClient/Projects.swift
index 0aacecd..054ce97 100644
--- a/Sources/DatabaseClient/Projects.swift
+++ b/Sources/DatabaseClient/Projects.swift
@@ -46,7 +46,7 @@ extension DatabaseClient.Projects: TestDependencyKey {
               { trunk in
                 trunk.with(
                   \.$rooms,
-                  { 
+                  {
                     $0.with(\.$room)
                   }
                 )
diff --git a/Sources/HTMLSnapshotTesting/Snapshotting.swift b/Sources/HTMLSnapshotTesting/Snapshotting.swift
new file mode 100644
index 0000000..fa11701
--- /dev/null
+++ b/Sources/HTMLSnapshotTesting/Snapshotting.swift
@@ -0,0 +1,22 @@
+import Elementary
+import SnapshotTesting
+
+extension Snapshotting where Value == (any HTML), Format == String {
+  public static var html: Snapshotting {
+    var snapshotting = SimplySnapshotting.lines
+      .pullback { (html: any HTML) in html.renderFormatted() }
+
+    snapshotting.pathExtension = "html"
+    return snapshotting
+  }
+}
+
+extension Snapshotting where Value == String, Format == String {
+  public static var html: Snapshotting {
+    var snapshotting = SimplySnapshotting.lines
+      .pullback { $0 }
+
+    snapshotting.pathExtension = "html"
+    return snapshotting
+  }
+}
diff --git a/Sources/ManualDCore/Project.swift b/Sources/ManualDCore/Project.swift
index 548ef39..5ef9d36 100644
--- a/Sources/ManualDCore/Project.swift
+++ b/Sources/ManualDCore/Project.swift
@@ -140,16 +140,22 @@ extension Project {
 #if DEBUG
 
   extension Project {
-    public static let mock = Self(
-      id: UUID(0),
-      name: "Testy McTestface",
-      streetAddress: "1234 Sesame Street",
-      city: "Monroe",
-      state: "OH",
-      zipCode: "55555",
-      createdAt: Date(),
-      updatedAt: Date()
-    )
+
+    public static var mock: Self {
+      @Dependency(\.uuid) var uuid
+      @Dependency(\.date.now) var now
+
+      return .init(
+        id: uuid(),
+        name: "Testy McTestface",
+        streetAddress: "1234 Sesame Street",
+        city: "Monroe",
+        state: "OH",
+        zipCode: "55555",
+        createdAt: now,
+        updatedAt: now
+      )
+    }
   }
 
 #endif
diff --git a/Sources/ManualDCore/User.swift b/Sources/ManualDCore/User.swift
index 2cf9685..f0869a8 100644
--- a/Sources/ManualDCore/User.swift
+++ b/Sources/ManualDCore/User.swift
@@ -65,3 +65,15 @@ extension User {
     }
   }
 }
+
+#if DEBUG
+
+  extension User {
+    public static var mock: Self {
+      @Dependency(\.uuid) var uuid
+      @Dependency(\.date.now) var now
+      return .init(id: uuid(), email: "testy@example.com", createdAt: now, updatedAt: now)
+    }
+  }
+
+#endif
diff --git a/Sources/ManualDCore/UserProfile.swift b/Sources/ManualDCore/UserProfile.swift
index 84baed3..cae86a2 100644
--- a/Sources/ManualDCore/UserProfile.swift
+++ b/Sources/ManualDCore/UserProfile.swift
@@ -1,3 +1,4 @@
+import Dependencies
 import Foundation
 
 extension User {
@@ -113,3 +114,27 @@ extension User.Profile {
     }
   }
 }
+
+#if DEBUG
+  extension User.Profile {
+    public static func mock(userID: User.ID) -> Self {
+      @Dependency(\.uuid) var uuid
+      @Dependency(\.date.now) var now
+
+      return .init(
+        id: uuid(),
+        userID: userID,
+        firstName: "Testy",
+        lastName: "McTestface",
+        companyName: "Acme Co.",
+        streetAddress: "1234 Sesame St",
+        city: "Monroe",
+        state: "OH",
+        zipCode: "55555",
+        createdAt: now,
+        updatedAt: now
+      )
+
+    }
+  }
+#endif
diff --git a/Tests/ManualDClientTests/ManualDClientTests.swift b/Tests/ManualDClientTests/ManualDClientTests.swift
index b2d02d4..ce5d00f 100644
--- a/Tests/ManualDClientTests/ManualDClientTests.swift
+++ b/Tests/ManualDClientTests/ManualDClientTests.swift
@@ -33,31 +33,31 @@ struct ManualDClientTests {
     #expect(response.velocity == 329)
   }
 
-  @Test
-  func frictionRate() async throws {
-    let response = try await manualD.frictionRate(
-      .init(
-        externalStaticPressure: 0.5,
-        componentPressureLosses: .mock,
-        totalEffectiveLength: 185
-      )
-    )
-    #expect(numberFormatter.string(for: response.availableStaticPressure) == "0.11")
-    #expect(numberFormatter.string(for: response.frictionRate) == "0.06")
-  }
+  // @Test
+  // func frictionRate() async throws {
+  //   let response = try await manualD.frictionRate(
+  //     .init(
+  //       externalStaticPressure: 0.5,
+  //       componentPressureLosses: .mock,
+  //       totalEffectiveLength: 185
+  //     )
+  //   )
+  //   #expect(numberFormatter.string(for: response.availableStaticPressure) == "0.11")
+  //   #expect(numberFormatter.string(for: response.frictionRate) == "0.06")
+  // }
 
-  @Test
-  func frictionRateFails() async throws {
-    await #expect(throws: ManualDError.self) {
-      _ = try await manualD.frictionRate(
-        .init(
-          externalStaticPressure: 0.5,
-          componentPressureLosses: .mock,
-          totalEffectiveLength: 0
-        )
-      )
-    }
-  }
+  // @Test
+  // func frictionRateFails() async throws {
+  //   await #expect(throws: ManualDError.self) {
+  //     _ = try await manualD.frictionRate(
+  //       .init(
+  //         externalStaticPressure: 0.5,
+  //         componentPressureLosses: .mock,
+  //         totalEffectiveLength: 0
+  //       )
+  //     )
+  //   }
+  // }
 
   @Test
   func totalEffectiveLength() async throws {
diff --git a/Tests/ViewControllerTests/ViewControllerTests.swift b/Tests/ViewControllerTests/ViewControllerTests.swift
new file mode 100644
index 0000000..6626c23
--- /dev/null
+++ b/Tests/ViewControllerTests/ViewControllerTests.swift
@@ -0,0 +1,208 @@
+import AuthClient
+import DatabaseClient
+import Dependencies
+import Foundation
+import HTMLSnapshotTesting
+import Logging
+import ManualDClient
+import ManualDCore
+import ProjectClient
+import SnapshotTesting
+import Testing
+import ViewController
+
+@Suite(.snapshots(record: .missing))
+struct ViewControllerTests {
+
+  @Test
+  func login() async throws {
+    try await withDependencies {
+      $0.viewController = .liveValue
+      $0.authClient = .failing
+    } operation: {
+      @Dependency(\.viewController) var viewController
+
+      let login = try await viewController.view(.test(.login(.index())))
+      assertSnapshot(of: login, as: .html)
+    }
+  }
+
+  @Test
+  func signup() async throws {
+    try await withDependencies {
+      $0.viewController = .liveValue
+      $0.authClient = .failing
+    } operation: {
+      @Dependency(\.viewController) var viewController
+
+      let signup = try await viewController.view(.test(.login(.index())))
+      assertSnapshot(of: signup, as: .html)
+    }
+  }
+
+  @Test
+  func userProfile() async throws {
+    try await withDefaultDependencies {
+      @Dependency(\.viewController) var viewController
+      let html = try await viewController.view(.test(.user(.profile(.index))))
+      assertSnapshot(of: html, as: .html)
+    }
+  }
+
+  @Test
+  func projectIndex() async throws {
+    let project = withDependencies {
+      $0.uuid = .incrementing
+      $0.date = .constant(.mock)
+    } operation: {
+      Project.mock
+    }
+
+    try await withDefaultDependencies {
+      $0.database.projects.fetch = { _, _ in
+        .init(items: [project], metadata: .init(page: 1, per: 25, total: 1))
+      }
+    } operation: {
+      @Dependency(\.viewController) var viewController
+      let html = try await viewController.view(.test(.project(.index)))
+      assertSnapshot(of: html, as: .html)
+    }
+  }
+
+  @Test
+  func projectDetail() async throws {
+
+    let (
+      project,
+      rooms,
+      equipment,
+      tels,
+      componentLosses,
+      trunks
+    ) = withDependencies {
+      $0.uuid = .incrementing
+      $0.date = .constant(.mock)
+    } operation: {
+      let project = Project.mock
+      let rooms = Room.mock(projectID: project.id)
+      let equipment = EquipmentInfo.mock(projectID: project.id)
+      let tels = EffectiveLength.mock(projectID: project.id)
+      let componentLosses = ComponentPressureLoss.mock(projectID: project.id)
+      let trunks = TrunkSize.mock(projectID: project.id, rooms: rooms)
+
+      return (
+        project,
+        rooms,
+        equipment,
+        tels,
+        componentLosses,
+        trunks
+      )
+    }
+
+    try await withDefaultDependencies {
+      $0.database.projects.get = { _ in project }
+      $0.database.projects.getCompletedSteps = { _ in
+        .init(equipmentInfo: true, rooms: true, equivalentLength: true, frictionRate: true)
+      }
+      $0.database.projects.getSensibleHeatRatio = { _ in 0.83 }
+      $0.database.rooms.fetch = { _ in rooms }
+      $0.database.equipment.fetch = { _ in equipment }
+      $0.database.effectiveLength.fetch = { _ in tels }
+      $0.database.effectiveLength.fetchMax = { _ in
+        .init(supply: tels.first, return: tels.last)
+      }
+      $0.database.componentLoss.fetch = { _ in componentLosses }
+      $0.projectClient.calculateDuctSizes = { _ in
+        .mock(equipmentInfo: equipment, rooms: rooms, trunks: trunks)
+      }
+    } operation: {
+      @Dependency(\.viewController) var viewController
+
+      var html = try await viewController.view(.test(.project(.detail(project.id, .index))))
+      assertSnapshot(of: html, as: .html)
+
+      html = try await viewController.view(.test(.project(.detail(project.id, .rooms(.index)))))
+      assertSnapshot(of: html, as: .html)
+
+      html = try await viewController.view(.test(.project(.detail(project.id, .equipment(.index)))))
+      assertSnapshot(of: html, as: .html)
+
+      html = try await viewController.view(
+        .test(.project(.detail(project.id, .equivalentLength(.index)))))
+      assertSnapshot(of: html, as: .html)
+
+      html = try await viewController.view(
+        .test(.project(.detail(project.id, .frictionRate(.index)))))
+      assertSnapshot(of: html, as: .html)
+
+      html = try await viewController.view(
+        .test(.project(.detail(project.id, .ductSizing(.index)))))
+      assertSnapshot(of: html, as: .html)
+    }
+  }
+
+  func createUserDependencies() -> (User, User.Profile) {
+    withDependencies {
+      $0.uuid = .incrementing
+      $0.date = .constant(.mock)
+    } operation: {
+      let user = User.mock
+      let profile = User.Profile.mock(userID: user.id)
+      return (user, profile)
+    }
+  }
+
+  @discardableResult
+  func withDefaultDependencies<R>(
+    isolation: isolated (any Actor)? = #isolation,
+    _ updateDependencies: (inout DependencyValues) async throws -> Void = { _ in },
+    operation: () async throws -> R
+  ) async rethrows -> R {
+    let (user, profile) = createUserDependencies()
+
+    return try await withDependencies {
+      $0.viewController = .liveValue
+      $0.authClient.currentUser = { user }
+      $0.database.userProfile.fetch = { _ in profile }
+      $0.manualD = .liveValue
+      try await updateDependencies(&$0)
+    } operation: {
+      try await operation()
+    }
+  }
+}
+
+extension Date {
+  static let mock = Self(timeIntervalSince1970: 1_234_567_890)
+}
+
+extension ViewController.Request {
+
+  static func test(
+    _ route: SiteRoute.View,
+    isHtmxRequest: Bool = false,
+    logger: Logger = .init(label: "ViewControllerTests")
+  ) -> Self {
+    .init(route: route, isHtmxRequest: isHtmxRequest, logger: logger)
+  }
+}
+
+extension AuthClient {
+  static let failing = Self(
+    createAndLogin: { _ in
+      throw TestError()
+    },
+    currentUser: {
+      throw TestError()
+    },
+    login: { _ in
+      throw TestError()
+    },
+    logout: {
+      throw TestError()
+    }
+  )
+}
+
+struct TestError: Error {}
diff --git a/Tests/ViewControllerTests/__Snapshots__/ViewControllerTests/login.1.html b/Tests/ViewControllerTests/__Snapshots__/ViewControllerTests/login.1.html
new file mode 100644
index 0000000..c044deb
--- /dev/null
+++ b/Tests/ViewControllerTests/__Snapshots__/ViewControllerTests/login.1.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Duct Calc</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta content="ductcalc.com" name="og:site_name">
+    <meta content="Duct Calc" name="og:title">
+    <meta content="Duct sizing based on ACCA, Manual-D." name="description">
+    <meta content="Duct sizing based on ACCA, Manual-D." name="og:description">
+    <meta content="/images/mand_logo.png" name="og:image">
+    <meta content="/images/mand_logo.png" name="twitter:image">
+    <meta content="Duct Calc" name="twitter:image:alt">
+    <meta content="summary_large_image" name="twitter:card">
+    <meta content="1536" name="og:image:width">
+    <meta content="1024" name="og:image:height">
+    <meta content="duct, hvac, duct-design, duct design, manual-d, manual d, design" name="keywords">
+    <script src="https://unpkg.com/htmx.org@2.0.8"></script>
+    <script src="/js/main.js"></script>
+    <link rel="stylesheet" href="/css/output.css">
+    <link rel="icon" href="/images/favicon.ico" type="image/x-icon">
+    <link rel="icon" href="/images/favicon-32x32.png" type="image/png">
+    <link rel="icon" href="/images/favicon-16x16.png" type="image/png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
+    <link rel="manifest" href="/site.webmanifest">
+    <script src="https://unpkg.com/htmx-remove@latest" crossorigin="anonymous" integrity="sha384-NwB2Xh66PNEYfVki0ao13UAFmdNtMIdBKZ8sNGRT6hKfCPaINuZ4ScxS6vVAycPT"></script>
+  </head>
+  <body>
+    <div class="flex flex-col min-h-screen min-w-full justify-between">
+      <main class="flex flex-col min-h-screen min-w-full grow mb-auto">
+        <dialog id="loginForm" class="modal modal-open">
+          <div class="modal-box">
+            <h1 class="text-2xl font-bold mb-6">Login</h1>
+            <form method="post" class="space-y-4">
+              <div>
+                <label class="input validator w-full">  <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                  <g
+                    stroke-linejoin="round"
+                    stroke-linecap="round"
+                    stroke-width="2.5"
+                    fill="none"
+                    stroke="currentColor"
+                  >
+                    <rect width="20" height="16" x="2" y="4" rx="2"></rect>
+                    <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>
+                  </g>
+                </svg>
+                <input type="email" placeholder="Email" required name="email" id="email" autofocus></label>
+                <div class="validator-hint hidden">Enter valid email address.</div>
+              </div>
+              <div>
+                <label class="input validator w-full">  <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                    <g
+                      stroke-linejoin="round"
+                      stroke-linecap="round"
+                      stroke-width="2.5"
+                      fill="none"
+                      stroke="currentColor"
+                    >
+                      <path
+                        d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"
+                      ></path>
+                      <circle cx="16.5" cy="7.5" r=".5" fill="currentColor"></circle>
+                    </g>
+                  </svg>
+                <input type="password" placeholder="Password" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" minlength="8" name="password" id="password"></label>
+              </div>
+              <div class="flex">
+                <button class="btn btn-secondary mt-4 w-full">Login</button>
+              </div>
+              <div class="flex justify-center"><a class="btn btn-link" href="/signup">Sign Up</a></div>
+            </form>
+          </div>
+        </dialog>
+      </main>
+      <div class="bottom-0 left-0 bg-error"></div>
+    </div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/Tests/ViewControllerTests/__Snapshots__/ViewControllerTests/projectDetail.1.html b/Tests/ViewControllerTests/__Snapshots__/ViewControllerTests/projectDetail.1.html
new file mode 100644
index 0000000..4a98913
--- /dev/null
+++ b/Tests/ViewControllerTests/__Snapshots__/ViewControllerTests/projectDetail.1.html
@@ -0,0 +1,251 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Duct Calc</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta content="ductcalc.com" name="og:site_name">
+    <meta content="Duct Calc" name="og:title">
+    <meta content="Duct sizing based on ACCA, Manual-D." name="description">
+    <meta content="Duct sizing based on ACCA, Manual-D." name="og:description">
+    <meta content="/images/mand_logo.png" name="og:image">
+    <meta content="/images/mand_logo.png" name="twitter:image">
+    <meta content="Duct Calc" name="twitter:image:alt">
+    <meta content="summary_large_image" name="twitter:card">
+    <meta content="1536" name="og:image:width">
+    <meta content="1024" name="og:image:height">
+    <meta content="duct, hvac, duct-design, duct design, manual-d, manual d, design" name="keywords">
+    <script src="https://unpkg.com/htmx.org@2.0.8"></script>
+    <script src="/js/main.js"></script>
+    <link rel="stylesheet" href="/css/output.css">
+    <link rel="icon" href="/images/favicon.ico" type="image/x-icon">
+    <link rel="icon" href="/images/favicon-32x32.png" type="image/png">
+    <link rel="icon" href="/images/favicon-16x16.png" type="image/png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
+    <link rel="manifest" href="/site.webmanifest">
+    <script src="https://unpkg.com/htmx-remove@latest" crossorigin="anonymous" integrity="sha384-NwB2Xh66PNEYfVki0ao13UAFmdNtMIdBKZ8sNGRT6hKfCPaINuZ4ScxS6vVAycPT"></script>
+  </head>
+  <body>
+    <div class="flex flex-col min-h-screen min-w-full justify-between">
+      <main class="flex flex-col min-h-screen min-w-full grow mb-auto">
+        <div class="drawer lg:drawer-open h-full">
+          <input id="my-drawer-1" type="checkbox" class="drawer-toggle">
+          <div class="drawer-content overflow-auto">
+            <nav class="navbar w-full bg-base-300 text-base-content shadow-sm mb-4">
+              <div class="flex flex-1 space-x-4 items-center">
+                <div class="tooltip tooltip-right" data-tip="Open sidebar"><label for="my-drawer-1" class="size-7 btn btn-square btn-ghost hover:bg-neutral hover:text-white" aria-label="open sidebar"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor" class="my-1.5 inline-block"><path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"></path><path d="M9 4v16"></path><path d="M14 10l2 2l-2 2"></path></svg></label></div>
+                <div class="tooltip tooltip-right" data-tip="Home">
+                  <a class="flex w-fit h-fit text-xl items-end px-4 py-2 btn btn-square btn-ghost hover:bg-neutral hover:text-white" href="/projects">
+                  <img src="/images/mand_logo_sm.webp">
+                  Duct Calc<span></span></a>
+                </div>
+              </div>
+              <div class="flex-none">
+                <div class="tooltip tooltip-left" data-tip="Profile"><a href="/profile" class="btn btn-square btn-ghost hover:bg-neutral hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-user-icon lucide-circle-user"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="10" r="3"/><path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"/></svg></a></div>
+              </div>
+            </nav>
+            <div class="p-4">
+              <div>
+                <div class="flex justify-between bg-secondary border-2 border-primary rounded-sm shadow-sm 
+p-6 w-full">
+                  <h1 class="text-3xl font-bold">Project</h1>
+                  <div class="tooltip tooltip-left" data-tip="Edit project">
+                    <button class="btn btn-primary" type="button" onclick="projectForm.showModal()">
+                      <div class="flex">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-pen-icon lucide-square-pen"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></svg>
+                        
+                      </div>
+                    </button>
+                  </div>
+                </div>
+                <table class="table table-zebra text-lg">
+                  <tbody>
+                    <tr>
+                      <td class="label font-bold">Name</td>
+                      <td>
+                        <div class="flex justify-end">Testy McTestface</div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td class="label font-bold">Street Address</td>
+                      <td>
+                        <div class="flex justify-end">1234 Sesame Street</div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td class="label font-bold">City</td>
+                      <td>
+                        <div class="flex justify-end">Monroe</div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td class="label font-bold">State</td>
+                      <td>
+                        <div class="flex justify-end">OH</div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td class="label font-bold">Zip</td>
+                      <td>
+                        <div class="flex justify-end">55555</div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+                <dialog id="projectForm" class="modal">
+                  <div class="modal-box">
+                    <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick="projectForm.close()">  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
+                    <h1 class="text-3xl font-bold pb-6 ps-2">Project</h1>
+                    <form class="grid grid-cols-1 gap-4" hx-patch="/projects/00000000-0000-0000-0000-000000000000" hx-target="body" hx-swap="outerHTML">
+                      <input class="hidden" name="id" value="00000000-0000-0000-0000-000000000000">
+                      Name<label class="input w-full"><span class="label"></span>
+                      <input name="name" type="text" value="Testy McTestface" placeholder="Project Name" required autofocus>
+                      Address</label><label class="input w-full"><span class="label"></span>
+                      <input name="streetAddress" type="text" value="1234 Sesame Street" placeholder="Street Address" required>
+                      City</label><label class="input w-full"><span class="label"></span>
+                      <input name="city" type="text" value="Monroe" placeholder="City" required>
+                      State</label><label class="input w-full"><span class="label"></span>
+                      <input name="state" type="text" value="OH" placeholder="State" required>
+                      Zip</label><label class="input w-full"><span class="label"></span>
+                      <input name="zipCode" type="text" value="55555" placeholder="Zip Code" required></label>
+                      <button class="btn btn-secondary btn-block my-6" type="submit">Submit</button>
+                    </form>
+                  </div>
+                </dialog>
+              </div>
+            </div>
+          </div>
+          <div class="drawer-side is-drawer-close:overflow-visible grow">
+            <label for="my-drawer-1" aria-label="close sidebar" class="drawer-overlay"></label>
+            <div class="flex grow h-full flex-col items-start bg-base-300 text-base-content
+is-drawer-close:min-w-[80px] is-drawer-open:max-w-[300px]">
+              <ul class="w-full grow">
+                <li class="flex w-full">
+                  <button class="w-full gap-1 py-2 border-b-1 border-gray-200
+hover:bg-neutral data-active:bg-neutral
+hover:text-white data-active:text-white
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1" hx-get="/projects/00000000-0000-0000-0000-000000000000" hx-push-url="true" hx-target="body" hx-swap="outerHTML" data-active="true">
+                    <div class="w-full p-2 gap-1
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1">
+                      <div class="items-center
+is-drawer-open:justify-start is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:justify-center is-drawer-close:mx-auto is-drawer-close:space-y-2">
+                        <div class="flex items-center justify-center is-drawer-close:text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin-icon lucide-map-pin"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/></svg></div>
+                        <div class="flex items-center justify-center"><span>Project</span></div>
+                      </div>
+                      <div class="flex grow justify-end items-end is-drawer-close:hidden text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge-check-icon lucide-badge-check"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m9 12 2 2 4-4"/></svg></div>
+                    </div>
+                  </button>
+                </li>
+                <li class="w-full">
+                  <button class="w-full gap-1 py-2 border-b-1 border-gray-200
+hover:bg-neutral data-active:bg-neutral
+hover:text-white data-active:text-white
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1" hx-get="/projects/00000000-0000-0000-0000-000000000000/rooms" hx-push-url="true" hx-target="body" hx-swap="outerHTML">
+                    <div class="w-full p-2 gap-1
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1">
+                      <div class="items-center
+is-drawer-open:justify-start is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:justify-center is-drawer-close:mx-auto is-drawer-close:space-y-2">
+                        <div class="flex items-center justify-center is-drawer-close:text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-door-closed-icon lucide-door-closed"><path d="M10 12h.01"/><path d="M18 20V6a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v14"/><path d="M2 20h20"/></svg></div>
+                        <div class="flex items-center justify-center"><span>Rooms</span></div>
+                      </div>
+                      <div class="flex grow justify-end items-end is-drawer-close:hidden text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge-check-icon lucide-badge-check"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m9 12 2 2 4-4"/></svg></div>
+                    </div>
+                  </button>
+                </li>
+                <li class="flex w-full">
+                  <button class="w-full gap-1 py-2 border-b-1 border-gray-200
+hover:bg-neutral data-active:bg-neutral
+hover:text-white data-active:text-white
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1" hx-get="/projects/00000000-0000-0000-0000-000000000000/equipment" hx-push-url="true" hx-target="body" hx-swap="outerHTML">
+                    <div class="w-full p-2 gap-1
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1">
+                      <div class="items-center
+is-drawer-open:justify-start is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:justify-center is-drawer-close:mx-auto is-drawer-close:space-y-2">
+                        <div class="flex items-center justify-center is-drawer-close:text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-fan-icon lucide-fan"><path d="M10.827 16.379a6.082 6.082 0 0 1-8.618-7.002l5.412 1.45a6.082 6.082 0 0 1 7.002-8.618l-1.45 5.412a6.082 6.082 0 0 1 8.618 7.002l-5.412-1.45a6.082 6.082 0 0 1-7.002 8.618l1.45-5.412Z"/><path d="M12 12v.01"/></svg></div>
+                        <div class="flex items-center justify-center"><span>Equipment</span></div>
+                      </div>
+                      <div class="flex grow justify-end items-end is-drawer-close:hidden text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge-check-icon lucide-badge-check"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m9 12 2 2 4-4"/></svg></div>
+                    </div>
+                  </button>
+                </li>
+                <li class="w-full">
+                  <button class="w-full gap-1 py-2 border-b-1 border-gray-200
+hover:bg-neutral data-active:bg-neutral
+hover:text-white data-active:text-white
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1" hx-get="/projects/00000000-0000-0000-0000-000000000000/effective-lengths" hx-push-url="true" hx-target="body" hx-swap="outerHTML">
+                    <div class="w-full p-2 gap-1
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1">
+                      <div class="items-center
+is-drawer-open:justify-start is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:justify-center is-drawer-close:mx-auto is-drawer-close:space-y-2">
+                        <div class="flex items-center justify-center is-drawer-close:text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ruler-dimension-line-icon lucide-ruler-dimension-line"><path d="M10 15v-3"/><path d="M14 15v-3"/><path d="M18 15v-3"/><path d="M2 8V4"/><path d="M22 6H2"/><path d="M22 8V4"/><path d="M6 15v-3"/><rect x="2" y="12" width="20" height="8" rx="2"/></svg></div>
+                        <div class="flex items-center justify-center"><span>T.E.L.</span></div>
+                      </div>
+                      <div class="flex grow justify-end items-end is-drawer-close:hidden text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge-check-icon lucide-badge-check"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m9 12 2 2 4-4"/></svg></div>
+                    </div>
+                  </button>
+                </li>
+                <li class="w-full">
+                  <button class="w-full gap-1 py-2 border-b-1 border-gray-200
+hover:bg-neutral data-active:bg-neutral
+hover:text-white data-active:text-white
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1" hx-get="/projects/00000000-0000-0000-0000-000000000000/friction-rate" hx-push-url="true" hx-target="body" hx-swap="outerHTML">
+                    <div class="w-full p-2 gap-1
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1">
+                      <div class="items-center
+is-drawer-open:justify-start is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:justify-center is-drawer-close:mx-auto is-drawer-close:space-y-2">
+                        <div class="flex items-center justify-center is-drawer-close:text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-function-icon lucide-square-function"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><path d="M9 17c2 0 2.8-1 2.8-2.8V10c0-2 1-3.3 3.2-3"/><path d="M9 11.2h5.7"/></svg></div>
+                        <div class="flex items-center justify-center"><span>Friction Rate</span></div>
+                      </div>
+                      <div class="flex grow justify-end items-end is-drawer-close:hidden text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge-check-icon lucide-badge-check"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m9 12 2 2 4-4"/></svg></div>
+                    </div>
+                  </button>
+                </li>
+                <li class="w-full">
+                  <button class="w-full gap-1 py-2 border-b-1 border-gray-200
+hover:bg-neutral data-active:bg-neutral
+hover:text-white data-active:text-white
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1" hx-get="/projects/00000000-0000-0000-0000-000000000000/duct-sizing" hx-push-url="true" hx-target="body" hx-swap="outerHTML">
+                    <div class="w-full p-2 gap-1
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1">
+                      <div class="items-center
+is-drawer-open:justify-start is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:justify-center is-drawer-close:mx-auto is-drawer-close:space-y-2">
+                        <div class="flex items-center justify-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wind-icon lucide-wind"><path d="M12.8 19.6A2 2 0 1 0 14 16H2"/><path d="M17.5 8a2.5 2.5 0 1 1 2 4H2"/><path d="M9.8 4.4A2 2 0 1 1 11 8H2"/></svg></div>
+                        <div class="flex items-center justify-center"><span>Duct Sizes</span></div>
+                      </div>
+                    </div>
+                  </button>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </main>
+      <div class="bottom-0 left-0 bg-error">
+        <footer class="footer sm:footer-horizontal footer-center
+bg-base-300 text-base-content p-4">
+          <aside>
+            <p>Copyright © 2026 - All rights reserved by Michael Housh</p>
+          </aside>
+        </footer>
+      </div>
+    </div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/Tests/ViewControllerTests/__Snapshots__/ViewControllerTests/projectDetail.2.html b/Tests/ViewControllerTests/__Snapshots__/ViewControllerTests/projectDetail.2.html
new file mode 100644
index 0000000..e0d851c
--- /dev/null
+++ b/Tests/ViewControllerTests/__Snapshots__/ViewControllerTests/projectDetail.2.html
@@ -0,0 +1,593 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Duct Calc</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta content="ductcalc.com" name="og:site_name">
+    <meta content="Duct Calc" name="og:title">
+    <meta content="Duct sizing based on ACCA, Manual-D." name="description">
+    <meta content="Duct sizing based on ACCA, Manual-D." name="og:description">
+    <meta content="/images/mand_logo.png" name="og:image">
+    <meta content="/images/mand_logo.png" name="twitter:image">
+    <meta content="Duct Calc" name="twitter:image:alt">
+    <meta content="summary_large_image" name="twitter:card">
+    <meta content="1536" name="og:image:width">
+    <meta content="1024" name="og:image:height">
+    <meta content="duct, hvac, duct-design, duct design, manual-d, manual d, design" name="keywords">
+    <script src="https://unpkg.com/htmx.org@2.0.8"></script>
+    <script src="/js/main.js"></script>
+    <link rel="stylesheet" href="/css/output.css">
+    <link rel="icon" href="/images/favicon.ico" type="image/x-icon">
+    <link rel="icon" href="/images/favicon-32x32.png" type="image/png">
+    <link rel="icon" href="/images/favicon-16x16.png" type="image/png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
+    <link rel="manifest" href="/site.webmanifest">
+    <script src="https://unpkg.com/htmx-remove@latest" crossorigin="anonymous" integrity="sha384-NwB2Xh66PNEYfVki0ao13UAFmdNtMIdBKZ8sNGRT6hKfCPaINuZ4ScxS6vVAycPT"></script>
+  </head>
+  <body>
+    <div class="flex flex-col min-h-screen min-w-full justify-between">
+      <main class="flex flex-col min-h-screen min-w-full grow mb-auto">
+        <div class="drawer lg:drawer-open h-full">
+          <input id="my-drawer-1" type="checkbox" class="drawer-toggle">
+          <div class="drawer-content overflow-auto">
+            <nav class="navbar w-full bg-base-300 text-base-content shadow-sm mb-4">
+              <div class="flex flex-1 space-x-4 items-center">
+                <div class="tooltip tooltip-right" data-tip="Open sidebar"><label for="my-drawer-1" class="size-7 btn btn-square btn-ghost hover:bg-neutral hover:text-white" aria-label="open sidebar"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor" class="my-1.5 inline-block"><path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"></path><path d="M9 4v16"></path><path d="M14 10l2 2l-2 2"></path></svg></label></div>
+                <div class="tooltip tooltip-right" data-tip="Home">
+                  <a class="flex w-fit h-fit text-xl items-end px-4 py-2 btn btn-square btn-ghost hover:bg-neutral hover:text-white" href="/projects">
+                  <img src="/images/mand_logo_sm.webp">
+                  Duct Calc<span></span></a>
+                </div>
+              </div>
+              <div class="flex-none">
+                <div class="tooltip tooltip-left" data-tip="Profile"><a href="/profile" class="btn btn-square btn-ghost hover:bg-neutral hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-user-icon lucide-circle-user"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="10" r="3"/><path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"/></svg></a></div>
+              </div>
+            </nav>
+            <div class="p-4">
+              <div class="flex w-full flex-col">
+                <div class="flex justify-between bg-secondary border-2 border-primary rounded-sm shadow-sm 
+p-6 w-full">
+                  <div class="flex grid grid-cols-3 w-full gap-y-4">
+                    <div class="col-span-2">
+                      <h1 class="text-3xl font-bold">Room Loads</h1>
+                    </div>
+                    <div class="flex justify-end grow">
+                      <div class="tooltip tooltip-left" data-tip="Set sensible heat ratio">
+                        <button class="btn btn-primary text-lg font-bold py-2 " onclick="shrForm.showModal()">
+                          <div class="flex grow justify-end items-end space-x-4">
+                            <span>Sensible Heat Ratio</span>
+                            <div class="badge badge-lg badge-outline"><span>0.83</span></div>
+                          </div>
+                        </button>
+                      </div>
+                    </div>
+                    <div class="flex items-end space-x-4 font-bold">
+                      <span class="text-lg">Heating Total</span>
+                      <div class="badge badge-lg badge-outline badge-error"><span>42,255</span></div>
+                    </div>
+                    <div class="flex justify-center items-end space-x-4 my-auto font-bold">
+                      <span class="text-lg">Cooling Total</span>
+                      <div class="badge badge-lg badge-outline badge-success"><span>26,835</span></div>
+                    </div>
+                    <div class="flex grow justify-end items-end space-x-4 me-4 my-auto font-bold">
+                      <span class="text-lg">Cooling Sensible</span>
+                      <div class="badge badge-lg badge-outline badge-info"><span>22,273</span></div>
+                    </div>
+                  </div>
+                </div>
+                <dialog id="shrForm" class="modal">
+                  <div class="modal-box">
+                    <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick="shrForm.close()">  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
+                    <h1 class="text-xl font-bold mb-6">Sensible Heat Ratio</h1>
+                    <form class="grid grid-cols-1 gap-4" hx-patch="/projects/00000000-0000-0000-0000-000000000000/rooms/update-shr" hx-target="body" hx-swap="outerHTML">
+                      <input class="hidden" name="projectID" value="00000000-0000-0000-0000-000000000000">
+                      SHR<label class="input w-full"><span class="label"></span>
+                      <input name="sensibleHeatRatio" type="number" value="0.83" placeholder="0.83" min="0" max="1" step="0.01" autofocus></label>
+                      <button class="btn btn-secondary btn-block my-6" type="submit">Submit</button>
+                    </form>
+                  </div>
+                </dialog>
+                <table class="table table-zebra text-lg" id="roomsTable">
+                  <thead>
+                    <tr class="text-lg font-bold">
+                      <th>Name</th>
+                      <th>
+                        <div class="flex justify-center">Heating Load</div>
+                      </th>
+                      <th>
+                        <div class="flex justify-center">Cooling Total</div>
+                      </th>
+                      <th>
+                        <div class="flex justify-center">Cooling Sensible</div>
+                      </th>
+                      <th>
+                        <div class="flex justify-center">Register Count</div>
+                      </th>
+                      <th>
+                        <div class="flex justify-end me-2">
+                          <div class="tooltip tooltip-left" data-tip="Add Room">
+                            <button type="button" class="btn btn-primary mx-auto tooltip-left" onclick="roomForm.showModal()"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-plus-icon lucide-circle-plus"><circle cx="12" cy="12" r="10"/><path d="M8 12h8"/><path d="M12 8v8"/></svg></button>
+                          </div>
+                        </div>
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr id="roomRow_00000000000000000000000000000001">
+                      <td>Bed-1</td>
+                      <td>
+                        <div class="flex justify-center"><span>3,913</span></div>
+                      </td>
+                      <td>
+                        <div class="flex justify-center"><span>2,472</span></div>
+                      </td>
+                      <td>
+                        <div class="flex justify-center"><span>2,052</span></div>
+                      </td>
+                      <td>
+                        <div class="flex justify-center"><span>1</span></div>
+                      </td>
+                      <td>
+                        <div class="flex justify-end">
+                          <div class="join">
+                            <div class="tooltip tooltip-bottom" data-tip="Delete room">
+                              <button type="button" class="btn btn-error join-item btn-ghost" hx-delete="/projects/00000000-0000-0000-0000-000000000000/rooms/00000000-0000-0000-0000-000000000001" hx-target="closest tr" hx-confirm="Are you sure?"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash2-icon lucide-trash-2"><path d="M10 11v6"/><path d="M14 11v6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg></button>
+                            </div>
+                            <div class="tooltip tooltip-bottom" data-tip="Edit room">
+                              <button class="btn join-item btn-ghost" type="button" onclick="roomForm_00000000000000000000000000000001.showModal()">
+                                <div class="flex">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-pen-icon lucide-square-pen"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></svg>
+                                  
+                                </div>
+                              </button>
+                            </div>
+                          </div>
+                        </div>
+                        <dialog id="roomForm_00000000000000000000000000000001" class="modal">
+                          <div class="modal-box">
+                            <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick="roomForm_00000000000000000000000000000001.close()">  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
+                            <h1 class="text-3xl font-bold pb-6">Room</h1>
+                            <form class="grid grid-cols-1 gap-4" hx-patch="/projects/00000000-0000-0000-0000-000000000000/rooms/00000000-0000-0000-0000-000000000001" hx-target="body" hx-swap="outerHTML">
+                              <input class="hidden" name="projectID" value="00000000-0000-0000-0000-000000000000">
+                              <input class="hidden" name="id" value="00000000-0000-0000-0000-000000000001">
+                              Name<label class="input w-full"><span class="label"></span>
+                              <input name="name" type="text" placeholder="Name" required autofocus value="Bed-1">
+                              Heating Load</label><label class="input w-full"><span class="label"></span>
+                              <input name="heatingLoad" type="number" placeholder="1234" required min="0" value="3913.0">
+                              Cooling Total</label><label class="input w-full"><span class="label"></span>
+                              <input name="coolingTotal" type="number" placeholder="1234" required min="0" value="2472.0">
+                              Cooling Sensible</label><label class="input w-full"><span class="label"></span>
+                              <input name="coolingSensible" type="number" placeholder="1234 (Optional)" min="0" value="">
+                              Registers</label><label class="input w-full"><span class="label"></span>
+                              <input name="registerCount" type="number" min="1" required value="1"></label>
+                              <button class="btn btn-secondary btn-block" type="submit">Submit</button>
+                            </form>
+                          </div>
+                        </dialog>
+                      </td>
+                    </tr>
+                    <tr id="roomRow_00000000000000000000000000000002">
+                      <td>Entry</td>
+                      <td>
+                        <div class="flex justify-center"><span>8,284</span></div>
+                      </td>
+                      <td>
+                        <div class="flex justify-center"><span>2,916</span></div>
+                      </td>
+                      <td>
+                        <div class="flex justify-center"><span>2,420</span></div>
+                      </td>
+                      <td>
+                        <div class="flex justify-center"><span>2</span></div>
+                      </td>
+                      <td>
+                        <div class="flex justify-end">
+                          <div class="join">
+                            <div class="tooltip tooltip-bottom" data-tip="Delete room">
+                              <button type="button" class="btn btn-error join-item btn-ghost" hx-delete="/projects/00000000-0000-0000-0000-000000000000/rooms/00000000-0000-0000-0000-000000000002" hx-target="closest tr" hx-confirm="Are you sure?"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash2-icon lucide-trash-2"><path d="M10 11v6"/><path d="M14 11v6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg></button>
+                            </div>
+                            <div class="tooltip tooltip-bottom" data-tip="Edit room">
+                              <button class="btn join-item btn-ghost" type="button" onclick="roomForm_00000000000000000000000000000002.showModal()">
+                                <div class="flex">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-pen-icon lucide-square-pen"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></svg>
+                                  
+                                </div>
+                              </button>
+                            </div>
+                          </div>
+                        </div>
+                        <dialog id="roomForm_00000000000000000000000000000002" class="modal">
+                          <div class="modal-box">
+                            <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick="roomForm_00000000000000000000000000000002.close()">  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
+                            <h1 class="text-3xl font-bold pb-6">Room</h1>
+                            <form class="grid grid-cols-1 gap-4" hx-patch="/projects/00000000-0000-0000-0000-000000000000/rooms/00000000-0000-0000-0000-000000000002" hx-target="body" hx-swap="outerHTML">
+                              <input class="hidden" name="projectID" value="00000000-0000-0000-0000-000000000000">
+                              <input class="hidden" name="id" value="00000000-0000-0000-0000-000000000002">
+                              Name<label class="input w-full"><span class="label"></span>
+                              <input name="name" type="text" placeholder="Name" required autofocus value="Entry">
+                              Heating Load</label><label class="input w-full"><span class="label"></span>
+                              <input name="heatingLoad" type="number" placeholder="1234" required min="0" value="8284.0">
+                              Cooling Total</label><label class="input w-full"><span class="label"></span>
+                              <input name="coolingTotal" type="number" placeholder="1234" required min="0" value="2916.0">
+                              Cooling Sensible</label><label class="input w-full"><span class="label"></span>
+                              <input name="coolingSensible" type="number" placeholder="1234 (Optional)" min="0" value="">
+                              Registers</label><label class="input w-full"><span class="label"></span>
+                              <input name="registerCount" type="number" min="1" required value="2"></label>
+                              <button class="btn btn-secondary btn-block" type="submit">Submit</button>
+                            </form>
+                          </div>
+                        </dialog>
+                      </td>
+                    </tr>
+                    <tr id="roomRow_00000000000000000000000000000003">
+                      <td>Family Room</td>
+                      <td>
+                        <div class="flex justify-center"><span>9,785</span></div>
+                      </td>
+                      <td>
+                        <div class="flex justify-center"><span>7,446</span></div>
+                      </td>
+                      <td>
+                        <div class="flex justify-center"><span>6,180</span></div>
+                      </td>
+                      <td>
+                        <div class="flex justify-center"><span>3</span></div>
+                      </td>
+                      <td>
+                        <div class="flex justify-end">
+                          <div class="join">
+                            <div class="tooltip tooltip-bottom" data-tip="Delete room">
+                              <button type="button" class="btn btn-error join-item btn-ghost" hx-delete="/projects/00000000-0000-0000-0000-000000000000/rooms/00000000-0000-0000-0000-000000000003" hx-target="closest tr" hx-confirm="Are you sure?"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash2-icon lucide-trash-2"><path d="M10 11v6"/><path d="M14 11v6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg></button>
+                            </div>
+                            <div class="tooltip tooltip-bottom" data-tip="Edit room">
+                              <button class="btn join-item btn-ghost" type="button" onclick="roomForm_00000000000000000000000000000003.showModal()">
+                                <div class="flex">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-pen-icon lucide-square-pen"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></svg>
+                                  
+                                </div>
+                              </button>
+                            </div>
+                          </div>
+                        </div>
+                        <dialog id="roomForm_00000000000000000000000000000003" class="modal">
+                          <div class="modal-box">
+                            <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick="roomForm_00000000000000000000000000000003.close()">  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
+                            <h1 class="text-3xl font-bold pb-6">Room</h1>
+                            <form class="grid grid-cols-1 gap-4" hx-patch="/projects/00000000-0000-0000-0000-000000000000/rooms/00000000-0000-0000-0000-000000000003" hx-target="body" hx-swap="outerHTML">
+                              <input class="hidden" name="projectID" value="00000000-0000-0000-0000-000000000000">
+                              <input class="hidden" name="id" value="00000000-0000-0000-0000-000000000003">
+                              Name<label class="input w-full"><span class="label"></span>
+                              <input name="name" type="text" placeholder="Name" required autofocus value="Family Room">
+                              Heating Load</label><label class="input w-full"><span class="label"></span>
+                              <input name="heatingLoad" type="number" placeholder="1234" required min="0" value="9785.0">
+                              Cooling Total</label><label class="input w-full"><span class="label"></span>
+                              <input name="coolingTotal" type="number" placeholder="1234" required min="0" value="7446.0">
+                              Cooling Sensible</label><label class="input w-full"><span class="label"></span>
+                              <input name="coolingSensible" type="number" placeholder="1234 (Optional)" min="0" value="">
+                              Registers</label><label class="input w-full"><span class="label"></span>
+                              <input name="registerCount" type="number" min="1" required value="3"></label>
+                              <button class="btn btn-secondary btn-block" type="submit">Submit</button>
+                            </form>
+                          </div>
+                        </dialog>
+                      </td>
+                    </tr>
+                    <tr id="roomRow_00000000000000000000000000000004">
+                      <td>Kitchen</td>
+                      <td>
+                        <div class="flex justify-center"><span>4,518</span></div>
+                      </td>
+                      <td>
+                        <div class="flex justify-center"><span>5,096</span></div>
+                      </td>
+                      <td>
+                        <div class="flex justify-center"><span>4,230</span></div>
+                      </td>
+                      <td>
+                        <div class="flex justify-center"><span>2</span></div>
+                      </td>
+                      <td>
+                        <div class="flex justify-end">
+                          <div class="join">
+                            <div class="tooltip tooltip-bottom" data-tip="Delete room">
+                              <button type="button" class="btn btn-error join-item btn-ghost" hx-delete="/projects/00000000-0000-0000-0000-000000000000/rooms/00000000-0000-0000-0000-000000000004" hx-target="closest tr" hx-confirm="Are you sure?"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash2-icon lucide-trash-2"><path d="M10 11v6"/><path d="M14 11v6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg></button>
+                            </div>
+                            <div class="tooltip tooltip-bottom" data-tip="Edit room">
+                              <button class="btn join-item btn-ghost" type="button" onclick="roomForm_00000000000000000000000000000004.showModal()">
+                                <div class="flex">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-pen-icon lucide-square-pen"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></svg>
+                                  
+                                </div>
+                              </button>
+                            </div>
+                          </div>
+                        </div>
+                        <dialog id="roomForm_00000000000000000000000000000004" class="modal">
+                          <div class="modal-box">
+                            <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick="roomForm_00000000000000000000000000000004.close()">  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
+                            <h1 class="text-3xl font-bold pb-6">Room</h1>
+                            <form class="grid grid-cols-1 gap-4" hx-patch="/projects/00000000-0000-0000-0000-000000000000/rooms/00000000-0000-0000-0000-000000000004" hx-target="body" hx-swap="outerHTML">
+                              <input class="hidden" name="projectID" value="00000000-0000-0000-0000-000000000000">
+                              <input class="hidden" name="id" value="00000000-0000-0000-0000-000000000004">
+                              Name<label class="input w-full"><span class="label"></span>
+                              <input name="name" type="text" placeholder="Name" required autofocus value="Kitchen">
+                              Heating Load</label><label class="input w-full"><span class="label"></span>
+                              <input name="heatingLoad" type="number" placeholder="1234" required min="0" value="4518.0">
+                              Cooling Total</label><label class="input w-full"><span class="label"></span>
+                              <input name="coolingTotal" type="number" placeholder="1234" required min="0" value="5096.0">
+                              Cooling Sensible</label><label class="input w-full"><span class="label"></span>
+                              <input name="coolingSensible" type="number" placeholder="1234 (Optional)" min="0" value="">
+                              Registers</label><label class="input w-full"><span class="label"></span>
+                              <input name="registerCount" type="number" min="1" required value="2"></label>
+                              <button class="btn btn-secondary btn-block" type="submit">Submit</button>
+                            </form>
+                          </div>
+                        </dialog>
+                      </td>
+                    </tr>
+                    <tr id="roomRow_00000000000000000000000000000005">
+                      <td>Living Room</td>
+                      <td>
+                        <div class="flex justify-center"><span>7,553</span></div>
+                      </td>
+                      <td>
+                        <div class="flex justify-center"><span>6,829</span></div>
+                      </td>
+                      <td>
+                        <div class="flex justify-center"><span>5,668</span></div>
+                      </td>
+                      <td>
+                        <div class="flex justify-center"><span>2</span></div>
+                      </td>
+                      <td>
+                        <div class="flex justify-end">
+                          <div class="join">
+                            <div class="tooltip tooltip-bottom" data-tip="Delete room">
+                              <button type="button" class="btn btn-error join-item btn-ghost" hx-delete="/projects/00000000-0000-0000-0000-000000000000/rooms/00000000-0000-0000-0000-000000000005" hx-target="closest tr" hx-confirm="Are you sure?"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash2-icon lucide-trash-2"><path d="M10 11v6"/><path d="M14 11v6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg></button>
+                            </div>
+                            <div class="tooltip tooltip-bottom" data-tip="Edit room">
+                              <button class="btn join-item btn-ghost" type="button" onclick="roomForm_00000000000000000000000000000005.showModal()">
+                                <div class="flex">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-pen-icon lucide-square-pen"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></svg>
+                                  
+                                </div>
+                              </button>
+                            </div>
+                          </div>
+                        </div>
+                        <dialog id="roomForm_00000000000000000000000000000005" class="modal">
+                          <div class="modal-box">
+                            <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick="roomForm_00000000000000000000000000000005.close()">  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
+                            <h1 class="text-3xl font-bold pb-6">Room</h1>
+                            <form class="grid grid-cols-1 gap-4" hx-patch="/projects/00000000-0000-0000-0000-000000000000/rooms/00000000-0000-0000-0000-000000000005" hx-target="body" hx-swap="outerHTML">
+                              <input class="hidden" name="projectID" value="00000000-0000-0000-0000-000000000000">
+                              <input class="hidden" name="id" value="00000000-0000-0000-0000-000000000005">
+                              Name<label class="input w-full"><span class="label"></span>
+                              <input name="name" type="text" placeholder="Name" required autofocus value="Living Room">
+                              Heating Load</label><label class="input w-full"><span class="label"></span>
+                              <input name="heatingLoad" type="number" placeholder="1234" required min="0" value="7553.0">
+                              Cooling Total</label><label class="input w-full"><span class="label"></span>
+                              <input name="coolingTotal" type="number" placeholder="1234" required min="0" value="6829.0">
+                              Cooling Sensible</label><label class="input w-full"><span class="label"></span>
+                              <input name="coolingSensible" type="number" placeholder="1234 (Optional)" min="0" value="">
+                              Registers</label><label class="input w-full"><span class="label"></span>
+                              <input name="registerCount" type="number" min="1" required value="2"></label>
+                              <button class="btn btn-secondary btn-block" type="submit">Submit</button>
+                            </form>
+                          </div>
+                        </dialog>
+                      </td>
+                    </tr>
+                    <tr id="roomRow_00000000000000000000000000000006">
+                      <td>Master</td>
+                      <td>
+                        <div class="flex justify-center"><span>8,202</span></div>
+                      </td>
+                      <td>
+                        <div class="flex justify-center"><span>2,076</span></div>
+                      </td>
+                      <td>
+                        <div class="flex justify-center"><span>1,723</span></div>
+                      </td>
+                      <td>
+                        <div class="flex justify-center"><span>2</span></div>
+                      </td>
+                      <td>
+                        <div class="flex justify-end">
+                          <div class="join">
+                            <div class="tooltip tooltip-bottom" data-tip="Delete room">
+                              <button type="button" class="btn btn-error join-item btn-ghost" hx-delete="/projects/00000000-0000-0000-0000-000000000000/rooms/00000000-0000-0000-0000-000000000006" hx-target="closest tr" hx-confirm="Are you sure?"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash2-icon lucide-trash-2"><path d="M10 11v6"/><path d="M14 11v6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg></button>
+                            </div>
+                            <div class="tooltip tooltip-bottom" data-tip="Edit room">
+                              <button class="btn join-item btn-ghost" type="button" onclick="roomForm_00000000000000000000000000000006.showModal()">
+                                <div class="flex">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-pen-icon lucide-square-pen"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></svg>
+                                  
+                                </div>
+                              </button>
+                            </div>
+                          </div>
+                        </div>
+                        <dialog id="roomForm_00000000000000000000000000000006" class="modal">
+                          <div class="modal-box">
+                            <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick="roomForm_00000000000000000000000000000006.close()">  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
+                            <h1 class="text-3xl font-bold pb-6">Room</h1>
+                            <form class="grid grid-cols-1 gap-4" hx-patch="/projects/00000000-0000-0000-0000-000000000000/rooms/00000000-0000-0000-0000-000000000006" hx-target="body" hx-swap="outerHTML">
+                              <input class="hidden" name="projectID" value="00000000-0000-0000-0000-000000000000">
+                              <input class="hidden" name="id" value="00000000-0000-0000-0000-000000000006">
+                              Name<label class="input w-full"><span class="label"></span>
+                              <input name="name" type="text" placeholder="Name" required autofocus value="Master">
+                              Heating Load</label><label class="input w-full"><span class="label"></span>
+                              <input name="heatingLoad" type="number" placeholder="1234" required min="0" value="8202.0">
+                              Cooling Total</label><label class="input w-full"><span class="label"></span>
+                              <input name="coolingTotal" type="number" placeholder="1234" required min="0" value="2076.0">
+                              Cooling Sensible</label><label class="input w-full"><span class="label"></span>
+                              <input name="coolingSensible" type="number" placeholder="1234 (Optional)" min="0" value="">
+                              Registers</label><label class="input w-full"><span class="label"></span>
+                              <input name="registerCount" type="number" min="1" required value="2"></label>
+                              <button class="btn btn-secondary btn-block" type="submit">Submit</button>
+                            </form>
+                          </div>
+                        </dialog>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+                <dialog id="roomForm" class="modal">
+                  <div class="modal-box">
+                    <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick="roomForm.close()">  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
+                    <h1 class="text-3xl font-bold pb-6">Room</h1>
+                    <form class="grid grid-cols-1 gap-4" hx-post="/projects/00000000-0000-0000-0000-000000000000/rooms" hx-target="body" hx-swap="outerHTML">
+                      <input class="hidden" name="projectID" value="00000000-0000-0000-0000-000000000000">
+                      Name<label class="input w-full"><span class="label"></span>
+                      <input name="name" type="text" placeholder="Name" required autofocus value="">
+                      Heating Load</label><label class="input w-full"><span class="label"></span>
+                      <input name="heatingLoad" type="number" placeholder="1234" required min="0" value="">
+                      Cooling Total</label><label class="input w-full"><span class="label"></span>
+                      <input name="coolingTotal" type="number" placeholder="1234" required min="0" value="">
+                      Cooling Sensible</label><label class="input w-full"><span class="label"></span>
+                      <input name="coolingSensible" type="number" placeholder="1234 (Optional)" min="0" value="">
+                      Registers</label><label class="input w-full"><span class="label"></span>
+                      <input name="registerCount" type="number" min="1" required value="1"></label>
+                      <button class="btn btn-secondary btn-block" type="submit">Submit</button>
+                    </form>
+                  </div>
+                </dialog>
+              </div>
+            </div>
+          </div>
+          <div class="drawer-side is-drawer-close:overflow-visible grow">
+            <label for="my-drawer-1" aria-label="close sidebar" class="drawer-overlay"></label>
+            <div class="flex grow h-full flex-col items-start bg-base-300 text-base-content
+is-drawer-close:min-w-[80px] is-drawer-open:max-w-[300px]">
+              <ul class="w-full grow">
+                <li class="flex w-full">
+                  <button class="w-full gap-1 py-2 border-b-1 border-gray-200
+hover:bg-neutral data-active:bg-neutral
+hover:text-white data-active:text-white
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1" hx-get="/projects/00000000-0000-0000-0000-000000000000" hx-push-url="true" hx-target="body" hx-swap="outerHTML">
+                    <div class="w-full p-2 gap-1
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1">
+                      <div class="items-center
+is-drawer-open:justify-start is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:justify-center is-drawer-close:mx-auto is-drawer-close:space-y-2">
+                        <div class="flex items-center justify-center is-drawer-close:text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin-icon lucide-map-pin"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/></svg></div>
+                        <div class="flex items-center justify-center"><span>Project</span></div>
+                      </div>
+                      <div class="flex grow justify-end items-end is-drawer-close:hidden text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge-check-icon lucide-badge-check"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m9 12 2 2 4-4"/></svg></div>
+                    </div>
+                  </button>
+                </li>
+                <li class="w-full">
+                  <button class="w-full gap-1 py-2 border-b-1 border-gray-200
+hover:bg-neutral data-active:bg-neutral
+hover:text-white data-active:text-white
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1" hx-get="/projects/00000000-0000-0000-0000-000000000000/rooms" hx-push-url="true" hx-target="body" hx-swap="outerHTML" data-active="true">
+                    <div class="w-full p-2 gap-1
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1">
+                      <div class="items-center
+is-drawer-open:justify-start is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:justify-center is-drawer-close:mx-auto is-drawer-close:space-y-2">
+                        <div class="flex items-center justify-center is-drawer-close:text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-door-closed-icon lucide-door-closed"><path d="M10 12h.01"/><path d="M18 20V6a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v14"/><path d="M2 20h20"/></svg></div>
+                        <div class="flex items-center justify-center"><span>Rooms</span></div>
+                      </div>
+                      <div class="flex grow justify-end items-end is-drawer-close:hidden text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge-check-icon lucide-badge-check"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m9 12 2 2 4-4"/></svg></div>
+                    </div>
+                  </button>
+                </li>
+                <li class="flex w-full">
+                  <button class="w-full gap-1 py-2 border-b-1 border-gray-200
+hover:bg-neutral data-active:bg-neutral
+hover:text-white data-active:text-white
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1" hx-get="/projects/00000000-0000-0000-0000-000000000000/equipment" hx-push-url="true" hx-target="body" hx-swap="outerHTML">
+                    <div class="w-full p-2 gap-1
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1">
+                      <div class="items-center
+is-drawer-open:justify-start is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:justify-center is-drawer-close:mx-auto is-drawer-close:space-y-2">
+                        <div class="flex items-center justify-center is-drawer-close:text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-fan-icon lucide-fan"><path d="M10.827 16.379a6.082 6.082 0 0 1-8.618-7.002l5.412 1.45a6.082 6.082 0 0 1 7.002-8.618l-1.45 5.412a6.082 6.082 0 0 1 8.618 7.002l-5.412-1.45a6.082 6.082 0 0 1-7.002 8.618l1.45-5.412Z"/><path d="M12 12v.01"/></svg></div>
+                        <div class="flex items-center justify-center"><span>Equipment</span></div>
+                      </div>
+                      <div class="flex grow justify-end items-end is-drawer-close:hidden text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge-check-icon lucide-badge-check"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m9 12 2 2 4-4"/></svg></div>
+                    </div>
+                  </button>
+                </li>
+                <li class="w-full">
+                  <button class="w-full gap-1 py-2 border-b-1 border-gray-200
+hover:bg-neutral data-active:bg-neutral
+hover:text-white data-active:text-white
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1" hx-get="/projects/00000000-0000-0000-0000-000000000000/effective-lengths" hx-push-url="true" hx-target="body" hx-swap="outerHTML">
+                    <div class="w-full p-2 gap-1
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1">
+                      <div class="items-center
+is-drawer-open:justify-start is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:justify-center is-drawer-close:mx-auto is-drawer-close:space-y-2">
+                        <div class="flex items-center justify-center is-drawer-close:text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ruler-dimension-line-icon lucide-ruler-dimension-line"><path d="M10 15v-3"/><path d="M14 15v-3"/><path d="M18 15v-3"/><path d="M2 8V4"/><path d="M22 6H2"/><path d="M22 8V4"/><path d="M6 15v-3"/><rect x="2" y="12" width="20" height="8" rx="2"/></svg></div>
+                        <div class="flex items-center justify-center"><span>T.E.L.</span></div>
+                      </div>
+                      <div class="flex grow justify-end items-end is-drawer-close:hidden text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge-check-icon lucide-badge-check"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m9 12 2 2 4-4"/></svg></div>
+                    </div>
+                  </button>
+                </li>
+                <li class="w-full">
+                  <button class="w-full gap-1 py-2 border-b-1 border-gray-200
+hover:bg-neutral data-active:bg-neutral
+hover:text-white data-active:text-white
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1" hx-get="/projects/00000000-0000-0000-0000-000000000000/friction-rate" hx-push-url="true" hx-target="body" hx-swap="outerHTML">
+                    <div class="w-full p-2 gap-1
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1">
+                      <div class="items-center
+is-drawer-open:justify-start is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:justify-center is-drawer-close:mx-auto is-drawer-close:space-y-2">
+                        <div class="flex items-center justify-center is-drawer-close:text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-function-icon lucide-square-function"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><path d="M9 17c2 0 2.8-1 2.8-2.8V10c0-2 1-3.3 3.2-3"/><path d="M9 11.2h5.7"/></svg></div>
+                        <div class="flex items-center justify-center"><span>Friction Rate</span></div>
+                      </div>
+                      <div class="flex grow justify-end items-end is-drawer-close:hidden text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge-check-icon lucide-badge-check"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m9 12 2 2 4-4"/></svg></div>
+                    </div>
+                  </button>
+                </li>
+                <li class="w-full">
+                  <button class="w-full gap-1 py-2 border-b-1 border-gray-200
+hover:bg-neutral data-active:bg-neutral
+hover:text-white data-active:text-white
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1" hx-get="/projects/00000000-0000-0000-0000-000000000000/duct-sizing" hx-push-url="true" hx-target="body" hx-swap="outerHTML">
+                    <div class="w-full p-2 gap-1
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1">
+                      <div class="items-center
+is-drawer-open:justify-start is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:justify-center is-drawer-close:mx-auto is-drawer-close:space-y-2">
+                        <div class="flex items-center justify-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wind-icon lucide-wind"><path d="M12.8 19.6A2 2 0 1 0 14 16H2"/><path d="M17.5 8a2.5 2.5 0 1 1 2 4H2"/><path d="M9.8 4.4A2 2 0 1 1 11 8H2"/></svg></div>
+                        <div class="flex items-center justify-center"><span>Duct Sizes</span></div>
+                      </div>
+                    </div>
+                  </button>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </main>
+      <div class="bottom-0 left-0 bg-error">
+        <footer class="footer sm:footer-horizontal footer-center
+bg-base-300 text-base-content p-4">
+          <aside>
+            <p>Copyright © 2026 - All rights reserved by Michael Housh</p>
+          </aside>
+        </footer>
+      </div>
+    </div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/Tests/ViewControllerTests/__Snapshots__/ViewControllerTests/projectDetail.3.html b/Tests/ViewControllerTests/__Snapshots__/ViewControllerTests/projectDetail.3.html
new file mode 100644
index 0000000..7ba7bc4
--- /dev/null
+++ b/Tests/ViewControllerTests/__Snapshots__/ViewControllerTests/projectDetail.3.html
@@ -0,0 +1,236 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Duct Calc</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta content="ductcalc.com" name="og:site_name">
+    <meta content="Duct Calc" name="og:title">
+    <meta content="Duct sizing based on ACCA, Manual-D." name="description">
+    <meta content="Duct sizing based on ACCA, Manual-D." name="og:description">
+    <meta content="/images/mand_logo.png" name="og:image">
+    <meta content="/images/mand_logo.png" name="twitter:image">
+    <meta content="Duct Calc" name="twitter:image:alt">
+    <meta content="summary_large_image" name="twitter:card">
+    <meta content="1536" name="og:image:width">
+    <meta content="1024" name="og:image:height">
+    <meta content="duct, hvac, duct-design, duct design, manual-d, manual d, design" name="keywords">
+    <script src="https://unpkg.com/htmx.org@2.0.8"></script>
+    <script src="/js/main.js"></script>
+    <link rel="stylesheet" href="/css/output.css">
+    <link rel="icon" href="/images/favicon.ico" type="image/x-icon">
+    <link rel="icon" href="/images/favicon-32x32.png" type="image/png">
+    <link rel="icon" href="/images/favicon-16x16.png" type="image/png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
+    <link rel="manifest" href="/site.webmanifest">
+    <script src="https://unpkg.com/htmx-remove@latest" crossorigin="anonymous" integrity="sha384-NwB2Xh66PNEYfVki0ao13UAFmdNtMIdBKZ8sNGRT6hKfCPaINuZ4ScxS6vVAycPT"></script>
+  </head>
+  <body>
+    <div class="flex flex-col min-h-screen min-w-full justify-between">
+      <main class="flex flex-col min-h-screen min-w-full grow mb-auto">
+        <div class="drawer lg:drawer-open h-full">
+          <input id="my-drawer-1" type="checkbox" class="drawer-toggle">
+          <div class="drawer-content overflow-auto">
+            <nav class="navbar w-full bg-base-300 text-base-content shadow-sm mb-4">
+              <div class="flex flex-1 space-x-4 items-center">
+                <div class="tooltip tooltip-right" data-tip="Open sidebar"><label for="my-drawer-1" class="size-7 btn btn-square btn-ghost hover:bg-neutral hover:text-white" aria-label="open sidebar"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor" class="my-1.5 inline-block"><path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"></path><path d="M9 4v16"></path><path d="M14 10l2 2l-2 2"></path></svg></label></div>
+                <div class="tooltip tooltip-right" data-tip="Home">
+                  <a class="flex w-fit h-fit text-xl items-end px-4 py-2 btn btn-square btn-ghost hover:bg-neutral hover:text-white" href="/projects">
+                  <img src="/images/mand_logo_sm.webp">
+                  Duct Calc<span></span></a>
+                </div>
+              </div>
+              <div class="flex-none">
+                <div class="tooltip tooltip-left" data-tip="Profile"><a href="/profile" class="btn btn-square btn-ghost hover:bg-neutral hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-user-icon lucide-circle-user"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="10" r="3"/><path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"/></svg></a></div>
+              </div>
+            </nav>
+            <div class="p-4">
+              <div class="space-y-4" id="equipmentInfo">
+                <div class="flex justify-between bg-secondary border-2 border-primary rounded-sm shadow-sm 
+p-6 w-full">
+                  <h1 class="text-3xl font-bold">Equipment Details</h1>
+                  <div class="tooltip tooltip-left" data-tip="Edit equipment details">
+                    <button class="btn btn-primary" type="button" onclick="equipmentForm.showModal()">
+                      <div class="flex">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-pen-icon lucide-square-pen"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></svg>
+                        
+                      </div>
+                    </button>
+                  </div>
+                </div>
+                <table class="table table-zebra">
+                  <tbody class="text-lg">
+                    <tr>
+                      <td><span class="text-lg label font-bold">Static Pressure</span></td>
+                      <td>
+                        <div class="flex justify-end"><span>0.5</span></div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td><span class="text-lg label font-bold">Heating CFM</span></td>
+                      <td>
+                        <div class="flex justify-end"><span>900</span></div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td><span class="text-lg label font-bold">Cooling CFM</span></td>
+                      <td>
+                        <div class="flex justify-end"><span>1,000</span></div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+                <dialog id="equipmentForm" class="modal">
+                  <div class="modal-box">
+                    <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick="equipmentForm.close()">  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
+                    <h1 class="text-3xl font-bold pb-6 ps-2">Equipment Info</h1>
+                    <form class="grid grid-cols-1 gap-4" hx-patch="/projects/00000000-0000-0000-0000-000000000000/equipment/00000000-0000-0000-0000-000000000007" hx-target="body" hx-swap="outerHTML">
+                      <input class="hidden" name="projectID" value="00000000-0000-0000-0000-000000000000">
+                      <input class="hidden" name="id" value="00000000-0000-0000-0000-000000000007">
+                      Static Pressure<label class="input w-full"><span class="label"></span>
+                      <input name="staticPressure" type="number" value="0.5" min="0" max="1.0" step="0.1" required>
+                      Heating CFM</label><label class="input w-full"><span class="label"></span>
+                      <input name="heatingCFM" type="number" value="900" placeholder="1000" min="0" required autofocus>
+                      Cooling CFM</label><label class="input w-full"><span class="label"></span>
+                      <input name="coolingCFM" type="number" value="1000" placeholder="1000" min="0" required></label>
+                      <button class="btn btn-secondary btn-block my-6" type="submit">Save</button>
+                    </form>
+                  </div>
+                </dialog>
+              </div>
+            </div>
+          </div>
+          <div class="drawer-side is-drawer-close:overflow-visible grow">
+            <label for="my-drawer-1" aria-label="close sidebar" class="drawer-overlay"></label>
+            <div class="flex grow h-full flex-col items-start bg-base-300 text-base-content
+is-drawer-close:min-w-[80px] is-drawer-open:max-w-[300px]">
+              <ul class="w-full grow">
+                <li class="flex w-full">
+                  <button class="w-full gap-1 py-2 border-b-1 border-gray-200
+hover:bg-neutral data-active:bg-neutral
+hover:text-white data-active:text-white
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1" hx-get="/projects/00000000-0000-0000-0000-000000000000" hx-push-url="true" hx-target="body" hx-swap="outerHTML">
+                    <div class="w-full p-2 gap-1
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1">
+                      <div class="items-center
+is-drawer-open:justify-start is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:justify-center is-drawer-close:mx-auto is-drawer-close:space-y-2">
+                        <div class="flex items-center justify-center is-drawer-close:text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin-icon lucide-map-pin"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/></svg></div>
+                        <div class="flex items-center justify-center"><span>Project</span></div>
+                      </div>
+                      <div class="flex grow justify-end items-end is-drawer-close:hidden text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge-check-icon lucide-badge-check"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m9 12 2 2 4-4"/></svg></div>
+                    </div>
+                  </button>
+                </li>
+                <li class="w-full">
+                  <button class="w-full gap-1 py-2 border-b-1 border-gray-200
+hover:bg-neutral data-active:bg-neutral
+hover:text-white data-active:text-white
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1" hx-get="/projects/00000000-0000-0000-0000-000000000000/rooms" hx-push-url="true" hx-target="body" hx-swap="outerHTML">
+                    <div class="w-full p-2 gap-1
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1">
+                      <div class="items-center
+is-drawer-open:justify-start is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:justify-center is-drawer-close:mx-auto is-drawer-close:space-y-2">
+                        <div class="flex items-center justify-center is-drawer-close:text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-door-closed-icon lucide-door-closed"><path d="M10 12h.01"/><path d="M18 20V6a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v14"/><path d="M2 20h20"/></svg></div>
+                        <div class="flex items-center justify-center"><span>Rooms</span></div>
+                      </div>
+                      <div class="flex grow justify-end items-end is-drawer-close:hidden text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge-check-icon lucide-badge-check"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m9 12 2 2 4-4"/></svg></div>
+                    </div>
+                  </button>
+                </li>
+                <li class="flex w-full">
+                  <button class="w-full gap-1 py-2 border-b-1 border-gray-200
+hover:bg-neutral data-active:bg-neutral
+hover:text-white data-active:text-white
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1" hx-get="/projects/00000000-0000-0000-0000-000000000000/equipment" hx-push-url="true" hx-target="body" hx-swap="outerHTML" data-active="true">
+                    <div class="w-full p-2 gap-1
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1">
+                      <div class="items-center
+is-drawer-open:justify-start is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:justify-center is-drawer-close:mx-auto is-drawer-close:space-y-2">
+                        <div class="flex items-center justify-center is-drawer-close:text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-fan-icon lucide-fan"><path d="M10.827 16.379a6.082 6.082 0 0 1-8.618-7.002l5.412 1.45a6.082 6.082 0 0 1 7.002-8.618l-1.45 5.412a6.082 6.082 0 0 1 8.618 7.002l-5.412-1.45a6.082 6.082 0 0 1-7.002 8.618l1.45-5.412Z"/><path d="M12 12v.01"/></svg></div>
+                        <div class="flex items-center justify-center"><span>Equipment</span></div>
+                      </div>
+                      <div class="flex grow justify-end items-end is-drawer-close:hidden text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge-check-icon lucide-badge-check"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m9 12 2 2 4-4"/></svg></div>
+                    </div>
+                  </button>
+                </li>
+                <li class="w-full">
+                  <button class="w-full gap-1 py-2 border-b-1 border-gray-200
+hover:bg-neutral data-active:bg-neutral
+hover:text-white data-active:text-white
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1" hx-get="/projects/00000000-0000-0000-0000-000000000000/effective-lengths" hx-push-url="true" hx-target="body" hx-swap="outerHTML">
+                    <div class="w-full p-2 gap-1
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1">
+                      <div class="items-center
+is-drawer-open:justify-start is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:justify-center is-drawer-close:mx-auto is-drawer-close:space-y-2">
+                        <div class="flex items-center justify-center is-drawer-close:text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ruler-dimension-line-icon lucide-ruler-dimension-line"><path d="M10 15v-3"/><path d="M14 15v-3"/><path d="M18 15v-3"/><path d="M2 8V4"/><path d="M22 6H2"/><path d="M22 8V4"/><path d="M6 15v-3"/><rect x="2" y="12" width="20" height="8" rx="2"/></svg></div>
+                        <div class="flex items-center justify-center"><span>T.E.L.</span></div>
+                      </div>
+                      <div class="flex grow justify-end items-end is-drawer-close:hidden text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge-check-icon lucide-badge-check"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m9 12 2 2 4-4"/></svg></div>
+                    </div>
+                  </button>
+                </li>
+                <li class="w-full">
+                  <button class="w-full gap-1 py-2 border-b-1 border-gray-200
+hover:bg-neutral data-active:bg-neutral
+hover:text-white data-active:text-white
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1" hx-get="/projects/00000000-0000-0000-0000-000000000000/friction-rate" hx-push-url="true" hx-target="body" hx-swap="outerHTML">
+                    <div class="w-full p-2 gap-1
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1">
+                      <div class="items-center
+is-drawer-open:justify-start is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:justify-center is-drawer-close:mx-auto is-drawer-close:space-y-2">
+                        <div class="flex items-center justify-center is-drawer-close:text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-function-icon lucide-square-function"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><path d="M9 17c2 0 2.8-1 2.8-2.8V10c0-2 1-3.3 3.2-3"/><path d="M9 11.2h5.7"/></svg></div>
+                        <div class="flex items-center justify-center"><span>Friction Rate</span></div>
+                      </div>
+                      <div class="flex grow justify-end items-end is-drawer-close:hidden text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge-check-icon lucide-badge-check"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m9 12 2 2 4-4"/></svg></div>
+                    </div>
+                  </button>
+                </li>
+                <li class="w-full">
+                  <button class="w-full gap-1 py-2 border-b-1 border-gray-200
+hover:bg-neutral data-active:bg-neutral
+hover:text-white data-active:text-white
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1" hx-get="/projects/00000000-0000-0000-0000-000000000000/duct-sizing" hx-push-url="true" hx-target="body" hx-swap="outerHTML">
+                    <div class="w-full p-2 gap-1
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1">
+                      <div class="items-center
+is-drawer-open:justify-start is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:justify-center is-drawer-close:mx-auto is-drawer-close:space-y-2">
+                        <div class="flex items-center justify-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wind-icon lucide-wind"><path d="M12.8 19.6A2 2 0 1 0 14 16H2"/><path d="M17.5 8a2.5 2.5 0 1 1 2 4H2"/><path d="M9.8 4.4A2 2 0 1 1 11 8H2"/></svg></div>
+                        <div class="flex items-center justify-center"><span>Duct Sizes</span></div>
+                      </div>
+                    </div>
+                  </button>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </main>
+      <div class="bottom-0 left-0 bg-error">
+        <footer class="footer sm:footer-horizontal footer-center
+bg-base-300 text-base-content p-4">
+          <aside>
+            <p>Copyright © 2026 - All rights reserved by Michael Housh</p>
+          </aside>
+        </footer>
+      </div>
+    </div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/Tests/ViewControllerTests/__Snapshots__/ViewControllerTests/projectDetail.4.html b/Tests/ViewControllerTests/__Snapshots__/ViewControllerTests/projectDetail.4.html
new file mode 100644
index 0000000..694d334
--- /dev/null
+++ b/Tests/ViewControllerTests/__Snapshots__/ViewControllerTests/projectDetail.4.html
@@ -0,0 +1,366 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Duct Calc</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta content="ductcalc.com" name="og:site_name">
+    <meta content="Duct Calc" name="og:title">
+    <meta content="Duct sizing based on ACCA, Manual-D." name="description">
+    <meta content="Duct sizing based on ACCA, Manual-D." name="og:description">
+    <meta content="/images/mand_logo.png" name="og:image">
+    <meta content="/images/mand_logo.png" name="twitter:image">
+    <meta content="Duct Calc" name="twitter:image:alt">
+    <meta content="summary_large_image" name="twitter:card">
+    <meta content="1536" name="og:image:width">
+    <meta content="1024" name="og:image:height">
+    <meta content="duct, hvac, duct-design, duct design, manual-d, manual d, design" name="keywords">
+    <script src="https://unpkg.com/htmx.org@2.0.8"></script>
+    <script src="/js/main.js"></script>
+    <link rel="stylesheet" href="/css/output.css">
+    <link rel="icon" href="/images/favicon.ico" type="image/x-icon">
+    <link rel="icon" href="/images/favicon-32x32.png" type="image/png">
+    <link rel="icon" href="/images/favicon-16x16.png" type="image/png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
+    <link rel="manifest" href="/site.webmanifest">
+    <script src="https://unpkg.com/htmx-remove@latest" crossorigin="anonymous" integrity="sha384-NwB2Xh66PNEYfVki0ao13UAFmdNtMIdBKZ8sNGRT6hKfCPaINuZ4ScxS6vVAycPT"></script>
+  </head>
+  <body>
+    <div class="flex flex-col min-h-screen min-w-full justify-between">
+      <main class="flex flex-col min-h-screen min-w-full grow mb-auto">
+        <div class="drawer lg:drawer-open h-full">
+          <input id="my-drawer-1" type="checkbox" class="drawer-toggle">
+          <div class="drawer-content overflow-auto">
+            <nav class="navbar w-full bg-base-300 text-base-content shadow-sm mb-4">
+              <div class="flex flex-1 space-x-4 items-center">
+                <div class="tooltip tooltip-right" data-tip="Open sidebar"><label for="my-drawer-1" class="size-7 btn btn-square btn-ghost hover:bg-neutral hover:text-white" aria-label="open sidebar"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor" class="my-1.5 inline-block"><path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"></path><path d="M9 4v16"></path><path d="M14 10l2 2l-2 2"></path></svg></label></div>
+                <div class="tooltip tooltip-right" data-tip="Home">
+                  <a class="flex w-fit h-fit text-xl items-end px-4 py-2 btn btn-square btn-ghost hover:bg-neutral hover:text-white" href="/projects">
+                  <img src="/images/mand_logo_sm.webp">
+                  Duct Calc<span></span></a>
+                </div>
+              </div>
+              <div class="flex-none">
+                <div class="tooltip tooltip-left" data-tip="Profile"><a href="/profile" class="btn btn-square btn-ghost hover:bg-neutral hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-user-icon lucide-circle-user"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="10" r="3"/><path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"/></svg></a></div>
+              </div>
+            </nav>
+            <div class="p-4">
+              <div class="space-y-4">
+                <div class="flex justify-between bg-secondary border-2 border-primary rounded-sm shadow-sm 
+p-6 w-full pb-6">
+                  <h1 class="text-3xl font-bold">Equivalent Lengths</h1>
+                  <div class="tooltip tooltip-left" data-tip="Add equivalent length">
+                    <button type="button" class="btn btn-primary" onclick="equivalentLengthForm.showModal()"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-plus-icon lucide-circle-plus"><circle cx="12" cy="12" r="10"/><path d="M8 12h8"/><path d="M12 8v8"/></svg></button>
+                  </div>
+                </div>
+                <dialog id="equivalentLengthForm" class="modal">
+                  <div class="modal-box">
+                    <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick="equivalentLengthForm.close()">  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
+                    <h1 class="text-2xl font-bold">Effective Length</h1>
+                    <div id="formStep_equivalentLengthForm" class="mt-4">
+                      <form class="space-y-4" hx-post="/projects/00000000-0000-0000-0000-000000000000/effective-lengths/stepOne" hx-target="#formStep_equivalentLengthForm" hx-swap="innerHTML">
+                        <label class="input w-full"><span class="label">Name</span>
+                        <input name="name" type="text" value="" required autofocus>
+                        Type</label><label class="select w-full"><span class="label"></span>
+                        <select name="type" id="type">
+                          <option value="return">Return</option>
+                          <option value="supply" selected>Supply</option>
+                        </select></label>
+                        <div class="flex justify-between">
+                          <div></div>
+                          <button class="btn btn-secondary" type="submit">Next</button>
+                        </div>
+                      </form>
+                    </div>
+                  </div>
+                </dialog>
+                <table class="table table-zebra text-lg">
+                  <thead>
+                    <tr class="text-lg">
+                      <th>Type</th>
+                      <th>Name</th>
+                      <th>Straight Lengths</th>
+                      <th>
+                        <div class="grid grid-cols-3 gap-2 min-w-[220px]">
+                          <div class="flex justify-center col-span-3">Groups</div>
+                          <div>Group</div>
+                          <div class="flex justify-center">T.E.L.</div>
+                          <div class="flex justify-end">Quantity</div>
+                        </div>
+                      </th>
+                      <th>
+                        <div class="flex justify-end me-[140px]">T.E.L.</div>
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr id="00000000000000000000000000000008">
+                      <td>
+                        <div class="badge badge-lg badge-outline badge-info"><span>supply</span></div>
+                      </td>
+                      <td>Supply - 1</td>
+                      <td>
+                        <div class="grid grid-cols-1 gap-2"><span>10</span><span>25</span></div>
+                      </td>
+                      <td>
+                        <div class="grid grid-cols-3 gap-2 min-w-[220px]">
+                          <span>1-a</span>
+                          <div class="flex justify-center"><span>20</span></div>
+                          <div class="flex justify-end"><span>1</span></div>
+                          2-b<span></span>
+                          <div class="flex justify-center"><span>30</span></div>
+                          <div class="flex justify-end"><span>1</span></div>
+                          3-a<span></span>
+                          <div class="flex justify-center"><span>10</span></div>
+                          <div class="flex justify-end"><span>1</span></div>
+                          12-a<span></span>
+                          <div class="flex justify-center"><span>10</span></div>
+                          <div class="flex justify-end"><span>1</span></div>
+                        </div>
+                      </td>
+                      <td>
+                        <div class="flex justify-end mx-auto space-x-4">
+                          <div class="badge badge-lg badge-outline badge-primary badge-lg pt-2"><span>105</span></div>
+                          <div class="flex justify-end -mt-2">
+                            <div class="join">
+                              <div class="tooltip tooltip-bottom" data-tip="Delete">
+                                <button type="button" class="btn btn-error join-item btn-ghost" hx-delete="/projects/00000000-0000-0000-0000-000000000000/effective-lengths/00000000-0000-0000-0000-000000000008" hx-confirm="Are you sure?" hx-target="#00000000000000000000000000000008" hx-swap="outerHTML"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash2-icon lucide-trash-2"><path d="M10 11v6"/><path d="M14 11v6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg></button>
+                              </div>
+                              <div class="tooltip tooltip-bottom" data-tip="Edit">
+                                <button class="btn join-item btn-ghost" type="button" onclick="equivalentLengthForm_00000000000000000000000000000008.showModal()">
+                                  <div class="flex">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-pen-icon lucide-square-pen"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></svg>
+                                    
+                                  </div>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <dialog id="equivalentLengthForm_00000000000000000000000000000008" class="modal">
+                          <div class="modal-box">
+                            <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick="equivalentLengthForm_00000000000000000000000000000008.close()">  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
+                            <h1 class="text-2xl font-bold">Effective Length</h1>
+                            <div id="formStep_equivalentLengthForm_00000000000000000000000000000008" class="mt-4">
+                              <form class="space-y-4" hx-post="/projects/00000000-0000-0000-0000-000000000000/effective-lengths/stepOne" hx-target="#formStep_equivalentLengthForm_00000000000000000000000000000008" hx-swap="innerHTML">
+                                <input class="hidden" name="id" value="00000000-0000-0000-0000-000000000008">
+                                Name<label class="input w-full"><span class="label"></span>
+                                <input name="name" type="text" value="Supply - 1" required autofocus>
+                                Type</label><label class="select w-full"><span class="label"></span>
+                                <select name="type" id="type">
+                                  <option value="return">Return</option>
+                                  <option value="supply" selected>Supply</option>
+                                </select></label>
+                                <div class="flex justify-between">
+                                  <div></div>
+                                  <button class="btn btn-secondary" type="submit">Next</button>
+                                </div>
+                              </form>
+                            </div>
+                          </div>
+                        </dialog>
+                      </td>
+                    </tr>
+                    <tr id="00000000000000000000000000000009">
+                      <td>
+                        <div class="badge badge-lg badge-outline badge-error"><span>return</span></div>
+                      </td>
+                      <td>Return - 1</td>
+                      <td>
+                        <div class="grid grid-cols-1 gap-2"><span>10</span><span>20</span><span>5</span></div>
+                      </td>
+                      <td>
+                        <div class="grid grid-cols-3 gap-2 min-w-[220px]">
+                          <span>5-a</span>
+                          <div class="flex justify-center"><span>10</span></div>
+                          <div class="flex justify-end"><span>1</span></div>
+                          6-a<span></span>
+                          <div class="flex justify-center"><span>15</span></div>
+                          <div class="flex justify-end"><span>1</span></div>
+                          7-a<span></span>
+                          <div class="flex justify-center"><span>20</span></div>
+                          <div class="flex justify-end"><span>1</span></div>
+                        </div>
+                      </td>
+                      <td>
+                        <div class="flex justify-end mx-auto space-x-4">
+                          <div class="badge badge-lg badge-outline badge-primary badge-lg pt-2"><span>80</span></div>
+                          <div class="flex justify-end -mt-2">
+                            <div class="join">
+                              <div class="tooltip tooltip-bottom" data-tip="Delete">
+                                <button type="button" class="btn btn-error join-item btn-ghost" hx-delete="/projects/00000000-0000-0000-0000-000000000000/effective-lengths/00000000-0000-0000-0000-000000000009" hx-confirm="Are you sure?" hx-target="#00000000000000000000000000000009" hx-swap="outerHTML"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash2-icon lucide-trash-2"><path d="M10 11v6"/><path d="M14 11v6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg></button>
+                              </div>
+                              <div class="tooltip tooltip-bottom" data-tip="Edit">
+                                <button class="btn join-item btn-ghost" type="button" onclick="equivalentLengthForm_00000000000000000000000000000009.showModal()">
+                                  <div class="flex">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-pen-icon lucide-square-pen"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></svg>
+                                    
+                                  </div>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <dialog id="equivalentLengthForm_00000000000000000000000000000009" class="modal">
+                          <div class="modal-box">
+                            <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick="equivalentLengthForm_00000000000000000000000000000009.close()">  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
+                            <h1 class="text-2xl font-bold">Effective Length</h1>
+                            <div id="formStep_equivalentLengthForm_00000000000000000000000000000009" class="mt-4">
+                              <form class="space-y-4" hx-post="/projects/00000000-0000-0000-0000-000000000000/effective-lengths/stepOne" hx-target="#formStep_equivalentLengthForm_00000000000000000000000000000009" hx-swap="innerHTML">
+                                <input class="hidden" name="id" value="00000000-0000-0000-0000-000000000009">
+                                Name<label class="input w-full"><span class="label"></span>
+                                <input name="name" type="text" value="Return - 1" required autofocus>
+                                Type</label><label class="select w-full"><span class="label"></span>
+                                <select name="type" id="type">
+                                  <option value="return" selected>Return</option>
+                                  <option value="supply">Supply</option>
+                                </select></label>
+                                <div class="flex justify-between">
+                                  <div></div>
+                                  <button class="btn btn-secondary" type="submit">Next</button>
+                                </div>
+                              </form>
+                            </div>
+                          </div>
+                        </dialog>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+          <div class="drawer-side is-drawer-close:overflow-visible grow">
+            <label for="my-drawer-1" aria-label="close sidebar" class="drawer-overlay"></label>
+            <div class="flex grow h-full flex-col items-start bg-base-300 text-base-content
+is-drawer-close:min-w-[80px] is-drawer-open:max-w-[300px]">
+              <ul class="w-full grow">
+                <li class="flex w-full">
+                  <button class="w-full gap-1 py-2 border-b-1 border-gray-200
+hover:bg-neutral data-active:bg-neutral
+hover:text-white data-active:text-white
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1" hx-get="/projects/00000000-0000-0000-0000-000000000000" hx-push-url="true" hx-target="body" hx-swap="outerHTML">
+                    <div class="w-full p-2 gap-1
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1">
+                      <div class="items-center
+is-drawer-open:justify-start is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:justify-center is-drawer-close:mx-auto is-drawer-close:space-y-2">
+                        <div class="flex items-center justify-center is-drawer-close:text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin-icon lucide-map-pin"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/></svg></div>
+                        <div class="flex items-center justify-center"><span>Project</span></div>
+                      </div>
+                      <div class="flex grow justify-end items-end is-drawer-close:hidden text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge-check-icon lucide-badge-check"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m9 12 2 2 4-4"/></svg></div>
+                    </div>
+                  </button>
+                </li>
+                <li class="w-full">
+                  <button class="w-full gap-1 py-2 border-b-1 border-gray-200
+hover:bg-neutral data-active:bg-neutral
+hover:text-white data-active:text-white
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1" hx-get="/projects/00000000-0000-0000-0000-000000000000/rooms" hx-push-url="true" hx-target="body" hx-swap="outerHTML">
+                    <div class="w-full p-2 gap-1
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1">
+                      <div class="items-center
+is-drawer-open:justify-start is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:justify-center is-drawer-close:mx-auto is-drawer-close:space-y-2">
+                        <div class="flex items-center justify-center is-drawer-close:text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-door-closed-icon lucide-door-closed"><path d="M10 12h.01"/><path d="M18 20V6a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v14"/><path d="M2 20h20"/></svg></div>
+                        <div class="flex items-center justify-center"><span>Rooms</span></div>
+                      </div>
+                      <div class="flex grow justify-end items-end is-drawer-close:hidden text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge-check-icon lucide-badge-check"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m9 12 2 2 4-4"/></svg></div>
+                    </div>
+                  </button>
+                </li>
+                <li class="flex w-full">
+                  <button class="w-full gap-1 py-2 border-b-1 border-gray-200
+hover:bg-neutral data-active:bg-neutral
+hover:text-white data-active:text-white
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1" hx-get="/projects/00000000-0000-0000-0000-000000000000/equipment" hx-push-url="true" hx-target="body" hx-swap="outerHTML">
+                    <div class="w-full p-2 gap-1
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1">
+                      <div class="items-center
+is-drawer-open:justify-start is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:justify-center is-drawer-close:mx-auto is-drawer-close:space-y-2">
+                        <div class="flex items-center justify-center is-drawer-close:text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-fan-icon lucide-fan"><path d="M10.827 16.379a6.082 6.082 0 0 1-8.618-7.002l5.412 1.45a6.082 6.082 0 0 1 7.002-8.618l-1.45 5.412a6.082 6.082 0 0 1 8.618 7.002l-5.412-1.45a6.082 6.082 0 0 1-7.002 8.618l1.45-5.412Z"/><path d="M12 12v.01"/></svg></div>
+                        <div class="flex items-center justify-center"><span>Equipment</span></div>
+                      </div>
+                      <div class="flex grow justify-end items-end is-drawer-close:hidden text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge-check-icon lucide-badge-check"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m9 12 2 2 4-4"/></svg></div>
+                    </div>
+                  </button>
+                </li>
+                <li class="w-full">
+                  <button class="w-full gap-1 py-2 border-b-1 border-gray-200
+hover:bg-neutral data-active:bg-neutral
+hover:text-white data-active:text-white
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1" hx-get="/projects/00000000-0000-0000-0000-000000000000/effective-lengths" hx-push-url="true" hx-target="body" hx-swap="outerHTML" data-active="true">
+                    <div class="w-full p-2 gap-1
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1">
+                      <div class="items-center
+is-drawer-open:justify-start is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:justify-center is-drawer-close:mx-auto is-drawer-close:space-y-2">
+                        <div class="flex items-center justify-center is-drawer-close:text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ruler-dimension-line-icon lucide-ruler-dimension-line"><path d="M10 15v-3"/><path d="M14 15v-3"/><path d="M18 15v-3"/><path d="M2 8V4"/><path d="M22 6H2"/><path d="M22 8V4"/><path d="M6 15v-3"/><rect x="2" y="12" width="20" height="8" rx="2"/></svg></div>
+                        <div class="flex items-center justify-center"><span>T.E.L.</span></div>
+                      </div>
+                      <div class="flex grow justify-end items-end is-drawer-close:hidden text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge-check-icon lucide-badge-check"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m9 12 2 2 4-4"/></svg></div>
+                    </div>
+                  </button>
+                </li>
+                <li class="w-full">
+                  <button class="w-full gap-1 py-2 border-b-1 border-gray-200
+hover:bg-neutral data-active:bg-neutral
+hover:text-white data-active:text-white
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1" hx-get="/projects/00000000-0000-0000-0000-000000000000/friction-rate" hx-push-url="true" hx-target="body" hx-swap="outerHTML">
+                    <div class="w-full p-2 gap-1
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1">
+                      <div class="items-center
+is-drawer-open:justify-start is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:justify-center is-drawer-close:mx-auto is-drawer-close:space-y-2">
+                        <div class="flex items-center justify-center is-drawer-close:text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-function-icon lucide-square-function"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><path d="M9 17c2 0 2.8-1 2.8-2.8V10c0-2 1-3.3 3.2-3"/><path d="M9 11.2h5.7"/></svg></div>
+                        <div class="flex items-center justify-center"><span>Friction Rate</span></div>
+                      </div>
+                      <div class="flex grow justify-end items-end is-drawer-close:hidden text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge-check-icon lucide-badge-check"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m9 12 2 2 4-4"/></svg></div>
+                    </div>
+                  </button>
+                </li>
+                <li class="w-full">
+                  <button class="w-full gap-1 py-2 border-b-1 border-gray-200
+hover:bg-neutral data-active:bg-neutral
+hover:text-white data-active:text-white
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1" hx-get="/projects/00000000-0000-0000-0000-000000000000/duct-sizing" hx-push-url="true" hx-target="body" hx-swap="outerHTML">
+                    <div class="w-full p-2 gap-1
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1">
+                      <div class="items-center
+is-drawer-open:justify-start is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:justify-center is-drawer-close:mx-auto is-drawer-close:space-y-2">
+                        <div class="flex items-center justify-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wind-icon lucide-wind"><path d="M12.8 19.6A2 2 0 1 0 14 16H2"/><path d="M17.5 8a2.5 2.5 0 1 1 2 4H2"/><path d="M9.8 4.4A2 2 0 1 1 11 8H2"/></svg></div>
+                        <div class="flex items-center justify-center"><span>Duct Sizes</span></div>
+                      </div>
+                    </div>
+                  </button>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </main>
+      <div class="bottom-0 left-0 bg-error">
+        <footer class="footer sm:footer-horizontal footer-center
+bg-base-300 text-base-content p-4">
+          <aside>
+            <p>Copyright © 2026 - All rights reserved by Michael Housh</p>
+          </aside>
+        </footer>
+      </div>
+    </div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/Tests/ViewControllerTests/__Snapshots__/ViewControllerTests/projectDetail.5.html b/Tests/ViewControllerTests/__Snapshots__/ViewControllerTests/projectDetail.5.html
new file mode 100644
index 0000000..e0ce9c0
--- /dev/null
+++ b/Tests/ViewControllerTests/__Snapshots__/ViewControllerTests/projectDetail.5.html
@@ -0,0 +1,442 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Duct Calc</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta content="ductcalc.com" name="og:site_name">
+    <meta content="Duct Calc" name="og:title">
+    <meta content="Duct sizing based on ACCA, Manual-D." name="description">
+    <meta content="Duct sizing based on ACCA, Manual-D." name="og:description">
+    <meta content="/images/mand_logo.png" name="og:image">
+    <meta content="/images/mand_logo.png" name="twitter:image">
+    <meta content="Duct Calc" name="twitter:image:alt">
+    <meta content="summary_large_image" name="twitter:card">
+    <meta content="1536" name="og:image:width">
+    <meta content="1024" name="og:image:height">
+    <meta content="duct, hvac, duct-design, duct design, manual-d, manual d, design" name="keywords">
+    <script src="https://unpkg.com/htmx.org@2.0.8"></script>
+    <script src="/js/main.js"></script>
+    <link rel="stylesheet" href="/css/output.css">
+    <link rel="icon" href="/images/favicon.ico" type="image/x-icon">
+    <link rel="icon" href="/images/favicon-32x32.png" type="image/png">
+    <link rel="icon" href="/images/favicon-16x16.png" type="image/png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
+    <link rel="manifest" href="/site.webmanifest">
+    <script src="https://unpkg.com/htmx-remove@latest" crossorigin="anonymous" integrity="sha384-NwB2Xh66PNEYfVki0ao13UAFmdNtMIdBKZ8sNGRT6hKfCPaINuZ4ScxS6vVAycPT"></script>
+  </head>
+  <body>
+    <div class="flex flex-col min-h-screen min-w-full justify-between">
+      <main class="flex flex-col min-h-screen min-w-full grow mb-auto">
+        <div class="drawer lg:drawer-open h-full">
+          <input id="my-drawer-1" type="checkbox" class="drawer-toggle">
+          <div class="drawer-content overflow-auto">
+            <nav class="navbar w-full bg-base-300 text-base-content shadow-sm mb-4">
+              <div class="flex flex-1 space-x-4 items-center">
+                <div class="tooltip tooltip-right" data-tip="Open sidebar"><label for="my-drawer-1" class="size-7 btn btn-square btn-ghost hover:bg-neutral hover:text-white" aria-label="open sidebar"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor" class="my-1.5 inline-block"><path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"></path><path d="M9 4v16"></path><path d="M14 10l2 2l-2 2"></path></svg></label></div>
+                <div class="tooltip tooltip-right" data-tip="Home">
+                  <a class="flex w-fit h-fit text-xl items-end px-4 py-2 btn btn-square btn-ghost hover:bg-neutral hover:text-white" href="/projects">
+                  <img src="/images/mand_logo_sm.webp">
+                  Duct Calc<span></span></a>
+                </div>
+              </div>
+              <div class="flex-none">
+                <div class="tooltip tooltip-left" data-tip="Profile"><a href="/profile" class="btn btn-square btn-ghost hover:bg-neutral hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-user-icon lucide-circle-user"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="10" r="3"/><path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"/></svg></a></div>
+              </div>
+            </nav>
+            <div class="p-4">
+              <div class="space-y-6">
+                <div class="flex justify-between bg-secondary border-2 border-primary rounded-sm shadow-sm 
+p-6 w-full">
+                  <div class="grid grid-cols-2 px-4 w-full">
+                    <h1 class="text-3xl font-bold">Friction Rate</h1>
+                    <div class="space-y-2 justify-end font-bold text-lg">
+                      <div class="flex space-x-4 justify-end mx-auto">
+                        <span>Friction Rate Design Value</span>
+                        <div class="badge badge-lg badge-outline badge-info badge-lg font-bold"><span>0.06</span></div>
+                      </div>
+                      <div class="flex space-x-4 justify-end mx-auto">
+                        <span>Available Static Pressure</span>
+                        <div class="badge badge-lg badge-outline"><span>0.11</span></div>
+                      </div>
+                      <div class="flex space-x-4 justify-end mx-auto">
+                        <span>Component Pressure Losses</span>
+                        <div class="badge badge-lg badge-outline"><span>0.39</span></div>
+                      </div>
+                    </div>
+                    <div class="text-error font-bold italic col-span-2">
+                      <div class="flex space-x-2 hidden">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert-icon lucide-triangle-alert"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
+                        <p>Must complete previous sections.</p>
+                      </div>
+                      <div class="flex space-x-2 hidden">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert-icon lucide-triangle-alert"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
+                        <p>No component pressures losses</p>
+                      </div>
+                      <div class="flex space-x-2 hidden">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert-icon lucide-triangle-alert"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
+                        <p class="block">
+                          Calculated friction rate is below 0.02. The fan may not deliver the required CFM.
+                          <br>
+                           * Increase the blower speed
+                          <br>
+                           * Increase the blower size
+                          <br>
+                           * Decrease the Total Effective Length (TEL)
+                        </p>
+                      </div>
+                      <div class="flex space-x-2 hidden">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert-icon lucide-triangle-alert"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
+                        <p class="block">
+                          Calculated friction rate is above 0.18. The fan may deliver too many CFM.
+                          <br>
+                           * Decrease the blower speed
+                          <br>
+                           * Decreae the blower size
+                          <br>
+                           * Increase the Total Effective Length (TEL)
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="space-y-4">
+                  <div class="flex justify-between px-4">
+                    <h1 class="text-2xl font-bold">Component Pressure Losses</h1>
+                    <div class="tooltip tooltip-left" data-tip="Add component loss">
+                      <button type="button" class="btn btn-primary text-2xl me-2" onclick="componentLossForm.showModal()"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-plus-icon lucide-circle-plus"><circle cx="12" cy="12" r="10"/><path d="M8 12h8"/><path d="M12 8v8"/></svg></button>
+                    </div>
+                  </div>
+                  <table class="table table-zebra">
+                    <thead>
+                      <tr class="text-xl font-bold">
+                        <th>Name</th>
+                        <th>Value</th>
+                        <th class="min-w-[200px]"></th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr class="text-lg">
+                        <td>evaporator-coil</td>
+                        <td><span>0.2</span></td>
+                        <td>
+                          <div class="flex join items-end justify-end mx-auto">
+                            <div class="tooltip tooltip-bottom" data-tip="Delete">
+                              <button type="button" class="btn btn-error join-item btn-ghost" hx-delete="/projects/00000000-0000-0000-0000-000000000000/component-loss/00000000-0000-0000-0000-00000000000A" hx-target="body" hx-swap="outerHTML" hx-confirm="Are your sure?"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash2-icon lucide-trash-2"><path d="M10 11v6"/><path d="M14 11v6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg></button>
+                            </div>
+                            <div class="tooltip tooltip-bottom" data-tip="Edit">
+                              <button class="btn join-item btn-ghost" type="button" onclick="componentLossForm_0000000000000000000000000000000A.showModal()">
+                                <div class="flex">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-pen-icon lucide-square-pen"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></svg>
+                                  
+                                </div>
+                              </button>
+                            </div>
+                          </div>
+                          <dialog id="componentLossForm_0000000000000000000000000000000A" class="modal">
+                            <div class="modal-box">
+                              <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick="componentLossForm_0000000000000000000000000000000A.close()">  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
+                              <h1 class="text-2xl font-bold">Component Loss</h1>
+                              <form class="space-y-4 p-4" hx-patch="/projects/00000000-0000-0000-0000-000000000000/component-loss/00000000-0000-0000-0000-00000000000A" hx-target="body" hx-swap="outerHTML">
+                                <input class="hidden" name="id" value="00000000-0000-0000-0000-00000000000A">
+                                <input class="hidden" name="projectID" value="00000000-0000-0000-0000-000000000000">
+                                Name<label class="input w-full"><span class="label"></span>
+                                <input name="name" type="text" value="evaporator-coil" placeholder="Name" required autofocus>
+                                Value</label><label class="input w-full"><span class="label"></span>
+                                <input name="value" type="number" value="0.2" placeholder="0.2" min="0.03" max="1.0" step="0.01" required></label>
+                                <button class="btn btn-secondary btn-block" type="submit">Submit</button>
+                              </form>
+                            </div>
+                          </dialog>
+                        </td>
+                      </tr>
+                      <tr class="text-lg">
+                        <td>filter</td>
+                        <td><span>0.1</span></td>
+                        <td>
+                          <div class="flex join items-end justify-end mx-auto">
+                            <div class="tooltip tooltip-bottom" data-tip="Delete">
+                              <button type="button" class="btn btn-error join-item btn-ghost" hx-delete="/projects/00000000-0000-0000-0000-000000000000/component-loss/00000000-0000-0000-0000-00000000000B" hx-target="body" hx-swap="outerHTML" hx-confirm="Are your sure?"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash2-icon lucide-trash-2"><path d="M10 11v6"/><path d="M14 11v6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg></button>
+                            </div>
+                            <div class="tooltip tooltip-bottom" data-tip="Edit">
+                              <button class="btn join-item btn-ghost" type="button" onclick="componentLossForm_0000000000000000000000000000000B.showModal()">
+                                <div class="flex">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-pen-icon lucide-square-pen"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></svg>
+                                  
+                                </div>
+                              </button>
+                            </div>
+                          </div>
+                          <dialog id="componentLossForm_0000000000000000000000000000000B" class="modal">
+                            <div class="modal-box">
+                              <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick="componentLossForm_0000000000000000000000000000000B.close()">  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
+                              <h1 class="text-2xl font-bold">Component Loss</h1>
+                              <form class="space-y-4 p-4" hx-patch="/projects/00000000-0000-0000-0000-000000000000/component-loss/00000000-0000-0000-0000-00000000000B" hx-target="body" hx-swap="outerHTML">
+                                <input class="hidden" name="id" value="00000000-0000-0000-0000-00000000000B">
+                                <input class="hidden" name="projectID" value="00000000-0000-0000-0000-000000000000">
+                                Name<label class="input w-full"><span class="label"></span>
+                                <input name="name" type="text" value="filter" placeholder="Name" required autofocus>
+                                Value</label><label class="input w-full"><span class="label"></span>
+                                <input name="value" type="number" value="0.1" placeholder="0.2" min="0.03" max="1.0" step="0.01" required></label>
+                                <button class="btn btn-secondary btn-block" type="submit">Submit</button>
+                              </form>
+                            </div>
+                          </dialog>
+                        </td>
+                      </tr>
+                      <tr class="text-lg">
+                        <td>supply-outlet</td>
+                        <td><span>0.03</span></td>
+                        <td>
+                          <div class="flex join items-end justify-end mx-auto">
+                            <div class="tooltip tooltip-bottom" data-tip="Delete">
+                              <button type="button" class="btn btn-error join-item btn-ghost" hx-delete="/projects/00000000-0000-0000-0000-000000000000/component-loss/00000000-0000-0000-0000-00000000000C" hx-target="body" hx-swap="outerHTML" hx-confirm="Are your sure?"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash2-icon lucide-trash-2"><path d="M10 11v6"/><path d="M14 11v6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg></button>
+                            </div>
+                            <div class="tooltip tooltip-bottom" data-tip="Edit">
+                              <button class="btn join-item btn-ghost" type="button" onclick="componentLossForm_0000000000000000000000000000000C.showModal()">
+                                <div class="flex">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-pen-icon lucide-square-pen"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></svg>
+                                  
+                                </div>
+                              </button>
+                            </div>
+                          </div>
+                          <dialog id="componentLossForm_0000000000000000000000000000000C" class="modal">
+                            <div class="modal-box">
+                              <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick="componentLossForm_0000000000000000000000000000000C.close()">  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
+                              <h1 class="text-2xl font-bold">Component Loss</h1>
+                              <form class="space-y-4 p-4" hx-patch="/projects/00000000-0000-0000-0000-000000000000/component-loss/00000000-0000-0000-0000-00000000000C" hx-target="body" hx-swap="outerHTML">
+                                <input class="hidden" name="id" value="00000000-0000-0000-0000-00000000000C">
+                                <input class="hidden" name="projectID" value="00000000-0000-0000-0000-000000000000">
+                                Name<label class="input w-full"><span class="label"></span>
+                                <input name="name" type="text" value="supply-outlet" placeholder="Name" required autofocus>
+                                Value</label><label class="input w-full"><span class="label"></span>
+                                <input name="value" type="number" value="0.03" placeholder="0.2" min="0.03" max="1.0" step="0.01" required></label>
+                                <button class="btn btn-secondary btn-block" type="submit">Submit</button>
+                              </form>
+                            </div>
+                          </dialog>
+                        </td>
+                      </tr>
+                      <tr class="text-lg">
+                        <td>return-grille</td>
+                        <td><span>0.03</span></td>
+                        <td>
+                          <div class="flex join items-end justify-end mx-auto">
+                            <div class="tooltip tooltip-bottom" data-tip="Delete">
+                              <button type="button" class="btn btn-error join-item btn-ghost" hx-delete="/projects/00000000-0000-0000-0000-000000000000/component-loss/00000000-0000-0000-0000-00000000000D" hx-target="body" hx-swap="outerHTML" hx-confirm="Are your sure?"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash2-icon lucide-trash-2"><path d="M10 11v6"/><path d="M14 11v6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg></button>
+                            </div>
+                            <div class="tooltip tooltip-bottom" data-tip="Edit">
+                              <button class="btn join-item btn-ghost" type="button" onclick="componentLossForm_0000000000000000000000000000000D.showModal()">
+                                <div class="flex">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-pen-icon lucide-square-pen"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></svg>
+                                  
+                                </div>
+                              </button>
+                            </div>
+                          </div>
+                          <dialog id="componentLossForm_0000000000000000000000000000000D" class="modal">
+                            <div class="modal-box">
+                              <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick="componentLossForm_0000000000000000000000000000000D.close()">  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
+                              <h1 class="text-2xl font-bold">Component Loss</h1>
+                              <form class="space-y-4 p-4" hx-patch="/projects/00000000-0000-0000-0000-000000000000/component-loss/00000000-0000-0000-0000-00000000000D" hx-target="body" hx-swap="outerHTML">
+                                <input class="hidden" name="id" value="00000000-0000-0000-0000-00000000000D">
+                                <input class="hidden" name="projectID" value="00000000-0000-0000-0000-000000000000">
+                                Name<label class="input w-full"><span class="label"></span>
+                                <input name="name" type="text" value="return-grille" placeholder="Name" required autofocus>
+                                Value</label><label class="input w-full"><span class="label"></span>
+                                <input name="value" type="number" value="0.03" placeholder="0.2" min="0.03" max="1.0" step="0.01" required></label>
+                                <button class="btn btn-secondary btn-block" type="submit">Submit</button>
+                              </form>
+                            </div>
+                          </dialog>
+                        </td>
+                      </tr>
+                      <tr class="text-lg">
+                        <td>balancing-damper</td>
+                        <td><span>0.03</span></td>
+                        <td>
+                          <div class="flex join items-end justify-end mx-auto">
+                            <div class="tooltip tooltip-bottom" data-tip="Delete">
+                              <button type="button" class="btn btn-error join-item btn-ghost" hx-delete="/projects/00000000-0000-0000-0000-000000000000/component-loss/00000000-0000-0000-0000-00000000000E" hx-target="body" hx-swap="outerHTML" hx-confirm="Are your sure?"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash2-icon lucide-trash-2"><path d="M10 11v6"/><path d="M14 11v6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg></button>
+                            </div>
+                            <div class="tooltip tooltip-bottom" data-tip="Edit">
+                              <button class="btn join-item btn-ghost" type="button" onclick="componentLossForm_0000000000000000000000000000000E.showModal()">
+                                <div class="flex">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-pen-icon lucide-square-pen"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></svg>
+                                  
+                                </div>
+                              </button>
+                            </div>
+                          </div>
+                          <dialog id="componentLossForm_0000000000000000000000000000000E" class="modal">
+                            <div class="modal-box">
+                              <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick="componentLossForm_0000000000000000000000000000000E.close()">  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
+                              <h1 class="text-2xl font-bold">Component Loss</h1>
+                              <form class="space-y-4 p-4" hx-patch="/projects/00000000-0000-0000-0000-000000000000/component-loss/00000000-0000-0000-0000-00000000000E" hx-target="body" hx-swap="outerHTML">
+                                <input class="hidden" name="id" value="00000000-0000-0000-0000-00000000000E">
+                                <input class="hidden" name="projectID" value="00000000-0000-0000-0000-000000000000">
+                                Name<label class="input w-full"><span class="label"></span>
+                                <input name="name" type="text" value="balancing-damper" placeholder="Name" required autofocus>
+                                Value</label><label class="input w-full"><span class="label"></span>
+                                <input name="value" type="number" value="0.03" placeholder="0.2" min="0.03" max="1.0" step="0.01" required></label>
+                                <button class="btn btn-secondary btn-block" type="submit">Submit</button>
+                              </form>
+                            </div>
+                          </dialog>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+                <dialog id="componentLossForm" class="modal">
+                  <div class="modal-box">
+                    <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick="componentLossForm.close()">  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
+                    <h1 class="text-2xl font-bold">Component Loss</h1>
+                    <form class="space-y-4 p-4" hx-post="/projects/00000000-0000-0000-0000-000000000000/component-loss" hx-target="body" hx-swap="outerHTML">
+                      <input class="hidden" name="projectID" value="00000000-0000-0000-0000-000000000000">
+                      Name<label class="input w-full"><span class="label"></span>
+                      <input name="name" type="text" value="" placeholder="Name" required autofocus>
+                      Value</label><label class="input w-full"><span class="label"></span>
+                      <input name="value" type="number" value="" placeholder="0.2" min="0.03" max="1.0" step="0.01" required></label>
+                      <button class="btn btn-secondary btn-block" type="submit">Submit</button>
+                    </form>
+                  </div>
+                </dialog>
+              </div>
+            </div>
+          </div>
+          <div class="drawer-side is-drawer-close:overflow-visible grow">
+            <label for="my-drawer-1" aria-label="close sidebar" class="drawer-overlay"></label>
+            <div class="flex grow h-full flex-col items-start bg-base-300 text-base-content
+is-drawer-close:min-w-[80px] is-drawer-open:max-w-[300px]">
+              <ul class="w-full grow">
+                <li class="flex w-full">
+                  <button class="w-full gap-1 py-2 border-b-1 border-gray-200
+hover:bg-neutral data-active:bg-neutral
+hover:text-white data-active:text-white
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1" hx-get="/projects/00000000-0000-0000-0000-000000000000" hx-push-url="true" hx-target="body" hx-swap="outerHTML">
+                    <div class="w-full p-2 gap-1
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1">
+                      <div class="items-center
+is-drawer-open:justify-start is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:justify-center is-drawer-close:mx-auto is-drawer-close:space-y-2">
+                        <div class="flex items-center justify-center is-drawer-close:text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin-icon lucide-map-pin"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/></svg></div>
+                        <div class="flex items-center justify-center"><span>Project</span></div>
+                      </div>
+                      <div class="flex grow justify-end items-end is-drawer-close:hidden text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge-check-icon lucide-badge-check"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m9 12 2 2 4-4"/></svg></div>
+                    </div>
+                  </button>
+                </li>
+                <li class="w-full">
+                  <button class="w-full gap-1 py-2 border-b-1 border-gray-200
+hover:bg-neutral data-active:bg-neutral
+hover:text-white data-active:text-white
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1" hx-get="/projects/00000000-0000-0000-0000-000000000000/rooms" hx-push-url="true" hx-target="body" hx-swap="outerHTML">
+                    <div class="w-full p-2 gap-1
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1">
+                      <div class="items-center
+is-drawer-open:justify-start is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:justify-center is-drawer-close:mx-auto is-drawer-close:space-y-2">
+                        <div class="flex items-center justify-center is-drawer-close:text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-door-closed-icon lucide-door-closed"><path d="M10 12h.01"/><path d="M18 20V6a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v14"/><path d="M2 20h20"/></svg></div>
+                        <div class="flex items-center justify-center"><span>Rooms</span></div>
+                      </div>
+                      <div class="flex grow justify-end items-end is-drawer-close:hidden text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge-check-icon lucide-badge-check"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m9 12 2 2 4-4"/></svg></div>
+                    </div>
+                  </button>
+                </li>
+                <li class="flex w-full">
+                  <button class="w-full gap-1 py-2 border-b-1 border-gray-200
+hover:bg-neutral data-active:bg-neutral
+hover:text-white data-active:text-white
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1" hx-get="/projects/00000000-0000-0000-0000-000000000000/equipment" hx-push-url="true" hx-target="body" hx-swap="outerHTML">
+                    <div class="w-full p-2 gap-1
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1">
+                      <div class="items-center
+is-drawer-open:justify-start is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:justify-center is-drawer-close:mx-auto is-drawer-close:space-y-2">
+                        <div class="flex items-center justify-center is-drawer-close:text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-fan-icon lucide-fan"><path d="M10.827 16.379a6.082 6.082 0 0 1-8.618-7.002l5.412 1.45a6.082 6.082 0 0 1 7.002-8.618l-1.45 5.412a6.082 6.082 0 0 1 8.618 7.002l-5.412-1.45a6.082 6.082 0 0 1-7.002 8.618l1.45-5.412Z"/><path d="M12 12v.01"/></svg></div>
+                        <div class="flex items-center justify-center"><span>Equipment</span></div>
+                      </div>
+                      <div class="flex grow justify-end items-end is-drawer-close:hidden text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge-check-icon lucide-badge-check"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m9 12 2 2 4-4"/></svg></div>
+                    </div>
+                  </button>
+                </li>
+                <li class="w-full">
+                  <button class="w-full gap-1 py-2 border-b-1 border-gray-200
+hover:bg-neutral data-active:bg-neutral
+hover:text-white data-active:text-white
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1" hx-get="/projects/00000000-0000-0000-0000-000000000000/effective-lengths" hx-push-url="true" hx-target="body" hx-swap="outerHTML">
+                    <div class="w-full p-2 gap-1
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1">
+                      <div class="items-center
+is-drawer-open:justify-start is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:justify-center is-drawer-close:mx-auto is-drawer-close:space-y-2">
+                        <div class="flex items-center justify-center is-drawer-close:text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ruler-dimension-line-icon lucide-ruler-dimension-line"><path d="M10 15v-3"/><path d="M14 15v-3"/><path d="M18 15v-3"/><path d="M2 8V4"/><path d="M22 6H2"/><path d="M22 8V4"/><path d="M6 15v-3"/><rect x="2" y="12" width="20" height="8" rx="2"/></svg></div>
+                        <div class="flex items-center justify-center"><span>T.E.L.</span></div>
+                      </div>
+                      <div class="flex grow justify-end items-end is-drawer-close:hidden text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge-check-icon lucide-badge-check"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m9 12 2 2 4-4"/></svg></div>
+                    </div>
+                  </button>
+                </li>
+                <li class="w-full">
+                  <button class="w-full gap-1 py-2 border-b-1 border-gray-200
+hover:bg-neutral data-active:bg-neutral
+hover:text-white data-active:text-white
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1" hx-get="/projects/00000000-0000-0000-0000-000000000000/friction-rate" hx-push-url="true" hx-target="body" hx-swap="outerHTML" data-active="true">
+                    <div class="w-full p-2 gap-1
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1">
+                      <div class="items-center
+is-drawer-open:justify-start is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:justify-center is-drawer-close:mx-auto is-drawer-close:space-y-2">
+                        <div class="flex items-center justify-center is-drawer-close:text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-function-icon lucide-square-function"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><path d="M9 17c2 0 2.8-1 2.8-2.8V10c0-2 1-3.3 3.2-3"/><path d="M9 11.2h5.7"/></svg></div>
+                        <div class="flex items-center justify-center"><span>Friction Rate</span></div>
+                      </div>
+                      <div class="flex grow justify-end items-end is-drawer-close:hidden text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge-check-icon lucide-badge-check"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m9 12 2 2 4-4"/></svg></div>
+                    </div>
+                  </button>
+                </li>
+                <li class="w-full">
+                  <button class="w-full gap-1 py-2 border-b-1 border-gray-200
+hover:bg-neutral data-active:bg-neutral
+hover:text-white data-active:text-white
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1" hx-get="/projects/00000000-0000-0000-0000-000000000000/duct-sizing" hx-push-url="true" hx-target="body" hx-swap="outerHTML">
+                    <div class="w-full p-2 gap-1
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1">
+                      <div class="items-center
+is-drawer-open:justify-start is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:justify-center is-drawer-close:mx-auto is-drawer-close:space-y-2">
+                        <div class="flex items-center justify-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wind-icon lucide-wind"><path d="M12.8 19.6A2 2 0 1 0 14 16H2"/><path d="M17.5 8a2.5 2.5 0 1 1 2 4H2"/><path d="M9.8 4.4A2 2 0 1 1 11 8H2"/></svg></div>
+                        <div class="flex items-center justify-center"><span>Duct Sizes</span></div>
+                      </div>
+                    </div>
+                  </button>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </main>
+      <div class="bottom-0 left-0 bg-error">
+        <footer class="footer sm:footer-horizontal footer-center
+bg-base-300 text-base-content p-4">
+          <aside>
+            <p>Copyright © 2026 - All rights reserved by Michael Housh</p>
+          </aside>
+        </footer>
+      </div>
+    </div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/Tests/ViewControllerTests/__Snapshots__/ViewControllerTests/projectDetail.6.html b/Tests/ViewControllerTests/__Snapshots__/ViewControllerTests/projectDetail.6.html
new file mode 100644
index 0000000..a579ecf
--- /dev/null
+++ b/Tests/ViewControllerTests/__Snapshots__/ViewControllerTests/projectDetail.6.html
@@ -0,0 +1,1559 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Duct Calc</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta content="ductcalc.com" name="og:site_name">
+    <meta content="Duct Calc" name="og:title">
+    <meta content="Duct sizing based on ACCA, Manual-D." name="description">
+    <meta content="Duct sizing based on ACCA, Manual-D." name="og:description">
+    <meta content="/images/mand_logo.png" name="og:image">
+    <meta content="/images/mand_logo.png" name="twitter:image">
+    <meta content="Duct Calc" name="twitter:image:alt">
+    <meta content="summary_large_image" name="twitter:card">
+    <meta content="1536" name="og:image:width">
+    <meta content="1024" name="og:image:height">
+    <meta content="duct, hvac, duct-design, duct design, manual-d, manual d, design" name="keywords">
+    <script src="https://unpkg.com/htmx.org@2.0.8"></script>
+    <script src="/js/main.js"></script>
+    <link rel="stylesheet" href="/css/output.css">
+    <link rel="icon" href="/images/favicon.ico" type="image/x-icon">
+    <link rel="icon" href="/images/favicon-32x32.png" type="image/png">
+    <link rel="icon" href="/images/favicon-16x16.png" type="image/png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
+    <link rel="manifest" href="/site.webmanifest">
+    <script src="https://unpkg.com/htmx-remove@latest" crossorigin="anonymous" integrity="sha384-NwB2Xh66PNEYfVki0ao13UAFmdNtMIdBKZ8sNGRT6hKfCPaINuZ4ScxS6vVAycPT"></script>
+  </head>
+  <body>
+    <div class="flex flex-col min-h-screen min-w-full justify-between">
+      <main class="flex flex-col min-h-screen min-w-full grow mb-auto">
+        <div class="drawer lg:drawer-open h-full">
+          <input id="my-drawer-1" type="checkbox" class="drawer-toggle">
+          <div class="drawer-content overflow-auto">
+            <nav class="navbar w-full bg-base-300 text-base-content shadow-sm mb-4">
+              <div class="flex flex-1 space-x-4 items-center">
+                <div class="tooltip tooltip-right" data-tip="Open sidebar"><label for="my-drawer-1" class="size-7 btn btn-square btn-ghost hover:bg-neutral hover:text-white" aria-label="open sidebar"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor" class="my-1.5 inline-block"><path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"></path><path d="M9 4v16"></path><path d="M14 10l2 2l-2 2"></path></svg></label></div>
+                <div class="tooltip tooltip-right" data-tip="Home">
+                  <a class="flex w-fit h-fit text-xl items-end px-4 py-2 btn btn-square btn-ghost hover:bg-neutral hover:text-white" href="/projects">
+                  <img src="/images/mand_logo_sm.webp">
+                  Duct Calc<span></span></a>
+                </div>
+              </div>
+              <div class="flex-none">
+                <div class="tooltip tooltip-left" data-tip="Profile"><a href="/profile" class="btn btn-square btn-ghost hover:bg-neutral hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-user-icon lucide-circle-user"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="10" r="3"/><path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"/></svg></a></div>
+              </div>
+            </nav>
+            <div class="p-4">
+              <div class="space-y-4">
+                <div class="flex justify-between bg-secondary border-2 border-primary rounded-sm shadow-sm 
+p-6 w-full">
+                  <div>
+                    <h1 class="text-3xl font-bold">Duct Sizes</h1>
+                    <div class="flex space-x-2 hidden text-error font-bold italic mt-4">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert-icon lucide-triangle-alert"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
+                      <p>Must complete all the previous sections to display duct sizing calculations.</p>
+                    </div>
+                  </div>
+                  PDF<a class="btn btn-primary" href="/projects/00000000-0000-0000-0000-000000000000/pdf"></a>
+                </div>
+                <table class="table table-zebra text-lg">
+                  <thead>
+                    <tr class="text-lg">
+                      <th>Name</th>
+                      <th>BTU</th>
+                      <th>CFM</th>
+                      <th>Velocity</th>
+                      <th class="w-[330px]">Size</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr class="text-lg" id="roomRow_Bed1">
+                      <td>Bed-1</td>
+                      <td>
+                        <div class="flex flex-wrap grid grid-cols-2 gap-2"><span class="label">Heating</span><span>3,913</span><span class="label">Cooling</span><span>2,472</span></div>
+                      </td>
+                      <td>
+                        <div class="flex flex-wrap grid grid-cols-2 gap-2">
+                          <span class="label">Design</span>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline"><span>92</span></div>
+                          </div>
+                          Heating<span class="label"></span>
+                          <div class="flex justify-center"><span>83</span></div>
+                          Cooling<span class="label"></span>
+                          <div class="flex justify-center"><span>92</span></div>
+                        </div>
+                      </td>
+                      <td><span>489</span></td>
+                      <td>
+                        <div class="grid grid-cols-3 gap-2 w-[330px]">
+                          <div class="label">Calculated</div>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline"><span>7</span></div>
+                          </div>
+                          <div></div>
+                          <div class="label">Final</div>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline badge-secondary"><span>8</span></div>
+                          </div>
+                          <div></div>
+                          <div class="label">Flex</div>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline badge-primary"><span>8</span></div>
+                          </div>
+                          <div></div>
+                          <div class="label">Rectangular</div>
+                          <div class="flex justify-center"></div>
+                          <div class="flex justify-end">
+                            <div class="join">
+                              <div class="tooltip tooltip-bottom" data-tip="Edit Size">
+                                <button class="btn join-item btn-ghost" type="button" onclick="rectangularSize_Bed1.showModal()">
+                                  <div class="flex">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-pen-icon lucide-square-pen"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></svg>
+                                    
+                                  </div>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <dialog id="rectangularSize_Bed1" class="modal">
+                            <div class="modal-box">
+                              <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick="rectangularSize_Bed1.close()">  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
+                              <h1 class="text-lg pb-6">Rectangular Size</h1>
+                              <form class="space-y-4" hx-post="/projects/00000000-0000-0000-0000-000000000000/duct-sizing/room/00000000-0000-0000-0000-000000000001" hx-target="#roomRow_Bed1" hx-swap="outerHTML">
+                                <input class="hidden" name="register" value="1">
+                                <input class="hidden" name="id" value="">
+                                Height<label class="input w-full"><span class="label"></span>
+                                <input name="height" type="number" value="" placeholder="8" min="0" required autofocus></label>
+                                <button class="btn btn-secondary btn-block" type="submit">Submit</button>
+                              </form>
+                            </div>
+                          </dialog>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr class="text-lg" id="roomRow_Entry">
+                      <td>Entry</td>
+                      <td>
+                        <div class="flex flex-wrap grid grid-cols-2 gap-2"><span class="label">Heating</span><span>4,142</span><span class="label">Cooling</span><span>1,458</span></div>
+                      </td>
+                      <td>
+                        <div class="flex flex-wrap grid grid-cols-2 gap-2">
+                          <span class="label">Design</span>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline"><span>88</span></div>
+                          </div>
+                          Heating<span class="label"></span>
+                          <div class="flex justify-center"><span>88</span></div>
+                          Cooling<span class="label"></span>
+                          <div class="flex justify-center"><span>54</span></div>
+                        </div>
+                      </td>
+                      <td><span>489</span></td>
+                      <td>
+                        <div class="grid grid-cols-3 gap-2 w-[330px]">
+                          <div class="label">Calculated</div>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline"><span>7</span></div>
+                          </div>
+                          <div></div>
+                          <div class="label">Final</div>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline badge-secondary"><span>8</span></div>
+                          </div>
+                          <div></div>
+                          <div class="label">Flex</div>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline badge-primary"><span>8</span></div>
+                          </div>
+                          <div></div>
+                          <div class="label">Rectangular</div>
+                          <div class="flex justify-center"></div>
+                          <div class="flex justify-end">
+                            <div class="join">
+                              <div class="tooltip tooltip-bottom" data-tip="Edit Size">
+                                <button class="btn join-item btn-ghost" type="button" onclick="rectangularSize_Entry.showModal()">
+                                  <div class="flex">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-pen-icon lucide-square-pen"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></svg>
+                                    
+                                  </div>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <dialog id="rectangularSize_Entry" class="modal">
+                            <div class="modal-box">
+                              <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick="rectangularSize_Entry.close()">  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
+                              <h1 class="text-lg pb-6">Rectangular Size</h1>
+                              <form class="space-y-4" hx-post="/projects/00000000-0000-0000-0000-000000000000/duct-sizing/room/00000000-0000-0000-0000-000000000002" hx-target="#roomRow_Entry" hx-swap="outerHTML">
+                                <input class="hidden" name="register" value="1">
+                                <input class="hidden" name="id" value="">
+                                Height<label class="input w-full"><span class="label"></span>
+                                <input name="height" type="number" value="" placeholder="8" min="0" required autofocus></label>
+                                <button class="btn btn-secondary btn-block" type="submit">Submit</button>
+                              </form>
+                            </div>
+                          </dialog>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr class="text-lg" id="roomRow_Entry">
+                      <td>Entry</td>
+                      <td>
+                        <div class="flex flex-wrap grid grid-cols-2 gap-2"><span class="label">Heating</span><span>4,142</span><span class="label">Cooling</span><span>1,458</span></div>
+                      </td>
+                      <td>
+                        <div class="flex flex-wrap grid grid-cols-2 gap-2">
+                          <span class="label">Design</span>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline"><span>88</span></div>
+                          </div>
+                          Heating<span class="label"></span>
+                          <div class="flex justify-center"><span>88</span></div>
+                          Cooling<span class="label"></span>
+                          <div class="flex justify-center"><span>54</span></div>
+                        </div>
+                      </td>
+                      <td><span>489</span></td>
+                      <td>
+                        <div class="grid grid-cols-3 gap-2 w-[330px]">
+                          <div class="label">Calculated</div>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline"><span>7</span></div>
+                          </div>
+                          <div></div>
+                          <div class="label">Final</div>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline badge-secondary"><span>8</span></div>
+                          </div>
+                          <div></div>
+                          <div class="label">Flex</div>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline badge-primary"><span>8</span></div>
+                          </div>
+                          <div></div>
+                          <div class="label">Rectangular</div>
+                          <div class="flex justify-center"></div>
+                          <div class="flex justify-end">
+                            <div class="join">
+                              <div class="tooltip tooltip-bottom" data-tip="Edit Size">
+                                <button class="btn join-item btn-ghost" type="button" onclick="rectangularSize_Entry.showModal()">
+                                  <div class="flex">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-pen-icon lucide-square-pen"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></svg>
+                                    
+                                  </div>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <dialog id="rectangularSize_Entry" class="modal">
+                            <div class="modal-box">
+                              <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick="rectangularSize_Entry.close()">  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
+                              <h1 class="text-lg pb-6">Rectangular Size</h1>
+                              <form class="space-y-4" hx-post="/projects/00000000-0000-0000-0000-000000000000/duct-sizing/room/00000000-0000-0000-0000-000000000002" hx-target="#roomRow_Entry" hx-swap="outerHTML">
+                                <input class="hidden" name="register" value="2">
+                                <input class="hidden" name="id" value="">
+                                Height<label class="input w-full"><span class="label"></span>
+                                <input name="height" type="number" value="" placeholder="8" min="0" required autofocus></label>
+                                <button class="btn btn-secondary btn-block" type="submit">Submit</button>
+                              </form>
+                            </div>
+                          </dialog>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr class="text-lg" id="roomRow_FamilyRoom">
+                      <td>Family Room</td>
+                      <td>
+                        <div class="flex flex-wrap grid grid-cols-2 gap-2"><span class="label">Heating</span><span>3,262</span><span class="label">Cooling</span><span>2,482</span></div>
+                      </td>
+                      <td>
+                        <div class="flex flex-wrap grid grid-cols-2 gap-2">
+                          <span class="label">Design</span>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline"><span>92</span></div>
+                          </div>
+                          Heating<span class="label"></span>
+                          <div class="flex justify-center"><span>69</span></div>
+                          Cooling<span class="label"></span>
+                          <div class="flex justify-center"><span>92</span></div>
+                        </div>
+                      </td>
+                      <td><span>489</span></td>
+                      <td>
+                        <div class="grid grid-cols-3 gap-2 w-[330px]">
+                          <div class="label">Calculated</div>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline"><span>7</span></div>
+                          </div>
+                          <div></div>
+                          <div class="label">Final</div>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline badge-secondary"><span>8</span></div>
+                          </div>
+                          <div></div>
+                          <div class="label">Flex</div>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline badge-primary"><span>8</span></div>
+                          </div>
+                          <div></div>
+                          <div class="label">Rectangular</div>
+                          <div class="flex justify-center"></div>
+                          <div class="flex justify-end">
+                            <div class="join">
+                              <div class="tooltip tooltip-bottom" data-tip="Edit Size">
+                                <button class="btn join-item btn-ghost" type="button" onclick="rectangularSize_FamilyRoom.showModal()">
+                                  <div class="flex">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-pen-icon lucide-square-pen"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></svg>
+                                    
+                                  </div>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <dialog id="rectangularSize_FamilyRoom" class="modal">
+                            <div class="modal-box">
+                              <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick="rectangularSize_FamilyRoom.close()">  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
+                              <h1 class="text-lg pb-6">Rectangular Size</h1>
+                              <form class="space-y-4" hx-post="/projects/00000000-0000-0000-0000-000000000000/duct-sizing/room/00000000-0000-0000-0000-000000000003" hx-target="#roomRow_FamilyRoom" hx-swap="outerHTML">
+                                <input class="hidden" name="register" value="1">
+                                <input class="hidden" name="id" value="">
+                                Height<label class="input w-full"><span class="label"></span>
+                                <input name="height" type="number" value="" placeholder="8" min="0" required autofocus></label>
+                                <button class="btn btn-secondary btn-block" type="submit">Submit</button>
+                              </form>
+                            </div>
+                          </dialog>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr class="text-lg" id="roomRow_FamilyRoom">
+                      <td>Family Room</td>
+                      <td>
+                        <div class="flex flex-wrap grid grid-cols-2 gap-2"><span class="label">Heating</span><span>3,262</span><span class="label">Cooling</span><span>2,482</span></div>
+                      </td>
+                      <td>
+                        <div class="flex flex-wrap grid grid-cols-2 gap-2">
+                          <span class="label">Design</span>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline"><span>92</span></div>
+                          </div>
+                          Heating<span class="label"></span>
+                          <div class="flex justify-center"><span>69</span></div>
+                          Cooling<span class="label"></span>
+                          <div class="flex justify-center"><span>92</span></div>
+                        </div>
+                      </td>
+                      <td><span>489</span></td>
+                      <td>
+                        <div class="grid grid-cols-3 gap-2 w-[330px]">
+                          <div class="label">Calculated</div>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline"><span>7</span></div>
+                          </div>
+                          <div></div>
+                          <div class="label">Final</div>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline badge-secondary"><span>8</span></div>
+                          </div>
+                          <div></div>
+                          <div class="label">Flex</div>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline badge-primary"><span>8</span></div>
+                          </div>
+                          <div></div>
+                          <div class="label">Rectangular</div>
+                          <div class="flex justify-center"></div>
+                          <div class="flex justify-end">
+                            <div class="join">
+                              <div class="tooltip tooltip-bottom" data-tip="Edit Size">
+                                <button class="btn join-item btn-ghost" type="button" onclick="rectangularSize_FamilyRoom.showModal()">
+                                  <div class="flex">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-pen-icon lucide-square-pen"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></svg>
+                                    
+                                  </div>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <dialog id="rectangularSize_FamilyRoom" class="modal">
+                            <div class="modal-box">
+                              <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick="rectangularSize_FamilyRoom.close()">  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
+                              <h1 class="text-lg pb-6">Rectangular Size</h1>
+                              <form class="space-y-4" hx-post="/projects/00000000-0000-0000-0000-000000000000/duct-sizing/room/00000000-0000-0000-0000-000000000003" hx-target="#roomRow_FamilyRoom" hx-swap="outerHTML">
+                                <input class="hidden" name="register" value="2">
+                                <input class="hidden" name="id" value="">
+                                Height<label class="input w-full"><span class="label"></span>
+                                <input name="height" type="number" value="" placeholder="8" min="0" required autofocus></label>
+                                <button class="btn btn-secondary btn-block" type="submit">Submit</button>
+                              </form>
+                            </div>
+                          </dialog>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr class="text-lg" id="roomRow_FamilyRoom">
+                      <td>Family Room</td>
+                      <td>
+                        <div class="flex flex-wrap grid grid-cols-2 gap-2"><span class="label">Heating</span><span>3,262</span><span class="label">Cooling</span><span>2,482</span></div>
+                      </td>
+                      <td>
+                        <div class="flex flex-wrap grid grid-cols-2 gap-2">
+                          <span class="label">Design</span>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline"><span>92</span></div>
+                          </div>
+                          Heating<span class="label"></span>
+                          <div class="flex justify-center"><span>69</span></div>
+                          Cooling<span class="label"></span>
+                          <div class="flex justify-center"><span>92</span></div>
+                        </div>
+                      </td>
+                      <td><span>489</span></td>
+                      <td>
+                        <div class="grid grid-cols-3 gap-2 w-[330px]">
+                          <div class="label">Calculated</div>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline"><span>7</span></div>
+                          </div>
+                          <div></div>
+                          <div class="label">Final</div>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline badge-secondary"><span>8</span></div>
+                          </div>
+                          <div></div>
+                          <div class="label">Flex</div>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline badge-primary"><span>8</span></div>
+                          </div>
+                          <div></div>
+                          <div class="label">Rectangular</div>
+                          <div class="flex justify-center"></div>
+                          <div class="flex justify-end">
+                            <div class="join">
+                              <div class="tooltip tooltip-bottom" data-tip="Edit Size">
+                                <button class="btn join-item btn-ghost" type="button" onclick="rectangularSize_FamilyRoom.showModal()">
+                                  <div class="flex">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-pen-icon lucide-square-pen"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></svg>
+                                    
+                                  </div>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <dialog id="rectangularSize_FamilyRoom" class="modal">
+                            <div class="modal-box">
+                              <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick="rectangularSize_FamilyRoom.close()">  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
+                              <h1 class="text-lg pb-6">Rectangular Size</h1>
+                              <form class="space-y-4" hx-post="/projects/00000000-0000-0000-0000-000000000000/duct-sizing/room/00000000-0000-0000-0000-000000000003" hx-target="#roomRow_FamilyRoom" hx-swap="outerHTML">
+                                <input class="hidden" name="register" value="3">
+                                <input class="hidden" name="id" value="">
+                                Height<label class="input w-full"><span class="label"></span>
+                                <input name="height" type="number" value="" placeholder="8" min="0" required autofocus></label>
+                                <button class="btn btn-secondary btn-block" type="submit">Submit</button>
+                              </form>
+                            </div>
+                          </dialog>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr class="text-lg" id="roomRow_Kitchen">
+                      <td>Kitchen</td>
+                      <td>
+                        <div class="flex flex-wrap grid grid-cols-2 gap-2"><span class="label">Heating</span><span>2,259</span><span class="label">Cooling</span><span>2,548</span></div>
+                      </td>
+                      <td>
+                        <div class="flex flex-wrap grid grid-cols-2 gap-2">
+                          <span class="label">Design</span>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline"><span>95</span></div>
+                          </div>
+                          Heating<span class="label"></span>
+                          <div class="flex justify-center"><span>48</span></div>
+                          Cooling<span class="label"></span>
+                          <div class="flex justify-center"><span>95</span></div>
+                        </div>
+                      </td>
+                      <td><span>489</span></td>
+                      <td>
+                        <div class="grid grid-cols-3 gap-2 w-[330px]">
+                          <div class="label">Calculated</div>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline"><span>7</span></div>
+                          </div>
+                          <div></div>
+                          <div class="label">Final</div>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline badge-secondary"><span>8</span></div>
+                          </div>
+                          <div></div>
+                          <div class="label">Flex</div>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline badge-primary"><span>8</span></div>
+                          </div>
+                          <div></div>
+                          <div class="label">Rectangular</div>
+                          <div class="flex justify-center"></div>
+                          <div class="flex justify-end">
+                            <div class="join">
+                              <div class="tooltip tooltip-bottom" data-tip="Edit Size">
+                                <button class="btn join-item btn-ghost" type="button" onclick="rectangularSize_Kitchen.showModal()">
+                                  <div class="flex">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-pen-icon lucide-square-pen"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></svg>
+                                    
+                                  </div>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <dialog id="rectangularSize_Kitchen" class="modal">
+                            <div class="modal-box">
+                              <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick="rectangularSize_Kitchen.close()">  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
+                              <h1 class="text-lg pb-6">Rectangular Size</h1>
+                              <form class="space-y-4" hx-post="/projects/00000000-0000-0000-0000-000000000000/duct-sizing/room/00000000-0000-0000-0000-000000000004" hx-target="#roomRow_Kitchen" hx-swap="outerHTML">
+                                <input class="hidden" name="register" value="1">
+                                <input class="hidden" name="id" value="">
+                                Height<label class="input w-full"><span class="label"></span>
+                                <input name="height" type="number" value="" placeholder="8" min="0" required autofocus></label>
+                                <button class="btn btn-secondary btn-block" type="submit">Submit</button>
+                              </form>
+                            </div>
+                          </dialog>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr class="text-lg" id="roomRow_Kitchen">
+                      <td>Kitchen</td>
+                      <td>
+                        <div class="flex flex-wrap grid grid-cols-2 gap-2"><span class="label">Heating</span><span>2,259</span><span class="label">Cooling</span><span>2,548</span></div>
+                      </td>
+                      <td>
+                        <div class="flex flex-wrap grid grid-cols-2 gap-2">
+                          <span class="label">Design</span>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline"><span>95</span></div>
+                          </div>
+                          Heating<span class="label"></span>
+                          <div class="flex justify-center"><span>48</span></div>
+                          Cooling<span class="label"></span>
+                          <div class="flex justify-center"><span>95</span></div>
+                        </div>
+                      </td>
+                      <td><span>489</span></td>
+                      <td>
+                        <div class="grid grid-cols-3 gap-2 w-[330px]">
+                          <div class="label">Calculated</div>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline"><span>7</span></div>
+                          </div>
+                          <div></div>
+                          <div class="label">Final</div>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline badge-secondary"><span>8</span></div>
+                          </div>
+                          <div></div>
+                          <div class="label">Flex</div>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline badge-primary"><span>8</span></div>
+                          </div>
+                          <div></div>
+                          <div class="label">Rectangular</div>
+                          <div class="flex justify-center"></div>
+                          <div class="flex justify-end">
+                            <div class="join">
+                              <div class="tooltip tooltip-bottom" data-tip="Edit Size">
+                                <button class="btn join-item btn-ghost" type="button" onclick="rectangularSize_Kitchen.showModal()">
+                                  <div class="flex">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-pen-icon lucide-square-pen"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></svg>
+                                    
+                                  </div>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <dialog id="rectangularSize_Kitchen" class="modal">
+                            <div class="modal-box">
+                              <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick="rectangularSize_Kitchen.close()">  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
+                              <h1 class="text-lg pb-6">Rectangular Size</h1>
+                              <form class="space-y-4" hx-post="/projects/00000000-0000-0000-0000-000000000000/duct-sizing/room/00000000-0000-0000-0000-000000000004" hx-target="#roomRow_Kitchen" hx-swap="outerHTML">
+                                <input class="hidden" name="register" value="2">
+                                <input class="hidden" name="id" value="">
+                                Height<label class="input w-full"><span class="label"></span>
+                                <input name="height" type="number" value="" placeholder="8" min="0" required autofocus></label>
+                                <button class="btn btn-secondary btn-block" type="submit">Submit</button>
+                              </form>
+                            </div>
+                          </dialog>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr class="text-lg" id="roomRow_LivingRoom">
+                      <td>Living Room</td>
+                      <td>
+                        <div class="flex flex-wrap grid grid-cols-2 gap-2"><span class="label">Heating</span><span>3,776</span><span class="label">Cooling</span><span>3,414</span></div>
+                      </td>
+                      <td>
+                        <div class="flex flex-wrap grid grid-cols-2 gap-2">
+                          <span class="label">Design</span>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline"><span>127</span></div>
+                          </div>
+                          Heating<span class="label"></span>
+                          <div class="flex justify-center"><span>80</span></div>
+                          Cooling<span class="label"></span>
+                          <div class="flex justify-center"><span>127</span></div>
+                        </div>
+                      </td>
+                      <td><span>489</span></td>
+                      <td>
+                        <div class="grid grid-cols-3 gap-2 w-[330px]">
+                          <div class="label">Calculated</div>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline"><span>7</span></div>
+                          </div>
+                          <div></div>
+                          <div class="label">Final</div>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline badge-secondary"><span>8</span></div>
+                          </div>
+                          <div></div>
+                          <div class="label">Flex</div>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline badge-primary"><span>8</span></div>
+                          </div>
+                          <div></div>
+                          <div class="label">Rectangular</div>
+                          <div class="flex justify-center"></div>
+                          <div class="flex justify-end">
+                            <div class="join">
+                              <div class="tooltip tooltip-bottom" data-tip="Edit Size">
+                                <button class="btn join-item btn-ghost" type="button" onclick="rectangularSize_LivingRoom.showModal()">
+                                  <div class="flex">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-pen-icon lucide-square-pen"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></svg>
+                                    
+                                  </div>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <dialog id="rectangularSize_LivingRoom" class="modal">
+                            <div class="modal-box">
+                              <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick="rectangularSize_LivingRoom.close()">  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
+                              <h1 class="text-lg pb-6">Rectangular Size</h1>
+                              <form class="space-y-4" hx-post="/projects/00000000-0000-0000-0000-000000000000/duct-sizing/room/00000000-0000-0000-0000-000000000005" hx-target="#roomRow_LivingRoom" hx-swap="outerHTML">
+                                <input class="hidden" name="register" value="1">
+                                <input class="hidden" name="id" value="">
+                                Height<label class="input w-full"><span class="label"></span>
+                                <input name="height" type="number" value="" placeholder="8" min="0" required autofocus></label>
+                                <button class="btn btn-secondary btn-block" type="submit">Submit</button>
+                              </form>
+                            </div>
+                          </dialog>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr class="text-lg" id="roomRow_LivingRoom">
+                      <td>Living Room</td>
+                      <td>
+                        <div class="flex flex-wrap grid grid-cols-2 gap-2"><span class="label">Heating</span><span>3,776</span><span class="label">Cooling</span><span>3,414</span></div>
+                      </td>
+                      <td>
+                        <div class="flex flex-wrap grid grid-cols-2 gap-2">
+                          <span class="label">Design</span>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline"><span>127</span></div>
+                          </div>
+                          Heating<span class="label"></span>
+                          <div class="flex justify-center"><span>80</span></div>
+                          Cooling<span class="label"></span>
+                          <div class="flex justify-center"><span>127</span></div>
+                        </div>
+                      </td>
+                      <td><span>489</span></td>
+                      <td>
+                        <div class="grid grid-cols-3 gap-2 w-[330px]">
+                          <div class="label">Calculated</div>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline"><span>7</span></div>
+                          </div>
+                          <div></div>
+                          <div class="label">Final</div>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline badge-secondary"><span>8</span></div>
+                          </div>
+                          <div></div>
+                          <div class="label">Flex</div>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline badge-primary"><span>8</span></div>
+                          </div>
+                          <div></div>
+                          <div class="label">Rectangular</div>
+                          <div class="flex justify-center"></div>
+                          <div class="flex justify-end">
+                            <div class="join">
+                              <div class="tooltip tooltip-bottom" data-tip="Edit Size">
+                                <button class="btn join-item btn-ghost" type="button" onclick="rectangularSize_LivingRoom.showModal()">
+                                  <div class="flex">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-pen-icon lucide-square-pen"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></svg>
+                                    
+                                  </div>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <dialog id="rectangularSize_LivingRoom" class="modal">
+                            <div class="modal-box">
+                              <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick="rectangularSize_LivingRoom.close()">  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
+                              <h1 class="text-lg pb-6">Rectangular Size</h1>
+                              <form class="space-y-4" hx-post="/projects/00000000-0000-0000-0000-000000000000/duct-sizing/room/00000000-0000-0000-0000-000000000005" hx-target="#roomRow_LivingRoom" hx-swap="outerHTML">
+                                <input class="hidden" name="register" value="2">
+                                <input class="hidden" name="id" value="">
+                                Height<label class="input w-full"><span class="label"></span>
+                                <input name="height" type="number" value="" placeholder="8" min="0" required autofocus></label>
+                                <button class="btn btn-secondary btn-block" type="submit">Submit</button>
+                              </form>
+                            </div>
+                          </dialog>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr class="text-lg" id="roomRow_Master">
+                      <td>Master</td>
+                      <td>
+                        <div class="flex flex-wrap grid grid-cols-2 gap-2"><span class="label">Heating</span><span>4,101</span><span class="label">Cooling</span><span>1,038</span></div>
+                      </td>
+                      <td>
+                        <div class="flex flex-wrap grid grid-cols-2 gap-2">
+                          <span class="label">Design</span>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline"><span>87</span></div>
+                          </div>
+                          Heating<span class="label"></span>
+                          <div class="flex justify-center"><span>87</span></div>
+                          Cooling<span class="label"></span>
+                          <div class="flex justify-center"><span>39</span></div>
+                        </div>
+                      </td>
+                      <td><span>489</span></td>
+                      <td>
+                        <div class="grid grid-cols-3 gap-2 w-[330px]">
+                          <div class="label">Calculated</div>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline"><span>7</span></div>
+                          </div>
+                          <div></div>
+                          <div class="label">Final</div>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline badge-secondary"><span>8</span></div>
+                          </div>
+                          <div></div>
+                          <div class="label">Flex</div>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline badge-primary"><span>8</span></div>
+                          </div>
+                          <div></div>
+                          <div class="label">Rectangular</div>
+                          <div class="flex justify-center"></div>
+                          <div class="flex justify-end">
+                            <div class="join">
+                              <div class="tooltip tooltip-bottom" data-tip="Edit Size">
+                                <button class="btn join-item btn-ghost" type="button" onclick="rectangularSize_Master.showModal()">
+                                  <div class="flex">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-pen-icon lucide-square-pen"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></svg>
+                                    
+                                  </div>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <dialog id="rectangularSize_Master" class="modal">
+                            <div class="modal-box">
+                              <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick="rectangularSize_Master.close()">  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
+                              <h1 class="text-lg pb-6">Rectangular Size</h1>
+                              <form class="space-y-4" hx-post="/projects/00000000-0000-0000-0000-000000000000/duct-sizing/room/00000000-0000-0000-0000-000000000006" hx-target="#roomRow_Master" hx-swap="outerHTML">
+                                <input class="hidden" name="register" value="1">
+                                <input class="hidden" name="id" value="">
+                                Height<label class="input w-full"><span class="label"></span>
+                                <input name="height" type="number" value="" placeholder="8" min="0" required autofocus></label>
+                                <button class="btn btn-secondary btn-block" type="submit">Submit</button>
+                              </form>
+                            </div>
+                          </dialog>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr class="text-lg" id="roomRow_Master">
+                      <td>Master</td>
+                      <td>
+                        <div class="flex flex-wrap grid grid-cols-2 gap-2"><span class="label">Heating</span><span>4,101</span><span class="label">Cooling</span><span>1,038</span></div>
+                      </td>
+                      <td>
+                        <div class="flex flex-wrap grid grid-cols-2 gap-2">
+                          <span class="label">Design</span>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline"><span>87</span></div>
+                          </div>
+                          Heating<span class="label"></span>
+                          <div class="flex justify-center"><span>87</span></div>
+                          Cooling<span class="label"></span>
+                          <div class="flex justify-center"><span>39</span></div>
+                        </div>
+                      </td>
+                      <td><span>489</span></td>
+                      <td>
+                        <div class="grid grid-cols-3 gap-2 w-[330px]">
+                          <div class="label">Calculated</div>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline"><span>7</span></div>
+                          </div>
+                          <div></div>
+                          <div class="label">Final</div>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline badge-secondary"><span>8</span></div>
+                          </div>
+                          <div></div>
+                          <div class="label">Flex</div>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline badge-primary"><span>8</span></div>
+                          </div>
+                          <div></div>
+                          <div class="label">Rectangular</div>
+                          <div class="flex justify-center"></div>
+                          <div class="flex justify-end">
+                            <div class="join">
+                              <div class="tooltip tooltip-bottom" data-tip="Edit Size">
+                                <button class="btn join-item btn-ghost" type="button" onclick="rectangularSize_Master.showModal()">
+                                  <div class="flex">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-pen-icon lucide-square-pen"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></svg>
+                                    
+                                  </div>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                          <dialog id="rectangularSize_Master" class="modal">
+                            <div class="modal-box">
+                              <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick="rectangularSize_Master.close()">  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
+                              <h1 class="text-lg pb-6">Rectangular Size</h1>
+                              <form class="space-y-4" hx-post="/projects/00000000-0000-0000-0000-000000000000/duct-sizing/room/00000000-0000-0000-0000-000000000006" hx-target="#roomRow_Master" hx-swap="outerHTML">
+                                <input class="hidden" name="register" value="2">
+                                <input class="hidden" name="id" value="">
+                                Height<label class="input w-full"><span class="label"></span>
+                                <input name="height" type="number" value="" placeholder="8" min="0" required autofocus></label>
+                                <button class="btn btn-secondary btn-block" type="submit">Submit</button>
+                              </form>
+                            </div>
+                          </dialog>
+                        </div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+                <div class="flex justify-between bg-secondary border-2 border-primary rounded-sm shadow-sm 
+p-6 w-full">
+                  <h1 class="text-3xl font-bold">Trunk / Runout Sizes</h1>
+                  <div class="tooltip tooltip-left" data-tip="Add trunk / runout">
+                    <button type="button" class="btn btn-primary" onclick="trunkSizeForm.showModal()"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-plus-icon lucide-circle-plus"><circle cx="12" cy="12" r="10"/><path d="M8 12h8"/><path d="M12 8v8"/></svg></button>
+                  </div>
+                </div>
+                <table class="table table-zebra text-lg">
+                  <thead>
+                    <tr class="text-lg">
+                      <th>Name / Type</th>
+                      <th>Associated Supplies</th>
+                      <th>Dsn CFM</th>
+                      <th>Velocity</th>
+                      <th class="w-[330px]">Size</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>
+                        <div class="grid grid-cols-1 space-y-2">
+                          <div class="badge badge-lg badge-outline badge-info">supply</div>
+                        </div>
+                      </td>
+                      <td>
+                        <div class="flex flex-wrap space-x-2 space-y-2">
+                          <div class="badge badge-lg badge-outline">Bed-1</div>
+                          <div class="badge badge-lg badge-outline">Entry</div>
+                          <div class="badge badge-lg badge-outline">Entry</div>
+                          <div class="badge badge-lg badge-outline">Family Room</div>
+                          <div class="badge badge-lg badge-outline">Family Room</div>
+                          <div class="badge badge-lg badge-outline">Family Room</div>
+                          <div class="badge badge-lg badge-outline">Kitchen</div>
+                          <div class="badge badge-lg badge-outline">Kitchen</div>
+                          <div class="badge badge-lg badge-outline">Living Room</div>
+                          <div class="badge badge-lg badge-outline">Living Room</div>
+                          <div class="badge badge-lg badge-outline">Master</div>
+                          <div class="badge badge-lg badge-outline">Master</div>
+                        </div>
+                      </td>
+                      <td><span>1,000</span></td>
+                      <td><span>987</span></td>
+                      <td>
+                        <div class="grid grid-cols-3 gap-2 w-[330px]">
+                          <div class="label">Calculated</div>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline"><span>18</span></div>
+                          </div>
+                          <div></div>
+                          <div class="label">Final</div>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline badge-secondary"><span>20</span></div>
+                          </div>
+                          <div></div>
+                          <div class="label">Flex</div>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline badge-primary"><span>20</span></div>
+                          </div>
+                          <div></div>
+                          <div class="label">Rectangular</div>
+                          <div class="flex justify-center"></div>
+                          <div class="flex justify-end items-end">
+                            <div class="join">
+                              <button class="btn join-item btn-ghost" type="button" onclick="trunkSizeForm_0000000000000000000000000000000F.showModal()">
+                                <div class="flex">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-pen-icon lucide-square-pen"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></svg>
+                                  
+                                </div>
+                              </button>
+                            </div>
+                          </div>
+                        </div>
+                        <dialog id="trunkSizeForm_0000000000000000000000000000000F" class="modal">
+                          <div class="modal-box">
+                            <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick="trunkSizeForm_0000000000000000000000000000000F.close()">  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
+                            <h1 class="text-lg font-bold mb-4">Trunk / Runout Size</h1>
+                            <form class="space-y-4" hx-patch="/projects/00000000-0000-0000-0000-000000000000/duct-sizing/trunk/00000000-0000-0000-0000-00000000000F" hx-target="body" hx-swap="outerHTML">
+                              <input class="hidden" name="projectID" value="00000000-0000-0000-0000-000000000000">
+                              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                <label class="select w-full"><span class="label">Type</span>
+                                <select name="type">
+                                  <option value="supply" selected>Supply</option>
+                                  <option value="return">Return</option>
+                                </select>
+                                Height</label><label class="input w-full"><span class="label"></span>
+                                <input type="text" name="height" value="" placeholder="8 (Optional)"></label>
+                              </div>
+                              Name<label class="input w-full"><span class="label"></span>
+                              <input type="text" name="name" value="" placeholder="Trunk-1 (Optional)"></label>
+                              <div>
+                                <h2 class="label font-bold col-span-3 mb-6">Associated Supply Runs</h2>
+                                <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 justify-center items-center gap-4">
+                                  <div class="block grow">
+                                    <div class="grid grid-cols-1 space-y-1">
+                                      <div class="flex justify-center">
+                                        <p class="label">Bed-1</p>
+                                      </div>
+                                      <div class="flex justify-center">
+                                        <input class="checkbox" type="checkbox" name="rooms" value="00000000-0000-0000-0000-000000000001_1" checked>
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div class="block grow">
+                                    <div class="grid grid-cols-1 space-y-1">
+                                      <div class="flex justify-center">
+                                        <p class="label">Entry</p>
+                                      </div>
+                                      <div class="flex justify-center">
+                                        <input class="checkbox" type="checkbox" name="rooms" value="00000000-0000-0000-0000-000000000002_1" checked>
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div class="block grow">
+                                    <div class="grid grid-cols-1 space-y-1">
+                                      <div class="flex justify-center">
+                                        <p class="label">Entry</p>
+                                      </div>
+                                      <div class="flex justify-center">
+                                        <input class="checkbox" type="checkbox" name="rooms" value="00000000-0000-0000-0000-000000000002_2" checked>
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div class="block grow">
+                                    <div class="grid grid-cols-1 space-y-1">
+                                      <div class="flex justify-center">
+                                        <p class="label">Family Room</p>
+                                      </div>
+                                      <div class="flex justify-center">
+                                        <input class="checkbox" type="checkbox" name="rooms" value="00000000-0000-0000-0000-000000000003_1" checked>
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div class="block grow">
+                                    <div class="grid grid-cols-1 space-y-1">
+                                      <div class="flex justify-center">
+                                        <p class="label">Family Room</p>
+                                      </div>
+                                      <div class="flex justify-center">
+                                        <input class="checkbox" type="checkbox" name="rooms" value="00000000-0000-0000-0000-000000000003_2" checked>
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div class="block grow">
+                                    <div class="grid grid-cols-1 space-y-1">
+                                      <div class="flex justify-center">
+                                        <p class="label">Family Room</p>
+                                      </div>
+                                      <div class="flex justify-center">
+                                        <input class="checkbox" type="checkbox" name="rooms" value="00000000-0000-0000-0000-000000000003_3" checked>
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div class="block grow">
+                                    <div class="grid grid-cols-1 space-y-1">
+                                      <div class="flex justify-center">
+                                        <p class="label">Kitchen</p>
+                                      </div>
+                                      <div class="flex justify-center">
+                                        <input class="checkbox" type="checkbox" name="rooms" value="00000000-0000-0000-0000-000000000004_1" checked>
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div class="block grow">
+                                    <div class="grid grid-cols-1 space-y-1">
+                                      <div class="flex justify-center">
+                                        <p class="label">Kitchen</p>
+                                      </div>
+                                      <div class="flex justify-center">
+                                        <input class="checkbox" type="checkbox" name="rooms" value="00000000-0000-0000-0000-000000000004_2" checked>
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div class="block grow">
+                                    <div class="grid grid-cols-1 space-y-1">
+                                      <div class="flex justify-center">
+                                        <p class="label">Living Room</p>
+                                      </div>
+                                      <div class="flex justify-center">
+                                        <input class="checkbox" type="checkbox" name="rooms" value="00000000-0000-0000-0000-000000000005_1" checked>
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div class="block grow">
+                                    <div class="grid grid-cols-1 space-y-1">
+                                      <div class="flex justify-center">
+                                        <p class="label">Living Room</p>
+                                      </div>
+                                      <div class="flex justify-center">
+                                        <input class="checkbox" type="checkbox" name="rooms" value="00000000-0000-0000-0000-000000000005_2" checked>
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div class="block grow">
+                                    <div class="grid grid-cols-1 space-y-1">
+                                      <div class="flex justify-center">
+                                        <p class="label">Master</p>
+                                      </div>
+                                      <div class="flex justify-center">
+                                        <input class="checkbox" type="checkbox" name="rooms" value="00000000-0000-0000-0000-000000000006_1" checked>
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div class="block grow">
+                                    <div class="grid grid-cols-1 space-y-1">
+                                      <div class="flex justify-center">
+                                        <p class="label">Master</p>
+                                      </div>
+                                      <div class="flex justify-center">
+                                        <input class="checkbox" type="checkbox" name="rooms" value="00000000-0000-0000-0000-000000000006_2" checked>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                              <button class="btn btn-secondary btn-block mt-6" type="submit">Submit</button>
+                            </form>
+                          </div>
+                        </dialog>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>
+                        <div class="grid grid-cols-1 space-y-2">
+                          <div class="badge badge-lg badge-outline badge-error">return</div>
+                        </div>
+                      </td>
+                      <td>
+                        <div class="flex flex-wrap space-x-2 space-y-2">
+                          <div class="badge badge-lg badge-outline">Bed-1</div>
+                          <div class="badge badge-lg badge-outline">Entry</div>
+                          <div class="badge badge-lg badge-outline">Entry</div>
+                          <div class="badge badge-lg badge-outline">Family Room</div>
+                          <div class="badge badge-lg badge-outline">Family Room</div>
+                          <div class="badge badge-lg badge-outline">Family Room</div>
+                          <div class="badge badge-lg badge-outline">Kitchen</div>
+                          <div class="badge badge-lg badge-outline">Kitchen</div>
+                          <div class="badge badge-lg badge-outline">Living Room</div>
+                          <div class="badge badge-lg badge-outline">Living Room</div>
+                          <div class="badge badge-lg badge-outline">Master</div>
+                          <div class="badge badge-lg badge-outline">Master</div>
+                        </div>
+                      </td>
+                      <td><span>1,000</span></td>
+                      <td><span>987</span></td>
+                      <td>
+                        <div class="grid grid-cols-3 gap-2 w-[330px]">
+                          <div class="label">Calculated</div>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline"><span>18</span></div>
+                          </div>
+                          <div></div>
+                          <div class="label">Final</div>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline badge-secondary"><span>20</span></div>
+                          </div>
+                          <div></div>
+                          <div class="label">Flex</div>
+                          <div class="flex justify-center">
+                            <div class="badge badge-lg badge-outline badge-primary"><span>20</span></div>
+                          </div>
+                          <div></div>
+                          <div class="label">Rectangular</div>
+                          <div class="flex justify-center"></div>
+                          <div class="flex justify-end items-end">
+                            <div class="join">
+                              <button class="btn join-item btn-ghost" type="button" onclick="trunkSizeForm_00000000000000000000000000000010.showModal()">
+                                <div class="flex">
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-pen-icon lucide-square-pen"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></svg>
+                                  
+                                </div>
+                              </button>
+                            </div>
+                          </div>
+                        </div>
+                        <dialog id="trunkSizeForm_00000000000000000000000000000010" class="modal">
+                          <div class="modal-box">
+                            <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick="trunkSizeForm_00000000000000000000000000000010.close()">  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
+                            <h1 class="text-lg font-bold mb-4">Trunk / Runout Size</h1>
+                            <form class="space-y-4" hx-patch="/projects/00000000-0000-0000-0000-000000000000/duct-sizing/trunk/00000000-0000-0000-0000-000000000010" hx-target="body" hx-swap="outerHTML">
+                              <input class="hidden" name="projectID" value="00000000-0000-0000-0000-000000000000">
+                              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                <label class="select w-full"><span class="label">Type</span>
+                                <select name="type">
+                                  <option value="supply">Supply</option>
+                                  <option value="return" selected>Return</option>
+                                </select>
+                                Height</label><label class="input w-full"><span class="label"></span>
+                                <input type="text" name="height" value="" placeholder="8 (Optional)"></label>
+                              </div>
+                              Name<label class="input w-full"><span class="label"></span>
+                              <input type="text" name="name" value="" placeholder="Trunk-1 (Optional)"></label>
+                              <div>
+                                <h2 class="label font-bold col-span-3 mb-6">Associated Supply Runs</h2>
+                                <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 justify-center items-center gap-4">
+                                  <div class="block grow">
+                                    <div class="grid grid-cols-1 space-y-1">
+                                      <div class="flex justify-center">
+                                        <p class="label">Bed-1</p>
+                                      </div>
+                                      <div class="flex justify-center">
+                                        <input class="checkbox" type="checkbox" name="rooms" value="00000000-0000-0000-0000-000000000001_1" checked>
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div class="block grow">
+                                    <div class="grid grid-cols-1 space-y-1">
+                                      <div class="flex justify-center">
+                                        <p class="label">Entry</p>
+                                      </div>
+                                      <div class="flex justify-center">
+                                        <input class="checkbox" type="checkbox" name="rooms" value="00000000-0000-0000-0000-000000000002_1" checked>
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div class="block grow">
+                                    <div class="grid grid-cols-1 space-y-1">
+                                      <div class="flex justify-center">
+                                        <p class="label">Entry</p>
+                                      </div>
+                                      <div class="flex justify-center">
+                                        <input class="checkbox" type="checkbox" name="rooms" value="00000000-0000-0000-0000-000000000002_2" checked>
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div class="block grow">
+                                    <div class="grid grid-cols-1 space-y-1">
+                                      <div class="flex justify-center">
+                                        <p class="label">Family Room</p>
+                                      </div>
+                                      <div class="flex justify-center">
+                                        <input class="checkbox" type="checkbox" name="rooms" value="00000000-0000-0000-0000-000000000003_1" checked>
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div class="block grow">
+                                    <div class="grid grid-cols-1 space-y-1">
+                                      <div class="flex justify-center">
+                                        <p class="label">Family Room</p>
+                                      </div>
+                                      <div class="flex justify-center">
+                                        <input class="checkbox" type="checkbox" name="rooms" value="00000000-0000-0000-0000-000000000003_2" checked>
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div class="block grow">
+                                    <div class="grid grid-cols-1 space-y-1">
+                                      <div class="flex justify-center">
+                                        <p class="label">Family Room</p>
+                                      </div>
+                                      <div class="flex justify-center">
+                                        <input class="checkbox" type="checkbox" name="rooms" value="00000000-0000-0000-0000-000000000003_3" checked>
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div class="block grow">
+                                    <div class="grid grid-cols-1 space-y-1">
+                                      <div class="flex justify-center">
+                                        <p class="label">Kitchen</p>
+                                      </div>
+                                      <div class="flex justify-center">
+                                        <input class="checkbox" type="checkbox" name="rooms" value="00000000-0000-0000-0000-000000000004_1" checked>
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div class="block grow">
+                                    <div class="grid grid-cols-1 space-y-1">
+                                      <div class="flex justify-center">
+                                        <p class="label">Kitchen</p>
+                                      </div>
+                                      <div class="flex justify-center">
+                                        <input class="checkbox" type="checkbox" name="rooms" value="00000000-0000-0000-0000-000000000004_2" checked>
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div class="block grow">
+                                    <div class="grid grid-cols-1 space-y-1">
+                                      <div class="flex justify-center">
+                                        <p class="label">Living Room</p>
+                                      </div>
+                                      <div class="flex justify-center">
+                                        <input class="checkbox" type="checkbox" name="rooms" value="00000000-0000-0000-0000-000000000005_1" checked>
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div class="block grow">
+                                    <div class="grid grid-cols-1 space-y-1">
+                                      <div class="flex justify-center">
+                                        <p class="label">Living Room</p>
+                                      </div>
+                                      <div class="flex justify-center">
+                                        <input class="checkbox" type="checkbox" name="rooms" value="00000000-0000-0000-0000-000000000005_2" checked>
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div class="block grow">
+                                    <div class="grid grid-cols-1 space-y-1">
+                                      <div class="flex justify-center">
+                                        <p class="label">Master</p>
+                                      </div>
+                                      <div class="flex justify-center">
+                                        <input class="checkbox" type="checkbox" name="rooms" value="00000000-0000-0000-0000-000000000006_1" checked>
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div class="block grow">
+                                    <div class="grid grid-cols-1 space-y-1">
+                                      <div class="flex justify-center">
+                                        <p class="label">Master</p>
+                                      </div>
+                                      <div class="flex justify-center">
+                                        <input class="checkbox" type="checkbox" name="rooms" value="00000000-0000-0000-0000-000000000006_2" checked>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                              <button class="btn btn-secondary btn-block mt-6" type="submit">Submit</button>
+                            </form>
+                          </div>
+                        </dialog>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+                <dialog id="trunkSizeForm" class="modal">
+                  <div class="modal-box">
+                    <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick="trunkSizeForm.close()">  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
+                    <h1 class="text-lg font-bold mb-4">Trunk / Runout Size</h1>
+                    <form class="space-y-4" hx-post="/projects/00000000-0000-0000-0000-000000000000/duct-sizing/trunk" hx-target="body" hx-swap="outerHTML">
+                      <input class="hidden" name="projectID" value="00000000-0000-0000-0000-000000000000">
+                      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <label class="select w-full"><span class="label">Type</span>
+                        <select name="type">
+                          <option value="supply">Supply</option>
+                          <option value="return">Return</option>
+                        </select>
+                        Height</label><label class="input w-full"><span class="label"></span>
+                        <input type="text" name="height" value="" placeholder="8 (Optional)"></label>
+                      </div>
+                      Name<label class="input w-full"><span class="label"></span>
+                      <input type="text" name="name" value="" placeholder="Trunk-1 (Optional)"></label>
+                      <div>
+                        <h2 class="label font-bold col-span-3 mb-6">Associated Supply Runs</h2>
+                        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 justify-center items-center gap-4">
+                          <div class="block grow">
+                            <div class="grid grid-cols-1 space-y-1">
+                              <div class="flex justify-center">
+                                <p class="label">Bed-1</p>
+                              </div>
+                              <div class="flex justify-center">
+                                <input class="checkbox" type="checkbox" name="rooms" value="00000000-0000-0000-0000-000000000001_1">
+                              </div>
+                            </div>
+                          </div>
+                          <div class="block grow">
+                            <div class="grid grid-cols-1 space-y-1">
+                              <div class="flex justify-center">
+                                <p class="label">Entry</p>
+                              </div>
+                              <div class="flex justify-center">
+                                <input class="checkbox" type="checkbox" name="rooms" value="00000000-0000-0000-0000-000000000002_1">
+                              </div>
+                            </div>
+                          </div>
+                          <div class="block grow">
+                            <div class="grid grid-cols-1 space-y-1">
+                              <div class="flex justify-center">
+                                <p class="label">Entry</p>
+                              </div>
+                              <div class="flex justify-center">
+                                <input class="checkbox" type="checkbox" name="rooms" value="00000000-0000-0000-0000-000000000002_2">
+                              </div>
+                            </div>
+                          </div>
+                          <div class="block grow">
+                            <div class="grid grid-cols-1 space-y-1">
+                              <div class="flex justify-center">
+                                <p class="label">Family Room</p>
+                              </div>
+                              <div class="flex justify-center">
+                                <input class="checkbox" type="checkbox" name="rooms" value="00000000-0000-0000-0000-000000000003_1">
+                              </div>
+                            </div>
+                          </div>
+                          <div class="block grow">
+                            <div class="grid grid-cols-1 space-y-1">
+                              <div class="flex justify-center">
+                                <p class="label">Family Room</p>
+                              </div>
+                              <div class="flex justify-center">
+                                <input class="checkbox" type="checkbox" name="rooms" value="00000000-0000-0000-0000-000000000003_2">
+                              </div>
+                            </div>
+                          </div>
+                          <div class="block grow">
+                            <div class="grid grid-cols-1 space-y-1">
+                              <div class="flex justify-center">
+                                <p class="label">Family Room</p>
+                              </div>
+                              <div class="flex justify-center">
+                                <input class="checkbox" type="checkbox" name="rooms" value="00000000-0000-0000-0000-000000000003_3">
+                              </div>
+                            </div>
+                          </div>
+                          <div class="block grow">
+                            <div class="grid grid-cols-1 space-y-1">
+                              <div class="flex justify-center">
+                                <p class="label">Kitchen</p>
+                              </div>
+                              <div class="flex justify-center">
+                                <input class="checkbox" type="checkbox" name="rooms" value="00000000-0000-0000-0000-000000000004_1">
+                              </div>
+                            </div>
+                          </div>
+                          <div class="block grow">
+                            <div class="grid grid-cols-1 space-y-1">
+                              <div class="flex justify-center">
+                                <p class="label">Kitchen</p>
+                              </div>
+                              <div class="flex justify-center">
+                                <input class="checkbox" type="checkbox" name="rooms" value="00000000-0000-0000-0000-000000000004_2">
+                              </div>
+                            </div>
+                          </div>
+                          <div class="block grow">
+                            <div class="grid grid-cols-1 space-y-1">
+                              <div class="flex justify-center">
+                                <p class="label">Living Room</p>
+                              </div>
+                              <div class="flex justify-center">
+                                <input class="checkbox" type="checkbox" name="rooms" value="00000000-0000-0000-0000-000000000005_1">
+                              </div>
+                            </div>
+                          </div>
+                          <div class="block grow">
+                            <div class="grid grid-cols-1 space-y-1">
+                              <div class="flex justify-center">
+                                <p class="label">Living Room</p>
+                              </div>
+                              <div class="flex justify-center">
+                                <input class="checkbox" type="checkbox" name="rooms" value="00000000-0000-0000-0000-000000000005_2">
+                              </div>
+                            </div>
+                          </div>
+                          <div class="block grow">
+                            <div class="grid grid-cols-1 space-y-1">
+                              <div class="flex justify-center">
+                                <p class="label">Master</p>
+                              </div>
+                              <div class="flex justify-center">
+                                <input class="checkbox" type="checkbox" name="rooms" value="00000000-0000-0000-0000-000000000006_1">
+                              </div>
+                            </div>
+                          </div>
+                          <div class="block grow">
+                            <div class="grid grid-cols-1 space-y-1">
+                              <div class="flex justify-center">
+                                <p class="label">Master</p>
+                              </div>
+                              <div class="flex justify-center">
+                                <input class="checkbox" type="checkbox" name="rooms" value="00000000-0000-0000-0000-000000000006_2">
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <button class="btn btn-secondary btn-block mt-6" type="submit">Submit</button>
+                    </form>
+                  </div>
+                </dialog>
+              </div>
+            </div>
+          </div>
+          <div class="drawer-side is-drawer-close:overflow-visible grow">
+            <label for="my-drawer-1" aria-label="close sidebar" class="drawer-overlay"></label>
+            <div class="flex grow h-full flex-col items-start bg-base-300 text-base-content
+is-drawer-close:min-w-[80px] is-drawer-open:max-w-[300px]">
+              <ul class="w-full grow">
+                <li class="flex w-full">
+                  <button class="w-full gap-1 py-2 border-b-1 border-gray-200
+hover:bg-neutral data-active:bg-neutral
+hover:text-white data-active:text-white
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1" hx-get="/projects/00000000-0000-0000-0000-000000000000" hx-push-url="true" hx-target="body" hx-swap="outerHTML">
+                    <div class="w-full p-2 gap-1
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1">
+                      <div class="items-center
+is-drawer-open:justify-start is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:justify-center is-drawer-close:mx-auto is-drawer-close:space-y-2">
+                        <div class="flex items-center justify-center is-drawer-close:text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin-icon lucide-map-pin"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/></svg></div>
+                        <div class="flex items-center justify-center"><span>Project</span></div>
+                      </div>
+                      <div class="flex grow justify-end items-end is-drawer-close:hidden text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge-check-icon lucide-badge-check"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m9 12 2 2 4-4"/></svg></div>
+                    </div>
+                  </button>
+                </li>
+                <li class="w-full">
+                  <button class="w-full gap-1 py-2 border-b-1 border-gray-200
+hover:bg-neutral data-active:bg-neutral
+hover:text-white data-active:text-white
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1" hx-get="/projects/00000000-0000-0000-0000-000000000000/rooms" hx-push-url="true" hx-target="body" hx-swap="outerHTML">
+                    <div class="w-full p-2 gap-1
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1">
+                      <div class="items-center
+is-drawer-open:justify-start is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:justify-center is-drawer-close:mx-auto is-drawer-close:space-y-2">
+                        <div class="flex items-center justify-center is-drawer-close:text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-door-closed-icon lucide-door-closed"><path d="M10 12h.01"/><path d="M18 20V6a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v14"/><path d="M2 20h20"/></svg></div>
+                        <div class="flex items-center justify-center"><span>Rooms</span></div>
+                      </div>
+                      <div class="flex grow justify-end items-end is-drawer-close:hidden text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge-check-icon lucide-badge-check"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m9 12 2 2 4-4"/></svg></div>
+                    </div>
+                  </button>
+                </li>
+                <li class="flex w-full">
+                  <button class="w-full gap-1 py-2 border-b-1 border-gray-200
+hover:bg-neutral data-active:bg-neutral
+hover:text-white data-active:text-white
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1" hx-get="/projects/00000000-0000-0000-0000-000000000000/equipment" hx-push-url="true" hx-target="body" hx-swap="outerHTML">
+                    <div class="w-full p-2 gap-1
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1">
+                      <div class="items-center
+is-drawer-open:justify-start is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:justify-center is-drawer-close:mx-auto is-drawer-close:space-y-2">
+                        <div class="flex items-center justify-center is-drawer-close:text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-fan-icon lucide-fan"><path d="M10.827 16.379a6.082 6.082 0 0 1-8.618-7.002l5.412 1.45a6.082 6.082 0 0 1 7.002-8.618l-1.45 5.412a6.082 6.082 0 0 1 8.618 7.002l-5.412-1.45a6.082 6.082 0 0 1-7.002 8.618l1.45-5.412Z"/><path d="M12 12v.01"/></svg></div>
+                        <div class="flex items-center justify-center"><span>Equipment</span></div>
+                      </div>
+                      <div class="flex grow justify-end items-end is-drawer-close:hidden text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge-check-icon lucide-badge-check"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m9 12 2 2 4-4"/></svg></div>
+                    </div>
+                  </button>
+                </li>
+                <li class="w-full">
+                  <button class="w-full gap-1 py-2 border-b-1 border-gray-200
+hover:bg-neutral data-active:bg-neutral
+hover:text-white data-active:text-white
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1" hx-get="/projects/00000000-0000-0000-0000-000000000000/effective-lengths" hx-push-url="true" hx-target="body" hx-swap="outerHTML">
+                    <div class="w-full p-2 gap-1
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1">
+                      <div class="items-center
+is-drawer-open:justify-start is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:justify-center is-drawer-close:mx-auto is-drawer-close:space-y-2">
+                        <div class="flex items-center justify-center is-drawer-close:text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ruler-dimension-line-icon lucide-ruler-dimension-line"><path d="M10 15v-3"/><path d="M14 15v-3"/><path d="M18 15v-3"/><path d="M2 8V4"/><path d="M22 6H2"/><path d="M22 8V4"/><path d="M6 15v-3"/><rect x="2" y="12" width="20" height="8" rx="2"/></svg></div>
+                        <div class="flex items-center justify-center"><span>T.E.L.</span></div>
+                      </div>
+                      <div class="flex grow justify-end items-end is-drawer-close:hidden text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge-check-icon lucide-badge-check"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m9 12 2 2 4-4"/></svg></div>
+                    </div>
+                  </button>
+                </li>
+                <li class="w-full">
+                  <button class="w-full gap-1 py-2 border-b-1 border-gray-200
+hover:bg-neutral data-active:bg-neutral
+hover:text-white data-active:text-white
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1" hx-get="/projects/00000000-0000-0000-0000-000000000000/friction-rate" hx-push-url="true" hx-target="body" hx-swap="outerHTML">
+                    <div class="w-full p-2 gap-1
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1">
+                      <div class="items-center
+is-drawer-open:justify-start is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:justify-center is-drawer-close:mx-auto is-drawer-close:space-y-2">
+                        <div class="flex items-center justify-center is-drawer-close:text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-function-icon lucide-square-function"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><path d="M9 17c2 0 2.8-1 2.8-2.8V10c0-2 1-3.3 3.2-3"/><path d="M9 11.2h5.7"/></svg></div>
+                        <div class="flex items-center justify-center"><span>Friction Rate</span></div>
+                      </div>
+                      <div class="flex grow justify-end items-end is-drawer-close:hidden text-green-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge-check-icon lucide-badge-check"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m9 12 2 2 4-4"/></svg></div>
+                    </div>
+                  </button>
+                </li>
+                <li class="w-full">
+                  <button class="w-full gap-1 py-2 border-b-1 border-gray-200
+hover:bg-neutral data-active:bg-neutral
+hover:text-white data-active:text-white
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1" hx-get="/projects/00000000-0000-0000-0000-000000000000/duct-sizing" hx-push-url="true" hx-target="body" hx-swap="outerHTML" data-active="true">
+                    <div class="w-full p-2 gap-1
+is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:grid-cols-1">
+                      <div class="items-center
+is-drawer-open:justify-start is-drawer-open:flex is-drawer-open:space-x-4
+is-drawer-close:justify-center is-drawer-close:mx-auto is-drawer-close:space-y-2">
+                        <div class="flex items-center justify-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wind-icon lucide-wind"><path d="M12.8 19.6A2 2 0 1 0 14 16H2"/><path d="M17.5 8a2.5 2.5 0 1 1 2 4H2"/><path d="M9.8 4.4A2 2 0 1 1 11 8H2"/></svg></div>
+                        <div class="flex items-center justify-center"><span>Duct Sizes</span></div>
+                      </div>
+                    </div>
+                  </button>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </main>
+      <div class="bottom-0 left-0 bg-error">
+        <footer class="footer sm:footer-horizontal footer-center
+bg-base-300 text-base-content p-4">
+          <aside>
+            <p>Copyright © 2026 - All rights reserved by Michael Housh</p>
+          </aside>
+        </footer>
+      </div>
+    </div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/Tests/ViewControllerTests/__Snapshots__/ViewControllerTests/projectIndex.1.html b/Tests/ViewControllerTests/__Snapshots__/ViewControllerTests/projectIndex.1.html
new file mode 100644
index 0000000..8f6b58a
--- /dev/null
+++ b/Tests/ViewControllerTests/__Snapshots__/ViewControllerTests/projectIndex.1.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Duct Calc</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta content="ductcalc.com" name="og:site_name">
+    <meta content="Duct Calc" name="og:title">
+    <meta content="Duct sizing based on ACCA, Manual-D." name="description">
+    <meta content="Duct sizing based on ACCA, Manual-D." name="og:description">
+    <meta content="/images/mand_logo.png" name="og:image">
+    <meta content="/images/mand_logo.png" name="twitter:image">
+    <meta content="Duct Calc" name="twitter:image:alt">
+    <meta content="summary_large_image" name="twitter:card">
+    <meta content="1536" name="og:image:width">
+    <meta content="1024" name="og:image:height">
+    <meta content="duct, hvac, duct-design, duct design, manual-d, manual d, design" name="keywords">
+    <script src="https://unpkg.com/htmx.org@2.0.8"></script>
+    <script src="/js/main.js"></script>
+    <link rel="stylesheet" href="/css/output.css">
+    <link rel="icon" href="/images/favicon.ico" type="image/x-icon">
+    <link rel="icon" href="/images/favicon-32x32.png" type="image/png">
+    <link rel="icon" href="/images/favicon-16x16.png" type="image/png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
+    <link rel="manifest" href="/site.webmanifest">
+    <script src="https://unpkg.com/htmx-remove@latest" crossorigin="anonymous" integrity="sha384-NwB2Xh66PNEYfVki0ao13UAFmdNtMIdBKZ8sNGRT6hKfCPaINuZ4ScxS6vVAycPT"></script>
+  </head>
+  <body>
+    <div class="flex flex-col min-h-screen min-w-full justify-between">
+      <main class="flex flex-col min-h-screen min-w-full grow mb-auto">
+        <div>
+          <nav class="navbar w-full bg-base-300 text-base-content shadow-sm mb-4">
+            <div class="flex flex-1 space-x-4 items-center">
+              <div class="tooltip tooltip-right" data-tip="Home">
+                <a class="flex w-fit h-fit text-xl items-end px-4 py-2 btn btn-square btn-ghost hover:bg-neutral hover:text-white" href="/projects">
+                <img src="/images/mand_logo_sm.webp">
+                Duct Calc<span></span></a>
+              </div>
+            </div>
+            <div class="flex-none">
+              <div class="tooltip tooltip-left" data-tip="Profile"><a href="/profile" class="btn btn-square btn-ghost hover:bg-neutral hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-user-icon lucide-circle-user"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="10" r="3"/><path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"/></svg></a></div>
+            </div>
+          </nav>
+          <div class="m-6">
+            <div class="flex justify-between bg-secondary border-2 border-primary rounded-sm shadow-sm 
+p-6 w-full pb-6">
+              <h1 class="text-3xl font-bold">Projects</h1>
+              <div class="tooltip tooltip-left" data-tip="Add project">
+                <button type="button" class="btn btn-primary" onclick="projectForm.showModal()"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-plus-icon lucide-circle-plus"><circle cx="12" cy="12" r="10"/><path d="M8 12h8"/><path d="M12 8v8"/></svg></button>
+              </div>
+            </div>
+            <table class="table table-zebra">
+              <thead>
+                <tr>
+                  <th><span class="text-lg label font-bold">Date</span></th>
+                  <th><span class="text-lg label font-bold">Name</span></th>
+                  <th><span class="text-lg label font-bold">Address</span></th>
+                  <th></th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr id="00000000-0000-0000-0000-000000000000">
+                  <td><span>02/13/2009</span></td>
+                  <td>Testy McTestface</td>
+                  <td>1234 Sesame Street</td>
+                  <td>
+                    <div class="flex justify-end space-x-6">
+                      <div class="join">
+                        <div class="tooltip tooltip-left" data-tip="Delete project">
+                          <button type="button" class="btn btn-error join-item btn-ghost" hx-delete="/projects/00000000-0000-0000-0000-000000000000" hx-confirm="Are you sure?" hx-target="closest tr"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash2-icon lucide-trash-2"><path d="M10 11v6"/><path d="M14 11v6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg></button>
+                        </div>
+                        <div class="tooltip tooltip-left" data-tip="View project"><a class="join-item btn btn-success btn-ghost" href="/projects/00000000-0000-0000-0000-000000000000/rooms"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right-icon lucide-chevron-right"><path d="m9 18 6-6-6-6"/></svg></a></div>
+                      </div>
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <dialog id="projectForm" class="modal">
+            <div class="modal-box">
+              <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick="projectForm.close()">  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
+              <h1 class="text-3xl font-bold pb-6 ps-2">Project</h1>
+              <form class="grid grid-cols-1 gap-4" hx-post="/projects" hx-target="body" hx-swap="outerHTML">
+                <label class="input w-full"><span class="label">Name</span>
+                <input name="name" type="text" value="" placeholder="Project Name" required autofocus>
+                Address</label><label class="input w-full"><span class="label"></span>
+                <input name="streetAddress" type="text" value="" placeholder="Street Address" required>
+                City</label><label class="input w-full"><span class="label"></span>
+                <input name="city" type="text" value="" placeholder="City" required>
+                State</label><label class="input w-full"><span class="label"></span>
+                <input name="state" type="text" value="" placeholder="State" required>
+                Zip</label><label class="input w-full"><span class="label"></span>
+                <input name="zipCode" type="text" value="" placeholder="Zip Code" required></label>
+                <button class="btn btn-secondary btn-block my-6" type="submit">Submit</button>
+              </form>
+            </div>
+          </dialog>
+        </div>
+      </main>
+      <div class="bottom-0 left-0 bg-error">
+        <footer class="footer sm:footer-horizontal footer-center
+bg-base-300 text-base-content p-4">
+          <aside>
+            <p>Copyright © 2026 - All rights reserved by Michael Housh</p>
+          </aside>
+        </footer>
+      </div>
+    </div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/Tests/ViewControllerTests/__Snapshots__/ViewControllerTests/signup.1.html b/Tests/ViewControllerTests/__Snapshots__/ViewControllerTests/signup.1.html
new file mode 100644
index 0000000..c044deb
--- /dev/null
+++ b/Tests/ViewControllerTests/__Snapshots__/ViewControllerTests/signup.1.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Duct Calc</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta content="ductcalc.com" name="og:site_name">
+    <meta content="Duct Calc" name="og:title">
+    <meta content="Duct sizing based on ACCA, Manual-D." name="description">
+    <meta content="Duct sizing based on ACCA, Manual-D." name="og:description">
+    <meta content="/images/mand_logo.png" name="og:image">
+    <meta content="/images/mand_logo.png" name="twitter:image">
+    <meta content="Duct Calc" name="twitter:image:alt">
+    <meta content="summary_large_image" name="twitter:card">
+    <meta content="1536" name="og:image:width">
+    <meta content="1024" name="og:image:height">
+    <meta content="duct, hvac, duct-design, duct design, manual-d, manual d, design" name="keywords">
+    <script src="https://unpkg.com/htmx.org@2.0.8"></script>
+    <script src="/js/main.js"></script>
+    <link rel="stylesheet" href="/css/output.css">
+    <link rel="icon" href="/images/favicon.ico" type="image/x-icon">
+    <link rel="icon" href="/images/favicon-32x32.png" type="image/png">
+    <link rel="icon" href="/images/favicon-16x16.png" type="image/png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
+    <link rel="manifest" href="/site.webmanifest">
+    <script src="https://unpkg.com/htmx-remove@latest" crossorigin="anonymous" integrity="sha384-NwB2Xh66PNEYfVki0ao13UAFmdNtMIdBKZ8sNGRT6hKfCPaINuZ4ScxS6vVAycPT"></script>
+  </head>
+  <body>
+    <div class="flex flex-col min-h-screen min-w-full justify-between">
+      <main class="flex flex-col min-h-screen min-w-full grow mb-auto">
+        <dialog id="loginForm" class="modal modal-open">
+          <div class="modal-box">
+            <h1 class="text-2xl font-bold mb-6">Login</h1>
+            <form method="post" class="space-y-4">
+              <div>
+                <label class="input validator w-full">  <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                  <g
+                    stroke-linejoin="round"
+                    stroke-linecap="round"
+                    stroke-width="2.5"
+                    fill="none"
+                    stroke="currentColor"
+                  >
+                    <rect width="20" height="16" x="2" y="4" rx="2"></rect>
+                    <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>
+                  </g>
+                </svg>
+                <input type="email" placeholder="Email" required name="email" id="email" autofocus></label>
+                <div class="validator-hint hidden">Enter valid email address.</div>
+              </div>
+              <div>
+                <label class="input validator w-full">  <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                    <g
+                      stroke-linejoin="round"
+                      stroke-linecap="round"
+                      stroke-width="2.5"
+                      fill="none"
+                      stroke="currentColor"
+                    >
+                      <path
+                        d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"
+                      ></path>
+                      <circle cx="16.5" cy="7.5" r=".5" fill="currentColor"></circle>
+                    </g>
+                  </svg>
+                <input type="password" placeholder="Password" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" minlength="8" name="password" id="password"></label>
+              </div>
+              <div class="flex">
+                <button class="btn btn-secondary mt-4 w-full">Login</button>
+              </div>
+              <div class="flex justify-center"><a class="btn btn-link" href="/signup">Sign Up</a></div>
+            </form>
+          </div>
+        </dialog>
+      </main>
+      <div class="bottom-0 left-0 bg-error"></div>
+    </div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/Tests/ViewControllerTests/__Snapshots__/ViewControllerTests/userProfile.1.html b/Tests/ViewControllerTests/__Snapshots__/ViewControllerTests/userProfile.1.html
new file mode 100644
index 0000000..6a7df06
--- /dev/null
+++ b/Tests/ViewControllerTests/__Snapshots__/ViewControllerTests/userProfile.1.html
@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Duct Calc</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta content="ductcalc.com" name="og:site_name">
+    <meta content="Duct Calc" name="og:title">
+    <meta content="Duct sizing based on ACCA, Manual-D." name="description">
+    <meta content="Duct sizing based on ACCA, Manual-D." name="og:description">
+    <meta content="/images/mand_logo.png" name="og:image">
+    <meta content="/images/mand_logo.png" name="twitter:image">
+    <meta content="Duct Calc" name="twitter:image:alt">
+    <meta content="summary_large_image" name="twitter:card">
+    <meta content="1536" name="og:image:width">
+    <meta content="1024" name="og:image:height">
+    <meta content="duct, hvac, duct-design, duct design, manual-d, manual d, design" name="keywords">
+    <script src="https://unpkg.com/htmx.org@2.0.8"></script>
+    <script src="/js/main.js"></script>
+    <link rel="stylesheet" href="/css/output.css">
+    <link rel="icon" href="/images/favicon.ico" type="image/x-icon">
+    <link rel="icon" href="/images/favicon-32x32.png" type="image/png">
+    <link rel="icon" href="/images/favicon-16x16.png" type="image/png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
+    <link rel="manifest" href="/site.webmanifest">
+    <script src="https://unpkg.com/htmx-remove@latest" crossorigin="anonymous" integrity="sha384-NwB2Xh66PNEYfVki0ao13UAFmdNtMIdBKZ8sNGRT6hKfCPaINuZ4ScxS6vVAycPT"></script>
+  </head>
+  <body>
+    <div class="flex flex-col min-h-screen min-w-full justify-between">
+      <main class="flex flex-col min-h-screen min-w-full grow mb-auto">
+        <div>
+          <nav class="navbar w-full bg-base-300 text-base-content shadow-sm mb-4">
+            <div class="flex flex-1 space-x-4 items-center">
+              <div class="tooltip tooltip-right" data-tip="Home">
+                <a class="flex w-fit h-fit text-xl items-end px-4 py-2 btn btn-square btn-ghost hover:bg-neutral hover:text-white" href="/projects">
+                <img src="/images/mand_logo_sm.webp">
+                Duct Calc<span></span></a>
+              </div>
+            </div>
+          </nav>
+          <div class="p-4">
+            <div class="flex justify-between">
+              <h1 class="text-2xl font-bold">Account</h1>
+              <button class="btn" type="button" onclick="userProfileForm_00000000000000000000000000000001.showModal()">
+                <div class="flex">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-pen-icon lucide-square-pen"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></svg>
+                  
+                </div>
+              </button>
+            </div>
+            <table class="table table-zebra border rounded-lg">
+              <tr>
+                <td><span class="text-lg label font-bold">Name</span></td>
+                <td>Testy McTestface</td>
+              </tr>
+              <tr>
+                <td><span class="text-lg label font-bold">Company</span></td>
+                <td>Acme Co.</td>
+              </tr>
+              <tr>
+                <td><span class="text-lg label font-bold">Street Address</span></td>
+                <td>1234 Sesame St</td>
+              </tr>
+              <tr>
+                <td><span class="text-lg label font-bold">City</span></td>
+                <td>Monroe</td>
+              </tr>
+              <tr>
+                <td><span class="text-lg label font-bold">State</span></td>
+                <td>OH</td>
+              </tr>
+              <tr>
+                <td><span class="text-lg label font-bold">Zip Code</span></td>
+                <td>55555</td>
+              </tr>
+              <tr>
+                <td><span class="text-lg label font-bold">Theme</span></td>
+                <td></td>
+              </tr>
+            </table>
+            <dialog id="userProfileForm_00000000000000000000000000000001" class="modal">
+              <div class="modal-box">
+                <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick="userProfileForm_00000000000000000000000000000001.close()">  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
+                <h1 class="text-xl font-bold pb-6">Profile</h1>
+                <form class="grid grid-cols-1 gap-4 p-4" hx-patch="/profile/00000000-0000-0000-0000-000000000001" hx-target="body" hx-swap="outerHTML">
+                  <input class="hidden" name="id" value="00000000-0000-0000-0000-000000000001">
+                  <input class="hidden" name="userID" value="00000000-0000-0000-0000-000000000000">
+                  First Name<label class="input w-full"><span class="label"></span>
+                  <input name="firstName" value="Testy" required autofocus>
+                  Last Name</label><label class="input w-full"><span class="label"></span>
+                  <input name="lastName" value="McTestface" required>
+                  Company</label><label class="input w-full"><span class="label"></span>
+                  <input name="companyName" value="Acme Co." required>
+                  Address</label><label class="input w-full"><span class="label"></span>
+                  <input name="streetAddress" value="1234 Sesame St" required>
+                  City</label><label class="input w-full"><span class="label"></span>
+                  <input name="city" value="Monroe" required>
+                  State</label><label class="input w-full"><span class="label"></span>
+                  <input name="state" value="OH" required>
+                  Zip</label><label class="input w-full"><span class="label"></span>
+                  <input name="zipCode" value="55555" required></label>
+                  <div class="dropdown dropdown-top">
+                    <div class="input btn m-1 w-full" tabindex="0" role="button">Theme<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg></div>
+                    <ul tabindex="-1" class="dropdown-content bg-base-300 rounded-box z-1 p-2 shadow-2xl">
+                      <li>
+                        <input type="radio" name="theme" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Default" value="default">
+                      </li>
+                      <li><span class="text-sm font-bold text-gray-400">Light</span></li>
+                      <li>
+                        <input type="radio" name="theme" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Cupcake" value="cupcake">
+                      </li>
+                      <li>
+                        <input type="radio" name="theme" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Light" value="light">
+                      </li>
+                      <li>
+                        <input type="radio" name="theme" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Nord" value="nord">
+                      </li>
+                      <li>
+                        <input type="radio" name="theme" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Retro" value="retro">
+                      </li>
+                      <li><span class="text-sm font-bold text-gray-400">Dark</span></li>
+                      <li>
+                        <input type="radio" name="theme" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Aqua" value="aqua">
+                      </li>
+                      <li>
+                        <input type="radio" name="theme" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Cyberpunk" value="cyberpunk">
+                      </li>
+                      <li>
+                        <input type="radio" name="theme" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Dark" value="dark">
+                      </li>
+                      <li>
+                        <input type="radio" name="theme" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Dracula" value="dracula">
+                      </li>
+                      <li>
+                        <input type="radio" name="theme" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Night" value="night">
+                      </li>
+                      <li>
+                        <input type="radio" name="theme" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Synthwave" value="synthwave">
+                      </li>
+                    </ul>
+                  </div>
+                  <button class="btn btn-secondary btn-block" type="submit">Submit</button>
+                </form>
+              </div>
+            </dialog>
+          </div>
+        </div>
+      </main>
+      <div class="bottom-0 left-0 bg-error">
+        <footer class="footer sm:footer-horizontal footer-center
+bg-base-300 text-base-content p-4">
+          <aside>
+            <p>Copyright © 2026 - All rights reserved by Michael Housh</p>
+          </aside>
+        </footer>
+      </div>
+    </div>
+  </body>
+</html>
\ No newline at end of file