diff --git a/src/app/components/footer/footer.component.css b/src/app/components/footer/footer.component.css
new file mode 100644
index 0000000..765a288
--- /dev/null
+++ b/src/app/components/footer/footer.component.css
@@ -0,0 +1,12 @@
+.footer {
+  padding: 24px 16px;
+  text-align: center;
+  color: #6b7280;
+  background-color: #f5f7fa;
+  border-top: 1px solid #e5e7eb;
+}
+
+.footer p {
+  margin: 0;
+  font-size: 14px;
+}
diff --git a/src/app/components/footer/footer.component.html b/src/app/components/footer/footer.component.html
new file mode 100644
index 0000000..0f4ede7
--- /dev/null
+++ b/src/app/components/footer/footer.component.html
@@ -0,0 +1,3 @@
+<footer class="footer">
+  <p>KanbanCloneAngular</p>
+</footer>
diff --git a/src/app/components/footer/footer.component.ts b/src/app/components/footer/footer.component.ts
new file mode 100644
index 0000000..84ddd44
--- /dev/null
+++ b/src/app/components/footer/footer.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-footer',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './footer.component.html',
+  styleUrl: './footer.component.css'
+})
+export class FooterComponent {}