diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
index ce5c9e0..cb9b023 100644
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -1,3 +1,78 @@
+import { useEffect, useState } from "react";
+import api from "../Api";
+import { Layout } from "../components/Layout";
+import type { Server } from "../types/Server";
+
 export const Dashboard = () => {
-    return <div>Dashboard Page</div>;
-};
\ No newline at end of file
+    const [servers, setServers] = useState<Server[]>([]);
+    const [loading, setLoading] = useState<boolean>(true);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        const fetchServers = async () => {
+            try {
+                const { data } = await api.get<Server[]>("/api/servers");
+                setServers(data);
+            } catch (err: any) {
+                const message = err?.response?.data?.message || "Falha ao carregar servidores.";
+                setError(message);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchServers();
+    }, []);
+
+    return (
+        <Layout className="h-screen py-10">
+            <div className="space-y-6">
+                <h1 className="text-2xl font-semibold text-text">Servidores</h1>
+
+                <div className={Styles.card}>
+                    {loading && <div className="p-4 text-text-secondary text-sm">Carregando servidores...</div>}
+                    {error && <div className="p-4 text-red-600 text-sm">{error}</div>}
+                    {!loading && !error && servers.length === 0 && (
+                        <div className="p-4 text-text-secondary text-sm">Nenhum servidor encontrado.</div>
+                    )}
+                    {!loading && !error && servers.length > 0 && (
+                        <div className="overflow-x-auto">
+                            <table className="min-w-full divide-y divide-cardBorder">
+                                <thead className="bg-gray-50">
+                                    <tr>
+                                        <th className={Styles.tableHeadCell}>Nome</th>
+                                        <th className={Styles.tableHeadCell}>IP</th>
+                                        <th className={Styles.tableHeadCell}>Porta</th>
+                                        <th className={Styles.tableHeadCell}>Usuário</th>
+                                        <th className={Styles.tableHeadCell}>Tipo</th>
+                                        <th className={Styles.tableHeadCell}>Aplicação</th>
+                                        <th className={Styles.tableHeadCell}>Banco</th>
+                                    </tr>
+                                </thead>
+                                <tbody className="divide-y divide-cardBorder bg-white">
+                                    {servers.map((server) => (
+                                        <tr key={server.id} className="hover:bg-gray-50 transition-colors">
+                                            <td className={Styles.rowCell}>{server.name}</td>
+                                            <td className={Styles.rowCell}>{server.ip}</td>
+                                            <td className={Styles.rowCell}>{server.port}</td>
+                                            <td className={Styles.rowCell}>{server.user}</td>
+                                            <td className={`${Styles.rowCell} capitalize`}>{server.type.toLowerCase()}</td>
+                                            <td className={`${Styles.rowCell} capitalize`}>{server.application.toLowerCase()}</td>
+                                            <td className={`${Styles.rowCell} capitalize`}>{server.dbType.toLowerCase()}</td>
+                                        </tr>
+                                    ))}
+                                </tbody>
+                            </table>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </Layout>
+    );
+};
+
+const Styles = {
+    card: "bg-card border border-cardBorder shadow-sm rounded-lg overflow-hidden",
+    tableHeadCell: "px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-text-secondary",
+    rowCell: "px-4 py-3 text-sm text-text",
+};