diff --git a/src/web/JSE.WebApp.MVC/Controllers/CatalogoController.cs b/src/web/JSE.WebApp.MVC/Controllers/CatalogoController.cs
index d425c08..f16be49 100644
--- a/src/web/JSE.WebApp.MVC/Controllers/CatalogoController.cs
+++ b/src/web/JSE.WebApp.MVC/Controllers/CatalogoController.cs
@@ -22,6 +22,7 @@ public async Task<IActionResult> Index([FromQuery] int ps = 8, [FromQuery] int p
         {
             var produtos = await _catalogoService.ObterTodos(ps, page, q);
             ViewBag.Pesquisa = q;
+            produtos.ReferenceAction = "Index";
 
             return View(produtos);
         }
diff --git a/src/web/JSE.WebApp.MVC/Extensions/PaginacaoViewComponent.cs b/src/web/JSE.WebApp.MVC/Extensions/PaginacaoViewComponent.cs
new file mode 100644
index 0000000..a6c21e6
--- /dev/null
+++ b/src/web/JSE.WebApp.MVC/Extensions/PaginacaoViewComponent.cs
@@ -0,0 +1,13 @@
+using JSE.WebApp.MVC.Models;
+using Microsoft.AspNetCore.Mvc;
+
+namespace JSE.WebApp.MVC.Extensions
+{
+    public class PaginacaoViewComponent : ViewComponent
+    {
+        public IViewComponentResult Invoke(IPagedList modelopaginado)
+        {
+            return View(modelopaginado);
+        }
+    }
+}
diff --git a/src/web/JSE.WebApp.MVC/Views/Catalogo/Index.cshtml b/src/web/JSE.WebApp.MVC/Views/Catalogo/Index.cshtml
index b7a1c60..3f59db4 100644
--- a/src/web/JSE.WebApp.MVC/Views/Catalogo/Index.cshtml
+++ b/src/web/JSE.WebApp.MVC/Views/Catalogo/Index.cshtml
@@ -44,6 +44,8 @@
 
         </div>
 
+
+        @* //TODO - ViewComponent de paginação  *@
         <nav aria-label="...">
             <ul class="pagination">
                 @{
@@ -65,5 +67,6 @@
                 }
             </ul>
         </nav>
+
     </div>
 </div>
diff --git a/src/web/JSE.WebApp.MVC/Views/Shared/Components/Paginacao/Default.cshtml b/src/web/JSE.WebApp.MVC/Views/Shared/Components/Paginacao/Default.cshtml
new file mode 100644
index 0000000..a4a2a26
--- /dev/null
+++ b/src/web/JSE.WebApp.MVC/Views/Shared/Components/Paginacao/Default.cshtml
@@ -0,0 +1,23 @@
+@model IPagedList
+
+<nav aria-label="...">
+    <ul class="pagination">
+        @{
+            for (var i = 1; i < Model.TotalPages + 1; i++)
+            {
+                if (i == Model.PageIndex)
+                {
+                    <li class="page-item active">
+                        <a class="page-link" asp-action="@Model.ReferenceAction" asp-route-ps="@Model.PageSize" asp-route-page="@i" asp-route-q="@Model.Query">@i</a>
+                    </li>
+                }
+                else
+                {
+                    <li class="page-item">
+                        <a class="page-link" asp-action="@Model.ReferenceAction" asp-route-ps="@Model.PageSize" asp-route-page="@i" asp-route-q="@Model.Query">@i</a>
+                    </li>
+                }
+            }
+        }
+    </ul>
+</nav>
\ No newline at end of file
diff --git a/src/web/JSE.WebApp.MVC/Views/Shared/Components/Paginacao/Default.cshtml.css b/src/web/JSE.WebApp.MVC/Views/Shared/Components/Paginacao/Default.cshtml.css
new file mode 100644
index 0000000..5f28270
--- /dev/null
+++ b/src/web/JSE.WebApp.MVC/Views/Shared/Components/Paginacao/Default.cshtml.css
@@ -0,0 +1 @@
+
\ No newline at end of file