diff --git a/package.json b/package.json
index 94be3f3..56546c9 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@prisma/client": "^5.11.0",
+    "@radix-ui/react-avatar": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-menubar": "^1.0.4",
     "@radix-ui/react-slot": "^1.0.2",
diff --git a/src/app/elections/[electionId]/results/page.tsx b/src/app/elections/[electionId]/results/page.tsx
index 223254d..ea2c883 100644
--- a/src/app/elections/[electionId]/results/page.tsx
+++ b/src/app/elections/[electionId]/results/page.tsx
@@ -1,8 +1,26 @@
+import { getCandidates } from "@packages/DAO/candidates.dao";
+import ResultCard from "@packages/components/ResultCard";
 const Home = () => {
   return (
-    <div className="flex items-center justify-center h-[80vh] content-center">
-      <div>
-        <h1> Resultados da Eleição </h1>
+    <div>
+      <div className="flex items-center justify-center h-[80vh] content-center">
+        <div>
+          <h1 className="text-center text-xl p-16">Resultado da Eleição</h1>
+          {getCandidates().map(
+            ({ image, candidate, vice, party, percentage, votes }) => (
+              <div key={candidate} className="p-4">
+                <ResultCard
+                  image={image}
+                  candidate={candidate}
+                  vice={vice}
+                  party={party}
+                  percentagem={percentage}
+                  votos={votes}
+                />
+              </div>
+            ),
+          )}
+        </div>
       </div>
     </div>
   );
diff --git a/src/packages/DAO/candidates.dao.ts b/src/packages/DAO/candidates.dao.ts
new file mode 100644
index 0000000..537da2e
--- /dev/null
+++ b/src/packages/DAO/candidates.dao.ts
@@ -0,0 +1,55 @@
+type Candidate = {
+  image: string;
+  candidate: string;
+  vice: string;
+  party: string;
+  percentage: string;
+  votes: string;
+};
+
+const candidates: Candidate[] = [
+  {
+    image: "https://picsum.photos/id/237/200/300",
+    candidate: "Jiji Ping Png",
+    vice: "Xinguilingui",
+    party: "PCC",
+    percentage: "35.2%",
+    votes: "3,200,000",
+  },
+  {
+    image: "https://picsum.photos/id/444/200/300",
+    candidate: "Vladimir Putin",
+    vice: "Zelensky",
+    party: "ABC",
+    percentage: "28.1%",
+    votes: "2,550,000",
+  },
+  {
+    image: "https://picsum.photos/id/398/200/300",
+    candidate: "Lulão da massa",
+    vice: "Xuxu",
+    party: "DEF",
+    percentage: "18.4%",
+    votes: "1,670,000",
+  },
+  {
+    image: "https://picsum.photos/id/577/200/300",
+    candidate: "Biden",
+    vice: "Gagá",
+    party: "GHI",
+    percentage: "12.3%",
+    votes: "1,120,000",
+  },
+  {
+    image: "https://picsum.photos/id/610/200/300",
+    candidate: "Trump",
+    vice: "Bolsonaro",
+    party: "JKL",
+    percentage: "6.0%",
+    votes: "540,000",
+  },
+];
+
+export function getCandidates() {
+  return candidates;
+}
diff --git a/src/packages/components/ResultCard.tsx b/src/packages/components/ResultCard.tsx
new file mode 100644
index 0000000..5bdf9ba
--- /dev/null
+++ b/src/packages/components/ResultCard.tsx
@@ -0,0 +1,45 @@
+import { Avatar, AvatarImage } from "@packages/shadcn-ui/ui/avatar";
+import { Card } from "@packages/shadcn-ui/ui/card";
+
+interface ElectionResult {
+  image: string;
+  candidate: string;
+  vice: string;
+  party: string;
+  percentagem: string;
+  votos: string;
+}
+function ResultCard({
+  candidate,
+  vice,
+  party,
+  percentagem,
+  votos,
+  image,
+}: ElectionResult) {
+  return (
+    <Card className="flex flex-row w-[60vw] p-4 shadow-md shadow-gray-200">
+      <div className="flex w-[40vw] gap-4">
+        <Avatar className="w-16 h-16">
+          <AvatarImage src={image} />
+        </Avatar>
+        <div>
+          <p className="font-bold">Presidente: {candidate}</p>
+          <p className="text-sm">Vice: {vice}</p>
+          <p className="text-xs">{party}</p>
+        </div>
+      </div>
+      <div className="flex flex-col items-end justify-center w-1/2 gap-1">
+        <p className="text-sm">
+          Percentagem dos votos:{" "}
+          <span className="font-bold">{percentagem}</span>
+        </p>
+        <p className="text-sm">
+          Total de votos: <span className="font-bold">{votos}</span>
+        </p>
+      </div>
+    </Card>
+  );
+}
+
+export default ResultCard;
diff --git a/src/packages/shadcn-ui/ui/avatar.tsx b/src/packages/shadcn-ui/ui/avatar.tsx
new file mode 100644
index 0000000..3ab8f19
--- /dev/null
+++ b/src/packages/shadcn-ui/ui/avatar.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import * as React from "react";
+
+import { cn } from "@packages/utils/shadcn-utils";
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className,
+    )}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className,
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };
diff --git a/src/packages/shadcn-ui/ui/card.tsx b/src/packages/shadcn-ui/ui/card.tsx
new file mode 100644
index 0000000..02908d8
--- /dev/null
+++ b/src/packages/shadcn-ui/ui/card.tsx
@@ -0,0 +1,86 @@
+import * as React from "react";
+
+import { cn } from "@packages/utils/shadcn-utils";
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className,
+    )}
+    {...props}
+  />
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className,
+    )}
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+));
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};
diff --git a/yarn.lock b/yarn.lock
index 8fdbacb..62ae6bb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -276,6 +276,16 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-primitive" "1.0.3"
 
+"@radix-ui/react-avatar@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-avatar/-/react-avatar-1.1.1.tgz#5848d2ed5f34d18b36fc7e2d227c41fca8600ea1"
+  integrity sha512-eoOtThOmxeoizxpX6RiEsQZ2wj5r4+zoeqAwO0cBaFQGjJwIH3dIX0OCxNrCyrrdxG+vBweMETh3VziQG7c1kw==
+  dependencies:
+    "@radix-ui/react-context" "1.1.1"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+    "@radix-ui/react-use-layout-effect" "1.1.0"
+
 "@radix-ui/react-collection@1.0.3":
   version "1.0.3"
   resolved "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz"
@@ -311,6 +321,11 @@
   resolved "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz"
   integrity sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==
 
+"@radix-ui/react-context@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.1.1.tgz#82074aa83a472353bb22e86f11bcbd1c61c4c71a"
+  integrity sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==
+
 "@radix-ui/react-dialog@^1.1.1":
   version "1.1.1"
   resolved "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.1.tgz"