diff --git a/backend/Dockerfile b/backend/Dockerfile
new file mode 100644
index 0000000..65e5462
--- /dev/null
+++ b/backend/Dockerfile
@@ -0,0 +1,17 @@
+FROM python:3.11-slim
+WORKDIR /app
+
+# system deps (if any) can be added here
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    build-essential \
+    && rm -rf /var/lib/apt/lists/*
+
+COPY backend/requirements.txt ./requirements.txt
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY backend/ ./
+
+ENV PYTHONUNBUFFERED=1
+EXPOSE 18080
+
+CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "18080", "--proxy-headers"]
diff --git a/backend/requirements.txt b/backend/requirements.txt
index 54628d1..e55bbb5 100644
Binary files a/backend/requirements.txt and b/backend/requirements.txt differ
diff --git a/deploy/README.md b/deploy/README.md
new file mode 100644
index 0000000..5e9cfed
--- /dev/null
+++ b/deploy/README.md
@@ -0,0 +1,34 @@
+# NAS Git Deploy (sample)
+
+This folder contains a sample `post-receive` hook for deploying the app on a NAS via a bare git repository.
+
+Quick setup (example):
+
+1. On the NAS, create directories and a bare repo:
+
+```bash
+mkdir -p /srv/njts-accounting/repo.git
+git init --bare /srv/njts-accounting/repo.git
+mkdir -p /srv/njts-accounting/app
+```
+
+2. Copy the `post-receive` hook into the bare repo hooks and make it executable:
+
+```bash
+cp deploy/post-receive /srv/njts-accounting/repo.git/hooks/post-receive
+chmod +x /srv/njts-accounting/repo.git/hooks/post-receive
+```
+
+3. On your local machine, add a remote and push:
+
+```bash
+git remote add nas ssh://user@nas:/srv/njts-accounting/repo.git
+git push nas main
+```
+
+4. Ensure Docker and Docker Compose are installed on the NAS and `/srv/njts-accounting/docker-compose.yml` points to the code in `/srv/njts-accounting/app`.
+
+Notes:
+
+- Adjust paths and permissions according to your NAS environment.
+- The sample hook runs `docker compose up -d --build` and may require the user to be in the `docker` group or run via sudo.
diff --git a/deploy/post-receive b/deploy/post-receive
new file mode 100644
index 0000000..387196f
--- /dev/null
+++ b/deploy/post-receive
@@ -0,0 +1,22 @@
+#!/bin/bash
+# Sample post-receive hook for bare repository deployment.
+# Adjust paths and user permissions as needed.
+
+set -e
+REPO_DIR="/srv/njts-accounting/repo.git"
+WORK_TREE="/srv/njts-accounting/app"
+COMPOSE_FILE="/srv/njts-accounting/docker-compose.yml"
+
+echo "Deploy hook triggered"
+mkdir -p "$WORK_TREE"
+
+# checkout latest to work tree
+GIT_DIR="$REPO_DIR" git --work-tree="$WORK_TREE" checkout -f
+
+cd "$WORK_TREE"
+
+echo "Building and restarting containers..."
+docker compose -f "$COMPOSE_FILE" pull --ignore-pull-failures || true
+docker compose -f "$COMPOSE_FILE" up -d --build --remove-orphans
+
+echo "Deployment finished"
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..969057c
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,32 @@
+version: "3.8"
+services:
+  backend:
+    build:
+      context: .
+      dockerfile: backend/Dockerfile
+    container_name: njts_backend
+    restart: unless-stopped
+    env_file:
+      - .env
+    ports:
+      - "18080:18080"
+    networks:
+      - njts_net
+
+  nginx:
+    image: nginx:stable
+    container_name: njts_nginx
+    restart: unless-stopped
+    ports:
+      - "80:80"
+    volumes:
+      - ./frontend:/usr/share/nginx/html:ro
+      - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf:ro
+    depends_on:
+      - backend
+    networks:
+      - njts_net
+
+networks:
+  njts_net:
+    driver: bridge
diff --git a/docker/nginx/default.conf b/docker/nginx/default.conf
new file mode 100644
index 0000000..9089eb7
--- /dev/null
+++ b/docker/nginx/default.conf
@@ -0,0 +1,38 @@
+server {
+    listen 80;
+    server_name _;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Serve static files
+    location / {
+        try_files $uri $uri/ =404;
+    }
+
+    # Proxy API requests to backend container
+    location /payroll/ {
+        proxy_pass http://backend:18080/payroll/;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+
+    location /payroll/employees/ {
+        proxy_pass http://backend:18080/payroll/employees/;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+
+    # Generic fallback to backend for other API paths
+    location /api/ {
+        proxy_pass http://backend:18080/;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+}
diff --git a/frontend/index.html b/frontend/index.html
index 2d1c0c3..1965dfb 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -2,95 +2,94 @@
 <html lang="ja">
   <head>
     <meta charset="UTF-8" />
-    <title>試算表</title>
+    <title>NJTS 会計システム - メイン</title>
     <link rel="stylesheet" href="css/style.css" />
+    <style>
+      body {
+        font-family: system-ui, -apple-system, "Yu Gothic UI",
+          "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
+        padding: 24px;
+      }
+      .grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 20px;
+        max-width: 980px;
+        margin: 0 auto;
+      }
+      .card {
+        border: 1px solid #ddd;
+        border-radius: 8px;
+        padding: 20px;
+        background: #fff;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
+      }
+      .card h2 {
+        margin-top: 0;
+      }
+      .btn {
+        display: inline-block;
+        padding: 10px 14px;
+        border-radius: 6px;
+        background: #007bff;
+        color: #fff;
+        text-decoration: none;
+      }
+      header {
+        max-width: 980px;
+        margin: 0 auto 20px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      header h1 {
+        margin: 0;
+        font-size: 20px;
+      }
+    </style>
   </head>
   <body>
-    <h1>試算表</h1>
+    <header>
+      <h1>NJTS</h1>
+    </header>
 
-    <label>
-      期間：
-      <input type="date" id="from" min="1900-01-01" max="2099-12-31" />
-      〜
-      <input type="date" id="to" min="1900-01-01" max="2099-12-31" />
-    </label>
-    <button onclick="loadTrialBalance()">表示</button>
+    <main class="grid">
+      <section class="card">
+        <h2>会計システム</h2>
+        <p>
+          会計モジュールの主要画面へ移動します。仕訳入力、試算表、元帳に移動できます。
+        </p>
+        <p>
+          <a class="btn" href="journal-entry.html">仕訳入力へ</a>
+          <a
+            class="btn"
+            href="trial-balance.html"
+            style="margin-left: 10px; background: #28a745"
+            >試算表へ</a
+          >
+        </p>
+      </section>
 
-    <table id="trial-table">
-      <thead>
-        <tr>
-          <th>科目コード</th>
-          <th>科目名</th>
-          <th>期首</th>
-          <th>借方</th>
-          <th>贷方</th>
-          <th>期末</th>
-        </tr>
-      </thead>
-      <tbody></tbody>
-    </table>
+      <section class="card">
+        <h2>給与システム</h2>
+        <p>給与・賞与の計算や従業員管理を行います。</p>
+        <p><a class="btn" href="payroll.html">給与システムを開く</a></p>
+      </section>
+    </main>
 
-    <h3>💰 当前资金状况</h3>
-
-    <table border="1" cellpadding="6" style="border-collapse: collapse">
-      <thead>
-        <tr style="background: #f5f5f5">
-          <th>账户</th>
-          <th style="text-align: right">余额</th>
-        </tr>
-      </thead>
-      <tbody id="cashBalanceBody">
-        <tr>
-          <td colspan="2">读取中...</td>
-        </tr>
-      </tbody>
-      <tfoot>
-        <tr style="font-weight: bold">
-          <td>合计</td>
-          <td id="cashBalanceTotal" style="text-align: right">-</td>
-        </tr>
-      </tfoot>
-    </table>
-
-    <script src="js/api.js"></script>
-    <script src="js/trial_balance.js"></script>
     <script>
-      const API_BASE = "http://127.0.0.1:18080";
-
-      function formatYen(v) {
-        return "¥ " + Number(v).toLocaleString("ja-JP");
-      }
-
-      async function loadCashBalance() {
-        const body = document.getElementById("cashBalanceBody");
-        const totalEl = document.getElementById("cashBalanceTotal");
-
-        body.innerHTML = "<tr><td colspan='2'>读取中...</td></tr>";
-        totalEl.innerText = "-";
-
-        try {
-          const res = await fetch(`${API_BASE}/cash/balance`);
-          const data = await res.json();
-
-          body.innerHTML = "";
-
-          data.items.forEach((item) => {
-            const tr = document.createElement("tr");
-            tr.innerHTML = `
-        <td>${item.account_name}</td>
-        <td style="text-align:right;">${formatYen(item.balance)}</td>
-      `;
-            body.appendChild(tr);
-          });
-
-          totalEl.innerText = formatYen(data.total_balance);
-        } catch (e) {
-          body.innerHTML = `<tr><td colspan="2">读取失败</td></tr>`;
+      // dropdown toggle
+      const toggle = document.getElementById("accountingToggle");
+      const menu = document.getElementById("accountingMenu");
+      toggle.addEventListener("click", (e) => {
+        menu.style.display = menu.style.display === "block" ? "none" : "block";
+      });
+      // click outside to close
+      document.addEventListener("click", (e) => {
+        if (!toggle.contains(e.target) && !menu.contains(e.target)) {
+          menu.style.display = "none";
         }
-      }
-
-      // 页面加载时自动读取
-      window.addEventListener("DOMContentLoaded", loadCashBalance);
+      });
     </script>
   </body>
 </html>
diff --git a/frontend/payroll-calculation.html b/frontend/payroll-calculation.html
index 74c758d..36ea928 100644
--- a/frontend/payroll-calculation.html
+++ b/frontend/payroll-calculation.html
@@ -532,7 +532,9 @@
     </div>
 
     <script>
-      const API_BASE = "http://localhost:18080";
+      // Use relative API paths so frontend works when served via nginx on the NAS.
+      // The nginx service will proxy API requests to the backend container.
+      const API_BASE = "";
       let employeeMap = {};
 
       // sanitize input to digits only and limit length
diff --git a/frontend/payroll-employees.html b/frontend/payroll-employees.html
index 05dae44..d964704 100644
--- a/frontend/payroll-employees.html
+++ b/frontend/payroll-employees.html
@@ -549,7 +549,7 @@
     </div>
 
     <script>
-      const API_BASE = "http://localhost:18080";
+      const API_BASE = "";
       let currentEmployee = null;
 
       // 年齢計算関数
diff --git a/frontend/payroll-salary-settings.html b/frontend/payroll-salary-settings.html
index cacf235..4dbdba7 100644
--- a/frontend/payroll-salary-settings.html
+++ b/frontend/payroll-salary-settings.html
@@ -207,7 +207,7 @@
     </div>
 
     <script>
-      const API_BASE = "http://localhost:18080";
+      const API_BASE = "";
       let employees = [];
 
       async function loadEmployees() {
diff --git a/frontend/payroll-settings.html b/frontend/payroll-settings.html
index 1082cd3..da76445 100644
--- a/frontend/payroll-settings.html
+++ b/frontend/payroll-settings.html
@@ -94,6 +94,13 @@
       table th {
         background: #f0f0f0;
       }
+      /* Add alternating row background for readability */
+      table tbody tr:nth-child(odd) {
+        background: #ffffff;
+      }
+      table tbody tr:nth-child(even) {
+        background: #f8f9fb;
+      }
       .filter-section {
         background: #f9f9f9;
         padding: 15px;
@@ -598,7 +605,7 @@
     </div>
 
     <script>
-      const API_BASE = "http://localhost:18080";
+      const API_BASE = "";
 
       // =====================================================
       // タブ切り替え