Merge 57fbee1490 into a60e1a5e98

* style(ui): update styling for access and network settings components

* fix(ui): simplify conditional rendering in network settings component

.github/workflows/build.yml

@@ -19,13 +19,13 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: v21.1.0
+          node-version: "22"
           cache: "npm"
           cache-dependency-path: "**/package-lock.json"
       - name: Set up Golang
         uses: actions/setup-go@v4
         with:
-          go-version: "1.24.0"
+          go-version: "1.24.3"
       - name: Build frontend
         run: |
           make frontend

.github/workflows/golangci-lint.yml

@@ -26,7 +26,7 @@ jobs:
       - name: Install Go
         uses: actions/setup-go@41dfa10bad2bb2ae585af6ee5bb4d7d973ad74ed # v5.1.0
         with:
-          go-version: 1.24.x
+          go-version: 1.24.3
       - name: Create empty resource directory
         run: |
           mkdir -p static && touch static/.gitkeep

.github/workflows/push.yaml

@@ -0,0 +1,126 @@
+name: Push
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+permissions:
+  id-token: write
+  contents: read
+  pull-requests: write
+
+jobs:
+  build:
+    name: Build
+    runs-on: ${{ matrix.os }}
+    strategy:
+      fail-fast: false
+      matrix:
+        os: [ubuntu-22.04]
+        go: [1.21, 1.23.4]
+        node: [21]
+        goos: [linux]
+        goarch: [arm]
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node }}
+
+      - name: Install Dependencies
+        working-directory: ui
+        run: npm ci
+
+      - name: Build UI
+        working-directory: ui
+        run: npm run build:device
+
+      - name: Setup Go
+        uses: actions/setup-go@v5
+        with:
+          go-version: ${{ matrix.go }}
+
+      - name: Install Go Dependencies
+        run: |
+          go mod download
+
+      - name: Build Binaries
+        env:
+          GOOS: ${{ matrix.goos }}
+          GOARCH: ${{ matrix.goarch }}
+        run: |
+          GOOS=linux GOARCH=arm GOARM=7 go build -ldflags="-s -w -X kvm.builtAppVersion=dev-${GIT_COMMIT:0:7}" -o bin/jetkvm_app cmd/main.go
+          chmod 755 bin/jetkvm_app
+
+      - name: Upload Debug Artifact
+        uses: actions/upload-artifact@v4
+        if: ${{ (github.ref == 'refs/heads/main' || github.event_name == 'pull_request') && matrix.go == '1.21' }}
+        with:
+          name: jetkvm_app_debug
+          path: bin/jetkvm_app
+
+  comment:
+    name: Comment
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Generate Links
+        id: linksa
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          ARTIFACT_ID=$(gh api repos/${{ github.repository }}/actions/runs/${{ github.run_id }}/artifacts --jq '.artifacts[0].id')
+          echo "ARTIFACT_URL=https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}/artifacts/$ARTIFACT_ID" >> $GITHUB_ENV
+          echo "LATEST_COMMIT=$(git rev-parse --short HEAD)" >> $GITHUB_ENV
+
+      - name: Comment on PR
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          if [[ "${{ github.event_name }}" == "pull_request" ]]; then
+            TITLE="${{ github.event.pull_request.title }}"
+            PR_NUMBER=${{ github.event.pull_request.number }}
+          else
+            TITLE="main branch"
+          fi
+
+          COMMENT=$(cat << EOF
+          ✅ **Build successfully for $TITLE!**
+
+          | Name             | Link                                                                 |
+          |------------------|----------------------------------------------------------------------|
+          | 🔗 Debug Binary  | [Download](${{ env.ARTIFACT_URL }})                                   |
+          | 🔗 Latest commit | [${{ env.LATEST_COMMIT }}](https://github.com/${{ github.repository }}/commit/${{ github.sha }}) |
+          EOF
+          )
+
+          # Post Comment
+          if [[ "${{ github.event_name }}" == "pull_request" ]]; then
+            # Look for an existing comment
+            COMMENT_ID=$(gh api repos/${{ github.repository }}/issues/$PR_NUMBER/comments \
+              --jq '.[] | select(.body | contains("✅ **Build successfully for")) | .id')
+
+            if [ -z "$COMMENT_ID" ]; then
+              # Create a new comment if none exists
+              gh pr comment $PR_NUMBER --body "$COMMENT"
+            else
+              # Update the existing comment
+              gh api repos/${{ github.repository }}/issues/comments/$COMMENT_ID \
+                --method PATCH \
+                -f body="$COMMENT"
+            fi
+          else
+            # Log the comment for main branch
+            echo "$COMMENT"
+          fi

.github/workflows/release.yaml

@@ -0,0 +1,91 @@
+name: Release
+
+on:
+  push:
+    tags:
+      - "v*"
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-22.04
+    permissions:
+      contents: write
+      packages: write
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 21
+
+      - name: Install Dependencies
+        working-directory: ui
+        run: npm ci
+
+      - name: Build UI
+        working-directory: ui
+        run: npm run build:device
+
+      - name: Setup Go
+        uses: actions/setup-go@v5
+        with:
+          go-version: 1.21
+
+      - name: Build Release Binaries
+        env:
+          REF: ${{ github.ref }}
+        run: |
+          GOOS=linux GOARCH=arm GOARM=7 go build -ldflags="-s -w -X kvm.builtAppVersion=${REF:11}" -o bin/jetkvm_app cmd/main.go
+          chmod 755 bin/jetkvm_app
+
+      - name: Create checksum
+        env:
+          REF: ${{ github.ref }}
+        run: |
+          SUM=$(shasum -a 256 bin/jetkvm_app | cut -d ' ' -f 1)
+          echo -e "\n#### SHA256 Checksum\n\`\`\`\n$SUM  bin/jetkvm_app\n\`\`\`\n" >> ./RELEASE_CHANGELOG
+          echo -e "$SUM bin/jetkvm_app\n" > checksums.txt
+
+      - name: Create Release Branch
+        env:
+          REF: ${{ github.ref }}
+        run: |
+          BRANCH=release/${REF:10}
+          git config --local user.email "github-actions[bot]@users.noreply.github.com"
+          git config --local user.name "github-actions[bot]"
+          git checkout -b ${BRANCH}
+          git push -u origin ${BRANCH}
+
+      - name: Create Release
+        id: create_release
+        uses: softprops/action-gh-release@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          draft: true
+          prerelease: ${{ contains(github.ref, 'rc') || contains(github.ref, 'beta') || contains(github.ref, 'alpha') }}
+          body_path: ./RELEASE_CHANGELOG
+
+      - name: Upload JetKVM binary
+        uses: actions/upload-release-asset@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          upload_url: ${{ steps.create_release.outputs.upload_url }}
+          asset_path: bin/jetkvm_app
+          asset_name: jetkvm_app
+          asset_content_type: application/octet-stream
+
+      - name: Upload checksum
+        uses: actions/upload-release-asset@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          upload_url: ${{ steps.create_release.outputs.upload_url }}
+          asset_path: ./checksums.txt
+          asset_name: checksums.txt
+          asset_content_type: text/plain

.github/workflows/smoketest.yml

@@ -106,7 +106,7 @@ jobs:
       - name: Set up Golang
         uses: actions/setup-go@v4
         with:
-          go-version: "1.24.0"
+          go-version: "1.24.3"
       - name: Golang Test Report
         uses: becheran/go-testreport@v0.3.2
         with:

Makefile

@@ -2,8 +2,8 @@ BRANCH    ?= $(shell git rev-parse --abbrev-ref HEAD)
 BUILDDATE ?= $(shell date -u +%FT%T%z)
 BUILDTS   ?= $(shell date -u +%s)
 REVISION  ?= $(shell git rev-parse HEAD)
-VERSION_DEV := 0.4.0-dev$(shell date +%Y%m%d%H%M)
-VERSION := 0.3.9
+VERSION_DEV := 0.4.1-dev$(shell date +%Y%m%d%H%M)
+VERSION := 0.4.0
 
 PROMETHEUS_TAG := github.com/prometheus/common/version
 KVM_PKG_NAME := github.com/jetkvm/kvm
@@ -25,7 +25,10 @@ hash_resource:
 
 build_dev: hash_resource
 	@echo "Building..."
-	$(GO_CMD) build -ldflags="$(GO_LDFLAGS) -X $(KVM_PKG_NAME).builtAppVersion=$(VERSION_DEV)" -o $(BIN_DIR)/jetkvm_app cmd/main.go
+	$(GO_CMD) build \
+		-ldflags="$(GO_LDFLAGS) -X $(KVM_PKG_NAME).builtAppVersion=$(VERSION_DEV)" \
+		-trimpath \
+		-o $(BIN_DIR)/jetkvm_app cmd/main.go
 
 build_test2json:
 	$(GO_CMD) build -o $(BIN_DIR)/test2json cmd/test2json
@@ -66,7 +69,10 @@ dev_release: frontend build_dev
 
 build_release: frontend hash_resource
 	@echo "Building release..."
-	$(GO_CMD) build -ldflags="$(GO_LDFLAGS) -X $(KVM_PKG_NAME).builtAppVersion=$(VERSION)" -o bin/jetkvm_app cmd/main.go
+	$(GO_CMD) build \
+		-ldflags="$(GO_LDFLAGS) -X $(KVM_PKG_NAME).builtAppVersion=$(VERSION)" \
+		-trimpath \
+		-o bin/jetkvm_app cmd/main.go
 
 release:
 	@if rclone lsf r2://jetkvm-update/app/$(VERSION)/ | grep -q "jetkvm_app"; then \

ui/.prettierrc

@@ -6,6 +6,7 @@
   "arrowParens": "avoid",
   "singleQuote": false,
   "plugins": ["prettier-plugin-tailwindcss"],
-  "tailwindFunctions": ["clsx"],
-  "printWidth": 90
+  "tailwindFunctions": ["clsx", "cx"],
+  "printWidth": 90,
+  "tailwindStylesheet": "./src/index.css"
 }

