diff --git a/app/Console/Commands/GenerateSitemap.php b/app/Console/Commands/GenerateSitemap.php
index 7e7d42dc..2e502f29 100644
--- a/app/Console/Commands/GenerateSitemap.php
+++ b/app/Console/Commands/GenerateSitemap.php
@@ -28,7 +28,7 @@ public function handle(): int
             '/blogs' => ['priority' => 0.8, 'freq' => 'daily'],
             '/forum' => ['priority' => 0.8, 'freq' => 'daily'],
             '/about-us' => ['priority' => 0.7, 'freq' => 'monthly'],
-            '/projects' => ['priority' => 0.7, 'freq' => 'monthly'],
+            '/products' => ['priority' => 0.7, 'freq' => 'monthly'],
             '/guide' => ['priority' => 0.7, 'freq' => 'monthly'],
             '/ai' => ['priority' => 0.7, 'freq' => 'monthly'],
             '/donate' => ['priority' => 0.6, 'freq' => 'monthly'],
diff --git a/app/Http/Controllers/Admin/ProductController.php b/app/Http/Controllers/Admin/ProductController.php
new file mode 100644
index 00000000..2fd66859
--- /dev/null
+++ b/app/Http/Controllers/Admin/ProductController.php
@@ -0,0 +1,109 @@
+<?php
+
+namespace App\Http\Controllers\Admin;
+
+use App\Http\Controllers\Controller;
+use App\Http\Requests\Product\StoreProductRequest;
+use App\Http\Requests\Product\UpdateProductRequest;
+use App\Models\Product;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Support\Facades\Storage;
+use Inertia\Inertia;
+use Inertia\Response;
+
+class ProductController extends Controller
+{
+    /**
+     * Display a listing of products.
+     */
+    public function index(): Response
+    {
+        $products = Product::orderBy('sort_order')
+            ->orderByDesc('id')
+            ->get();
+
+        return Inertia::render('admin/Product', [
+            'products' => $products,
+        ]);
+    }
+
+    /**
+     * Show the form for creating a new product.
+     */
+    public function create(): Response
+    {
+        return Inertia::render('admin/ProductCreateOrEdit');
+    }
+
+    /**
+     * Store a newly created product in storage.
+     */
+    public function store(StoreProductRequest $request): RedirectResponse
+    {
+        $data = $request->validated();
+
+        if ($request->hasFile('image')) {
+            $path = $request->file('image')->store('products');
+            $data['image_path'] = $path;
+        }
+
+        unset($data['image']);
+
+        Product::create($data);
+
+        return redirect()
+            ->route('admin.products.index')
+            ->with('success', 'Product created successfully.');
+    }
+
+    /**
+     * Show the form for editing the specified product.
+     */
+    public function edit(Product $product): Response
+    {
+        return Inertia::render('admin/ProductCreateOrEdit', [
+            'product' => $product,
+        ]);
+    }
+
+    /**
+     * Update the specified product in storage.
+     */
+    public function update(UpdateProductRequest $request, Product $product): RedirectResponse
+    {
+        $data = $request->validated();
+
+        if ($request->hasFile('image')) {
+            if ($product->image_path && ! str($product->image_path)->startsWith(['http://', 'https://'])) {
+                Storage::delete($product->image_path);
+            }
+
+            $path = $request->file('image')->store('products');
+            $data['image_path'] = $path;
+        }
+
+        unset($data['image']);
+
+        $product->update($data);
+
+        return redirect()
+            ->route('admin.products.index')
+            ->with('success', 'Product updated successfully.');
+    }
+
+    /**
+     * Remove the specified product from storage.
+     */
+    public function destroy(Product $product): RedirectResponse
+    {
+        if ($product->image_path && ! str($product->image_path)->startsWith(['http://', 'https://'])) {
+            Storage::delete($product->image_path);
+        }
+
+        $product->delete();
+
+        return redirect()
+            ->back()
+            ->with('success', 'Product deleted successfully.');
+    }
+}
diff --git a/app/Http/Controllers/ProductController.php b/app/Http/Controllers/ProductController.php
new file mode 100644
index 00000000..de8dd6c1
--- /dev/null
+++ b/app/Http/Controllers/ProductController.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Product;
+use Illuminate\Support\Facades\Cache;
+use Inertia\Inertia;
+use Inertia\Response;
+
+class ProductController extends Controller
+{
+    /**
+     * Display the public list of products.
+     */
+    public function index(): Response
+    {
+        $products = Cache::rememberForever('products_page_products', function () {
+            return Product::where('is_active', true)
+                ->orderBy('sort_order')
+                ->orderBy('id')
+                ->get();
+        });
+
+        return Inertia::render('Products', [
+            'products' => $products,
+        ]);
+    }
+}
diff --git a/app/Http/Requests/Product/StoreProductRequest.php b/app/Http/Requests/Product/StoreProductRequest.php
new file mode 100644
index 00000000..690ceebd
--- /dev/null
+++ b/app/Http/Requests/Product/StoreProductRequest.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Http\Requests\Product;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class StoreProductRequest extends FormRequest
+{
+    public function authorize(): bool
+    {
+        return true;
+    }
+
+    public function rules(): array
+    {
+        return [
+            'name' => ['required', 'string', 'max:255'],
+            'description' => ['required', 'string'],
+            'image' => [
+                'nullable',
+                'image',
+                'mimes:jpg,jpeg,png,webp',
+                'max:5120',
+            ],
+            'users' => ['nullable', 'string', 'max:100'],
+            'link' => ['required', 'string', 'max:255'],
+            'open_type' => ['required', 'string', 'in:_blank,_self'],
+            'button_text' => ['nullable', 'string', 'max:100'],
+            'sort_order' => ['nullable', 'integer', 'min:0'],
+            'is_active' => ['required', 'boolean'],
+        ];
+    }
+}
diff --git a/app/Http/Requests/Product/UpdateProductRequest.php b/app/Http/Requests/Product/UpdateProductRequest.php
new file mode 100644
index 00000000..465be83e
--- /dev/null
+++ b/app/Http/Requests/Product/UpdateProductRequest.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Http\Requests\Product;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class UpdateProductRequest extends FormRequest
+{
+    public function authorize(): bool
+    {
+        return true;
+    }
+
+    public function rules(): array
+    {
+        return [
+            'name' => ['required', 'string', 'max:255'],
+            'description' => ['required', 'string'],
+            'image' => [
+                'nullable',
+                'image',
+                'mimes:jpg,jpeg,png,webp',
+                'max:5120',
+            ],
+            'users' => ['nullable', 'string', 'max:100'],
+            'link' => ['required', 'string', 'max:255'],
+            'open_type' => ['required', 'string', 'in:_blank,_self'],
+            'button_text' => ['nullable', 'string', 'max:100'],
+            'sort_order' => ['nullable', 'integer', 'min:0'],
+            'is_active' => ['required', 'boolean'],
+        ];
+    }
+}
diff --git a/app/Models/Product.php b/app/Models/Product.php
new file mode 100644
index 00000000..84e331a6
--- /dev/null
+++ b/app/Models/Product.php
@@ -0,0 +1,47 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Support\Facades\Storage;
+
+class Product extends Model
+{
+    use HasFactory;
+
+    protected $fillable = [
+        'name',
+        'description',
+        'image_path',
+        'users',
+        'link',
+        'open_type',
+        'button_text',
+        'sort_order',
+        'is_active',
+    ];
+
+    protected $appends = [
+        'image_url',
+    ];
+
+    protected function casts(): array
+    {
+        return [
+            'is_active' => 'boolean',
+            'sort_order' => 'integer',
+        ];
+    }
+
+    public function getImageUrlAttribute(): ?string
+    {
+        if (! $this->image_path) {
+            return null;
+        }
+
+        return str($this->image_path)->startsWith(['http://', 'https://'])
+            ? $this->image_path
+            : Storage::url($this->image_path);
+    }
+}
diff --git a/app/Observers/ProductObserver.php b/app/Observers/ProductObserver.php
new file mode 100644
index 00000000..4a77cade
--- /dev/null
+++ b/app/Observers/ProductObserver.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Observers;
+
+use App\Models\Product;
+use Illuminate\Support\Facades\Cache;
+
+class ProductObserver
+{
+    public function saved(Product $product): void
+    {
+        Cache::forget('products_page_products');
+    }
+
+    public function deleted(Product $product): void
+    {
+        Cache::forget('products_page_products');
+    }
+}
diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php
index cbe3ca1e..0d01cd94 100644
--- a/app/Providers/AppServiceProvider.php
+++ b/app/Providers/AppServiceProvider.php
@@ -6,6 +6,7 @@
 use App\Models\Node;
 use App\Models\NodeVote;
 use App\Models\Notice;
