From f07265ab200550ddc4da95b8a4c973962e14023c Mon Sep 17 00:00:00 2001
From: BANGJU <devjuuxo@gmail.com>
Date: Fri, 8 Aug 2025 17:37:33 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=B5upgrade?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                             | 425 ++++++++++++++++++
 src/app/admin/admin.component.css             | 109 +++--
 src/app/admin/admin.component.html            |  35 +-
 src/app/app.component.css                     |  72 +--
 src/app/app.component.html                    |  62 ++-
 src/app/asset/list/asset-list.component.css   | 133 ++++--
 src/app/asset/list/asset-list.component.html  |  57 ++-
 .../asset-registration.component.css          | 108 +++--
 .../asset-registration.component.html         |  17 +-
 .../transfer/asset-transfer.component.css     |  84 +++-
 .../transfer/asset-transfer.component.html    |  33 +-
 src/app/dashboard/dashboard.component.css     |  52 ++-
 src/app/dashboard/dashboard.component.html    |  26 +-
 .../purchase-orders.component.css             |  84 ++--
 .../purchase-orders.component.html            | 161 ++++---
 src/index.html                                |   6 +-
 src/styles.css                                |  70 +++
 17 files changed, 1168 insertions(+), 366 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 59e6b54..aa2d6fa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4965,6 +4965,21 @@
         "linux"
       ]
     },
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.46.2.tgz",
+      "integrity": "sha512-B/l0dFcHVUnqcGZWKcWBSV2PF01YUt0Rvlurci5P+neqY/yMKchGU8ullZvIv5e8Y1C6wOn+U03mrDylP5q9Yw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true
+    },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
       "version": "4.34.8",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.34.8.tgz",
@@ -4979,6 +4994,21 @@
         "linux"
       ]
     },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.46.2.tgz",
+      "integrity": "sha512-t5B2loThlFEauloaQkZg9gxV05BYeITLvLkWOkRXogP4qHXLkWSbSHKM9S6H1schf/0YGP/qNKtiISlxvfmmZw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true
+    },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
       "version": "4.34.8",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.34.8.tgz",
@@ -13825,6 +13855,401 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/vite": {
+      "version": "6.3.5",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
+      "integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "esbuild": "^0.25.0",
+        "fdir": "^6.4.4",
+        "picomatch": "^4.0.2",
+        "postcss": "^8.5.3",
+        "rollup": "^4.34.9",
+        "tinyglobby": "^0.2.13"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
+        "jiti": ">=1.21.0",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "sass-embedded": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite/node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.46.2.tgz",
+      "integrity": "sha512-Zj3Hl6sN34xJtMv7Anwb5Gu01yujyE/cLBDB2gnHTAHaWS1Z38L7kuSG+oAh0giZMqG060f/YBStXtMH6FvPMA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "peer": true
+    },
+    "node_modules/vite/node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.46.2.tgz",
+      "integrity": "sha512-nTeCWY83kN64oQ5MGz3CgtPx8NSOhC5lWtsjTs+8JAJNLcP3QbLCtDDgUKQc/Ro/frpMq4SHUaHN6AMltcEoLQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "peer": true
+    },
+    "node_modules/vite/node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.46.2.tgz",
+      "integrity": "sha512-HV7bW2Fb/F5KPdM/9bApunQh68YVDU8sO8BvcW9OngQVN3HHHkw99wFupuUJfGR9pYLLAjcAOA6iO+evsbBaPQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true
+    },
+    "node_modules/vite/node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.46.2.tgz",
+      "integrity": "sha512-SSj8TlYV5nJixSsm/y3QXfhspSiLYP11zpfwp6G/YDXctf3Xkdnk4woJIF5VQe0of2OjzTt8EsxnJDCdHd2xMA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true
+    },
+    "node_modules/vite/node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.46.2.tgz",
+      "integrity": "sha512-ZyrsG4TIT9xnOlLsSSi9w/X29tCbK1yegE49RYm3tu3wF1L/B6LVMqnEWyDB26d9Ecx9zrmXCiPmIabVuLmNSg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "peer": true
+    },
+    "node_modules/vite/node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.46.2.tgz",
+      "integrity": "sha512-pCgHFoOECwVCJ5GFq8+gR8SBKnMO+xe5UEqbemxBpCKYQddRQMgomv1104RnLSg7nNvgKy05sLsY51+OVRyiVw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "peer": true
+    },
+    "node_modules/vite/node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.46.2.tgz",
+      "integrity": "sha512-EtP8aquZ0xQg0ETFcxUbU71MZlHaw9MChwrQzatiE8U/bvi5uv/oChExXC4mWhjiqK7azGJBqU0tt5H123SzVA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true
+    },
+    "node_modules/vite/node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.46.2.tgz",
+      "integrity": "sha512-qO7F7U3u1nfxYRPM8HqFtLd+raev2K137dsV08q/LRKRLEc7RsiDWihUnrINdsWQxPR9jqZ8DIIZ1zJJAm5PjQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true
+    },
+    "node_modules/vite/node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.46.2.tgz",
+      "integrity": "sha512-3dRaqLfcOXYsfvw5xMrxAk9Lb1f395gkoBYzSFcc/scgRFptRXL9DOaDpMiehf9CO8ZDRJW2z45b6fpU5nwjng==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true
+    },
+    "node_modules/vite/node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.46.2.tgz",
+      "integrity": "sha512-fhHFTutA7SM+IrR6lIfiHskxmpmPTJUXpWIsBXpeEwNgZzZZSg/q4i6FU4J8qOGyJ0TR+wXBwx/L7Ho9z0+uDg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true
+    },
+    "node_modules/vite/node_modules/@rollup/rollup-linux-loongarch64-gnu": {
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.46.2.tgz",
+      "integrity": "sha512-i7wfGFXu8x4+FRqPymzjD+Hyav8l95UIZ773j7J7zRYc3Xsxy2wIn4x+llpunexXe6laaO72iEjeeGyUFmjKeA==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true
+    },
+    "node_modules/vite/node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.46.2.tgz",
+      "integrity": "sha512-32k4ENb5ygtkMwPMucAb8MtV8olkPT03oiTxJbgkJa7lJ7dZMr0GCFJlyvy+K8iq7F/iuOr41ZdUHaOiqyR3iQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true
+    },
+    "node_modules/vite/node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.46.2.tgz",
+      "integrity": "sha512-YKjekwTEKgbB7n17gmODSmJVUIvj8CX7q5442/CK80L8nqOUbMtf8b01QkG3jOqyr1rotrAnW6B/qiHwfcuWQA==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true
+    },
+    "node_modules/vite/node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.46.2.tgz",
+      "integrity": "sha512-Jj5a9RUoe5ra+MEyERkDKLwTXVu6s3aACP51nkfnK9wJTraCC8IMe3snOfALkrjTYd2G1ViE1hICj0fZ7ALBPA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true
+    },
+    "node_modules/vite/node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.46.2.tgz",
+      "integrity": "sha512-7kX69DIrBeD7yNp4A5b81izs8BqoZkCIaxQaOpumcJ1S/kmqNFjPhDu1LHeVXv0SexfHQv5cqHsxLOjETuqDuA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true
+    },
+    "node_modules/vite/node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.46.2.tgz",
+      "integrity": "sha512-wiJWMIpeaak/jsbaq2HMh/rzZxHVW1rU6coyeNNpMwk5isiPjSTx0a4YLSlYDwBH/WBvLz+EtsNqQScZTLJy3g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true
+    },
+    "node_modules/vite/node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.46.2.tgz",
+      "integrity": "sha512-gBgaUDESVzMgWZhcyjfs9QFK16D8K6QZpwAaVNJxYDLHWayOta4ZMjGm/vsAEy3hvlS2GosVFlBlP9/Wb85DqQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true
+    },
+    "node_modules/vite/node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.46.2.tgz",
+      "integrity": "sha512-CvUo2ixeIQGtF6WvuB87XWqPQkoFAFqW+HUo/WzHwuHDvIwZCtjdWXoYCcr06iKGydiqTclC4jU/TNObC/xKZg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true
+    },
+    "node_modules/vite/node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/vite/node_modules/rollup": {
+      "version": "4.46.2",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.46.2.tgz",
+      "integrity": "sha512-WMmLFI+Boh6xbop+OAGo9cQ3OgX9MIg7xOQjn+pTCwOkk+FNDAeAemXkJ3HzDJrVXleLOFVa1ipuc1AmEx1Dwg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/estree": "1.0.8"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.46.2",
+        "@rollup/rollup-android-arm64": "4.46.2",
+        "@rollup/rollup-darwin-arm64": "4.46.2",
+        "@rollup/rollup-darwin-x64": "4.46.2",
+        "@rollup/rollup-freebsd-arm64": "4.46.2",
+        "@rollup/rollup-freebsd-x64": "4.46.2",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.46.2",
+        "@rollup/rollup-linux-arm-musleabihf": "4.46.2",
+        "@rollup/rollup-linux-arm64-gnu": "4.46.2",
+        "@rollup/rollup-linux-arm64-musl": "4.46.2",
+        "@rollup/rollup-linux-loongarch64-gnu": "4.46.2",
+        "@rollup/rollup-linux-ppc64-gnu": "4.46.2",
+        "@rollup/rollup-linux-riscv64-gnu": "4.46.2",
+        "@rollup/rollup-linux-riscv64-musl": "4.46.2",
+        "@rollup/rollup-linux-s390x-gnu": "4.46.2",
+        "@rollup/rollup-linux-x64-gnu": "4.46.2",
+        "@rollup/rollup-linux-x64-musl": "4.46.2",
+        "@rollup/rollup-win32-arm64-msvc": "4.46.2",
+        "@rollup/rollup-win32-ia32-msvc": "4.46.2",
+        "@rollup/rollup-win32-x64-msvc": "4.46.2",
+        "fsevents": "~2.3.2"
+      }
+    },
     "node_modules/void-elements": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz",