ui/src/components/AutoHeight.tsx

@@ -22,7 +22,7 @@ const AutoHeight = ({ children, ...props }: { children: React.ReactNode }) => {
       {...props}
       height={height}
       duration={300}
-      contentClassName="h-fit"
+      contentClassName="h-fit p-px"
       contentRef={contentDiv}
       disableDisplayNone
     >

ui/src/components/Checkbox.tsx

@@ -12,7 +12,7 @@ const sizes = {
 
 const checkboxVariants = cva({
   base: cx(
-    "block rounded",
+    "form-checkbox block rounded",
 
     // Colors
     "border-slate-300 dark:border-slate-600 bg-slate-50 dark:bg-slate-800 checked:accent-blue-700 checked:dark:accent-blue-500 transition-colors",

ui/src/components/DhcpLeaseCard.tsx

@@ -0,0 +1,212 @@
+import { LuRefreshCcw } from "react-icons/lu";
+
+import { Button } from "@/components/Button";
+import { GridCard } from "@/components/Card";
+import { LifeTimeLabel } from "@/routes/devices.$id.settings.network";
+import { NetworkState } from "@/hooks/stores";
+
+export default function DhcpLeaseCard({
+  networkState,
+  setShowRenewLeaseConfirm,
+}: {
+  networkState: NetworkState;
+  setShowRenewLeaseConfirm: (show: boolean) => void;
+}) {
+  return (
+    <GridCard>
+      <div className="animate-fadeIn p-4 opacity-0 animation-duration-500 text-black dark:text-white">
+        <div className="space-y-3">
+          <h3 className="text-base font-bold text-slate-900 dark:text-white">
+            DHCP Lease Information
+          </h3>
+
+          <div className="flex gap-x-6 gap-y-2">
+            <div className="flex-1 space-y-2">
+              {networkState?.dhcp_lease?.ip && (
+                <div className="flex justify-between border-slate-800/10 pt-2 dark:border-slate-300/20">
+                  <span className="text-sm text-slate-600 dark:text-slate-400">
+                    IP Address
+                  </span>
+                  <span className="text-sm font-medium">
+                    {networkState?.dhcp_lease?.ip}
+                  </span>
+                </div>
+              )}
+
+              {networkState?.dhcp_lease?.netmask && (
+                <div className="flex justify-between border-t border-slate-800/10 pt-2 dark:border-slate-300/20">
+                  <span className="text-sm text-slate-600 dark:text-slate-400">
+                    Subnet Mask
+                  </span>
+                  <span className="text-sm font-medium">
+                    {networkState?.dhcp_lease?.netmask}
+                  </span>
+                </div>
+              )}
+
+              {networkState?.dhcp_lease?.dns && (
+                <div className="flex justify-between border-t border-slate-800/10 pt-2 dark:border-slate-300/20">
+                  <span className="text-sm text-slate-600 dark:text-slate-400">
+                    DNS Servers
+                  </span>
+                  <span className="text-right text-sm font-medium">
+                    {networkState?.dhcp_lease?.dns.map(dns => <div key={dns}>{dns}</div>)}
+                  </span>
+                </div>
+              )}
+
+              {networkState?.dhcp_lease?.broadcast && (
+                <div className="flex justify-between border-t border-slate-800/10 pt-2 dark:border-slate-300/20">
+                  <span className="text-sm text-slate-600 dark:text-slate-400">
+                    Broadcast
+                  </span>
+                  <span className="text-sm font-medium">
+                    {networkState?.dhcp_lease?.broadcast}
+                  </span>
+                </div>
+              )}
+
+              {networkState?.dhcp_lease?.domain && (
+                <div className="flex justify-between border-t border-slate-800/10 pt-2 dark:border-slate-300/20">
+                  <span className="text-sm text-slate-600 dark:text-slate-400">
+                    Domain
+                  </span>
+                  <span className="text-sm font-medium">
+                    {networkState?.dhcp_lease?.domain}
+                  </span>
+                </div>
+              )}
+
+              {networkState?.dhcp_lease?.ntp_servers &&
+                networkState?.dhcp_lease?.ntp_servers.length > 0 && (
+                  <div className="flex justify-between gap-x-8 border-t border-slate-800/10 pt-2 dark:border-slate-300/20">
+                    <div className="w-full grow text-sm text-slate-600 dark:text-slate-400">
+                      NTP Servers
+                    </div>
+                    <div className="shrink text-right text-sm font-medium">
+                      {networkState?.dhcp_lease?.ntp_servers.map(server => (
+                        <div key={server}>{server}</div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+              {networkState?.dhcp_lease?.hostname && (
+                <div className="flex justify-between border-t border-slate-800/10 pt-2 dark:border-slate-300/20">
+                  <span className="text-sm text-slate-600 dark:text-slate-400">
+                    Hostname
+                  </span>
+                  <span className="text-sm font-medium">
+                    {networkState?.dhcp_lease?.hostname}
+                  </span>
+                </div>
+              )}
+            </div>
+
+            <div className="flex-1 space-y-2">
+              {networkState?.dhcp_lease?.routers &&
+                networkState?.dhcp_lease?.routers.length > 0 && (
+                  <div className="flex justify-between pt-2">
+                    <span className="text-sm text-slate-600 dark:text-slate-400">
+                      Gateway
+                    </span>
+                    <span className="text-right text-sm font-medium">
+                      {networkState?.dhcp_lease?.routers.map(router => (
+                        <div key={router}>{router}</div>
+                      ))}
+                    </span>
+                  </div>
+                )}
+
+              {networkState?.dhcp_lease?.server_id && (
+                <div className="flex justify-between border-t border-slate-800/10 pt-2 dark:border-slate-300/20">
+                  <span className="text-sm text-slate-600 dark:text-slate-400">
+                    DHCP Server
+                  </span>
+                  <span className="text-sm font-medium">
+                    {networkState?.dhcp_lease?.server_id}
+                  </span>
+                </div>
+              )}
+
+              {networkState?.dhcp_lease?.lease_expiry && (
+                <div className="flex justify-between border-t border-slate-800/10 pt-2 dark:border-slate-300/20">
+                  <span className="text-sm text-slate-600 dark:text-slate-400">
+                    Lease Expires
+                  </span>
+                  <span className="text-sm font-medium">
+                    <LifeTimeLabel
+                      lifetime={`${networkState?.dhcp_lease?.lease_expiry}`}
+                    />
+                  </span>
+                </div>
+              )}
+
+              {networkState?.dhcp_lease?.mtu && (
+                <div className="flex justify-between border-t border-slate-800/10 pt-2 dark:border-slate-300/20">
+                  <span className="text-sm text-slate-600 dark:text-slate-400">MTU</span>
+                  <span className="text-sm font-medium">
+                    {networkState?.dhcp_lease?.mtu}
+                  </span>
+                </div>
+              )}
+
+              {networkState?.dhcp_lease?.ttl && (
+                <div className="flex justify-between border-t border-slate-800/10 pt-2 dark:border-slate-300/20">
+                  <span className="text-sm text-slate-600 dark:text-slate-400">TTL</span>
+                  <span className="text-sm font-medium">
+                    {networkState?.dhcp_lease?.ttl}
+                  </span>
+                </div>
+              )}
+
+              {networkState?.dhcp_lease?.bootp_next_server && (
+                <div className="flex justify-between border-t border-slate-800/10 pt-2 dark:border-slate-300/20">
+                  <span className="text-sm text-slate-600 dark:text-slate-400">
+                    Boot Next Server
+                  </span>
+                  <span className="text-sm font-medium">
+                    {networkState?.dhcp_lease?.bootp_next_server}
+                  </span>
+                </div>
+              )}
+
+              {networkState?.dhcp_lease?.bootp_server_name && (
+                <div className="flex justify-between border-t border-slate-800/10 pt-2 dark:border-slate-300/20">
+                  <span className="text-sm text-slate-600 dark:text-slate-400">
+                    Boot Server Name
+                  </span>
+                  <span className="text-sm font-medium">
+                    {networkState?.dhcp_lease?.bootp_server_name}
+                  </span>
+                </div>
+              )}
+
+              {networkState?.dhcp_lease?.bootp_file && (
+                <div className="flex justify-between border-t border-slate-800/10 pt-2 dark:border-slate-300/20">
+                  <span className="text-sm text-slate-600 dark:text-slate-400">
+                    Boot File
+                  </span>
+                  <span className="text-sm font-medium">
+                    {networkState?.dhcp_lease?.bootp_file}
+                  </span>
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div>
+            <Button
+              size="SM"
+              theme="light"
+              className="text-red-500"
+              text="Renew DHCP Lease"
+              LeadingIcon={LuRefreshCcw}
+              onClick={() => setShowRenewLeaseConfirm(true)}
+            />
+          </div>
+        </div>
+      </div>
+    </GridCard>
+  );
+}

ui/src/components/Ipv6NetworkCard.tsx

@@ -0,0 +1,93 @@
+import { NetworkState } from "../hooks/stores";
+import { LifeTimeLabel } from "../routes/devices.$id.settings.network";
+
+import { GridCard } from "./Card";
+
+export default function Ipv6NetworkCard({
+  networkState,
+}: {
+  networkState: NetworkState;
+}) {
+  return (
+    <GridCard>
+      <div className="animate-fadeIn p-4 text-black opacity-0 animation-duration-500 dark:text-white">
+        <div className="space-y-4">
+          <h3 className="text-base font-bold text-slate-900 dark:text-white">
+            IPv6 Information
+          </h3>
+
+          <div className="grid grid-cols-2 gap-x-6 gap-y-2">
+            {networkState?.dhcp_lease?.ip && (
+              <div className="flex flex-col justify-between">
+                <span className="text-sm text-slate-600 dark:text-slate-400">
+                  Link-local
+                </span>
+                <span className="text-sm font-medium">
+                  {networkState?.ipv6_link_local}
+                </span>
+              </div>
+            )}
+          </div>
+
+          <div className="space-y-3 pt-2">
+            {networkState?.ipv6_addresses && networkState?.ipv6_addresses.length > 0 && (
+              <div className="space-y-3">
+                <h4 className="text-sm font-semibold">IPv6 Addresses</h4>
+                {networkState.ipv6_addresses.map(
+                  addr => (
+                    <div
+                      key={addr.address}
+                      className="rounded-md rounded-l-none border border-slate-500/10 border-l-blue-700/50 bg-white p-4 pl-4 backdrop-blur-sm dark:bg-transparent"
+                    >
+                      <div className="grid grid-cols-2 gap-x-8 gap-y-4">
+                        <div className="col-span-2 flex flex-col justify-between">
+                          <span className="text-sm text-slate-600 dark:text-slate-400">
+                            Address
+                          </span>
+                          <span className="text-sm font-medium">{addr.address}</span>
+                        </div>
+
+                        {addr.valid_lifetime && (
+                          <div className="flex flex-col justify-between">
+                            <span className="text-sm text-slate-600 dark:text-slate-400">
+                              Valid Lifetime
+                            </span>
+                            <span className="text-sm font-medium">
+                              {addr.valid_lifetime === "" ? (
+                                <span className="text-slate-400 dark:text-slate-600">
+                                  N/A
+                                </span>
+                              ) : (
+                                <LifeTimeLabel lifetime={`${addr.valid_lifetime}`} />
+                              )}
+                            </span>
+                          </div>
+                        )}
+                        {addr.preferred_lifetime && (
+                          <div className="flex flex-col justify-between">
+                            <span className="text-sm text-slate-600 dark:text-slate-400">
+                              Preferred Lifetime
+                            </span>
+                            <span className="text-sm font-medium">
+                              {addr.preferred_lifetime === "" ? (
+                                <span className="text-slate-400 dark:text-slate-600">
+                                  N/A
+                                </span>
+                              ) : (
+                                <LifeTimeLabel lifetime={`${addr.preferred_lifetime}`} />
+                              )}
+                            </span>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  ),
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </GridCard>
+  );
+}

ui/src/components/Modal.tsx

@@ -20,7 +20,9 @@ const Modal = React.memo(function Modal({
         transition
         className="fixed inset-0 bg-gray-500/75 transition-opacity data-closed:opacity-0 data-enter:duration-500 data-leave:duration-200 data-enter:ease-out data-leave:ease-in dark:bg-slate-900/90"
       />
-      <div className="fixed inset-0 z-20 w-screen overflow-y-auto">
+      <div className="fixed inset-0 z-20 w-screen overflow-y-auto" style={{
+        scrollbarGutter: 'stable'
+      }}>
         {/* TODO: This doesn't work well with other-sessions */}
         <div className="flex min-h-full items-end justify-center p-4 text-center md:items-baseline md:p-4">
           <DialogPanel

ui/src/components/extensions/ATXPowerControl.tsx

@@ -107,7 +107,7 @@ export function ATXPowerControl() {
           <LoadingSpinner className="h-6 w-6 text-blue-500 dark:text-blue-400" />
         </Card>
       ) : (
-        <Card className="h-[120px] animate-fadeIn">
+        <Card className="h-[120px] animate-fadeIn opacity-0">
           <div className="space-y-4 p-3">
             {/* Control Buttons */}
             <div className="flex items-center space-x-2">

ui/src/components/extensions/DCPowerControl.tsx

@@ -63,7 +63,7 @@ export function DCPowerControl() {
           <LoadingSpinner className="h-6 w-6 text-blue-500 dark:text-blue-400" />
         </Card>
       ) : (
-        <Card className="h-[160px] animate-fadeIn">
+        <Card className="h-[160px] animate-fadeIn opacity-0">
           <div className="space-y-4 p-3">
             {/* Power Controls */}
             <div className="flex items-center space-x-2">

ui/src/components/extensions/SerialConsole.tsx

@@ -58,7 +58,7 @@ export function SerialConsole() {
         description="Configure your serial console settings"
       />
 
-      <Card className="animate-fadeIn">
+      <Card className="animate-fadeIn opacity-0">
         <div className="space-y-4 p-3">
           {/* Open Console Button */}
           <div className="flex items-center">

ui/src/components/popovers/ExtensionPopover.tsx

@@ -92,7 +92,7 @@ export default function ExtensionPopover() {
                 {renderActiveExtension()}
 
                 <div
-                  className="flex animate-fadeIn items-center justify-end space-x-2"
+                  className="flex animate-fadeIn opacity-0 items-center justify-end space-x-2"
                   style={{
                     animationDuration: "0.7s",
                     animationDelay: "0.2s",
@@ -113,7 +113,7 @@ export default function ExtensionPopover() {
                   title="Extensions"
                   description="Load and manage your extensions"
                 />
-                <Card className="animate-fadeIn">
+                <Card className="animate-fadeIn opacity-0" >
                   <div className="w-full divide-y divide-slate-700/30 dark:divide-slate-600/30">
                     {AVAILABLE_EXTENSIONS.map(extension => (
                       <div

ui/src/components/popovers/MountPopover.tsx

@@ -214,7 +214,7 @@ const MountPopopover = forwardRef<HTMLDivElement, object>((_props, ref) => {
               ) : null}
 
               <div
-                className="animate-fadeIn space-y-2"
+                className="animate-fadeIn opacity-0 space-y-2"
                 style={{
                   animationDuration: "0.7s",
                   animationDelay: "0.1s",
@@ -289,7 +289,7 @@ const MountPopopover = forwardRef<HTMLDivElement, object>((_props, ref) => {
 
         {!remoteVirtualMediaState && (
           <div
-            className="flex animate-fadeIn items-center justify-end space-x-2"
+            className="flex animate-fadeIn opacity-0 items-center justify-end space-x-2"
             style={{
               animationDuration: "0.7s",
               animationDelay: "0.2s",

ui/src/components/popovers/PasteModal.tsx

@@ -83,7 +83,7 @@ export default function PasteModal() {
               />
 
               <div
-                className="animate-fadeIn space-y-2"
+                className="animate-fadeIn opacity-0 space-y-2"
                 style={{
                   animationDuration: "0.7s",
                   animationDelay: "0.1s",
@@ -137,7 +137,7 @@ export default function PasteModal() {
           </div>
         </div>
         <div
-          className="flex animate-fadeIn items-center justify-end gap-x-2"
+          className="flex animate-fadeIn opacity-0 items-center justify-end gap-x-2"
           style={{
             animationDuration: "0.7s",
             animationDelay: "0.2s",

ui/src/components/popovers/WakeOnLan/AddDeviceForm.tsx

@@ -26,7 +26,7 @@ export default function AddDeviceForm({
   return (
     <div className="space-y-4">
       <div
-        className="animate-fadeIn space-y-4"
+        className="animate-fadeIn opacity-0 space-y-4"
         style={{
           animationDuration: "0.5s",
           animationFillMode: "forwards",
@@ -73,7 +73,7 @@ export default function AddDeviceForm({
         />
       </div>
       <div
-        className="flex animate-fadeIn items-center justify-end space-x-2"
+        className="flex animate-fadeIn opacity-0 items-center justify-end space-x-2"
         style={{
           animationDuration: "0.7s",
           animationDelay: "0.2s",

ui/src/components/popovers/WakeOnLan/DeviceList.tsx

@@ -28,7 +28,7 @@ export default function DeviceList({
 }: DeviceListProps) {
   return (
     <div className="space-y-4">
-      <Card className="animate-fadeIn">
+      <Card className="animate-fadeIn opacity-0">
         <div className="w-full divide-y divide-slate-700/30 dark:divide-slate-600/30">
           {storedDevices.map((device, index) => (
             <div key={index} className="flex items-center justify-between gap-x-2 p-3">
@@ -63,7 +63,7 @@ export default function DeviceList({
         </div>
       </Card>
       <div
-        className="flex animate-fadeIn items-center justify-end space-x-2"
+        className="flex animate-fadeIn opacity-0 items-center justify-end space-x-2"
         style={{
           animationDuration: "0.7s",
           animationDelay: "0.2s",

ui/src/components/popovers/WakeOnLan/EmptyStateCard.tsx

@@ -13,7 +13,7 @@ export default function EmptyStateCard({
 }) {
   return (
     <div className="select-none space-y-4">
-      <Card className="animate-fadeIn">
+      <Card className="animate-fadeIn opacity-0">
         <div className="flex items-center justify-center py-8 text-center">
           <div className="space-y-3">
             <div className="space-y-1">
@@ -35,7 +35,7 @@ export default function EmptyStateCard({
         </div>
       </Card>
       <div
-        className="flex animate-fadeIn items-center justify-end space-x-2"
+        className="flex animate-fadeIn opacity-0 items-center justify-end space-x-2"
         style={{
           animationDuration: "0.7s",
           animationDelay: "0.2s",

ui/src/index.css

@@ -1,4 +1,4 @@
-@import 'tailwindcss';
+@import "tailwindcss";
 
 @config "../tailwind.config.js";
 
@@ -10,10 +10,10 @@
 @custom-variant dark (&:where(.dark, .dark *));
 
 @theme {
-  --font-sans: 'Circular', sans-serif;
-  --font-display: 'Circular', sans-serif;
-  --font-serif: 'Circular', serif;
-  --font-mono: 'Source Code Pro Variable', monospace;
+  --font-sans: "Circular", sans-serif;
+  --font-display: "Circular", sans-serif;
+  --font-serif: "Circular", serif;
+  --font-mono: "Source Code Pro Variable", monospace;
 
   --grid-layout: auto 1fr auto;
   --grid-headerBody: auto 1fr;
@@ -122,13 +122,22 @@
   }
 }
 
+/* If we don't ignore this, Prettier will add a space between the value and the `ms`. Rendering the utility invalid. */
+/* prettier-ignore */
 @utility max-width-* {
-  max-width: --modifier(--container- *, [length], [ *]);
+  max-width: --modifier(--container-*, [length], [*]);
 }
 
-/* Ensure there is not a `ms` and ms -> `...)ms` */
+/* If we don't ignore this, Prettier will add a space between the value and the `ms`. Rendering the utility invalid. */
+/* prettier-ignore */
 @utility animation-delay-* {
-  animation-delay: --value(integer) ms;
+  animation-delay: --value(integer)ms;
+}
+
+/* If we don't ignore this, Prettier will add a space between the value and the `ms`. Rendering the utility invalid. */
+/* prettier-ignore */
+@utility animation-duration-* {
+  animation-duration: --value(integer)ms;
 }
 
 html {

ui/src/routes/devices.$id.mount.tsx

@@ -7,7 +7,7 @@ import {
   LuCheck,
   LuUpload,
 } from "react-icons/lu";
-import { PlusCircleIcon , ExclamationTriangleIcon } from "@heroicons/react/20/solid";
+import { PlusCircleIcon, ExclamationTriangleIcon } from "@heroicons/react/20/solid";
 import { TrashIcon } from "@heroicons/react/16/solid";
 import { useNavigate } from "react-router-dom";
 
@@ -38,7 +38,6 @@ import {
   useRTCStore,
 } from "../hooks/stores";
 
-
 export default function MountRoute() {
   const navigate = useNavigate();
   {
@@ -283,8 +282,8 @@ function ModeSelectionView({
 
   return (
     <div className="w-full space-y-4">
-      <div className="animate-fadeIn space-y-0">
-        <h2 className="text-lg font-bold leading-tight dark:text-white">
+      <div className="animate-fadeIn space-y-0 opacity-0">
+        <h2 className="text-lg leading-tight font-bold dark:text-white">
           Virtual Media Source
         </h2>
         <div className="text-sm leading-snug text-slate-600 dark:text-slate-400">
@@ -320,7 +319,7 @@ function ModeSelectionView({
         ].map(({ label, description, value: mode, icon: Icon, tag, disabled }, index) => (
           <div
             key={label}
-            className={cx("animate-fadeIn")}
+            className="animate-fadeIn opacity-0"
             style={{
               animationDuration: "0.7s",
               animationDelay: `${25 * (index * 5)}ms`,
@@ -337,7 +336,7 @@ function ModeSelectionView({
               )}
             >
               <div
-                className="relative z-50 flex select-none flex-col items-start p-4"
+                className="relative z-50 flex flex-col items-start p-4 select-none"
                 onClick={() =>
                   disabled ? null : setSelectedMode(mode as "browser" | "url" | "device")
                 }
@@ -365,7 +364,7 @@ function ModeSelectionView({
                   value={mode}
                   disabled={disabled}
                   checked={selectedMode === mode}
-                  className="absolute right-4 top-4 h-4 w-4 text-blue-700"
+                  className="absolute top-4 right-4 form-radio h-4 w-4 rounded-full text-blue-700"
                 />
               </div>
             </Card>
@@ -373,7 +372,7 @@ function ModeSelectionView({
         ))}
       </div>
       <div
-        className="flex animate-fadeIn justify-end"
+        className="flex animate-fadeIn justify-end opacity-0"
         style={{
           animationDuration: "0.7s",
           animationDelay: "0.2s",
@@ -437,19 +436,19 @@ function BrowserFileView({
           className="block cursor-pointer select-none"
         >
           <div
-            className="group animate-fadeIn"
+            className="group animate-fadeIn opacity-0"
             style={{
               animationDuration: "0.7s",
             }}
           >
-            <Card className="outline-dashed transition-all duration-300 hover:bg-blue-50/50">
+            <Card className="transition-all duration-300 outline-dashed">
               <div className="w-full px-4 py-12">
                 <div className="flex h-full flex-col items-center justify-center text-center">
                   {selectedFile ? (
                     <>
                       <div className="space-y-1">
                         <LuHardDrive className="mx-auto h-6 w-6 text-blue-700" />
-                        <h3 className="text-sm font-semibold leading-none">
+                        <h3 className="text-sm leading-none font-semibold">
                           {formatters.truncateMiddle(selectedFile.name, 40)}
                         </h3>
                         <p className="text-xs leading-none text-slate-700">
@@ -460,7 +459,7 @@ function BrowserFileView({
                   ) : (
                     <div className="space-y-1">
                       <PlusCircleIcon className="mx-auto h-6 w-6 text-blue-700" />
-                      <h3 className="text-sm font-semibold leading-none">
+                      <h3 className="text-sm leading-none font-semibold">
                         Click to select a file
                       </h3>
                       <p className="text-xs leading-none text-slate-700">
@@ -483,7 +482,7 @@ function BrowserFileView({
       </div>
 
       <div
-        className="flex w-full animate-fadeIn items-end justify-between"
+        className="flex w-full animate-fadeIn items-end justify-between opacity-0"
         style={{
           animationDuration: "0.7s",
           animationDelay: "0.1s",
@@ -578,7 +577,7 @@ function UrlView({
       />
 
       <div
-        className="animate-fadeIn"
+        className="animate-fadeIn opacity-0"
         style={{
           animationDuration: "0.7s",
         }}
@@ -593,7 +592,7 @@ function UrlView({
         />
       </div>
       <div
-        className="flex w-full animate-fadeIn items-end justify-between"
+        className="flex w-full animate-fadeIn items-end justify-between opacity-0"
         style={{
           animationDuration: "0.7s",
           animationDelay: "0.1s",
@@ -619,7 +618,7 @@ function UrlView({
 
       <hr className="border-slate-800/30 dark:border-slate-300/20" />
       <div
-        className="animate-fadeIn"
+        className="animate-fadeIn opacity-0"
         style={{
           animationDuration: "0.7s",
           animationDelay: "0.2s",
@@ -628,13 +627,13 @@ function UrlView({
         <h2 className="mb-2 text-sm font-semibold text-black dark:text-white">
           Popular images
         </h2>
-        <Card className="divide-y-slate-800/30 w-full divide-y dark:divide-slate-300/20">
+        <Card className="w-full divide-y divide-slate-800/20 dark:divide-slate-300/20">
           {popularImages.map((image, index) => (
             <div key={index} className="flex items-center justify-between gap-x-4 p-3.5">
               <div className="flex items-center gap-x-4">
                 <img src={image.icon} alt={`${image.name} Icon`} className="w-6" />
                 <div className="flex flex-col gap-y-1">
-                  <h3 className="text-sm font-semibold leading-none dark:text-white">
+                  <h3 className="text-sm leading-none font-semibold dark:text-white">
                     {formatters.truncateMiddle(image.name, 40)}
                   </h3>
                   {image.description && (
@@ -797,7 +796,7 @@ function DeviceFileView({
         description="Select an image to mount from the JetKVM storage"
       />
       <div
-        className="w-full animate-fadeIn"
+        className="w-full animate-fadeIn opacity-0"
         style={{
           animationDuration: "0.7s",
           animationDelay: "0.1s",
@@ -809,7 +808,7 @@ function DeviceFileView({
               <div className="space-y-3">
                 <div className="space-y-1">
                   <PlusCircleIcon className="mx-auto h-6 w-6 text-blue-700 dark:text-blue-500" />
-                  <h3 className="text-sm font-semibold leading-none text-black dark:text-white">
+                  <h3 className="text-sm leading-none font-semibold text-black dark:text-white">
                     No images available
                   </h3>
                   <p className="text-xs leading-none text-slate-700 dark:text-slate-300">
@@ -827,7 +826,7 @@ function DeviceFileView({
               </div>
             </div>
           ) : (
-            <div className="divide-y-slate-800/30 w-full divide-y dark:divide-slate-300/20">
+            <div className="w-full divide-y divide-slate-800/20 dark:divide-slate-300/20">
               {currentFiles.map((file, index) => (
                 <PreUploadedImageItem
                   key={index}
@@ -886,7 +885,7 @@ function DeviceFileView({
 
       {onStorageFiles.length > 0 ? (
         <div
-          className="flex animate-fadeIn items-end justify-between"
+          className="flex animate-fadeIn items-end justify-between opacity-0"
           style={{
             animationDuration: "0.7s",
             animationDelay: "0.15s",
@@ -914,7 +913,7 @@ function DeviceFileView({
         </div>
       ) : (
         <div
-          className="flex animate-fadeIn items-end justify-end"
+          className="flex animate-fadeIn items-end justify-end opacity-0"
           style={{
             animationDuration: "0.7s",
             animationDelay: "0.15s",
@@ -927,7 +926,7 @@ function DeviceFileView({
       )}
       <hr className="border-slate-800/20 dark:border-slate-300/20" />
       <div
-        className="animate-fadeIn space-y-2"
+        className="animate-fadeIn space-y-2 opacity-0"
         style={{
           animationDuration: "0.7s",
           animationDelay: "0.20s",
@@ -959,7 +958,7 @@ function DeviceFileView({
 
       {onStorageFiles.length > 0 && (
         <div
-          className="w-full animate-fadeIn"
+          className="w-full animate-fadeIn opacity-0"
           style={{
             animationDuration: "0.7s",
             animationDelay: "0.25s",
@@ -1251,7 +1250,7 @@ function UploadFileView({
         }
       />
       <div
-        className="animate-fadeIn space-y-2"
+        className="animate-fadeIn space-y-2 opacity-0"
         style={{
           animationDuration: "0.7s",
         }}
@@ -1267,7 +1266,7 @@ function UploadFileView({
           <div className="group">
             <Card
               className={cx("transition-all duration-300", {
-                "cursor-pointer hover:bg-blue-900/50 dark:hover:bg-blue-900/50":
+                "cursor-pointer hover:bg-blue-50/50 dark:hover:bg-blue-900/50":
                   uploadState === "idle",
               })}
             >
@@ -1282,7 +1281,7 @@ function UploadFileView({
                           </div>
                         </Card>
                       </div>
-                      <h3 className="text-sm font-semibold leading-none text-black dark:text-white">
+                      <h3 className="text-sm leading-none font-semibold text-black dark:text-white">
                         {incompleteFileName
                           ? `Click to select "${incompleteFileName.replace(".incomplete", "")}"`
                           : "Click to select a file"}
@@ -1336,7 +1335,7 @@ function UploadFileView({
                           </div>
                         </Card>
                       </div>
-                      <h3 className="text-sm font-semibold leading-none text-black dark:text-white">
+                      <h3 className="text-sm leading-none font-semibold text-black dark:text-white">
                         Upload successful
                       </h3>
                       <p className="text-xs leading-none text-slate-700 dark:text-slate-300">
@@ -1365,7 +1364,7 @@ function UploadFileView({
       {/* Display upload error if present */}
       {uploadError && (
         <div
-          className="mt-2 animate-fadeIn truncate text-sm text-red-600 dark:text-red-400"
+          className="mt-2 animate-fadeIn truncate text-sm text-red-600 dark:text-red-400 opacity-0"
           style={{ animationDuration: "0.7s" }}
         >
           Error: {uploadError}
@@ -1373,7 +1372,7 @@ function UploadFileView({
       )}
 
       <div
-        className="flex w-full animate-fadeIn items-end"
+        className="flex w-full animate-fadeIn items-end opacity-0"
         style={{
           animationDuration: "0.7s",
           animationDelay: "0.1s",
@@ -1422,7 +1421,7 @@ function ErrorView({
       <div className="space-y-2">
         <div className="flex items-center space-x-2 text-red-600">
           <ExclamationTriangleIcon className="h-6 w-6" />
-          <h2 className="text-lg font-bold leading-tight">Mount Error</h2>
+          <h2 className="text-lg leading-tight font-bold">Mount Error</h2>
         </div>
         <p className="text-sm leading-snug text-slate-600">
           An error occurred while attempting to mount the media. Please try again.
@@ -1481,8 +1480,8 @@ function PreUploadedImageItem({
       }}
     >
       <div className="flex items-center gap-x-4">
-        <div className="select-none space-y-0.5">
-          <div className="text-sm font-semibold leading-none dark:text-white">
+        <div className="space-y-0.5 select-none">
+          <div className="text-sm leading-none font-semibold dark:text-white">
             {formatters.truncateMiddle(name, 45)}
           </div>
           <div className="flex items-center text-sm">
@@ -1494,7 +1493,7 @@ function PreUploadedImageItem({
           </div>
         </div>
       </div>
-      <div className="relative flex select-none items-center gap-x-3">
+      <div className="relative flex items-center gap-x-3 select-none">
         <div
           className={cx("opacity-0 transition-opacity duration-200", {
             "w-auto opacity-100": isHovering,
@@ -1518,7 +1517,7 @@ function PreUploadedImageItem({
             checked={isSelected}
             onChange={onSelect}
             name={name}
-            className="h-3 w-3 border-slate-800/30 bg-white text-blue-700 focus:ring-blue-500 disabled:opacity-30 dark:border-slate-300/20 dark:bg-slate-800"
+            className="form-radio h-3 w-3 border-slate-800/30 bg-white text-blue-700 focus:ring-blue-500 disabled:opacity-30 dark:border-slate-300/20 dark:bg-slate-800"
             onClick={e => e.stopPropagation()} // Prevent double-firing of onSelect
           />
         ) : (
@@ -1540,7 +1539,7 @@ function PreUploadedImageItem({
 function ViewHeader({ title, description }: { title: string; description: string }) {
   return (
     <div className="space-y-0">
-      <h2 className="text-lg font-bold leading-tight text-black dark:text-white">
+      <h2 className="text-lg leading-tight font-bold text-black dark:text-white">
         {title}
       </h2>
       <div className="text-sm leading-snug text-slate-600 dark:text-slate-400">
@@ -1558,7 +1557,7 @@ function UsbModeSelector({
   setUsbMode: (mode: RemoteVirtualMediaState["mode"]) => void;
 }) {
   return (
-    <div className="flex select-none flex-col items-start space-y-1">
+    <div className="flex flex-col items-start space-y-1 select-none">
       <label className="text-sm font-semibold text-black dark:text-white">Mount as</label>
       <div className="flex space-x-4">
         <label htmlFor="cdrom" className="flex items-center">
@@ -1568,7 +1567,7 @@ function UsbModeSelector({
             name="mountType"
             onChange={() => setUsbMode("CDROM")}
             checked={usbMode === "CDROM"}
-            className="h-3 w-3 border-slate-800/30 bg-white text-blue-700 transition-opacity focus:ring-blue-500 disabled:opacity-30 dark:bg-slate-800"
+            className="form-radio h-3 w-3 rounded-full border-slate-800/30 bg-white text-blue-700 transition-opacity focus:ring-blue-500 disabled:opacity-30 dark:bg-slate-800"
           />
           <span className="ml-2 text-sm font-medium text-slate-900 dark:text-white">
             CD/DVD
@@ -1581,13 +1580,11 @@ function UsbModeSelector({
             name="mountType"
             checked={usbMode === "Disk"}
             onChange={() => setUsbMode("Disk")}
-            className="h-3 w-3 border-slate-800/30 bg-white text-blue-700 transition-opacity focus:ring-blue-500 disabled:opacity-30 dark:bg-slate-800"
+            className="form-radio h-3 w-3 rounded-full border-slate-800/30 bg-white text-blue-700 transition-opacity focus:ring-blue-500 disabled:opacity-30 dark:bg-slate-800"
           />
-          <div className="ml-2 flex flex-col gap-y-0">
-            <span className="text-sm font-medium leading-none text-slate-900 opacity-50 dark:text-white">
+          <span className="ml-2 text-sm font-medium text-slate-900 dark:text-white">
             Disk
           </span>
-          </div>
         </label>
       </div>
     </div>

ui/src/routes/devices.$id.settings.access._index.tsx

@@ -409,7 +409,7 @@ export default function SettingsAccessIndexRoute() {
                       .
                     </div>
                   </div>
-                  <hr className="block w-full dark:border-slate-600" />
+                  <hr className="block w-full border-slate-800/20 dark:border-slate-300/20" />
 
                   <div>
                     <LinkButton

ui/src/routes/devices.$id.settings.network.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
-import { ArrowPathIcon } from "@heroicons/react/24/outline";
+import { LuEthernetPort } from "react-icons/lu";
 
 import {
   IPv4Mode,
@@ -16,13 +16,18 @@ import {
 import { useJsonRpc } from "@/hooks/useJsonRpc";
 import { Button } from "@components/Button";
 import { GridCard } from "@components/Card";
-import InputField from "@components/InputField";
+import InputField, { InputFieldWithLabel } from "@components/InputField";
 import { SelectMenuBasic } from "@/components/SelectMenuBasic";
 import { SettingsPageHeader } from "@/components/SettingsPageheader";
 import Fieldset from "@/components/Fieldset";
 import { ConfirmDialog } from "@/components/ConfirmDialog";
 import notifications from "@/notifications";
 
+import Ipv6NetworkCard from "../components/Ipv6NetworkCard";
+import EmptyCard from "../components/EmptyCard";
+import AutoHeight from "../components/AutoHeight";
+import DhcpLeaseCard from "../components/DhcpLeaseCard";
+
 import { SettingsItem } from "./devices.$id.settings";
 
 dayjs.extend(relativeTime);
@@ -56,16 +61,12 @@ export function LifeTimeLabel({ lifetime }: { lifetime: string }) {
 
   return (
     <>
-      <strong>{dayjs(lifetime).format("YYYY-MM-DD HH:mm")}</strong>
-      {remaining && (
-        <>
-          {" "}
+      <span className="text-sm font-medium">{remaining && <> {remaining}</>}</span>
       <span className="text-xs text-slate-700 dark:text-slate-300">
-            ({remaining})
+        {" "}
+        ({dayjs(lifetime).format("YYYY-MM-DD HH:mm")})
       </span>
     </>
-      )}
-    </>
   );
 }
 
@@ -114,6 +115,14 @@ export default function SettingsNetworkRoute() {
     });
   }, [send]);
 
+  const getNetworkState = useCallback(() => {
+    send("getNetworkState", {}, resp => {
+      if ("error" in resp) return;
+      console.log(resp.result);
+      setNetworkState(resp.result as NetworkState);
+    });
+  }, [send, setNetworkState]);
+
   const setNetworkSettingsRemote = useCallback(
     (settings: NetworkSettings) => {
       setNetworkSettingsLoaded(false);
@@ -129,21 +138,14 @@ export default function SettingsNetworkRoute() {
         // We need to update the firstNetworkSettings ref to the new settings so we can use it to determine if the settings have changed
         firstNetworkSettings.current = resp.result as NetworkSettings;
         setNetworkSettings(resp.result as NetworkSettings);
+        getNetworkState();
         setNetworkSettingsLoaded(true);
         notifications.success("Network settings saved");
       });
     },
-    [send],
+    [getNetworkState, send],
   );
 
-  const getNetworkState = useCallback(() => {
-    send("getNetworkState", {}, resp => {
-      if ("error" in resp) return;
-      console.log(resp.result);
-      setNetworkState(resp.result as NetworkState);
-    });
-  }, [send, setNetworkState]);
-
   const handleRenewLease = useCallback(() => {
     send("renewDHCPLease", {}, resp => {
       if ("error" in resp) {
@@ -171,10 +173,6 @@ export default function SettingsNetworkRoute() {
     setNetworkSettings({ ...networkSettings, lldp_mode: value as LLDPMode });
   };
 
-  // const handleLldpTxTlvsChange = (value: string[]) => {
-  //   setNetworkSettings({ ...networkSettings, lldp_tx_tlvs: value });
-  // };
-
   const handleMdnsModeChange = (value: mDNSMode | string) => {
     setNetworkSettings({ ...networkSettings, mdns_mode: value as mDNSMode });
   };
@@ -258,7 +256,7 @@ export default function SettingsNetworkRoute() {
         </div>
 
         <div className="space-y-4">
-          <div className="space-y-4">
+          <div className="space-y-1">
             <SettingsItem
               title="Domain"
               description="Network domain suffix for the device"
@@ -277,19 +275,17 @@ export default function SettingsNetworkRoute() {
               </div>
             </SettingsItem>
             {selectedDomainOption === "custom" && (
-              <div className="flex items-center justify-between gap-x-2">
-                <InputField
+              <div className="mt-2 w-1/3 border-l border-slate-800/10 pl-4 dark:border-slate-300/20">
+                <InputFieldWithLabel
                   size="SM"
                   type="text"
+                  label="Custom Domain"
                   placeholder="home"
                   value={customDomain}
-                  onChange={e => setCustomDomain(e.target.value)}
-                />
-                <Button
-                  size="SM"
-                  theme="primary"
-                  text="Save Domain"
-                  onClick={() => handleCustomDomainChange(customDomain)}
+                  onChange={e => {
+                    setCustomDomain(e.target.value);
+                    handleCustomDomainChange(e.target.value);
+                  }}
                 />
               </div>
             )}
@@ -359,209 +355,35 @@ export default function SettingsNetworkRoute() {
               ])}
             />
           </SettingsItem>
-          {networkState?.dhcp_lease && (
+          <AutoHeight>
+            {!networkSettingsLoaded && !networkState?.dhcp_lease ? (
               <GridCard>
                 <div className="p-4">
                   <div className="space-y-4">
                     <h3 className="text-base font-bold text-slate-900 dark:text-white">
-                    DHCP Lease
+                      DHCP Lease Information
                     </h3>
-
-                  <div className="flex gap-x-6 gap-y-2">
-                    <div className="flex-1 space-y-2">
-                      {networkState?.dhcp_lease?.ip && (
-                        <div className="flex justify-between border-slate-800/10 pt-2 dark:border-slate-300/20">
-                          <span className="text-sm text-slate-600 dark:text-slate-400">
-                            IP Address
-                          </span>
-                          <span className="text-sm font-medium">
-                            {networkState?.dhcp_lease?.ip}
-                          </span>
-                        </div>
-                      )}
-
-                      {networkState?.dhcp_lease?.netmask && (
-                        <div className="flex justify-between border-t border-slate-800/10 pt-2 dark:border-slate-300/20">
-                          <span className="text-sm text-slate-600 dark:text-slate-400">
-                            Subnet Mask
-                          </span>
-                          <span className="text-sm font-medium">
-                            {networkState?.dhcp_lease?.netmask}
-                          </span>
-                        </div>
-                      )}
-
-                      {networkState?.dhcp_lease?.dns && (
-                        <div className="flex justify-between border-t border-slate-800/10 pt-2 dark:border-slate-300/20">
-                          <span className="text-sm text-slate-600 dark:text-slate-400">
-                            DNS Servers
-                          </span>
-                          <span className="text-right text-sm font-medium">
-                            {networkState?.dhcp_lease?.dns.map(dns => (
-                              <div key={dns}>{dns}</div>
-                            ))}
-                          </span>
-                        </div>
-                      )}
-
-                      {networkState?.dhcp_lease?.broadcast && (
-                        <div className="flex justify-between border-t border-slate-800/10 pt-2 dark:border-slate-300/20">
-                          <span className="text-sm text-slate-600 dark:text-slate-400">
-                            Broadcast
-                          </span>
-                          <span className="text-sm font-medium">
-                            {networkState?.dhcp_lease?.broadcast}
-                          </span>
-                        </div>
-                      )}
-
-                      {networkState?.dhcp_lease?.domain && (
-                        <div className="flex justify-between border-t border-slate-800/10 pt-2 dark:border-slate-300/20">
-                          <span className="text-sm text-slate-600 dark:text-slate-400">
-                            Domain
-                          </span>
-                          <span className="text-sm font-medium">
-                            {networkState?.dhcp_lease?.domain}
-                          </span>
-                        </div>
-                      )}
-
-                      {networkState?.dhcp_lease?.ntp_servers &&
-                        networkState?.dhcp_lease?.ntp_servers.length > 0 && (
-                          <div className="flex justify-between gap-x-8 border-t border-slate-800/10 pt-2 dark:border-slate-300/20">
-                            <div className="w-full grow text-sm text-slate-600 dark:text-slate-400">
-                              NTP Servers
-                            </div>
-                            <div className="shrink text-right text-sm font-medium">
-                              {networkState?.dhcp_lease?.ntp_servers.map(server => (
-                                <div key={server}>{server}</div>
-                              ))}
-                            </div>
-                          </div>
-                        )}
-
-                      {networkState?.dhcp_lease?.hostname && (
-                        <div className="flex justify-between border-t border-slate-800/10 pt-2 dark:border-slate-300/20">
-                          <span className="text-sm text-slate-600 dark:text-slate-400">
-                            Hostname
-                          </span>
-                          <span className="text-sm font-medium">
-                            {networkState?.dhcp_lease?.hostname}
-                          </span>
-                        </div>
-                      )}
-                    </div>
-
-                    <div className="flex-1 space-y-2">
-                      {networkState?.dhcp_lease?.routers &&
-                        networkState?.dhcp_lease?.routers.length > 0 && (
-                          <div className="flex justify-between pt-2">
-                            <span className="text-sm text-slate-600 dark:text-slate-400">
-                              Gateway
-                            </span>
-                            <span className="text-right text-sm font-medium">
-                              {networkState?.dhcp_lease?.routers.map(router => (
-                                <div key={router}>{router}</div>
-                              ))}
-                            </span>
-                          </div>
-                        )}
-
-                      {networkState?.dhcp_lease?.server_id && (
-                        <div className="flex justify-between border-t border-slate-800/10 pt-2 dark:border-slate-300/20">
-                          <span className="text-sm text-slate-600 dark:text-slate-400">
-                            DHCP Server
-                          </span>
-                          <span className="text-sm font-medium">
-                            {networkState?.dhcp_lease?.server_id}
-                          </span>
-                        </div>
-                      )}
-
-                      {networkState?.dhcp_lease?.lease_expiry && (
-                        <div className="flex justify-between border-t border-slate-800/10 pt-2 dark:border-slate-300/20">
-                          <span className="text-sm text-slate-600 dark:text-slate-400">
-                            Lease Expires
-                          </span>
-                          <span className="text-sm font-medium">
-                            <LifeTimeLabel
-                              lifetime={`${networkState?.dhcp_lease?.lease_expiry}`}
-                            />
-                          </span>
-                        </div>
-                      )}
-
-                      {networkState?.dhcp_lease?.mtu && (
-                        <div className="flex justify-between border-t border-slate-800/10 pt-2 dark:border-slate-300/20">
-                          <span className="text-sm text-slate-600 dark:text-slate-400">
-                            MTU
-                          </span>
-                          <span className="text-sm font-medium">
-                            {networkState?.dhcp_lease?.mtu}
-                          </span>
-                        </div>
-                      )}
-
-                      {networkState?.dhcp_lease?.ttl && (
-                        <div className="flex justify-between border-t border-slate-800/10 pt-2 dark:border-slate-300/20">
-                          <span className="text-sm text-slate-600 dark:text-slate-400">
-                            TTL
-                          </span>
-                          <span className="text-sm font-medium">
-                            {networkState?.dhcp_lease?.ttl}
-                          </span>
-                        </div>
-                      )}
-
-                      {networkState?.dhcp_lease?.bootp_next_server && (
-                        <div className="flex justify-between border-t border-slate-800/10 pt-2 dark:border-slate-300/20">
-                          <span className="text-sm text-slate-600 dark:text-slate-400">
-                            Boot Next Server
-                          </span>
-                          <span className="text-sm font-medium">
-                            {networkState?.dhcp_lease?.bootp_next_server}
-                          </span>
-                        </div>
-                      )}
-
-                      {networkState?.dhcp_lease?.bootp_server_name && (
-                        <div className="flex justify-between border-t border-slate-800/10 pt-2 dark:border-slate-300/20">
-                          <span className="text-sm text-slate-600 dark:text-slate-400">
-                            Boot Server Name
-                          </span>
-                          <span className="text-sm font-medium">
-                            {networkState?.dhcp_lease?.bootp_server_name}
-                          </span>
-                        </div>
-                      )}
-
-                      {networkState?.dhcp_lease?.bootp_file && (
-                        <div className="flex justify-between border-t border-slate-800/10 pt-2 dark:border-slate-300/20">
-                          <span className="text-sm text-slate-600 dark:text-slate-400">
-                            Boot File
-                          </span>
-                          <span className="text-sm font-medium">
-                            {networkState?.dhcp_lease?.bootp_file}
-                          </span>
-                        </div>
-                      )}
-                    </div>
-                  </div>
-
-                  <div>
-                    <Button
-                      size="SM"
-                      theme="light"
-                      className="text-red-500"
-                      text="Renew DHCP Lease"
-                      LeadingIcon={ArrowPathIcon}
-                      onClick={() => setShowRenewLeaseConfirm(true)}
-                    />
+                    <div className="animate-pulse space-y-3">
+                      <div className="h-4 w-1/3 rounded bg-slate-200 dark:bg-slate-700" />
+                      <div className="h-4 w-1/2 rounded bg-slate-200 dark:bg-slate-700" />
+                      <div className="h-4 w-1/3 rounded bg-slate-200 dark:bg-slate-700" />
                     </div>
                   </div>
                 </div>
               </GridCard>
+            ) : networkState?.dhcp_lease && networkState.dhcp_lease.ip ? (
+              <DhcpLeaseCard
+                networkState={networkState}
+                setShowRenewLeaseConfirm={setShowRenewLeaseConfirm}
+              />
+            ) : (
+              <EmptyCard
+                IconElm={LuEthernetPort}
+                headline="DHCP Information"
+                description="No DHCP lease information available"
+              />
             )}
+          </AutoHeight>
         </div>
         <div className="space-y-4">
           <SettingsItem title="IPv6 Mode" description="Configure the IPv6 mode">
@@ -579,93 +401,33 @@ export default function SettingsNetworkRoute() {
               ])}
             />
           </SettingsItem>
-          {networkState?.ipv6_addresses && (
+          <AutoHeight>
+            {!networkSettingsLoaded &&
+            !(networkState?.ipv6_addresses && networkState.ipv6_addresses.length > 0) ? (
               <GridCard>
                 <div className="p-4">
                   <div className="space-y-4">
                     <h3 className="text-base font-bold text-slate-900 dark:text-white">
                       IPv6 Information
                     </h3>
-
-                  <div className="grid grid-cols-2 gap-x-6 gap-y-2">
-                    {networkState?.dhcp_lease?.ip && (
-                      <div className="flex flex-col justify-between">
-                        <span className="text-sm text-slate-600 dark:text-slate-400">
-                          Link-local
-                        </span>
-                        <span className="text-sm font-medium">
-                          {networkState?.ipv6_link_local}
-                        </span>
-                      </div>
-                    )}
-                  </div>
-
-                  <div className="space-y-3 pt-2">
-                    {networkState?.ipv6_addresses &&
-                      networkState?.ipv6_addresses.length > 0 && (
-                        <div className="space-y-3">
-                          <h4 className="text-sm font-semibold">IPv6 Addresses</h4>
-                          {networkState.ipv6_addresses.map(addr => (
-                            <div
-                              key={addr.address}
-                              className="rounded-md rounded-l-none border border-slate-500/10 border-l-blue-700/50 bg-slate-100/40 p-4 pl-4 dark:border-blue-500 dark:bg-slate-900"
-                            >
-                              <div className="grid grid-cols-2 gap-x-8 gap-y-4">
-                                <div className="col-span-2 flex flex-col justify-between">
-                                  <span className="text-sm text-slate-600 dark:text-slate-400">
-                                    Address
-                                  </span>
-                                  <span className="text-sm font-medium">
-                                    {addr.address}
-                                  </span>
-                                </div>
-
-                                {addr.valid_lifetime && (
-                                  <div className="flex flex-col justify-between">
-                                    <span className="text-sm text-slate-600 dark:text-slate-400">
-                                      Valid Lifetime
-                                    </span>
-                                    <span className="text-sm font-medium">
-                                      {addr.valid_lifetime === "" ? (
-                                        <span className="text-slate-400 dark:text-slate-600">
-                                          N/A
-                                        </span>
-                                      ) : (
-                                        <LifeTimeLabel
-                                          lifetime={`${addr.valid_lifetime}`}
-                                        />
-                                      )}
-                                    </span>
-                                  </div>
-                                )}
-                                {addr.preferred_lifetime && (
-                                  <div className="flex flex-col justify-between">
-                                    <span className="text-sm text-slate-600 dark:text-slate-400">
-                                      Preferred Lifetime
-                                    </span>
-                                    <span className="text-sm font-medium">
-                                      {addr.preferred_lifetime === "" ? (
-                                        <span className="text-slate-400 dark:text-slate-600">
-                                          N/A
-                                        </span>
-                                      ) : (
-                                        <LifeTimeLabel
-                                          lifetime={`${addr.preferred_lifetime}`}
-                                        />
-                                      )}
-                                    </span>
-                                  </div>
-                                )}
-                              </div>
-                            </div>
-                          ))}
-                        </div>
-                      )}
+                    <div className="animate-pulse space-y-3">
+                      <div className="h-4 w-1/3 rounded bg-slate-200 dark:bg-slate-700" />
+                      <div className="h-4 w-1/2 rounded bg-slate-200 dark:bg-slate-700" />
+                      <div className="h-4 w-1/3 rounded bg-slate-200 dark:bg-slate-700" />
                     </div>
                   </div>
                 </div>
               </GridCard>
+            ) : networkState?.ipv6_addresses && networkState.ipv6_addresses.length > 0 ? (
+              <Ipv6NetworkCard networkState={networkState} />
+            ) : (
+              <EmptyCard
+                IconElm={LuEthernetPort}
+                headline="IPv6 Information"
+                description="No IPv6 addresses configured"
+              />
             )}
+          </AutoHeight>
         </div>
         <div className="hidden space-y-4">
           <SettingsItem

ui/src/routes/welcome-local.mode.tsx

@@ -116,7 +116,7 @@ export default function WelcomeLocalModeRoute() {
                           onChange={() => {
                             setSelectedMode(mode as "password" | "noPassword");
                           }}
-                          className="absolute top-2 right-2 h-4 w-4 text-blue-600"
+                          className="form-radio absolute top-2 right-2 h-4 w-4 text-blue-600"
                         />
                       </div>
                     </GridCard>