diff --git a/app/View/Components/FooterCategory.php b/app/View/Components/FooterCategory.php
new file mode 100644
index 0000000..5a9e014
--- /dev/null
+++ b/app/View/Components/FooterCategory.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace App\View\Components;
+
+use App\Repositories\Catalog\CategoryRepository;
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class FooterCategory extends Component
+{
+    public $categories;
+
+    /**
+     * Create a new component instance.
+     */
+    public function __construct(CategoryRepository $categoryRepository)
+    {
+        $this->categories = $categoryRepository->getList([]);
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+        return view('components.footer-category', ['categories' => $this->categories]);
+    }
+}
diff --git a/lang/en/footer.php b/lang/en/footer.php
new file mode 100644
index 0000000..9753b82
--- /dev/null
+++ b/lang/en/footer.php
@@ -0,0 +1,19 @@
+<?php
+
+return [
+    'computers' => 'Computers',
+    'smartphones' => 'Smartphones',
+    'tv_video' => 'TV, Video',
+    'speakers' => 'Speakers',
+    'cameras' => 'Cameras',
+    'printers' => 'Printers',
+    'video_games' => 'Video Games',
+    'headphones' => 'Headphones',
+    'wearable' => 'Wearable',
+    'hdd_ssd' => 'HDD/SSD',
+    'smart_home' => 'Smart Home',
+    'apple_devices' => 'Apple Devices',
+    'tablets' => 'Tablets',
+    'monitors' => 'Monitors',
+    'scanners' => 'Scanners'
+];
diff --git a/lang/en/home_popular_products.php b/lang/en/home_popular_products.php
new file mode 100644
index 0000000..5e87aca
--- /dev/null
+++ b/lang/en/home_popular_products.php
@@ -0,0 +1,5 @@
+<?php
+
+return [
+    'title' => 'Popular Products',
+];
\ No newline at end of file
diff --git a/lang/id/footer.php b/lang/id/footer.php
new file mode 100644
index 0000000..48da05b
--- /dev/null
+++ b/lang/id/footer.php
@@ -0,0 +1,19 @@
+<?php
+
+return [
+    'computers' => 'Komputer',
+    'smartphones' => 'Smartphone',
+    'tv_video' => 'TV, Video',
+    'speakers' => 'Speaker',
+    'cameras' => 'Kamera',
+    'printers' => 'Printer',
+    'video_games' => 'Game Video',
+    'headphones' => 'Headphone',
+    'wearable' => 'Perangkat Wearable',
+    'hdd_ssd' => 'HDD/SSD',
+    'smart_home' => 'Smart Home',
+    'apple_devices' => 'Perangkat Apple',
+    'tablets' => 'Tablet',
+    'monitors' => 'Monitor',
+    'scanners' => 'Scanner'
+];
diff --git a/lang/id/home_popular_products.php b/lang/id/home_popular_products.php
new file mode 100644
index 0000000..eaaf1d6
--- /dev/null
+++ b/lang/id/home_popular_products.php
@@ -0,0 +1,5 @@
+<?php
+
+return [
+    'title' => 'Produk Populer',
+];
\ No newline at end of file
diff --git a/resources/views/components/footer-category.blade.php b/resources/views/components/footer-category.blade.php
new file mode 100644
index 0000000..42dd5e7
--- /dev/null
+++ b/resources/views/components/footer-category.blade.php
@@ -0,0 +1,12 @@
+@if($categories && $categories->count() > 0)
+    <ul class="nav align-items-center text-body-tertiary gap-2">
+        @foreach($categories as $index => $category)
+            <li class="animate-underline">
+                <a class="nav-link fw-normal p-0 animate-target" href="#!">{{ $category->name }}</a>
+            </li>
+            @if($index < $categories->count() - 1)
+                <li class="px-1">/</li>
+            @endif
+        @endforeach
+    </ul>
+@endif
\ No newline at end of file
diff --git a/resources/views/components/home/home-popular-products.blade.php b/resources/views/components/home/home-popular-products.blade.php
index f7f5d03..ac477ee 100644
--- a/resources/views/components/home/home-popular-products.blade.php
+++ b/resources/views/components/home/home-popular-products.blade.php
@@ -5,7 +5,7 @@
         <div class="col-md-6 col-xl-5 offset-xl-1 order-md-2 mb-4 mb-md-0">
             <div class="ps-md-3 ps-lg-4 ps-xl-0">
                 <div class="d-flex align-items-center justify-content-between pb-4 mb-md-1 mb-lg-2 mb-xl-3">
