commit-1

src/app/home/page.tsx

@@ -1,4 +1,5 @@
 import { Activity, ShieldCheck, Users, Clock3 } from "lucide-react";
+import Image from "next/image";
 import { AppShell } from "@/components/layout/app-shell";
 import { GlassCard } from "@/components/ui/glass-card";
 import { prisma } from "@/lib/prisma";
@@ -27,10 +28,22 @@ export default async function HomePage() {
   return (
     <AppShell>
       <div className="space-y-6">
-        <header className="pt-2">
+        <header className="flex flex-col gap-4 pt-2 sm:flex-row sm:items-center">
-          <p className="text-sm font-semibold uppercase tracking-[0.2em] text-brand-orange">Dashboard</p>
+          <div className="flex h-16 w-16 shrink-0 items-center justify-center rounded-2xl bg-white p-3 shadow-glow">
-          <h1 className="mt-2 text-3xl font-black sm:text-4xl">Welcome, {user?.fullName}</h1>
+            <Image
-          <p className="mt-2 text-white/55">4TECH user access and account overview.</p>
+              src="/4tech_logo.png"
+              alt="4TECH logo"
+              width={52}
+              height={52}
+              className="h-full w-full object-contain"
+              priority
+            />
+          </div>
+          <div>
+            <p className="text-sm font-semibold uppercase tracking-[0.2em] text-brand-orange">Dashboard</p>
+            <h1 className="mt-2 text-3xl font-black sm:text-4xl">Welcome, {user?.fullName}</h1>
+            <p className="mt-2 text-white/55">4TECH user access and account overview.</p>
+          </div>
         </header>
         <section className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
           {cards.map((card) => (

src/app/login/page.tsx

@@ -1,3 +1,4 @@
+import Image from "next/image";
 import { redirect } from "next/navigation";
 import { GlassCard } from "@/components/ui/glass-card";
 import { LoginForm } from "@/components/login/login-form";
@@ -14,11 +15,18 @@ export default async function LoginPage() {
       <div className="w-full max-w-md">
         <GlassCard className="p-7 sm:p-8">
           <div className="mb-8 text-center">
-            <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-brand-orange text-2xl font-black shadow-glow">
+            <div className="mx-auto mb-4 flex h-20 w-20 items-center justify-center rounded-2xl bg-white p-3 shadow-glow">
-              4T
+              <Image
+                src="/4tech_logo.png"
+                alt="4TECH logo"
+                width={64}
+                height={64}
+                className="h-full w-full object-contain"
+                priority
+              />
             </div>
             <h1 className="text-3xl font-black tracking-wide">4TECH</h1>
-            <p className="mt-2 text-sm text-white/55">Secure internal access</p>
+            <p className="mt-2 text-sm text-white/55">4TECH INNOVATION CO., LTD.</p>
           </div>
           <LoginForm />
         </GlassCard>

src/components/layout/app-shell.tsx

@@ -1,4 +1,5 @@
 import { LogOut, UserCog, UserRound, LayoutDashboard } from "lucide-react";
+import Image from "next/image";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import { Button } from "@/components/ui/button";
@@ -23,7 +24,16 @@ export async function AppShell({ children }: { children: React.ReactNode }) {
       <div className="mx-auto flex min-h-screen w-full max-w-7xl flex-col gap-6 p-4 md:flex-row md:p-6">
         <aside className="glass flex h-fit flex-col rounded-2xl p-4 md:sticky md:top-6 md:w-64">
           <Link href="/home" className="mb-6 flex items-center gap-3">
-            <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-brand-orange font-black">4T</div>
+            <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-white p-2 shadow-glow">
+              <Image
+                src="/4tech_logo.png"
+                alt="4TECH logo"
+                width={40}
+                height={40}
+                className="h-full w-full object-contain"
+                priority
+              />
+            </div>
             <div>
               <p className="text-lg font-black tracking-wide">4TECH</p>
               <p className="text-xs text-white/50">Internal System</p>