+use App\Models\Product;
 use App\Models\Resource;
 use App\Models\Subject;
 use App\Models\User;
@@ -13,6 +14,7 @@
 use App\Observers\NodeObserver;
 use App\Observers\NodeVoteObserver;
 use App\Observers\NoticeObserver;
+use App\Observers\ProductObserver;
 use App\Observers\ResourceObserver;
 use App\Observers\SubjectObserver;
 use App\Observers\UserObserver;
@@ -43,6 +45,7 @@ public function boot(): void
         Node::observe(NodeObserver::class);
         NodeVote::observe(NodeVoteObserver::class);
         Notice::observe(NoticeObserver::class);
+        Product::observe(ProductObserver::class);
         Resource::observe(ResourceObserver::class);
         Subject::observe(SubjectObserver::class);
         User::observe(UserObserver::class);
diff --git a/database/migrations/2026_09_21_210000_create_products_table.php b/database/migrations/2026_09_21_210000_create_products_table.php
new file mode 100644
index 00000000..c4c01805
--- /dev/null
+++ b/database/migrations/2026_09_21_210000_create_products_table.php
@@ -0,0 +1,36 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('products', function (Blueprint $table) {
+            $table->id();
+            $table->string('name');
+            $table->text('description');
+            $table->string('image_path')->nullable();
+            $table->string('users')->nullable();
+            $table->string('link');
+            $table->string('open_type')->default('_blank');
+            $table->string('button_text')->nullable();
+            $table->integer('sort_order')->default(0);
+            $table->boolean('is_active')->default(true);
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('products');
+    }
+};
diff --git a/database/migrations/2026_09_21_210100_add_manage_products_permission.php b/database/migrations/2026_09_21_210100_add_manage_products_permission.php
new file mode 100644
index 00000000..3e0d3c7d
--- /dev/null
+++ b/database/migrations/2026_09_21_210100_add_manage_products_permission.php
@@ -0,0 +1,39 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Spatie\Permission\Models\Permission;
+use Spatie\Permission\Models\Role;
+use Spatie\Permission\PermissionRegistrar;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        app()[PermissionRegistrar::class]->forgetCachedPermissions();
+
+        $permission = Permission::findOrCreate('manage products', 'web');
+
+        $admin = Role::where('name', 'admin')->where('guard_name', 'web')->first();
+        if ($admin) {
+            $admin->givePermissionTo($permission);
+        }
+
+        app()[PermissionRegistrar::class]->forgetCachedPermissions();
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        app()[PermissionRegistrar::class]->forgetCachedPermissions();
+
+        $permission = Permission::where('name', 'manage products')->where('guard_name', 'web')->first();
+        $permission?->delete();
+
+        app()[PermissionRegistrar::class]->forgetCachedPermissions();
+    }
+};
diff --git a/database/seeders/RolePermissionSeeder.php b/database/seeders/RolePermissionSeeder.php
index 0329cf44..9f0019bd 100644
--- a/database/seeders/RolePermissionSeeder.php
+++ b/database/seeders/RolePermissionSeeder.php
@@ -100,6 +100,11 @@ public function run(): void
          */
         Permission::findOrCreate('manage peers');
 
+        /*
+         * Product management
+         */
+        Permission::findOrCreate('manage products');
+
         $admin->syncPermissions(Permission::all());
         // Administrators have unrestricted access to all features.
 
diff --git a/resources/js/components/Footer.vue b/resources/js/components/Footer.vue
index b1d3b6bd..ec4f6c6b 100644
--- a/resources/js/components/Footer.vue
+++ b/resources/js/components/Footer.vue
@@ -130,7 +130,7 @@ import AppLogo from './AppLogo.vue';
                             </li>
                             <li>
                                 <Link
-                                    href="/projects"
+                                    href="/products"
                                     class="inline-flex items-center gap-1.5 text-sm font-medium text-slate-600 transition-colors duration-150 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
                                 >
                                     <ExternalLink