-                    <h2 class="me-3 mb-0">Popular products</h2>
+                    <h2 class="me-3 mb-0">{{ __('home_popular_products.title') }}</h2>
 
                     <!-- Slider prev/next buttons -->
                     <div class="d-flex gap-2">
diff --git a/resources/views/layouts/partials/footer.blade.php b/resources/views/layouts/partials/footer.blade.php
index 09a0349..c46e3e6 100644
--- a/resources/views/layouts/partials/footer.blade.php
+++ b/resources/views/layouts/partials/footer.blade.php
@@ -150,57 +150,7 @@
         <!-- Category / tag links -->
         <div class="d-flex flex-column gap-3 pb-3 pb-md-4 pb-lg-5 mt-n2 mt-sm-n4 mt-lg-0 mb-4">
             <ul class="nav align-items-center text-body-tertiary gap-2">
-                <li class="animate-underline">
-                    <a class="nav-link fw-normal p-0 animate-target" href="#!">Computers</a>
-                </li>
-                <li class="px-1">/</li>
-                <li class="animate-underline">
-                    <a class="nav-link fw-normal p-0 animate-target" href="#!">Smartphones</a>
-                </li>
-                <li class="px-1">/</li>
-                <li class="animate-underline">
-                    <a class="nav-link fw-normal p-0 animate-target" href="#!">TV, Video</a>
-                </li>
-                <li class="px-1">/</li>
-                <li class="animate-underline">
-                    <a class="nav-link fw-normal p-0 animate-target" href="#!">Speakers</a>
-                </li>
-                <li class="px-1">/</li>
-                <li class="animate-underline">
-                    <a class="nav-link fw-normal p-0 animate-target" href="#!">Cameras</a>
-                </li>
-                <li class="px-1">/</li>
-                <li class="animate-underline">
-                    <a class="nav-link fw-normal p-0 animate-target" href="#!">Printers</a>
-                </li>
-                <li class="px-1">/</li>
-                <li class="animate-underline">
-                    <a class="nav-link fw-normal p-0 animate-target" href="#!">Video Games</a>
-                </li>
-                <li class="px-1">/</li>
-                <li class="animate-underline">
-                    <a class="nav-link fw-normal p-0 animate-target" href="#!">Headphones</a>
-                </li>
-                <li class="px-1">/</li>
-                <li class="animate-underline">
-                    <a class="nav-link fw-normal p-0 animate-target" href="#!">Wearable</a>
-                </li>
-                <li class="px-1">/</li>
-                <li class="animate-underline">
-                    <a class="nav-link fw-normal p-0 animate-target" href="#!">HDD/SSD</a>
-                </li>
-                <li class="px-1">/</li>
-                <li class="animate-underline">
-                    <a class="nav-link fw-normal p-0 animate-target" href="#!">Smart Home</a>
-                </li>
-                <li class="px-1">/</li>
-                <li class="animate-underline">
-                    <a class="nav-link fw-normal p-0 animate-target" href="#!">Apple Devices</a>
-                </li>
-                <li class="px-1">/</li>
-                <li class="animate-underline">
-                    <a class="nav-link fw-normal p-0 animate-target" href="#!">Tablets</a>
-                </li>
+                <x-footer-category />
             </ul>
             <ul class="nav align-items-center text-body-tertiary gap-2">
                 <li class="animate-underline">