diff --git a/src/app/admin/admin.component.css b/src/app/admin/admin.component.css
index d42f379..27dcbe4 100644
--- a/src/app/admin/admin.component.css
+++ b/src/app/admin/admin.component.css
@@ -1,36 +1,47 @@
 /* Admin Container */
 .admin-container {
-  padding: 24px;
+  padding: 2rem !important;
+  min-height: 100dvh;
+  height: 100%;
+}
+
+.header-title {
+  display: flex;
+}
+
+.header-icon {
+  color: var(--primary-red);
+  font-size: 1.5rem;
 }
 
 /* Page Header */
 .page-header {
-  margin-bottom: 24px;
+  margin-bottom: 1rem;
+  padding: 5px 0;
 }
 
 .header-content h1 {
-  color: var(--white);
-  font-size: 32px;
-  font-weight: 500;
-  margin-bottom: 8px;
+  margin: 0;
+  font-weight: 600;
+  font-size: 1.375rem;
 }
 
-.header-content p {
+.header-subtitle {
   color: var(--light-gray);
-  font-size: 16px;
-  margin: 0;
+  font-size: 14px;
+  margin-top: 0.25rem;
 }
 
 /* Statistics Grid */
 .stats-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 24px;
+  gap: 10px;
   margin-bottom: 32px;
 }
 
 .stat-card {
-  background: var(--medium-gray) !important;
+  /* background: var(--medium-gray) !important; */
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 12px;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
@@ -86,8 +97,9 @@
 }
 
 .stat-info h3 {
-  color: var(--white);
-  font-size: 28px;
+  /* color: var(--white); */
+  color: rgb(110, 110, 110);
+  font-size: 20px;
   font-weight: 600;
   margin-bottom: 4px;
 }
@@ -100,7 +112,7 @@
 
 /* Tabs Card */
 .tabs-card {
-  background: var(--medium-gray) !important;
+  /* background: var(--medium-gray) !important; */
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 12px;
 }
@@ -121,9 +133,9 @@
 }
 
 .tab-header h3 {
-  color: var(--white);
-  font-size: 20px;
-  font-weight: 500;
+  /* color: var(--white); */
+  font-size: 16px;
+  font-weight: 600;
   margin-bottom: 8px;
 }
 
@@ -169,6 +181,35 @@
   background-color: var(--primary-red) !important;
 }
 
+th {
+  white-space: nowrap;
+  /* ไม่ให้ตัดบรรทัด */
+  width: auto;
+  /* ยืดตามเนื้อหา */
+  background-color: #b00000 !important;
+}
+
+td {
+  white-space: nowrap;
+  /* ไม่ให้ตัดบรรทัด */
+  width: auto;
+  /* ยืดตามเนื้อหา */
+  color: #000 !important;
+  padding: 0.25rem 1rem !important;
+  font-size: 1rem !important;
+}
+
+/* Table Card */
+.table-card {
+  border-radius: 8px;
+  padding: 1rem;
+}
+
+.table-container {
+  overflow-x: auto;
+  border-radius: 4px;
+}
+
 /* User Table */
 .table-container {
   overflow-x: auto;
@@ -208,12 +249,15 @@
   display: flex;
   gap: 8px;
   justify-content: center;
+  align-items: center !important;
+  padding: 0 !important;
 }
 
