diff --git a/Channel-Frontend/public/logo.png b/Channel-Frontend/public/logo.png
new file mode 100644
index 0000000..98f7552
Binary files /dev/null and b/Channel-Frontend/public/logo.png differ
diff --git a/Channel-Frontend/src/app/layouts/AdminLayout.tsx b/Channel-Frontend/src/app/layouts/AdminLayout.tsx
index 491e0d2..9a38e63 100644
--- a/Channel-Frontend/src/app/layouts/AdminLayout.tsx
+++ b/Channel-Frontend/src/app/layouts/AdminLayout.tsx
@@ -63,8 +63,8 @@ export const AdminLayout: React.FC = () => {
           className={`h-24 flex items-center border-b border-ink-200 transition-all duration-300 ${isCollapsed ? "justify-center px-4" : "px-8"}`}
         >
           <Link to="/admin" className="flex items-center gap-3 shrink-0 group">
-            <div className="w-10 h-10 rounded-xl flex items-center justify-center bg-gradient-to-br from-ink-900 to-ink-800 shadow-lg group-hover:scale-105 transition-all duration-300">
-              <ShieldCheck className="w-5 h-5 text-ink-0" />
+            <div className="w-10 h-10 rounded-xl flex items-center justify-center bg-ink-0 shadow-sm border border-ink-200 group-hover:scale-105 transition-all duration-300 p-1">
+              <img src="/logo.png" alt="Tech4Biz" className="w-full h-full object-contain" />
             </div>
             {!isCollapsed && (
               <div className="flex flex-col animate-fade-in">
diff --git a/Channel-Frontend/src/app/layouts/ClientLayout.tsx b/Channel-Frontend/src/app/layouts/ClientLayout.tsx
index 9de7d12..3abe07e 100644
--- a/Channel-Frontend/src/app/layouts/ClientLayout.tsx
+++ b/Channel-Frontend/src/app/layouts/ClientLayout.tsx
@@ -42,8 +42,8 @@ export const ClientLayout: React.FC = () => {
         {/* Branding */}
         <div className={`h-24 flex items-center border-b border-ink-200 transition-all duration-300 ${isCollapsed ? 'justify-center px-4' : 'px-8'}`}>
           <Link to="/client" className="flex items-center gap-3 shrink-0 group">
-            <div className="w-10 h-10 rounded-xl flex items-center justify-center bg-gradient-to-br from-ink-900 to-ink-800 shadow-lg group-hover:scale-105 transition-all duration-300">
-              <ShieldCheck className="w-5 h-5 text-ink-0" />
+            <div className="w-10 h-10 rounded-xl flex items-center justify-center bg-ink-0 shadow-sm border border-ink-200 group-hover:scale-105 transition-all duration-300 p-1">
+              <img src="/logo.png" alt="Tech4Biz" className="w-full h-full object-contain" />
             </div>
             {!isCollapsed && (
               <div className="flex flex-col animate-fade-in">
diff --git a/Channel-Frontend/src/components/layout/MainLayout.tsx b/Channel-Frontend/src/components/layout/MainLayout.tsx
index 2bf1fb8..847bb35 100644
--- a/Channel-Frontend/src/components/layout/MainLayout.tsx
+++ b/Channel-Frontend/src/components/layout/MainLayout.tsx
@@ -29,8 +29,8 @@ export const MainLayout = () => {
       >
         <div className="h-24 flex items-center px-8 border-b border-ink-200">
           <div className="flex items-center gap-4">
-            <div className="relative flex items-center justify-center w-11 h-11 rounded-2xl bg-gradient-to-tr from-ink-900 to-ink-800 shadow-lg">
-              <Hexagon className="text-ink-0 w-6 h-6 absolute" />
+            <div className="relative flex items-center justify-center w-11 h-11 rounded-2xl bg-ink-0 border border-ink-200 shadow-sm p-1">
+              <img src="/logo.png" alt="Tech4Biz" className="w-full h-full object-contain" />
             </div>
             <span className="font-extrabold text-xl tracking-tight text-ink-900">Tech4Biz</span>
           </div>
diff --git a/Channel-Frontend/src/features/auth/components/LoginForm.tsx b/Channel-Frontend/src/features/auth/components/LoginForm.tsx
index 41379ff..06c2ae0 100644
--- a/Channel-Frontend/src/features/auth/components/LoginForm.tsx
+++ b/Channel-Frontend/src/features/auth/components/LoginForm.tsx
@@ -95,14 +95,12 @@ const OrbitingRing: React.FC = () => (
     {/* Center icon */}
     <div className="absolute inset-0 flex items-center justify-center z-10">
       <div
-        className="w-16 h-16 rounded-2xl flex items-center justify-center animate-pulse-glow"
+        className="w-16 h-16 rounded-2xl flex items-center justify-center animate-pulse-glow bg-white border border-ink-200 shadow-sm p-2"
         style={{
-          background: 'linear-gradient(135deg, var(--color-primary-400), var(--color-primary-600))',
-          boxShadow: '0 0 30px rgba(162,231,113,0.5)',
           transform: 'perspective(300px) rotateY(-8deg) rotateX(4deg)',
         }}
       >
-        <ShieldCheck className="w-8 h-8" style={{ color: 'var(--color-ink-800)' }} />
+        <img src="/logo.png" alt="Tech4Biz" className="w-full h-full object-contain" />
       </div>
     </div>
 
diff --git a/Channel-Frontend/src/pages/LoginPage.tsx b/Channel-Frontend/src/pages/LoginPage.tsx
index b1b4206..98235d2 100644
--- a/Channel-Frontend/src/pages/LoginPage.tsx
+++ b/Channel-Frontend/src/pages/LoginPage.tsx
@@ -88,8 +88,8 @@ export const LoginPage = () => {
             <div className="absolute top-0 inset-x-0 h-px bg-gradient-to-r from-transparent via-ink-300 to-transparent" />
 
             <div className="flex flex-col items-center mb-8 text-center">
-              <div className="relative flex items-center justify-center w-16 h-16 rounded-2xl bg-gradient-to-tr from-ink-900 to-ink-800 shadow-md mb-6">
-                <Hexagon className="text-ink-0 w-8 h-8 absolute" />
+              <div className="relative flex items-center justify-center w-16 h-16 rounded-2xl bg-ink-0 border border-ink-200 shadow-sm mb-6 p-2">
+                <img src="/logo.png" alt="Tech4Biz" className="w-full h-full object-contain" />
               </div>
               <h2 className="text-2xl font-bold text-ink-900 tracking-tight">
                 Channel Portal
diff --git a/Channel-Frontend/vite.config.ts b/Channel-Frontend/vite.config.ts
index 126b7cd..0831c47 100644
--- a/Channel-Frontend/vite.config.ts
+++ b/Channel-Frontend/vite.config.ts
@@ -7,7 +7,8 @@ export default defineConfig({
   plugins: [tailwindcss(), react()],
   server: {
     allowedHosts: [
-      "toughly-coinstantaneous-dimple.ngrok-free.dev"
+      "toughly-coinstantaneous-dimple.ngrok-free.dev",
+      "spruce-fridge-destiny.ngrok-free.dev"
     ],
     cors: true
   }
diff --git a/run-frontend.sh b/run-frontend.sh
index eb3081c..0be4215 100755
--- a/run-frontend.sh
+++ b/run-frontend.sh
@@ -34,4 +34,4 @@ fi
 
 # 3. Start Vite Dev Server
 info "Starting Vite frontend dev server..."
-npm run dev
+npm run dev -- --host