diff --git a/resources/js/components/ProductCard.vue b/resources/js/components/ProductCard.vue
new file mode 100644
index 00000000..16510be8
--- /dev/null
+++ b/resources/js/components/ProductCard.vue
@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { Link } from '@inertiajs/vue3';
+import { ExternalLink, ArrowRight, Users, Layers } from 'lucide-vue-next';
+import { computed } from 'vue';
+
+export interface ProductItem {
+    id?: number;
+    name: string;
+    description: string;
+    image_url?: string | null;
+    image_path?: string | null;
+    users?: string | null;
+    link: string;
+    open_type?: string;
+    button_text?: string | null;
+    sort_order?: number;
+    is_active?: boolean;
+}
+
+const props = defineProps<{
+    product: ProductItem;
+}>();
+
+const displayImage = computed(() => {
+    return props.product.image_url || props.product.image_path || null;
+});
+
+const isBlank = computed(() => {
+    return (
+        props.product.open_type === '_blank' ||
+        props.product.link.startsWith('http://') ||
+        props.product.link.startsWith('https://')
+    );
+});
+
+const buttonLabel = computed(() => {
+    return props.product.button_text || `Visit ${props.product.name}`;
+});
+</script>
+
+<template>
+    <div
+        class="group flex flex-col justify-between overflow-hidden rounded-2xl border border-slate-200 bg-white p-5 shadow-xs transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md sm:p-6 dark:border-gray-800 dark:bg-gray-900 dark:hover:border-gray-700"
+    >
+        <div>
+            <!-- Image / Thumbnail -->
+            <div
+                class="aspect-[16/9] overflow-hidden rounded-xl bg-slate-100 dark:bg-gray-800"
+            >
+                <img
+                    v-if="displayImage"
+                    :src="displayImage"
+                    :alt="product.name"
+                    class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
+                    loading="lazy"
+                />
+                <div
+                    v-else
+                    class="flex h-full w-full items-center justify-center text-slate-300 dark:text-gray-600"
+                >
+                    <Layers class="h-12 w-12 stroke-[1.5]" />
+                </div>
+            </div>
+
+            <!-- Title & User Badge -->
+            <div class="mt-5 flex items-center justify-between gap-2">
+                <h2 class="text-xl font-bold text-slate-900 dark:text-gray-100">
+                    {{ product.name }}
+                </h2>
+                <span
+                    v-if="product.users"
+                    class="inline-flex items-center gap-1.5 rounded-lg bg-indigo-50 px-2.5 py-1 text-xs font-bold text-indigo-700 dark:bg-indigo-500/10 dark:text-indigo-300"
+                >
+                    <Users class="h-3.5 w-3.5" />
+                    {{ product.users }}
+                </span>
+            </div>
+
+            <!-- Description -->
+            <p
+                class="mt-2.5 text-sm leading-relaxed text-slate-600 dark:text-gray-400"
+            >
+                {{ product.description }}
+            </p>
+        </div>
+
+        <!-- Action Button -->
+        <div class="mt-6 border-t border-slate-100 pt-4 dark:border-gray-800">
+            <a
+                v-if="isBlank"
+                :href="product.link"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-bold text-white shadow-xs transition-all hover:bg-indigo-700 active:scale-98"
+            >
+                <span>{{ buttonLabel }}</span>
+                <ExternalLink class="h-4 w-4" />
+            </a>
+
+            <Link
+                v-else
+                :href="product.link"
+                class="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-bold text-white shadow-xs transition-all hover:bg-indigo-700 active:scale-98"
+            >
+                <span>{{ buttonLabel }}</span>
+                <ArrowRight class="h-4 w-4" />
+            </Link>
+        </div>
+    </div>
+</template>
diff --git a/resources/js/components/admin/ProductRow.vue b/resources/js/components/admin/ProductRow.vue
new file mode 100644
index 00000000..8540001c
--- /dev/null
+++ b/resources/js/components/admin/ProductRow.vue
@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { Link, router } from '@inertiajs/vue3';
+import {
+    Pencil,
+    Trash2,
+    ExternalLink,
+    ArrowRight,
+    Layers,
+    Users,
+} from 'lucide-vue-next';
+import StatusBadge from '@/components/StatusBadge.vue';
+import { usePermissions } from '@/lib/usePermissions';
+
+const { can } = usePermissions();
+
+const props = defineProps({
+    product: {
+        type: Object,
+        required: true,
+    },
+});
+
+const deleteProduct = () => {
+    if (confirm(`Are you sure you want to delete "${props.product.name}"?`)) {
+        router.delete(`/admin/products/${props.product.id}`);
+    }
+};
+</script>
+
+<template>
+    <div
+        class="group relative flex flex-col justify-between gap-3 rounded-xl border border-slate-100 bg-white p-3.5 transition-colors duration-150 hover:border-indigo-200 hover:bg-slate-50/50 sm:flex-row sm:items-center dark:border-gray-800 dark:bg-gray-900 dark:hover:border-indigo-500/30 dark:hover:bg-gray-800/40"
+    >
+        <div class="flex min-w-0 flex-1 items-start gap-3.5 sm:items-center">
+            <!-- Thumbnail / Icon -->
+            <div
+                class="h-14 w-20 shrink-0 overflow-hidden rounded-lg border border-black/5 bg-slate-100 dark:border-white/10 dark:bg-gray-800"
+            >
+                <img
+                    v-if="product.image_url || product.image_path"
+                    :src="product.image_url || product.image_path"
+                    :alt="product.name"
+                    class="h-full w-full object-cover"
+                />
+                <div
+                    v-else
+                    class="flex h-full w-full items-center justify-center text-slate-400 dark:text-gray-500"
+                >
+                    <Layers class="h-5 w-5 stroke-[1.8]" />
+                </div>
+            </div>
+
+            <!-- Details -->
+            <div class="flex min-w-0 flex-1 flex-col">
+                <div class="flex flex-wrap items-center gap-2">
+                    <h4
+                        class="text-sm font-semibold break-words text-slate-900 dark:text-gray-100"
+                    >
+                        {{ product.name }}
+                    </h4>
+
+                    <span
+                        v-if="product.users"
+                        class="inline-flex items-center gap-1 rounded-md bg-indigo-50 px-2 py-0.5 text-[11px] font-bold text-indigo-700 dark:bg-indigo-500/10 dark:text-indigo-300"
+                    >
+                        <Users class="h-3 w-3" />
+                        {{ product.users }}
+                    </span>
+
+                    <StatusBadge
+                        :status="product.is_active ? 'published' : 'draft'"
+                        size="xs"
+                    />
+
+                    <span
+                        class="inline-flex items-center gap-1 rounded-md bg-slate-100 px-1.5 py-0.5 text-[10px] font-medium text-slate-600 dark:bg-gray-800 dark:text-gray-400"
+                    >
+                        {{
+                            product.open_type === '_blank'
+                                ? 'New Tab (_blank)'
+                                : 'Same Tab (_self)'
+                        }}
+                    </span>
+
+                    <span
+                        v-if="
+                            product.sort_order !== undefined &&
+                            product.sort_order !== null
+                        "
+                        class="text-[10px] text-slate-400 dark:text-gray-500"
+                    >
+                        Sort Order: {{ product.sort_order }}
+                    </span>
+                </div>
+
+                <p
+                    class="mt-1 line-clamp-1 text-xs text-slate-500 dark:text-gray-400"
+                >
+                    {{ product.description }}
+                </p>
+
+                <div
+                    class="mt-1 flex items-center gap-1 text-xs text-indigo-600 dark:text-indigo-400"
+                >
+                    <span class="max-w-xs truncate font-mono text-[11px]">{{
+                        product.link
+                    }}</span>
+                    <ExternalLink
+                        v-if="product.open_type === '_blank'"
+                        class="h-3 w-3 shrink-0"
+                    />
+                    <ArrowRight v-else class="h-3 w-3 shrink-0" />
+                </div>
+            </div>
+        </div>
+
+        <!-- Right: Actions -->
+        <div
+            v-if="can('manage products')"
+            class="flex shrink-0 items-center justify-end gap-1 border-t border-slate-100 pt-2 sm:border-t-0 sm:pt-0 dark:border-gray-800"
+        >
+            <Link
+                :href="`/admin/products/edit/${product.id}`"
+                class="rounded-lg p-2 text-slate-400 transition-colors hover:bg-slate-100 hover:text-indigo-600 dark:text-gray-500 dark:hover:bg-gray-800 dark:hover:text-indigo-400"
+                title="Edit product"
+            >
+                <Pencil class="h-4 w-4" :stroke-width="1.8" />
+            </Link>
+
+            <button
+                @click="deleteProduct"
+                type="button"
+                class="rounded-lg p-2 text-slate-400 transition-colors hover:bg-rose-50 hover:text-rose-600 dark:text-gray-500 dark:hover:bg-rose-500/10 dark:hover:text-rose-400"
+                title="Delete product"
+            >
+                <Trash2 class="h-4 w-4" :stroke-width="1.8" />
+            </button>
+        </div>
+    </div>
+</template>
diff --git a/resources/js/components/navigation/Navigation.tsx b/resources/js/components/navigation/Navigation.tsx
index 9ca53043..b4968ba7 100644
--- a/resources/js/components/navigation/Navigation.tsx
+++ b/resources/js/components/navigation/Navigation.tsx
@@ -102,6 +102,7 @@ function getCollapsedAdminLabel(name: string): string {
     const map: Record<string, string> = {
         'Manage Contents': 'Contents',
         'Manage Blogs': 'Blogs',
+        'Manage Products': 'Products',
         'Manage Forum': 'Forum',
         'Support Tickets': 'Support',
         'Site Notice': 'Notice',
@@ -523,10 +524,10 @@ export const SiteRail = defineComponent({
                                             )}
                                         </Link>
                                         <Link
-                                            href="/projects"
+                                            href="/products"
                                             class={[
                                                 'group flex h-10 items-center gap-3 rounded-[10px] px-3 text-[13px] font-medium tracking-tight transition-colors duration-150',
-                                                isActive('/projects')
+                                                isActive('/products')
                                                     ? 'bg-indigo-50 text-indigo-700 ring-1 ring-indigo-200/60 dark:bg-indigo-500/10 dark:text-indigo-200 dark:ring-indigo-500/20'
                                                     : 'text-slate-600 hover:bg-slate-100/80 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800/70 dark:hover:text-slate-100',
                                             ]}
@@ -535,7 +536,7 @@ export const SiteRail = defineComponent({
                                                 name="apps"
                                                 size={22}
                                                 class={`shrink-0 transition-colors duration-150 ${
-                                                    isActive('/projects')
+                                                    isActive('/products')
                                                         ? 'text-indigo-600 dark:text-indigo-300'
                                                         : 'text-slate-500 group-hover:text-slate-700 dark:text-slate-500 dark:group-hover:text-slate-300'
                                                 }`}
@@ -543,7 +544,7 @@ export const SiteRail = defineComponent({
                                             <span class="truncate">
                                                 More From Us
                                             </span>
-                                            {isActive('/projects') && (
+                                            {isActive('/products') && (
                                                 <span class="ml-auto h-1.5 w-1.5 shrink-0 rounded-full bg-indigo-600 dark:bg-indigo-400" />
                                             )}
                                         </Link>
@@ -1231,11 +1232,11 @@ export const SiteDrawer = defineComponent({
                                                     )}
                                                 </Link>
                                                 <Link
-                                                    href="/projects"
+                                                    href="/products"
                                                     onClick={close}
                                                     class={[
                                                         'group flex items-center gap-2.5 rounded-[10px] px-2.5 py-2 text-[13px] font-medium tracking-tight transition-all duration-150 ease-out',
-                                                        isActive('/projects')
+                                                        isActive('/products')
                                                             ? 'bg-indigo-50 text-indigo-700 ring-1 ring-indigo-200/60 dark:bg-indigo-500/10 dark:text-indigo-200 dark:ring-indigo-500/20'
                                                             : 'text-slate-600 hover:bg-slate-100/80 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800/70 dark:hover:text-slate-100',
                                                     ]}
@@ -1245,7 +1246,7 @@ export const SiteDrawer = defineComponent({
                                                         size={22}
                                                         class={`shrink-0 transition-colors duration-150 ${
                                                             isActive(
-                                                                '/projects',
+                                                                '/products',
                                                             )
                                                                 ? 'text-indigo-600 dark:text-indigo-300'
                                                                 : 'text-slate-500 group-hover:text-slate-700 dark:text-slate-500 dark:group-hover:text-slate-300'
@@ -1254,7 +1255,7 @@ export const SiteDrawer = defineComponent({
                                                     <span class="truncate">
                                                         More From Us
                                                     </span>
-                                                    {isActive('/projects') && (
+                                                    {isActive('/products') && (
                                                         <span class="ml-auto h-1.5 w-1.5 shrink-0 rounded-full bg-indigo-600 dark:bg-indigo-400" />
                                                     )}
                                                 </Link>
diff --git a/resources/js/layouts/AdminLayout.vue b/resources/js/layouts/AdminLayout.vue
index 3eddbcde..996596a7 100644
--- a/resources/js/layouts/AdminLayout.vue
+++ b/resources/js/layouts/AdminLayout.vue
@@ -45,6 +45,12 @@ const allNavigation: AdminNavItem[] = [
     { name: 'Dashboard', to: '/admin', icon: 'dashboard' },
     { name: 'Manage Contents', to: '/admin/subjects', icon: 'menu_book' },
     { name: 'Manage Blogs', to: '/admin/blogs', icon: 'book' },
+    {
+        name: 'Manage Products',
+        to: '/admin/products',
+        icon: 'inventory_2',
+        permission: 'manage products',
+    },
     {
         name: 'Manage Forum',
         to: '/admin/forums',
diff --git a/resources/js/pages/Products.vue b/resources/js/pages/Products.vue
new file mode 100644
index 00000000..a94369c8
--- /dev/null
+++ b/resources/js/pages/Products.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { Head } from '@inertiajs/vue3';
+import ProductCard from '@/components/ProductCard.vue';
+import type { ProductItem } from '@/components/ProductCard.vue';
+
+defineProps<{
+    products: ProductItem[];
+}>();
+</script>
+
+<template>
+    <Head>
+        <title>Our Products & Open Source Projects</title>
+        <meta
+            name="description"
+            content="Explore educational platforms, open-source web applications, and learning tools developed by the HSCStack team."
+        />
+        <meta
+            property="og:title"
+            content="Our Products & Open Source Projects - HSCStack"
+        />
+        <meta
+            property="og:description"
+            content="Explore educational platforms, open-source web applications, and learning tools developed by the HSCStack team."
+        />
+    </Head>
+
+    <header
+        class="mx-auto max-w-4xl px-4 pt-8 pb-6 text-center sm:pt-12 sm:pb-10"
+    >
+        <h1
+            class="mb-3 text-3xl font-black tracking-tight text-slate-950 sm:text-5xl dark:text-gray-100"
+        >
+            Our
+            <span class="text-indigo-600 dark:text-indigo-400">Products</span>
+        </h1>
+
+        <p
+            class="mx-auto max-w-md text-sm font-medium text-slate-500 dark:text-gray-400"
+        >
+            Explore platforms and tools built by HSCStack
+        </p>
+    </header>
+
+    <main class="mx-auto max-w-5xl px-4 pb-20 sm:px-6">
+        <div
+            v-if="products && products.length > 0"
+            class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:gap-8"
+        >
+            <ProductCard
+                v-for="product in products"
+                :key="product.id || product.name"
+                :product="product"
+            />
+        </div>
+
+        <div
+            v-else
+            class="rounded-2xl border border-slate-200 bg-white p-12 text-center shadow-xs dark:border-gray-800 dark:bg-gray-900"
+        >
+            <p class="text-sm font-medium text-slate-500 dark:text-gray-400">
+                No products are currently available. Check back soon!
+            </p>
+        </div>
+    </main>
+</template>
diff --git a/resources/js/pages/Projects.vue b/resources/js/pages/Projects.vue
deleted file mode 100644
index b6520eea..00000000
--- a/resources/js/pages/Projects.vue
+++ /dev/null
@@ -1,147 +0,0 @@
-<script setup lang="ts">
-import { Head, Link } from '@inertiajs/vue3';
-import { ExternalLink, ArrowRight, Users } from 'lucide-vue-next';
-</script>
-
-<template>
-    <Head>
-        <title>Our Products & Open Source Projects</title>
-        <meta
-            name="description"
-            content="Explore educational platforms, open-source web applications, and learning tools developed by the HSCStack team."
-        />
-        <meta
-            property="og:title"
-            content="Our Products & Open Source Projects - HSCStack"
-        />
-        <meta
-            property="og:description"
-            content="Explore educational platforms, open-source web applications, and learning tools developed by the HSCStack team."
-        />
-    </Head>
-
-    <header
-        class="mx-auto max-w-4xl px-4 pt-8 pb-6 text-center sm:pt-12 sm:pb-10"
-    >
-        <h1
-            class="mb-3 text-3xl font-black tracking-tight text-slate-950 sm:text-5xl dark:text-gray-100"
-        >
-            Our
-            <span class="text-indigo-600 dark:text-indigo-400">Products</span>
-        </h1>
-
-        <p
-            class="mx-auto max-w-md text-sm font-medium text-slate-500 dark:text-gray-400"
-        >
-            Explore platforms and tools built by HSCStack
-        </p>
-    </header>
-
-    <main class="mx-auto max-w-5xl px-4 pb-20 sm:px-6">
-        <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:gap-8">
-            <!-- Product 1: Main Platform -->
-            <div
-                class="group flex flex-col justify-between overflow-hidden rounded-2xl border border-slate-200 bg-white p-5 shadow-xs transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md sm:p-6 dark:border-gray-800 dark:bg-gray-900 dark:hover:border-gray-700"
-            >
-                <div>
-                    <div
-                        class="aspect-[16/9] overflow-hidden rounded-xl bg-slate-100 dark:bg-gray-800"
-                    >
-                        <img
-                            src="https://cdn.hscstack.site/images/og.png"
-                            alt="HSCStack Main Platform"
-                            class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
-                        />
-                    </div>
-
-                    <div class="mt-5 flex items-center justify-between gap-2">
-                        <h2
-                            class="text-xl font-bold text-slate-900 dark:text-gray-100"
-                        >
-                            HSCStack
-                        </h2>
-                        <span
-                            class="inline-flex items-center gap-1.5 rounded-lg bg-indigo-50 px-2.5 py-1 text-xs font-bold text-indigo-700 dark:bg-indigo-500/10 dark:text-indigo-300"
-                        >
-                            <Users class="h-3.5 w-3.5" />
-                            640+ Users
-                        </span>
-                    </div>
-
-                    <p
-                        class="mt-2.5 text-sm leading-relaxed text-slate-600 dark:text-gray-400"
-                    >
-                        HSC ও SSC শিক্ষার্থীদের পড়াশোনা গোছানোর জন্য সম্পূর্ণ
-                        ফ্রি ও পরিচ্ছন্ন স্টাডি রিপোজিটরি। বিষয় ও অধ্যায়ভিত্তিক
-                        হ্যান্ডনোট, লেকচার ক্লাস ও রিসোর্স।
-                    </p>
-                </div>
-
-                <div
-                    class="mt-6 border-t border-slate-100 pt-4 dark:border-gray-800"
-                >
-                    <Link
-                        href="/"
-                        class="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-bold text-white shadow-xs transition-all hover:bg-indigo-700 active:scale-98"
-                    >
-                        <span>Visit Platform</span>
-                        <ArrowRight class="h-4 w-4" />
-                    </Link>
-                </div>
-            </div>
-
-            <!-- Product 2: ResultRank -->
-            <div
-                class="group flex flex-col justify-between overflow-hidden rounded-2xl border border-slate-200 bg-white p-5 shadow-xs transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md sm:p-6 dark:border-gray-800 dark:bg-gray-900 dark:hover:border-gray-700"
-            >
-                <div>
-                    <div
-                        class="aspect-[16/9] overflow-hidden rounded-xl bg-slate-100 dark:bg-gray-800"
-                    >
-                        <img
-                            src="https://cdn.hscstack.site/images/og_resultrank.png"
-                            alt="ResultRank"
-                            class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
-                        />
-                    </div>
-
-                    <div class="mt-5 flex items-center justify-between gap-2">
-                        <h2
-                            class="text-xl font-bold text-slate-900 dark:text-gray-100"
-                        >
-                            ResultStack
-                        </h2>
-                        <span
-                            class="inline-flex items-center gap-1.5 rounded-lg bg-blue-50 px-2.5 py-1 text-xs font-bold text-blue-700 dark:bg-blue-500/10 dark:text-blue-300"
-                        >
-                            <Users class="h-3.5 w-3.5" />
-                            6600+ Users
-                        </span>
-                    </div>
-
-                    <p
-                        class="mt-2.5 text-sm leading-relaxed text-slate-600 dark:text-gray-400"
-                    >
-                        বাংলাদেশের সকল শিক্ষা বোর্ডের মেধা তালিকা, সেরা
-                        প্রতিষ্ঠান ও বিস্তারিত GPA পরিসংখ্যান বিশ্লেষণ করুন একটি
-                        সমন্বিত প্ল্যাটফর্মে।
-                    </p>
-                </div>
-
-                <div
-                    class="mt-6 border-t border-slate-100 pt-4 dark:border-gray-800"
-                >
-                    <a
-                        href="https://resultstack.hscstack.site"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        class="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-blue-600 px-4 py-2.5 text-sm font-bold text-white shadow-xs transition-all hover:bg-blue-700 active:scale-98"
-                    >
-                        <span>Visit ResultStack</span>
-                        <ExternalLink class="h-4 w-4" />
-                    </a>
-                </div>
-            </div>
-        </div>
-    </main>
-</template>
diff --git a/resources/js/pages/admin/Product.vue b/resources/js/pages/admin/Product.vue
new file mode 100644
index 00000000..7dac5085
--- /dev/null
+++ b/resources/js/pages/admin/Product.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { Head, Link } from '@inertiajs/vue3';
+import { Plus } from 'lucide-vue-next';
+import ProductRow from '@/components/admin/ProductRow.vue';
+import EmptyState from '@/components/EmptyState.vue';
+import { usePermissions } from '@/lib/usePermissions';
+
+const { can } = usePermissions();
+
+defineProps({
+    products: {
+        type: Array as () => any[],
+        default: () => [],
+    },
+});
+</script>
+
+<template>
+    <Head title="Manage Products" />
+
+    <div class="flex w-full flex-1 flex-col">
+        <!-- Compact Page Title Bar -->
+        <div
+            class="mb-4 flex shrink-0 items-center justify-between gap-3 border-b border-slate-100 pb-3 dark:border-gray-800"
+        >
+            <div class="flex min-w-0 items-center gap-2.5">
+                <h3
+                    class="truncate text-base font-bold tracking-tight text-slate-900 dark:text-gray-100"
+                >
+                    Manage Products
+                </h3>
+
+                <span
+                    class="inline-flex items-center rounded-md bg-indigo-50 px-2 py-0.5 text-[11px] font-bold text-indigo-700 dark:bg-indigo-500/10 dark:text-indigo-400"
+                >
+                    {{ products.length }}
+                </span>
+            </div>
+
+            <div v-if="can('manage products')" class="flex items-center gap-2">
+                <Link
+                    href="/admin/products/create"
+                    class="inline-flex items-center gap-1.5 rounded-lg bg-indigo-600 px-3 py-1.5 text-xs font-semibold text-white shadow-2xs transition-colors duration-150 hover:bg-indigo-700"
+                >
+                    <Plus class="h-3.5 w-3.5" :stroke-width="2.2" />
+                    <span>Create Product</span>
+                </Link>
+            </div>
+        </div>
+
+        <div class="flex flex-1 flex-col">
+            <div v-if="products.length > 0" class="flex flex-col gap-3">
+                <ProductRow
+                    v-for="product in products"
+                    :key="product.id"
+                    :product="product"
+                />
+            </div>
+
+            <EmptyState
+                v-else
+                title="No products found"
+                description="No products have been added yet."
+                :show-cta="false"
+            />
+        </div>
+    </div>
+</template>
diff --git a/resources/js/pages/admin/ProductCreateOrEdit.vue b/resources/js/pages/admin/ProductCreateOrEdit.vue
new file mode 100644
index 00000000..20f09a83
--- /dev/null
+++ b/resources/js/pages/admin/ProductCreateOrEdit.vue
@@ -0,0 +1,347 @@
+<script setup lang="ts">
+import { Head, Link, useForm } from '@inertiajs/vue3';
+import { ArrowLeft, Loader2, Save } from 'lucide-vue-next';
+import ImageUpload from '@/components/ImageUpload.vue';
+
+const props = defineProps({
+    product: {
+        type: Object,
+        default: null,
+    },
+});
+
+const form = useForm({
+    name: props.product?.name || '',
+    description: props.product?.description || '',
+    image: null as File | null,
+    users: props.product?.users || '',
+    link: props.product?.link || '',
+    open_type: props.product?.open_type || '_blank',
+    button_text: props.product?.button_text || '',
+    sort_order: props.product?.sort_order ?? 0,
+    is_active: Boolean(props.product?.is_active ?? true),
+});
+
+const submitForm = () => {
+    if (props.product) {
+        form.post(`/admin/products/edit/${props.product.id}/patch`, {
+            preserveScroll: true,
+            forceFormData: true,
+        });
+    } else {
+        form.post('/admin/products', {
+            preserveScroll: true,
+            forceFormData: true,
+        });
+    }
+};
+</script>
+
+<template>
+    <Head :title="product ? `Edit ${product.name}` : 'Create Product'" />
+
+    <div class="flex w-full flex-1 flex-col">
+        <!-- Page Header -->
+        <div
+            class="mb-6 flex flex-col justify-between gap-4 border-b border-slate-200 pb-5 sm:flex-row sm:items-center dark:border-gray-800"
+        >
+            <div class="flex items-center gap-3">
+                <Link
+                    href="/admin/products"
+                    class="rounded-lg p-1.5 text-slate-500 transition hover:bg-slate-100 hover:text-slate-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100"
+                    title="Back to products"
+                >
+                    <ArrowLeft class="h-5 w-5" />
+                </Link>
+                <div>
+                    <h1
+                        class="text-xl font-bold text-slate-900 dark:text-gray-100"
+                    >
+                        {{ props.product ? 'Edit' : 'Create' }} Product
+                    </h1>
+                    <p class="mt-0.5 text-xs text-slate-500 dark:text-gray-400">
+                        Configure showcase products displayed on the /products
+                        page.
+                    </p>
+                </div>
+            </div>
+        </div>
+
+        <form @submit.prevent="submitForm" class="space-y-6">
+            <!-- Name & Users Badge -->
+            <div class="grid grid-cols-1 gap-5 md:grid-cols-2">
+                <div>
+                    <label
+                        for="name"
+                        class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
+                    >
+                        Product Name <span class="text-rose-500">*</span>
+                    </label>
+                    <input
+                        v-model="form.name"
+                        type="text"
+                        id="name"
+                        required
+                        placeholder="e.g. ResultStack or HSCStack"
+                        class="w-full rounded-lg border bg-white px-3.5 py-2.5 text-sm text-slate-900 transition outline-none placeholder:text-slate-400 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500"
+                        :class="
+                            form.errors.name
+                                ? 'border-rose-500 focus:ring-2 focus:ring-rose-500/20'
+                                : 'border-slate-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 dark:border-gray-700'
+                        "
+                    />
+                    <p
+                        v-if="form.errors.name"
+                        class="mt-1 text-xs text-rose-600"
+                    >
+                        {{ form.errors.name }}
+                    </p>
+                </div>
+
+                <div>
+                    <label
+                        for="users"
+                        class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
+                    >
+                        Users Badge (Optional)
+                    </label>
+                    <input
+                        v-model="form.users"
+                        type="text"
+                        id="users"
+                        placeholder="e.g. 640+ Users or 10k+ Learners"
+                        class="w-full rounded-lg border bg-white px-3.5 py-2.5 text-sm text-slate-900 transition outline-none placeholder:text-slate-400 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500"
+                        :class="
+                            form.errors.users
+                                ? 'border-rose-500 focus:ring-2 focus:ring-rose-500/20'
+                                : 'border-slate-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 dark:border-gray-700'
+                        "
+                    />
+                    <p
+                        v-if="form.errors.users"
+                        class="mt-1 text-xs text-rose-600"
+                    >
+                        {{ form.errors.users }}
+                    </p>
+                </div>
+            </div>
+
+            <!-- Description -->
+            <div>
+                <label
+                    for="description"
+                    class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
+                >
+                    Description <span class="text-rose-500">*</span>
+                </label>
+                <textarea
+                    v-model="form.description"
+                    id="description"
+                    rows="3"
+                    required
+                    placeholder="Short description highlighting what this product does..."
+                    class="w-full rounded-lg border bg-white px-3.5 py-2.5 text-sm text-slate-900 transition outline-none placeholder:text-slate-400 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500"
+                    :class="
+                        form.errors.description
+                            ? 'border-rose-500 focus:ring-2 focus:ring-rose-500/20'
+                            : 'border-slate-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 dark:border-gray-700'
+                    "
+                ></textarea>
+                <p
+                    v-if="form.errors.description"
+                    class="mt-1 text-xs text-rose-600"
+                >
+                    {{ form.errors.description }}
+                </p>
+            </div>
+
+            <!-- Link, Open Type & Button Text -->
+            <div class="grid grid-cols-1 gap-5 md:grid-cols-3">
+                <div class="md:col-span-1">
+                    <label
+                        for="link"
+                        class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
+                    >
+                        Link URL <span class="text-rose-500">*</span>
+                    </label>
+                    <input
+                        v-model="form.link"
+                        type="text"
+                        id="link"
+                        required
+                        placeholder="e.g. / or https://example.com"
+                        class="w-full rounded-lg border bg-white px-3.5 py-2.5 text-sm text-slate-900 transition outline-none placeholder:text-slate-400 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500"
+                        :class="
+                            form.errors.link
+                                ? 'border-rose-500 focus:ring-2 focus:ring-rose-500/20'
+                                : 'border-slate-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 dark:border-gray-700'
+                        "
+                    />
+                    <p
+                        v-if="form.errors.link"
+                        class="mt-1 text-xs text-rose-600"
+                    >
+                        {{ form.errors.link }}
+                    </p>
+                </div>
+
+                <div>
+                    <label
+                        for="open_type"
+                        class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
+                    >
+                        Open Type <span class="text-rose-500">*</span>
+                    </label>
+                    <select
+                        v-model="form.open_type"
+                        id="open_type"
+                        class="w-full rounded-lg border bg-white px-3.5 py-2.5 text-sm text-slate-900 transition outline-none dark:bg-gray-900 dark:text-gray-100"
+                        :class="
+                            form.errors.open_type
+                                ? 'border-rose-500 focus:ring-2 focus:ring-rose-500/20'
+                                : 'border-slate-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 dark:border-gray-700'
+                        "
+                    >
+                        <option value="_blank">New Tab (_blank)</option>
+                        <option value="_self">Same Page (_self)</option>
+                    </select>
+                    <p
+                        v-if="form.errors.open_type"
+                        class="mt-1 text-xs text-rose-600"
+                    >
+                        {{ form.errors.open_type }}
+                    </p>
+                </div>
+
+                <div>
+                    <label
+                        for="button_text"
+                        class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
+                    >
+                        Button Text (Optional)
+                    </label>
+                    <input
+                        v-model="form.button_text"
+                        type="text"
+                        id="button_text"
+                        placeholder="e.g. Visit Platform"
+                        class="w-full rounded-lg border bg-white px-3.5 py-2.5 text-sm text-slate-900 transition outline-none placeholder:text-slate-400 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500"
+                        :class="
+                            form.errors.button_text
+                                ? 'border-rose-500 focus:ring-2 focus:ring-rose-500/20'
+                                : 'border-slate-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 dark:border-gray-700'
+                        "
+                    />
+                    <p
+                        v-if="form.errors.button_text"
+                        class="mt-1 text-xs text-rose-600"
+                    >
+                        {{ form.errors.button_text }}
+                    </p>
+                </div>
+            </div>
+
+            <!-- Image Upload Section -->
+            <div>
+                <ImageUpload
+                    v-model="form.image"
+                    :current-image-url="
+                        product?.image_url || product?.image_path
+                    "
+                    label="Product Banner Image"
+                    help-text="16:9 banner image recommended (JPG, PNG, WebP)"
+                    shape="rectangle"
+                />
+                <p
+                    v-if="form.errors.image"
+                    class="mt-1.5 text-xs text-rose-600"
+                >
+                    {{ form.errors.image }}
+                </p>
+            </div>
+
+            <!-- Order & Active Status -->
+            <div class="grid grid-cols-1 gap-5 md:grid-cols-2">
+                <div>
+                    <label
+                        for="sort_order"
+                        class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
+                    >
+                        Sort Order
+                    </label>
+                    <input
+                        v-model.number="form.sort_order"
+                        type="number"
+                        id="sort_order"
+                        min="0"
+                        placeholder="0"
+                        class="w-full rounded-lg border bg-white px-3.5 py-2.5 text-sm text-slate-900 transition outline-none placeholder:text-slate-400 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500"
+                        :class="
+                            form.errors.sort_order
+                                ? 'border-rose-500 focus:ring-2 focus:ring-rose-500/20'
+                                : 'border-slate-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 dark:border-gray-700'
+                        "
+                    />
+                    <p
+                        v-if="form.errors.sort_order"
+                        class="mt-1 text-xs text-rose-600"
+                    >
+                        {{ form.errors.sort_order }}
+                    </p>
+                </div>
+
+                <div class="flex items-end">
+                    <label
+                        class="flex w-full cursor-pointer items-center justify-between rounded-xl border border-slate-200 bg-slate-50/60 p-3.5 transition dark:border-gray-800 dark:bg-gray-800/40"
+                    >
+                        <div>
+                            <span
+                                class="text-sm font-semibold text-slate-900 dark:text-gray-100"
+                            >
+                                Active & Visible
+                            </span>
+                            <p
+                                class="text-xs text-slate-500 dark:text-gray-400"
+                            >
+                                Make this product visible on the public
+                                /products showcase.
+                            </p>
+                        </div>
+                        <input
+                            v-model="form.is_active"
+                            type="checkbox"
+                            class="h-5 w-5 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-900"
+                        />
+                    </label>
+                </div>
+            </div>
+
+            <!-- Submit Button -->
+            <div
+                class="flex items-center justify-end gap-3 border-t border-slate-200 pt-5 dark:border-gray-800"
+            >
+                <Link
+                    href="/admin/products"
+                    class="rounded-lg border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-100 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
+                >
+                    Cancel
+                </Link>
+
+                <button
+                    type="submit"
+                    :disabled="form.processing"
+                    class="inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-5 py-2 text-sm font-bold text-white shadow-xs transition hover:bg-indigo-700 active:scale-98 disabled:opacity-70"
+                >
+                    <Loader2
+                        v-if="form.processing"
+                        class="h-4 w-4 animate-spin"
+                    />
+                    <Save v-else class="h-4 w-4" />
+                    <span>{{
+                        props.product ? 'Update Product' : 'Create Product'
+                    }}</span>
+                </button>
+            </div>
+        </form>
+    </div>
+</template>
diff --git a/routes/admin.php b/routes/admin.php
index 6b44d211..371fd10d 100644
--- a/routes/admin.php
+++ b/routes/admin.php
@@ -8,6 +8,7 @@
 use App\Http\Controllers\Admin\NodeController as AdminNodeController;
 use App\Http\Controllers\Admin\NoticeController as AdminNoticeController;
 use App\Http\Controllers\Admin\PeerSettingsController;
+use App\Http\Controllers\Admin\ProductController as AdminProductController;
 use App\Http\Controllers\Admin\ResourceController as AdminResourceController;
 use App\Http\Controllers\Admin\SubjectController as AdminSubjectController;
 use App\Http\Controllers\Admin\SupportTicketController as AdminSupportTicketController;
@@ -153,3 +154,13 @@
     Route::get('/peers/settings', [PeerSettingsController::class, 'edit'])->name('peers.settings.edit');
     Route::post('/peers/settings', [PeerSettingsController::class, 'update'])->name('peers.settings.update');
 });
+
+// Products
+Route::middleware('permission:manage products')->group(function () {
+    Route::get('/products', [AdminProductController::class, 'index'])->name('products.index');
+    Route::get('/products/create', [AdminProductController::class, 'create'])->name('products.create');
+    Route::post('/products', [AdminProductController::class, 'store'])->name('products.store');
+    Route::get('/products/edit/{product}', [AdminProductController::class, 'edit'])->name('products.edit');
+    Route::match(['patch', 'post'], '/products/edit/{product}/patch', [AdminProductController::class, 'update'])->name('products.update');
+    Route::delete('/products/{product}', [AdminProductController::class, 'destroy'])->name('products.destroy');
+});
diff --git a/routes/web.php b/routes/web.php
index 4981bced..aee68ccd 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -10,6 +10,7 @@
 use App\Http\Controllers\NodeController;
 use App\Http\Controllers\NotificationController;
 use App\Http\Controllers\PeerController;
+use App\Http\Controllers\ProductController;
 use App\Http\Controllers\ProfileController;
 use App\Http\Controllers\ResourceController;
 use App\Http\Controllers\ShortUrlController;
@@ -98,7 +99,8 @@
     Route::inertia('/join', 'platform/JoinTeam');
     Route::inertia('/guide', 'ContributorGuide');
     Route::inertia('/ai', 'ai/Index');
-    Route::inertia('/projects', 'Projects');
+    Route::get('/products', [ProductController::class, 'index'])->name('products.index');
+    Route::permanentRedirect('/projects', '/products');
 
     Route::get('/about-us', [AboutUsController::class, 'index']);
 
diff --git a/tests/Feature/ProductTest.php b/tests/Feature/ProductTest.php
new file mode 100644
index 00000000..0c2a28f8
--- /dev/null
+++ b/tests/Feature/ProductTest.php
@@ -0,0 +1,157 @@
+<?php
+
+use App\Models\Product;
+use App\Models\User;
+use Illuminate\Http\UploadedFile;
+use Illuminate\Support\Facades\Cache;
+use Illuminate\Support\Facades\Storage;
+use Inertia\Testing\AssertableInertia;
+
+test('the products page renders dynamic products from database', function () {
+    Product::create([
+        'name' => 'Demo Platform',
+        'description' => 'Demo description',
+        'link' => 'https://example.com',
+        'open_type' => '_blank',
+        'users' => '500+ Users',
+        'is_active' => true,
+        'sort_order' => 1,
+    ]);
+
+    Product::create([
+        'name' => 'Inactive Platform',
+        'description' => 'Inactive description',
+        'link' => 'https://example.com/inactive',
+        'open_type' => '_self',
+        'is_active' => false,
+        'sort_order' => 2,
+    ]);
+
+    $response = $this->get('/products');
+
+    $response->assertStatus(200);
+    $response->assertInertia(fn (AssertableInertia $page) => $page
+        ->component('Products')
+        ->has('products', 1)
+        ->where('products.0.name', 'Demo Platform')
+    );
+});
+
+test('products page products are cached forever and cleared on create, update, and delete', function () {
+    Cache::forget('products_page_products');
+
+    expect(Cache::has('products_page_products'))->toBeFalse();
+
+    $this->get('/products')->assertStatus(200);
+
+    expect(Cache::has('products_page_products'))->toBeTrue();
+
+    // Invalidate on create
+    $product = Product::create([
+        'name' => 'New Product',
+        'description' => 'New description',
+        'link' => 'https://newproduct.com',
+        'open_type' => '_blank',
+        'is_active' => true,
+    ]);
+
+    expect(Cache::has('products_page_products'))->toBeFalse();
+
+    // Re-cache
+    $this->get('/products')->assertStatus(200);
+    expect(Cache::has('products_page_products'))->toBeTrue();
+
+    // Invalidate on update
+    $product->update(['name' => 'Renamed Product']);
+    expect(Cache::has('products_page_products'))->toBeFalse();
+
+    // Re-cache
+    $this->get('/products')->assertStatus(200);
+    expect(Cache::has('products_page_products'))->toBeTrue();
+
+    // Invalidate on delete
+    $product->delete();
+    expect(Cache::has('products_page_products'))->toBeFalse();
+});
+
+test('unauthorized users cannot access admin products management', function () {
+    $user = User::factory()->create();
+
+    $response = $this->actingAs($user)->get('/admin/products');
+    $response->assertStatus(302);
+    $response->assertSessionHas('error', 'You do not have permission to perform this action.');
+
+    $userWithAdmin = adminUserWithPermissions(['view admin']);
+    $response = $this->actingAs($userWithAdmin)->get('/admin/products');
+    $response->assertStatus(302);
+    $response->assertSessionHas('error', 'You do not have permission to perform this action.');
+});
+
+test('users with manage products permission can manage products in admin panel', function () {
+    Storage::fake();
+
+    $adminUser = adminUserWithPermissions(['view admin', 'manage products']);
+
+    // List products
+    $response = $this->actingAs($adminUser)->get('/admin/products');
+    $response->assertStatus(200);
+    $response->assertInertia(fn (AssertableInertia $page) => $page
+        ->component('admin/Product')
+        ->has('products')
+    );
+
+    // Show create form
+    $this->actingAs($adminUser)->get('/admin/products/create')->assertStatus(200);
+
+    // Store product
+    $file = UploadedFile::fake()->image('banner.png', 800, 450);
+
+    $storeResponse = $this->actingAs($adminUser)->post('/admin/products', [
+        'name' => 'Test Product',
+        'description' => 'A great new platform.',
+        'image' => $file,
+        'users' => '1000+ Users',
+        'link' => 'https://testplatform.com',
+        'open_type' => '_blank',
+        'button_text' => 'Launch Test',
+        'sort_order' => 1,
+        'is_active' => true,
+    ]);
+
+    $storeResponse->assertRedirect(route('admin.products.index'));
+
+    $product = Product::where('name', 'Test Product')->first();
+    expect($product)->not->toBeNull()
+        ->and($product->users)->toBe('1000+ Users')
+        ->and($product->open_type)->toBe('_blank')
+        ->and($product->button_text)->toBe('Launch Test')
+        ->and($product->sort_order)->toBe(1);
+
+    Storage::assertExists($product->image_path);
+
+    // Show edit form
+    $this->actingAs($adminUser)->get("/admin/products/edit/{$product->id}")->assertStatus(200);
+
+    // Update product
+    $updateResponse = $this->actingAs($adminUser)->post("/admin/products/edit/{$product->id}/patch", [
+        'name' => 'Updated Test Product',
+        'description' => 'Updated description.',
+        'users' => '2000+ Users',
+        'link' => 'https://updated.com',
+        'open_type' => '_self',
+        'button_text' => 'Go to Updated',
+        'sort_order' => 5,
+        'is_active' => true,
+    ]);
+
+    $updateResponse->assertRedirect(route('admin.products.index'));
+    $product->refresh();
+    expect($product->name)->toBe('Updated Test Product')
+        ->and($product->users)->toBe('2000+ Users')
+        ->and($product->open_type)->toBe('_self');
+
+    // Delete product
+    $deleteResponse = $this->actingAs($adminUser)->delete("/admin/products/{$product->id}");
+    $deleteResponse->assertRedirect();
+    expect(Product::find($product->id))->toBeNull();
+});
diff --git a/tests/Feature/PublicPagesTest.php b/tests/Feature/PublicPagesTest.php
index 2f987e89..0a769133 100644
--- a/tests/Feature/PublicPagesTest.php
+++ b/tests/Feature/PublicPagesTest.php
@@ -54,12 +54,18 @@
     $response->assertStatus(200);
 });
 
-test('the projects page loads successfully', function () {
-    $response = $this->get('/projects');
+test('the products page loads successfully', function () {
+    $response = $this->get('/products');
 
     $response->assertStatus(200);
 });
 
+test('the legacy projects route permanently redirects to products', function () {
+    $response = $this->get('/projects');
+
+    $response->assertRedirect('/products');
+});
+
 test('non-existent public resources render the 404 error page', function () {
     $response = $this->get('/resources/999999');