-.action-buttons button {
-  width: 32px;
-  height: 32px;
-  line-height: 32px;
+.action-buttons > button {
+  display: flex !important;
+  justify-content: center !important;
+  align-items: center !important;
+  padding: 0 !important;
 }
 
 .action-buttons ::ng-deep .mat-mdc-icon-button {
@@ -256,9 +300,10 @@
 }
 
 .setting-card ::ng-deep .mat-mdc-card-title {
-  color: var(--white);
-  font-size: 18px;
-  font-weight: 500;
+  /* color: var(--white); */
+  font-size: 16px;
+  font-weight: 600;
+  color: #727272;
 }
 
 .setting-card ::ng-deep .mat-mdc-card-subtitle {
@@ -305,35 +350,35 @@
   .admin-container {
     padding: 16px;
   }
-  
+
   .header-content h1 {
     font-size: 24px;
   }
-  
+
   .stats-grid {
     grid-template-columns: 1fr;
     gap: 16px;
   }
-  
+
   .tab-header {
     flex-direction: column;
     align-items: flex-start;
     gap: 16px;
   }
-  
+
   .settings-grid {
     grid-template-columns: 1fr;
     gap: 16px;
   }
-  
+
   .table-container {
     overflow-x: auto;
   }
-  
+
   .user-table {
     min-width: 900px;
   }
-  
+
   .action-buttons {
     flex-direction: column;
     gap: 4px;
@@ -345,4 +390,4 @@
   background-color: var(--medium-gray) !important;
   color: var(--white) !important;
   font-size: 12px !important;
-} 
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/app/admin/admin.component.html b/src/app/admin/admin.component.html
index c438493..2914632 100644
--- a/src/app/admin/admin.component.html
+++ b/src/app/admin/admin.component.html
@@ -1,14 +1,17 @@
 <div class="admin-container">
   <div class="page-header">
     <div class="header-content">
-      <h1>Admin Settings</h1>
-      <p>Manage users, permissions, and system settings</p>
+      <div class="header-title">
+        <mat-icon class="header-icon" aria-hidden="false">security</mat-icon>
+        <h1>Admin Settings</h1>
+      </div>
+      <p class="header-subtitle">Manage users, permissions, and system settings</p>
     </div>
   </div>
 
   <!-- System Statistics -->
   <div class="stats-grid">
-    <mat-card class="stat-card">
+    <mat-card class="stat-card border-card">
       <mat-card-content>
         <div class="stat-content">
           <div class="stat-icon users">
@@ -22,7 +25,7 @@
       </mat-card-content>
     </mat-card>
 
-    <mat-card class="stat-card">
+    <mat-card class="stat-card border-card">
       <mat-card-content>
         <div class="stat-content">
           <div class="stat-icon active">
@@ -36,7 +39,7 @@
       </mat-card-content>
     </mat-card>
 
-    <mat-card class="stat-card">
+    <mat-card class="stat-card border-card">
       <mat-card-content>
         <div class="stat-content">
           <div class="stat-icon uptime">
@@ -50,7 +53,7 @@
       </mat-card-content>
     </mat-card>
 
-    <mat-card class="stat-card">
+    <mat-card class="stat-card border-card">
       <mat-card-content>
         <div class="stat-content">
           <div class="stat-icon backup">
@@ -66,14 +69,16 @@
   </div>
 
   <!-- Admin Tabs -->
-  <mat-card class="tabs-card">
+  <mat-card class="tabs-card border-card">
     <mat-card-content>
       <mat-tab-group [selectedIndex]="selectedTabIndex">
         <mat-tab label="User Management">
           <div class="tab-content">
             <div class="tab-header">
-              <h3>User Management</h3>
-              <p>Manage employee accounts and permissions</p>
+              <div>
+                <h3>User Management</h3>
+                <p>Manage employee accounts and permissions</p>
+              </div>
               <button mat-raised-button color="primary" (click)="createUser()">
                 <mat-icon>person_add</mat-icon>
                 Add User
@@ -158,12 +163,14 @@
         <mat-tab label="System Settings">
           <div class="tab-content">
             <div class="tab-header">
-              <h3>System Settings</h3>
-              <p>Manage system configuration and maintenance</p>
+              <div>
+                <h3>System Settings</h3>
+                <p>Manage system configuration and maintenance</p>
+              </div>
             </div>
             
             <div class="settings-grid">
-              <mat-card class="setting-card">
+              <mat-card class="setting-card border-card">
                 <mat-card-header>
                   <mat-card-title>Data Export</mat-card-title>
                   <mat-card-subtitle>Export master data and reports</mat-card-subtitle>
@@ -179,7 +186,7 @@
                 </mat-card-actions>
               </mat-card>
 
-              <mat-card class="setting-card">
+              <mat-card class="setting-card border-card">
                 <mat-card-header>
                   <mat-card-title>System Backup</mat-card-title>
                   <mat-card-subtitle>Create system backup</mat-card-subtitle>
@@ -195,7 +202,7 @@
                 </mat-card-actions>
               </mat-card>
 
-              <mat-card class="setting-card">
+              <mat-card class="setting-card border-card">
                 <mat-card-header>
                   <mat-card-title>System Logs</mat-card-title>
                   <mat-card-subtitle>View system activity logs</mat-card-subtitle>
diff --git a/src/app/app.component.css b/src/app/app.component.css
index 31fc1ce..0faca6b 100644
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -70,18 +70,22 @@
   border-radius: 4px;
   cursor: pointer;
   position: relative;
+  display: flex;
+  justify-items: center;
+  align-items: center;
+  padding-left: 12px;
 }
 
 .notification-badge {
   position: absolute;
-  top: -5px;
-  right: -5px;
+  top: 5px;
+  right: 4px;
   background-color: var(--red);
   color: var(--white);
   border-radius: 50%;
-  width: 18px;
-  height: 18px;
-  font-size: 0.75rem;
+  width: 15px;
+  height: 15px;
+  font-size: 0.7rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -98,6 +102,10 @@
   display: flex;
   align-items: center;
   gap: 0.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-left: -2px;
 }
 
 /* Sidenav Container */
@@ -313,9 +321,10 @@
 /* Responsive Design */
 @media (max-width: 1024px) {
   .sidebar {
-    width: 250px; /* Keep full width */
+    width: 250px;
+    /* Keep full width */
   }
-  
+
   .main-content {
     padding: 0;
   }
@@ -326,17 +335,18 @@
     padding: 0.25rem 0.75rem;
     height: 45px;
   }
-  
+
   .logo {
     font-size: 1.125rem;
   }
-  
+
   .mobile-menu-toggle {
     display: block;
   }
-  
+
   .sidebar {
-    width: 250px; /* Keep full width even on mobile */
+    width: 250px;
+    /* Keep full width even on mobile */
     position: fixed;
     top: 0;
     left: 0;
@@ -345,24 +355,24 @@
     transform: translateX(-100%);
     transition: transform 0.3s ease;
   }
-  
+
   .sidebar.open {
     transform: translateX(0);
   }
-  
+
   .mobile-close-btn {
     display: block;
   }
-  
+
   .mobile-overlay {
     display: block;
   }
-  
+
   .main-content {
     padding: 0;
     margin-left: 0;
   }
-  
+
   .menu-item {
     padding: 0.75rem 1rem;
     font-size: 0.875rem;
@@ -376,24 +386,24 @@
     padding: 0.25rem 0.5rem;
     height: 40px;
   }
-  
+
   .logo {
     font-size: 1rem;
     gap: 0.25rem;
   }
-  
+
   .navbar-right {
     gap: 0.5rem;
   }
-  
+
   .sidebar {
     width: 250px;
   }
-  
+
   .main-content {
     padding: 0;
   }
-  
+
   .menu-item {
     padding: 0.625rem 0.875rem;
     font-size: 0.8125rem;
@@ -405,15 +415,15 @@
   .top-navbar {
     height: 35px;
   }
-  
+
   .logo {
     font-size: 0.875rem;
   }
-  
+
   .sidebar {
     width: 250px;
   }
-  
+
   .menu-item {
     padding: 0.5rem 0.75rem;
     font-size: 0.75rem;
@@ -508,10 +518,22 @@
   .sidebar {
     width: 250px;
   }
-  
+
   .menu-item {
     padding: 0.75rem 1rem;
     font-size: 0.875rem;
     min-height: 48px;
   }
 }
+
+.menu-content {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.menu-icon {
+  font-size: 1rem;
+  width: 20px;
+  text-align: center;
+}
\ No newline at end of file
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 0b03893..6094f1c 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -3,29 +3,26 @@
   <mat-toolbar class="top-navbar">
     <div class="navbar-left">
       <!-- Mobile Menu Toggle -->
-      <button mat-icon-button 
-              class="mobile-menu-toggle"
-              (click)="toggleSidebar()"
-              [class.menu-open]="isSidebarOpen">
+      <button mat-icon-button class="mobile-menu-toggle" (click)="toggleSidebar()" [class.menu-open]="isSidebarOpen">
         <!-- <i class="pi pi-bars"></i> -->
       </button>
-      
+
       <div class="logo">
         <span class="logo-text-white">PINE</span>
         <span class="logo-text-red">PIM</span>
       </div>
     </div>
-    
+
     <div class="navbar-right">
       <button mat-icon-button [matMenuTriggerFor]="notificationMenu" class="notification-btn">
         <i class="pi pi-bell" style="color: white;"></i>
         <span class="notification-badge">3</span>
       </button>
-      
+
       <button mat-icon-button [matMenuTriggerFor]="userMenu" class="user-menu-btn">
         <i class="pi pi-user" style="color: white;"></i>
       </button>
-      
+
       <mat-menu #userMenu="matMenu" class="custom-menu">
         <button mat-menu-item class="menu-item-custom">
           <i class="pi pi-user menu-icon"></i>
@@ -41,7 +38,7 @@
           <span>Logout</span>
         </button>
       </mat-menu>
-      
+
       <mat-menu #notificationMenu="matMenu" class="custom-menu">
         <button mat-menu-item class="menu-item-custom">
           <i class="pi pi-check-circle menu-icon notification-success"></i>
@@ -62,19 +59,16 @@
   <!-- Main Layout with Sidebar -->
   <mat-sidenav-container class="sidenav-container">
     <!-- Left Sidebar -->
-    <mat-sidenav #sidenav 
-                 [mode]="isMobile ? 'over' : 'side'" 
-                 [opened]="!isMobile || isSidebarOpen"
-                 class="sidebar"
-                 (openedChange)="onSidebarToggle($event)">
-      
+    <mat-sidenav #sidenav [mode]="isMobile ? 'over' : 'side'" [opened]="!isMobile || isSidebarOpen" class="sidebar"
+      (openedChange)="onSidebarToggle($event)">
+
       <!-- Mobile Close Button -->
       <div class="mobile-close-btn" *ngIf="isMobile">
         <button mat-icon-button (click)="closeSidebar()">
           <i class="pi pi-times"></i>
         </button>
       </div>
-      
+
       <mat-nav-list class="sidebar-menu">
         <div class="menu-section">
           <span class="section-title">
@@ -82,15 +76,15 @@
             <span>MAIN MENU</span>
           </span>
         </div>
-        
-        <a mat-list-item 
-           *ngFor="let item of filteredMenuItems" 
-           [routerLink]="item.route" 
-           routerLinkActive="active-link"
-           class="menu-item"
-           (click)="onMenuItemClick()">
-          <i class="pi {{item.icon}} menu-icon"></i>
-          <span matListItemTitle>{{item.label}}</span>
+
+        <a mat-list-item *ngFor="let item of filteredMenuItems" [routerLink]="item.route" routerLinkActive="active-link"
+          class="menu-item menu-item-drawer" (click)="onMenuItemClick()">
+          <span matListItemTitle>
+            <span class="menu-content">
+              <i class="pi {{ item.icon }} menu-icon"></i>
+              <span class="menu-label">{{ item.label }}</span>
+            </span>
+          </span>
         </a>
 
         <mat-divider class="menu-divider"></mat-divider>
@@ -101,13 +95,13 @@
             <span>ADMIN</span>
           </span>
         </div>
-        
-        <a mat-list-item routerLink="/admin" class="menu-item" (click)="onMenuItemClick()">
+
+        <a mat-list-item routerLink="/admin" class="menu-item menu-item-drawer" routerLinkActive="active-link" (click)="onMenuItemClick()">
           <i class="pi pi-shield menu-icon"></i>
           <span matListItemTitle>Admin Setting</span>
         </a>
-        
-        <a mat-list-item routerLink="/logout" class="menu-item" (click)="onMenuItemClick()">
+
+        <a mat-list-item routerLink="/logout" class="menu-item menu-item-drawer" (click)="onMenuItemClick()">
           <i class="pi pi-sign-out menu-icon"></i>
           <span matListItemTitle>Logout</span>
         </a>
@@ -117,19 +111,17 @@
     <!-- Main Content Area -->
     <mat-sidenav-content class="main-content">
       <!-- Mobile Overlay -->
-      <div class="mobile-overlay" 
-           *ngIf="isMobile && isSidebarOpen" 
-           (click)="closeSidebar()">
+      <div class="mobile-overlay" *ngIf="isMobile && isSidebarOpen" (click)="closeSidebar()">
       </div>
-      
+
       <!-- Content Header -->
       <!-- <div class="content-header">
         <h1>Index</h1>
       </div> -->
-      
+
       <div class="content-wrapper">
         <router-outlet></router-outlet>
       </div>
     </mat-sidenav-content>
   </mat-sidenav-container>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/app/asset/list/asset-list.component.css b/src/app/asset/list/asset-list.component.css
index afc24a6..fff584c 100644
--- a/src/app/asset/list/asset-list.component.css
+++ b/src/app/asset/list/asset-list.component.css
@@ -1,36 +1,75 @@
 /* Asset List Container */
 .asset-list-container {
-  padding: 24px;
+  padding: 2rem !important;
+  /* background-color: var(--dark-gray); */
+  min-height: 100vh;
 }
 
+.header-title {
+  display: flex;
+}
+
+.header-icon {
+  color: var(--primary-red);
+  font-size: 1.5rem;
+}
+
+
 /* Page Header */
 .page-header {
-  margin-bottom: 24px;
+  margin-bottom: 1rem;
+  padding: 5px 0;
 }
 
-.header-content h1 {
-  color: var(--white);
-  font-size: 32px;
-  font-weight: 500;
-  margin-bottom: 8px;
-}
-
-.header-content p {
-  color: var(--light-gray);
-  font-size: 16px;
+.header-title h1 {
   margin: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
+.header-title h1 {
+  font-size: 1.375rem;
+}
+
+.header-subtitle {
+  color: var(--light-gray);
+  font-size: 14px;
+  margin-top: 0.25rem;
 }
 
 /* Filter Card */
 .filter-card {
-  background: var(--medium-gray) !important;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 12px;
-  margin-bottom: 24px;
+  border-radius: 8px;
+  padding: 10px;
+  margin-bottom: 1rem;
+}
+
+.action-button {
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  border: none;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.action-button.primary {
+  background-color: var(--primary-red);
+  color: var(--white);
+}
+
+.action-button.secondary {
+  background-color: transparent;
+  color: #000 !important;
+  border: 1px solid rgb(173, 173, 173) !important;
 }
 
 .filter-card ::ng-deep .mat-mdc-card-content {
-  padding: 24px;
+  padding-top: 10px;
 }
 
 .filter-form {
@@ -77,17 +116,46 @@
   color: var(--light-gray);
 }
 
-.filter-row button {
+/* .filter-row button {
   height: 56px;
   border-color: rgba(255, 255, 255, 0.2);
   color: var(--light-gray);
+} */
+
+th {
+  white-space: nowrap;
+  /* ไม่ให้ตัดบรรทัด */
+  width: auto;
+  /* ยืดตามเนื้อหา */
+  background-color: #b00000 !important;
+}
+
+td {
+  white-space: nowrap;
+  /* ไม่ให้ตัดบรรทัด */
+  width: auto;
+  /* ยืดตามเนื้อหา */
+  color: #000 !important;
+  padding: 0.25rem 1rem !important;
+  font-size: 1rem !important;
 }
 
 /* Table Card */
 .table-card {
-  background: var(--medium-gray) !important;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 12px;
+  border-radius: 8px;
+  padding: 1rem;
+}
+
+.table-container {
+  overflow-x: auto;
+  border-radius: 4px;
+}
+
+.action-buttons > button {
+  display: flex !important;
+  justify-content: center !important;
+  align-items: center !important;
+  padding: 0 !important;
 }
 
 .table-card ::ng-deep .mat-mdc-card-content {
@@ -204,24 +272,29 @@
   .asset-list-container {
     padding: 16px;
   }
-  
+
   .header-content h1 {
     font-size: 24px;
   }
-  
+
   .filter-row {
     grid-template-columns: 1fr;
     gap: 12px;
   }
-  
+
+  .filter-actions {
+    flex-wrap: wrap;
+    gap: 0.375rem;
+  }
+
   .table-container {
     overflow-x: auto;
   }
-  
+
   .asset-table {
     min-width: 900px;
   }
-  
+
   .action-buttons {
     flex-direction: column;
     gap: 4px;
@@ -254,4 +327,10 @@
   background-color: var(--medium-gray) !important;
   color: var(--white) !important;
   font-size: 12px !important;
-} 
\ No newline at end of file
+}
+
+.filter-actions {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
\ No newline at end of file
diff --git a/src/app/asset/list/asset-list.component.html b/src/app/asset/list/asset-list.component.html
index f08a7c6..38e9700 100644
--- a/src/app/asset/list/asset-list.component.html
+++ b/src/app/asset/list/asset-list.component.html
@@ -1,16 +1,26 @@
 <div class="asset-list-container">
+  <!-- Page Header -->
   <div class="page-header">
     <div class="header-content">
-      <h1>Asset List</h1>
-      <p>View and manage all registered assets</p>
+      <div class="header-title">
+        <mat-icon class="header-icon" aria-hidden="false">receipt_long</mat-icon>
+        <h1>Asset List</h1>
+      </div>
+      <p class="header-subtitle">View and manage all registered assets</p>
     </div>
   </div>
 
   <!-- Filters -->
-  <mat-card class="filter-card">
+  <mat-card class="filter-card border-card">
+    <mat-card-header>
+      <mat-card-title>
+        Filter Options
+      </mat-card-title>
+      <mat-card-subtitle>Refine your search criteria</mat-card-subtitle>
+    </mat-card-header>
     <mat-card-content>
-      <form [formGroup]="filterForm" class="filter-form">
-        <div class="filter-row">
+      <div class="filter-row">
+        <form [formGroup]="filterForm" class="filter-grid filter-row">
           <mat-form-field appearance="outline">
             <mat-label>Search Assets</mat-label>
             <input matInput formControlName="search" placeholder="Search by asset ID, name, department, or location">
@@ -43,22 +53,30 @@
               </mat-option>
             </mat-select>
           </mat-form-field>
+        </form>
+      </div>
 
-          <button mat-stroked-button type="button" (click)="clearFilters()">
-            <mat-icon>clear</mat-icon>
-            Clear
-          </button>
-        </div>
-      </form>
+      <!-- Action Buttons -->
+      <div class="filter-actions">
+        <button mat-raised-button color="primary" (click)="applyFilter()" class="action-button primary">
+          <mat-icon class="button-icon" aria-hidden="false">filter_list</mat-icon>
+          Apply Filters
+        </button>
+
+        <button mat-stroked-button type="button" (click)="clearFilters()" class="action-button secondary">
+          <mat-icon class="button-icon" aria-hidden="false">clear</mat-icon>
+          Clear Filters
+        </button>
+      </div>
     </mat-card-content>
   </mat-card>
 
   <!-- Table -->
-  <mat-card class="table-card">
+  <mat-card class="table-card border-card">
     <mat-card-content>
       <div class="table-container">
         <table mat-table [dataSource]="dataSource" matSort class="asset-table">
-          
+
           <!-- Asset ID Column -->
           <ng-container matColumnDef="assetId">
             <th mat-header-cell *matHeaderCellDef mat-sort-header> Asset ID </th>
@@ -104,7 +122,7 @@
           <!-- Status Column -->
           <ng-container matColumnDef="status">
             <th mat-header-cell *matHeaderCellDef mat-sort-header> Status </th>
-            <td mat-cell *matCellDef="let element"> 
+            <td mat-cell *matCellDef="let element">
               <mat-chip [class]="getStatusColor(element.status)">
                 {{element.status}}
               </mat-chip>
@@ -114,7 +132,7 @@
           <!-- Actions Column -->
           <ng-container matColumnDef="actions">
             <th mat-header-cell *matHeaderCellDef> Actions </th>
-            <td mat-cell *matCellDef="let element"> 
+            <td mat-cell *matCellDef="let element">
               <div class="action-buttons">
                 <button mat-icon-button color="primary" (click)="viewAsset(element)" matTooltip="View Details">
                   <mat-icon>visibility</mat-icon>
@@ -130,8 +148,13 @@
           <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
         </table>
 
-        <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
+        <!-- <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator> -->
       </div>
     </mat-card-content>
+    <mat-card-actions>
+      <!-- Paginator -->
+      <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" [pageSize]="10" showFirstLastButtons
+        class="custom-paginator" />
+    </mat-card-actions>
   </mat-card>
-</div> 
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/src/app/asset/registration/asset-registration.component.css b/src/app/asset/registration/asset-registration.component.css
index 1901e12..65c0016 100644
--- a/src/app/asset/registration/asset-registration.component.css
+++ b/src/app/asset/registration/asset-registration.component.css
@@ -1,6 +1,8 @@
 /* Asset Registration Container */
 .asset-registration-container {
-  padding: 24px;
+  padding: 2rem !important;
+  min-height: 100dvh;
+  height: 100%;
 }
 
 /* Page Header */
@@ -8,20 +10,38 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 24px;
+  margin-bottom: 1rem;
+  padding: 5px 0;
+}
+
+.header-content {
+  gap: 0.75rem;
+}
+
+.header-content >.header-subtitle {
+  color: var(--light-gray);
+  font-size: 14px;
+  margin-top: 0.25rem;
+}
+
+.header-icon {
+  color: var(--primary-red);
+  font-size: 1.5rem;
+}
+
+
+.header-title {
+  display: flex;
+}
+
+.header-title {
+  font-size: 1.375rem;
 }
 
 .header-content h1 {
-  color: var(--white);
-  font-size: 32px;
-  font-weight: 500;
-  margin-bottom: 8px;
-}
-
-.header-content p {
-  color: var(--light-gray);
-  font-size: 16px;
   margin: 0;
+  font-weight: 600;
+  font-size: 1.375rem;
 }
 
 .header-actions button {
@@ -31,8 +51,8 @@
 
 /* Tabs Card */
 .tabs-card {
-  background: var(--medium-gray) !important;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  /* background: var(--medium-gray) !important; */
+  /* border: 1px solid rgba(255, 255, 255, 0.1); */
   border-radius: 12px;
   margin-bottom: 24px;
 }
@@ -46,9 +66,10 @@
 }
 
 .tab-header h3 {
-  color: var(--white);
-  font-size: 20px;
-  font-weight: 500;
+  /* color: var(--white); */
+  color: rgb(97, 97, 97);
+  font-size: 16px;
+  font-weight: 600;
   margin-bottom: 8px;
 }
 
@@ -89,11 +110,33 @@
   background-color: var(--primary-red) !important;
 }
 
+th {
+  white-space: nowrap;
+  /* ไม่ให้ตัดบรรทัด */
+  width: auto;
+  /* ยืดตามเนื้อหา */
+  background-color: #b00000 !important;
+}
+
+td {
+  white-space: nowrap;
+  /* ไม่ให้ตัดบรรทัด */
+  width: auto;
+  /* ยืดตามเนื้อหา */
+  color: #000 !important;
+  padding: 0.25rem 1rem !important;
+  font-size: 1rem !important;
+}
+
 /* Table Card */
 .table-card {
-  background: var(--medium-gray) !important;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 12px;
+  border-radius: 8px;
+  padding: 1rem;
+}
+
+.table-container {
+  overflow-x: auto;
+  border-radius: 4px;
 }
 
 .table-card ::ng-deep .mat-mdc-card-content {
@@ -138,6 +181,19 @@
   display: flex;
   gap: 8px;
   justify-content: center;
+  align-items: center !important;
+  padding: 0 !important;
+}
+
+.action-buttons > button {
+  display: flex !important;
+  justify-content: center !important;
+  align-items: center !important;
+  padding: 0 !important;
+}
+
+.action-buttons > button > mat-icon {
+  width: 100%;
 }
 
 .action-buttons button {
@@ -214,29 +270,29 @@
   .asset-registration-container {
     padding: 16px;
   }
-  
+
   .page-header {
     flex-direction: column;
     align-items: flex-start;
     gap: 16px;
   }
-  
+
   .header-content h1 {
     font-size: 24px;
   }
-  
+
   .tab-content {
     padding: 16px;
   }
-  
+
   .table-container {
     overflow-x: auto;
   }
-  
+
   .asset-table {
     min-width: 900px;
   }
-  
+
   .action-buttons {
     flex-direction: column;
     gap: 4px;
@@ -248,4 +304,4 @@
   background-color: var(--medium-gray) !important;
   color: var(--white) !important;
   font-size: 12px !important;
-} 
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/app/asset/registration/asset-registration.component.html b/src/app/asset/registration/asset-registration.component.html
index 59a4669..1fc3f81 100644
--- a/src/app/asset/registration/asset-registration.component.html
+++ b/src/app/asset/registration/asset-registration.component.html
@@ -1,8 +1,11 @@
 <div class="asset-registration-container">
   <div class="page-header">
     <div class="header-content">
-      <h1>Asset Registration</h1>
-      <p>Manage asset registration and track registration status</p>
+      <div class="header-title">
+        <mat-icon class="header-icon" aria-hidden="false">build</mat-icon>
+        <h1>Asset Registration</h1>
+      </div>
+      <p class="header-subtitle">Manage asset registration and track registration status</p>
     </div>
     <div class="header-actions">
       <button mat-raised-button color="primary" (click)="registerAsset()">
@@ -13,7 +16,7 @@
   </div>
 
   <!-- Tabs -->
-  <mat-card class="tabs-card">
+  <mat-card class="tabs-card border-card">
     <mat-card-content>
       <mat-tab-group (selectedTabChange)="onTabChange($event)" [selectedIndex]="selectedTabIndex">
         <mat-tab label="All">
@@ -53,7 +56,7 @@
   </mat-card>
 
   <!-- Table -->
-  <mat-card class="table-card">
+  <mat-card class="table-card border-card">
     <mat-card-content>
       <div class="table-container">
         <table mat-table [dataSource]="dataSource" matSort class="asset-table">
@@ -131,9 +134,11 @@
           <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
           <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
         </table>
-
-        <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
       </div>
     </mat-card-content>
+    <mat-card-actions>
+      <!-- Paginator -->
+      <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" [pageSize]="10" showFirstLastButtons class="custom-paginator" />
+    </mat-card-actions>
   </mat-card>
 </div> 
\ No newline at end of file
diff --git a/src/app/asset/transfer/asset-transfer.component.css b/src/app/asset/transfer/asset-transfer.component.css
index d6f6bd3..89be085 100644
--- a/src/app/asset/transfer/asset-transfer.component.css
+++ b/src/app/asset/transfer/asset-transfer.component.css
@@ -1,6 +1,17 @@
 /* Asset Transfer Container */
 .asset-transfer-container {
-  padding: 24px;
+  padding: 2rem !important;
+  min-height: 100dvh;
+  height: 100%;
+}
+
+.header-title {
+  display: flex;
+}
+
+.header-icon {
+  color: var(--primary-red);
+  font-size: 1.5rem;
 }
 
 /* Page Header */
@@ -8,14 +19,24 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 24px;
+  margin-bottom: 1rem;
+  padding: 5px 0;
+}
+
+.header-content {
+  gap: 0.75rem;
+}
+
+.header-content>.header-subtitle {
+  color: var(--light-gray);
+  font-size: 14px;
+  margin-top: 0.25rem;
 }
 
 .header-content h1 {
-  color: var(--white);
-  font-size: 32px;
-  font-weight: 500;
-  margin-bottom: 8px;
+  margin: 0;
+  font-weight: 600;
+  font-size: 1.375rem;
 }
 
 .header-content p {
@@ -29,11 +50,33 @@
   color: var(--white) !important;
 }
 
+th {
+  white-space: nowrap;
+  /* ไม่ให้ตัดบรรทัด */
+  width: auto;
+  /* ยืดตามเนื้อหา */
+  background-color: #b00000 !important;
+}
+
+td {
+  white-space: nowrap;
+  /* ไม่ให้ตัดบรรทัด */
+  width: auto;
+  /* ยืดตามเนื้อหา */
+  color: #000 !important;
+  padding: 0.25rem 1rem !important;
+  font-size: 1rem !important;
+}
+
 /* Table Card */
 .table-card {
-  background: var(--medium-gray) !important;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 12px;
+  border-radius: 8px;
+  padding: 1rem;
+}
+
+.table-container {
+  overflow-x: auto;
+  border-radius: 4px;
 }
 
 .table-card ::ng-deep .mat-mdc-card-content {
@@ -78,12 +121,15 @@
   display: flex;
   gap: 8px;
   justify-content: center;
+  align-items: center !important;
+  padding: 0 !important;
 }
 
-.action-buttons button {
-  width: 32px;
-  height: 32px;
-  line-height: 32px;
+.action-buttons > button {
+  display: flex !important;
+  justify-content: center !important;
+  align-items: center !important;
+  padding: 0 !important;
 }
 
 .action-buttons ::ng-deep .mat-mdc-icon-button {
@@ -154,25 +200,25 @@
   .asset-transfer-container {
     padding: 16px;
   }
-  
+
   .page-header {
     flex-direction: column;
     align-items: flex-start;
     gap: 16px;
   }
-  
+
   .header-content h1 {
     font-size: 24px;
   }
-  
+
   .table-container {
     overflow-x: auto;
   }
-  
+
   .transfer-table {
     min-width: 1000px;
   }
-  
+
   .action-buttons {
     flex-direction: column;
     gap: 4px;
@@ -184,4 +230,4 @@
   background-color: var(--medium-gray) !important;
   color: var(--white) !important;
   font-size: 12px !important;
-} 
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/app/asset/transfer/asset-transfer.component.html b/src/app/asset/transfer/asset-transfer.component.html
index 8ffe19b..6b6dfd8 100644
--- a/src/app/asset/transfer/asset-transfer.component.html
+++ b/src/app/asset/transfer/asset-transfer.component.html
@@ -1,8 +1,11 @@
 <div class="asset-transfer-container">
   <div class="page-header">
     <div class="header-content">
-      <h1>Asset Transfer</h1>
-      <p>Manage asset transfers between departments</p>
+      <div class="header-title">
+        <mat-icon class="header-icon" aria-hidden="false">settings_applications</mat-icon>
+        <h1>Asset Transfer</h1>
+      </div>
+      <p class="header-subtitle">Manage asset transfers between departments</p>
     </div>
     <div class="header-actions">
       <button mat-raised-button color="primary" (click)="createTransferRequest()">
@@ -13,11 +16,11 @@
   </div>
 
   <!-- Table -->
-  <mat-card class="table-card">
+  <mat-card class="table-card border-card">
     <mat-card-content>
       <div class="table-container">
         <table mat-table [dataSource]="dataSource" matSort class="transfer-table">
-          
+
           <!-- Transfer ID Column -->
           <ng-container matColumnDef="transferId">
             <th mat-header-cell *matHeaderCellDef mat-sort-header> Transfer ID </th>
@@ -63,7 +66,7 @@
           <!-- Status Column -->
           <ng-container matColumnDef="status">
             <th mat-header-cell *matHeaderCellDef mat-sort-header> Status </th>
-            <td mat-cell *matCellDef="let element"> 
+            <td mat-cell *matCellDef="let element">
               <mat-chip [class]="getStatusColor(element.status)">
                 {{element.status}}
               </mat-chip>
@@ -73,15 +76,18 @@
           <!-- Actions Column -->
           <ng-container matColumnDef="actions">
             <th mat-header-cell *matHeaderCellDef> Actions </th>
-            <td mat-cell *matCellDef="let element"> 
+            <td mat-cell *matCellDef="let element">
               <div class="action-buttons">
-                <button mat-icon-button color="primary" (click)="viewTransferDetails(element)" matTooltip="View Details">
+                <button mat-icon-button color="primary" (click)="viewTransferDetails(element)"
+                  matTooltip="View Details">
                   <mat-icon>visibility</mat-icon>
                 </button>
-                <button mat-icon-button color="accent" (click)="approveTransfer(element)" matTooltip="Approve Transfer" *ngIf="element.status === 'Pending'">
+                <button mat-icon-button color="accent" (click)="approveTransfer(element)" matTooltip="Approve Transfer"
+                  *ngIf="element.status === 'Pending'">
                   <mat-icon>check</mat-icon>
                 </button>
-                <button mat-icon-button color="warn" (click)="rejectTransfer(element)" matTooltip="Reject Transfer" *ngIf="element.status === 'Pending'">
+                <button mat-icon-button color="warn" (click)="rejectTransfer(element)" matTooltip="Reject Transfer"
+                  *ngIf="element.status === 'Pending'">
                   <mat-icon>close</mat-icon>
                 </button>
               </div>
@@ -92,8 +98,13 @@
           <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
         </table>
 
-        <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
+        <!-- <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator> -->
       </div>
     </mat-card-content>
+    <mat-card-actions>
+      <!-- Paginator -->
+      <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" [pageSize]="10" showFirstLastButtons
+        class="custom-paginator" />
+    </mat-card-actions>
   </mat-card>
-</div> 
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/src/app/dashboard/dashboard.component.css b/src/app/dashboard/dashboard.component.css
index 4b2a050..fd3c36e 100644
--- a/src/app/dashboard/dashboard.component.css
+++ b/src/app/dashboard/dashboard.component.css
@@ -1,6 +1,6 @@
 /* Dashboard Container */
 .dashboard-container {
-  padding: 0.5rem;
+  padding: 2rem !important;
   /* background-color: var(--dark-gray); */
   min-height: 100vh;
 }
@@ -12,8 +12,6 @@
 }
 
 .header-content {
-  display: flex;
-  align-items: center;
   gap: 0.75rem;
 }
 
@@ -22,16 +20,19 @@
   font-size: 1.5rem;
 }
 
+.header-title {
+  display: flex;
+}
+
 .header-title h1 {
   margin: 0;
   font-size: 1.5rem;
   font-weight: 600;
-  /* color: var(--white); */
 }
 
 .header-subtitle {
   color: var(--light-gray);
-  font-size: 0.875rem;
+  font-size: 14px;
   margin-top: 0.25rem;
 }
 
@@ -118,11 +119,11 @@
   background-color: var(--accent-green);
 }
 
-.active-assets .stat-icon {
+.active-users .stat-icon {
   background-color: var(--yellow-orange);
 }
 
-.pending-assets .stat-icon {
+.pending-tasks .stat-icon {
   background-color: var(--red);
 }
 
@@ -185,6 +186,13 @@
   flex-shrink: 0;
 }
 
+.activity-icon > .mat-icon {
+  /* width: 24px;
+  height: 24px; */
+  width: auto !important;
+  font-size: 1.3rem;
+}
+
 .activity-asset {
   background-color: var(--accent-green);
 }
@@ -374,16 +382,16 @@
   .content-grid {
     grid-template-columns: 1fr;
   }
-  
+
   .stats-grid {
     grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
     gap: 0.5rem;
   }
-  
+
   .stat-card {
     padding: 0.75rem;
   }
-  
+
   .content-card {
     padding: 0.75rem;
   }
@@ -393,39 +401,39 @@
   .dashboard-container {
     padding: 0.25rem;
   }
-  
+
   .page-header {
     margin-bottom: 0.75rem;
     padding: 0.5rem 0;
   }
-  
+
   .header-title h1 {
     font-size: 1.25rem;
   }
-  
+
   .stats-grid {
     grid-template-columns: repeat(2, 1fr);
     gap: 0.5rem;
   }
-  
+
   .stat-card {
     padding: 0.5rem;
   }
-  
+
   .stat-icon {
     width: 32px;
     height: 32px;
     font-size: 1rem;
   }
-  
+
   .stat-info h3 {
     font-size: 1rem;
   }
-  
+
   .content-card {
     padding: 0.5rem;
   }
-  
+
   .activity-item,
   .category-item,
   .alert-item {
@@ -437,17 +445,17 @@
   .stats-grid {
     grid-template-columns: 1fr;
   }
-  
+
   .stat-content {
     flex-direction: column;
     align-items: flex-start;
     gap: 0.5rem;
   }
-  
+
   .stat-info {
     margin-left: 0;
   }
-  
+
   .activity-icon,
   .alert-priority {
     width: 24px;
@@ -526,4 +534,4 @@
 
 .percentage {
   font-size: 0.8125rem;
-} 
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index fbac80f..3369ffd 100644
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -3,7 +3,7 @@
   <div class="page-header">
     <div class="header-content">
       <div class="header-title">
-        <!-- <mat-icon class="header-icon" aria-hidden="false">dashboard</mat-icon> -->
+        <mat-icon class="header-icon" aria-hidden="false">dashboard</mat-icon>
         <h1>Dashboard</h1>
       </div>
       <p class="header-subtitle">Welcome back! Here's an overview of your asset management system.</p>
@@ -12,7 +12,7 @@
 
   <!-- Statistics Cards -->
   <div class="stats-grid">
-    <mat-card class="stat-card total-assets">
+    <mat-card class="stat-card total-assets border-stat-card">
       <mat-card-content>
         <div class="stat-content">
           <div class="stat-icon">
@@ -27,7 +27,7 @@
       </mat-card-content>
     </mat-card>
 
-    <mat-card class="stat-card total-value">
+    <mat-card class="stat-card total-value border-stat-card">
       <mat-card-content>
         <div class="stat-content">
           <div class="stat-icon">
@@ -42,7 +42,7 @@
       </mat-card-content>
     </mat-card>
 
-    <mat-card class="stat-card active-users">
+    <mat-card class="stat-card active-users border-stat-card">
       <mat-card-content>
         <div class="stat-content">
           <div class="stat-icon">
@@ -57,7 +57,7 @@
       </mat-card-content>
     </mat-card>
 
-    <mat-card class="stat-card pending-tasks">
+    <mat-card class="stat-card pending-tasks border-stat-card">
       <mat-card-content>
         <div class="stat-content">
           <div class="stat-icon">
@@ -76,7 +76,7 @@
   <!-- Content Grid -->
   <div class="content-grid">
     <!-- Recent Activities -->
-    <mat-card class="content-card activities-card">
+    <mat-card class="content-card activities-card border-card">
       <mat-card-header>
         <mat-card-title>
           <mat-icon class="card-icon" aria-hidden="false">timeline</mat-icon>
@@ -85,7 +85,7 @@
         <mat-card-subtitle>Latest asset management activities</mat-card-subtitle>
       </mat-card-header>
       <mat-card-content>
-        <div class="activity-list">
+        <div class="activity-list mt-10">
           <div class="activity-item" *ngFor="let activity of recentActivities">
             <div class="activity-icon" [ngClass]="'activity-' + activity.type">
               <mat-icon aria-hidden="false">{{ activity.icon }}</mat-icon>
@@ -103,7 +103,7 @@
     </mat-card>
 
     <!-- Asset Categories -->
-    <mat-card class="content-card categories-card">
+    <mat-card class="content-card categories-card border-card">
       <mat-card-header>
         <mat-card-title>
           <mat-icon class="card-icon" aria-hidden="false">pie_chart</mat-icon>
@@ -112,8 +112,8 @@
         <mat-card-subtitle>Distribution by category</mat-card-subtitle>
       </mat-card-header>
       <mat-card-content>
-        <div class="category-list">
-          <div class="category-item" *ngFor="let category of assetCategories">
+        <div class="category-list mt-10">
+          <div class="category-item mt-10" *ngFor="let category of assetCategories">
             <div class="category-info">
               <div class="category-header">
                 <div class="category-color" [ngClass]="'color-' + category.color"></div>
@@ -135,7 +135,7 @@
     </mat-card>
 
     <!-- Maintenance Alerts -->
-    <mat-card class="content-card alerts-card">
+    <mat-card class="content-card alerts-card border-card">
       <mat-card-header>
         <mat-card-title>
           <mat-icon class="card-icon" aria-hidden="false">warning</mat-icon>
@@ -144,7 +144,7 @@
         <mat-card-subtitle>Upcoming maintenance schedules</mat-card-subtitle>
       </mat-card-header>
       <mat-card-content>
-        <div class="alert-list">
+        <div class="alert-list mt-10">
           <div class="alert-item" *ngFor="let alert of maintenanceAlerts">
             <div class="alert-priority" [ngClass]="'priority-' + alert.priority.toLowerCase()"></div>
             <div class="alert-content">
@@ -152,7 +152,7 @@
                 <h4>{{ alert.assetName }}</h4>
                 <mat-chip [ngClass]="'priority-' + alert.priority.toLowerCase()">{{ alert.priority }}</mat-chip>
               </div>
-              <p class="alert-description">{{ alert.description }}</p>
+              <!-- <p class="alert-description">{{ alert.description }}</p> -->
               <p class="alert-date">Due: {{ alert.dueDate }}</p>
             </div>
           </div>
diff --git a/src/app/purchase-orders/purchase-orders.component.css b/src/app/purchase-orders/purchase-orders.component.css
index 2a9c146..72e380e 100644
--- a/src/app/purchase-orders/purchase-orders.component.css
+++ b/src/app/purchase-orders/purchase-orders.component.css
@@ -1,19 +1,16 @@
-/* Purchase Orders Container */
 .purchase-orders-container {
-  padding: 0.5rem;
-  background-color: var(--dark-gray);
-  min-height: 100vh;
+  padding: 2rem !important;
+  min-height: 100dvh;
+  height: 100%;
 }
 
 /* Page Header */
 .page-header {
   margin-bottom: 1rem;
-  padding: 0.75rem 0;
+  padding: 5px 0;
 }
 
 .header-content {
-  display: flex;
-  align-items: center;
   gap: 0.75rem;
 }
 
@@ -22,27 +19,35 @@
   font-size: 1.5rem;
 }
 
+
 .header-title {
+  display: flex;
+}
+
+.header-title h1 {
   margin: 0;
-  font-size: 1.5rem;
   font-weight: 600;
-  color: var(--white);
+  font-size: 1.375rem;
 }
 
 .header-subtitle {
   color: var(--light-gray);
-  font-size: 0.875rem;
+  font-size: 14px;
   margin-top: 0.25rem;
 }
 
 /* Filter Card */
 .filter-card {
-  background-color: var(--medium-gray);
+  /* background-color: var(--medium-gray); */
   border-radius: 8px;
-  padding: 1rem;
+  padding: 10px;
   margin-bottom: 1rem;
 }
 
+.filter-card ::ng-deep .mat-mdc-card-content {
+  padding-top: 10px;
+}
+
 .filter-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
@@ -96,8 +101,8 @@
 
 .action-button.secondary {
   background-color: transparent;
-  color: var(--white);
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: #000 !important;
+  border: 1px solid rgb(173, 173, 173) !important;
 }
 
 .action-button.secondary:hover {
@@ -117,9 +122,22 @@
   font-size: 1rem;
 }
 
+th {
+  white-space: nowrap;    /* ไม่ให้ตัดบรรทัด */
+  width: auto;            /* ยืดตามเนื้อหา */
+  background-color: #b00000 !important;
+}
+
+td {
+  white-space: nowrap;    /* ไม่ให้ตัดบรรทัด */
+  width: auto;            /* ยืดตามเนื้อหา */
+  color: #000 !important;
+  padding: 0.25rem 1rem !important;
+  font-size: 1rem !important;
+}
+
 /* Table Card */
 .table-card {
-  background-color: var(--medium-gray);
   border-radius: 8px;
   padding: 1rem;
 }
@@ -137,7 +155,7 @@
 .table-header {
   background-color: rgba(0, 0, 0, 0.2);
   color: var(--white);
-  font-weight: 600;
+  /* font-weight: 600; */
   font-size: 0.875rem;
 }
 
@@ -238,15 +256,15 @@
     grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
     gap: 0.5rem;
   }
-  
+
   .filter-card {
     padding: 0.75rem;
   }
-  
+
   .table-card {
     padding: 0.75rem;
   }
-  
+
   .table-header th,
   .table-cell {
     padding: 0.5rem 0.375rem;
@@ -258,41 +276,41 @@
   .purchase-orders-container {
     padding: 0.25rem;
   }
-  
+
   .page-header {
     margin-bottom: 0.75rem;
     padding: 0.5rem 0;
   }
-  
+
   .header-title {
     font-size: 1.25rem;
   }
-  
+
   .filter-grid {
     grid-template-columns: 1fr;
     gap: 0.5rem;
   }
-  
+
   .filter-actions {
     flex-wrap: wrap;
     gap: 0.375rem;
   }
-  
+
   .action-button {
     padding: 0.375rem 0.75rem;
     font-size: 0.8125rem;
   }
-  
+
   .table-container {
     font-size: 0.75rem;
   }
-  
+
   .table-header th,
   .table-cell {
     padding: 0.375rem 0.25rem;
     font-size: 0.75rem;
   }
-  
+
   .category-chip,
   .status-chip {
     font-size: 0.6875rem;
@@ -304,26 +322,26 @@
   .filter-card {
     padding: 0.5rem;
   }
-  
+
   .table-card {
     padding: 0.5rem;
   }
-  
+
   .action-button {
     padding: 0.25rem 0.5rem;
     font-size: 0.75rem;
   }
-  
+
   .button-icon {
     font-size: 0.875rem;
   }
-  
+
   .table-header th,
   .table-cell {
     padding: 0.25rem 0.125rem;
     font-size: 0.6875rem;
   }
-  
+
   .custom-paginator {
     flex-direction: column;
     gap: 0.5rem;
@@ -399,4 +417,4 @@
 
 .action-button {
   font-size: 0.8125rem;
-} 
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/app/purchase-orders/purchase-orders.component.html b/src/app/purchase-orders/purchase-orders.component.html
index 1d24ef1..fadffa1 100644
--- a/src/app/purchase-orders/purchase-orders.component.html
+++ b/src/app/purchase-orders/purchase-orders.component.html
@@ -11,104 +11,97 @@
   </div>
 
   <!-- Filter Card -->
-  <mat-card class="filter-card">
+  <mat-card class="filter-card border-card">
     <mat-card-header>
       <mat-card-title>
-        <mat-icon class="card-icon" aria-hidden="false">filter_list</mat-icon>
         Filter Options
       </mat-card-title>
       <mat-card-subtitle>Refine your search criteria</mat-card-subtitle>
     </mat-card-header>
     <mat-card-content>
-      <div class="filter-grid">
+      <div class="filter-grid mt-10">
         <!-- Year Filter -->
-        <mat-form-field appearance="outline" class="filter-field">
-          <mat-label>
-            <mat-icon class="field-icon" aria-hidden="false">calendar_today</mat-icon>
-            Year
-          </mat-label>
-          <mat-select formControlName="year">
-            <mat-option value="">All Years</mat-option>
-            <mat-option value="2024">2024</mat-option>
-            <mat-option value="2023">2023</mat-option>
-            <mat-option value="2022">2022</mat-option>
-          </mat-select>
-          <mat-icon matSuffix class="field-suffix-icon" aria-hidden="false">expand_more</mat-icon>
-        </mat-form-field>
+        <form [formGroup]="filterForm" class="filter-grid">
+          <mat-form-field appearance="outline" class="filter-field">
+            <mat-label>
+              <mat-icon class="field-icon" aria-hidden="false">calendar_today</mat-icon>
+              Year
+            </mat-label>
+            <mat-select formControlName="year">
+              <mat-option value="">All Years</mat-option>
+              <mat-option value="2024">2024</mat-option>
+              <mat-option value="2023">2023</mat-option>
+              <mat-option value="2022">2022</mat-option>
+            </mat-select>
+            <!-- <mat-icon matSuffix class="field-suffix-icon" aria-hidden="false">expand_more</mat-icon> -->
+          </mat-form-field>
 
-        <!-- Month Filter -->
-        <mat-form-field appearance="outline" class="filter-field">
-          <mat-label>
-            <mat-icon class="field-icon" aria-hidden="false">date_range</mat-icon>
-            Month
-          </mat-label>
-          <mat-select formControlName="month">
-            <mat-option value="">All Months</mat-option>
-            <mat-option value="1">January</mat-option>
-            <mat-option value="2">February</mat-option>
-            <mat-option value="3">March</mat-option>
-            <mat-option value="4">April</mat-option>
-            <mat-option value="5">May</mat-option>
-            <mat-option value="6">June</mat-option>
-            <mat-option value="7">July</mat-option>
-            <mat-option value="8">August</mat-option>
-            <mat-option value="9">September</mat-option>
-            <mat-option value="10">October</mat-option>
-            <mat-option value="11">November</mat-option>
-            <mat-option value="12">December</mat-option>
-          </mat-select>
-          <mat-icon matSuffix class="field-suffix-icon" aria-hidden="false">expand_more</mat-icon>
-        </mat-form-field>
+          <!-- Month Filter -->
+          <mat-form-field appearance="outline" class="filter-field">
+            <mat-label>
+              <mat-icon class="field-icon" aria-hidden="false">date_range</mat-icon>
+              Month
+            </mat-label>
+            <mat-select formControlName="month">
+              <mat-option value="">All Months</mat-option>
+              <mat-option value="1">January</mat-option>
+              <mat-option value="2">February</mat-option>
+              <mat-option value="3">March</mat-option>
+              <mat-option value="4">April</mat-option>
+              <mat-option value="5">May</mat-option>
+              <mat-option value="6">June</mat-option>
+              <mat-option value="7">July</mat-option>
+              <mat-option value="8">August</mat-option>
+              <mat-option value="9">September</mat-option>
+              <mat-option value="10">October</mat-option>
+              <mat-option value="11">November</mat-option>
+              <mat-option value="12">December</mat-option>
+            </mat-select>
+            <!-- <mat-icon matSuffix class="field-suffix-icon" aria-hidden="false">expand_more</mat-icon> -->
+          </mat-form-field>
 
-        <!-- Category Filter -->
-        <mat-form-field appearance="outline" class="filter-field">
-          <mat-label>
-            <mat-icon class="field-icon" aria-hidden="false">category</mat-icon>
-            Category
-          </mat-label>
-          <mat-select formControlName="category">
-            <mat-option value="">All Categories</mat-option>
-            <mat-option value="Asset">Asset</mat-option>
-            <mat-option value="Tools">Tools</mat-option>
-            <mat-option value="Spare">Spare</mat-option>
-            <mat-option value="Expense">Expense</mat-option>
-            <mat-option value="Consumable">Consumable</mat-option>
-          </mat-select>
-          <mat-icon matSuffix class="field-suffix-icon" aria-hidden="false">expand_more</mat-icon>
-        </mat-form-field>
+          <!-- Category Filter -->
+          <mat-form-field appearance="outline" class="filter-field">
+            <mat-label>
+              <mat-icon class="field-icon" aria-hidden="false">category</mat-icon>
+              Category
+            </mat-label>
+            <mat-select formControlName="category">
+              <mat-option value="">All Categories</mat-option>
+              <mat-option value="Asset">Asset</mat-option>
+              <mat-option value="Tools">Tools</mat-option>
+              <mat-option value="Spare">Spare</mat-option>
+              <mat-option value="Expense">Expense</mat-option>
+              <mat-option value="Consumable">Consumable</mat-option>
+            </mat-select>
+            <!-- <mat-icon matSuffix class="field-suffix-icon" aria-hidden="false">expand_more</mat-icon> -->
+          </mat-form-field>
 
-        <!-- Search Field -->
-        <mat-form-field appearance="outline" class="filter-field">
-          <mat-label>
-            <mat-icon class="field-icon" aria-hidden="false">search</mat-icon>
-            Search
-          </mat-label>
-          <input matInput formControlName="search" placeholder="Search PO ID, Product...">
-          <mat-icon matSuffix class="field-suffix-icon" aria-hidden="false">search</mat-icon>
-        </mat-form-field>
+          <!-- Search Field -->
+          <mat-form-field appearance="outline" class="filter-field">
+            <mat-label>
+              <mat-icon class="field-icon" aria-hidden="false">search</mat-icon>
+              Search
+            </mat-label>
+            <input matInput formControlName="search" placeholder="Search PO ID, Product...">
+            <!-- <mat-icon matSuffix class="field-suffix-icon" aria-hidden="false">search</mat-icon> -->
+          </mat-form-field>
+        </form>
       </div>
 
       <!-- Action Buttons -->
       <div class="filter-actions">
-        <button mat-raised-button
-                color="primary"
-                (click)="applyFilter()"
-                class="action-button primary">
+        <button mat-raised-button color="primary" (click)="applyFilter()" class="action-button primary">
           <mat-icon class="button-icon" aria-hidden="false">filter_list</mat-icon>
           Apply Filters
         </button>
 
-        <button mat-stroked-button
-                (click)="clearFilters()"
-                class="action-button secondary">
+        <button mat-stroked-button (click)="clearFilters()" class="action-button secondary">
           <mat-icon class="button-icon" aria-hidden="false">clear</mat-icon>
           Clear Filters
         </button>
 
-        <button mat-raised-button
-                color="accent"
-                (click)="exportToExcel()"
-                class="action-button accent">
+        <button mat-raised-button color="accent" (click)="exportToExcel()" class="action-button accent">
           <mat-icon class="button-icon" aria-hidden="false">download</mat-icon>
           Export Excel
         </button>
@@ -117,16 +110,16 @@
   </mat-card>
 
   <!-- Table Card -->
-  <mat-card class="table-card">
+  <mat-card class="table-card border-card">
     <mat-card-header>
       <mat-card-title>
-        <mat-icon class="card-icon" aria-hidden="false">table_chart</mat-icon>
+        <!-- <mat-icon class="card-icon" aria-hidden="false">table_chart</mat-icon> -->
         Purchase Orders
       </mat-card-title>
       <mat-card-subtitle>Total: {{ dataSource.data.length }} records</mat-card-subtitle>
     </mat-card-header>
     <mat-card-content>
-      <div class="table-container">
+      <div class="table-container border-card mt-10">
         <table mat-table [dataSource]="dataSource" matSort class="purchase-table">
           <!-- Company Column -->
           <ng-container matColumnDef="company">
@@ -246,12 +239,10 @@
           <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="table-row"></tr>
         </table>
       </div>
-
-      <!-- Paginator -->
-      <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]"
-                     showFirstLastButtons
-                     class="custom-paginator">
-      </mat-paginator>
     </mat-card-content>
+    <mat-card-actions>
+      <!-- Paginator -->
+      <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" [pageSize]="10" showFirstLastButtons class="custom-paginator" />
+    </mat-card-actions>
   </mat-card>
-</div> 
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 7fa741e..404cc28 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,13 +1,17 @@
 <!doctype html>
 <html lang="en">
+
 <head>
   <meta charset="utf-8">
   <title>PINEPIM Asset Management</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
+
 <body>
   <app-root></app-root>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/src/styles.css b/src/styles.css
index dedf2be..2822e47 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -307,3 +307,73 @@ li {
     display: none !important;
   }
 }
+
+.menu-item-drawer {
+  display: flex;
+}
+
+.menu-item-drawer > .mdc-list-item__content {
+  display: flex;
+  gap: 10px;
+}
+
+.menu-item-drawer > .mdc-list-item__content > span {
+  color: #fff;
+}
+
+.menu-item-drawer:hover:not(.active-link) > .mdc-list-item__content > span {
+  color: #fff;
+}
+
+.menu-item-drawer:hover > .mdc-list-item__content > span, .menu-item-drawer:active > .mdc-list-item__content > span, .menu-item-drawer:focus > .mdc-list-item__content > span {
+  color: #fff;
+}
+
+.border-stat-card {
+  border-left: 4px solid #c80000;
+  border-right: 1px solid #E3E3E3 !important;
+  border-bottom: 1px solid #E3E3E3 !important;
+  border-top: 1px solid #E3E3E3 !important;
+  box-shadow: none !important;
+}
+
+.border-stat-card:hover {
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 50px, rgba(0, 0, 0, 0.1) 0px 3px 6px !important;
+}
+
+.border-card {
+  border: 1px solid #E3E3E3 !important;
+  box-shadow: none !important;
+}
+
+.mt-10{
+  margin-top: 10px !important;
+}
+
+.mdc-text-field {
+  border: 1px solid #E3E3E3 !important;
+}
+
+.mat-icon{
+  height: auto !important;
+}
+
+.mat-mdc-paginator, .mat-mdc-paginator-outer-container {
+  /* width: 100%; */
+}
+
+.mat-mdc-paginator-page-size {
+  color: #1a1a1a;
+}
+
+.mat-mdc-paginator-range-actions > .mat-mdc-paginator-range-label {
+  color: #1a1a1a;
+}
+
+.filter-card ::ng-deep .mat-mdc-card-content {
+  padding-top: 10px;
+}
+
+.mat-mdc-tab-label-container {
+  border-bottom: 1px solid #ebebeb !important;
+}
\ No newline at end of file
-- 
2.45.2