diff --git a/backend/app/routes/desafios.py b/backend/app/routes/desafios.py
index ebe412e..499e4eb 100644
--- a/backend/app/routes/desafios.py
+++ b/backend/app/routes/desafios.py
@@ -1,3 +1,4 @@
+from sqlalchemy import inspect
 from typing import List, Annotated
 
 from fastapi import APIRouter, Depends, HTTPException
@@ -11,34 +12,29 @@
 from sqlalchemy.orm import Session
 
 router = APIRouter(
-    prefix="/desafios",
-    tags=["desafios"],
-    responses={404: {"description": "Not found"}}
+    prefix="/desafios", tags=["desafios"], responses={404: {"description": "Not found"}}
 )
-from sqlalchemy import inspect
+
 
 @router.post("/", response_model=Desafio)
 def create_desafio(
     desafio: DesafioCreate,
     current_user: Annotated[Users, Depends(get_current_active_user)],
-    db: Session = Depends(get_db)
+    db: Session = Depends(get_db),
 ):
     # TODO: check if user is allowed to create desafio (staff)
     try:
         with db.begin():
             # create 'Atividade' object
-            db_atividade = Atividade(
-                nome=desafio.nome,
-                pontos=desafio.pontos
-            )
+            db_atividade = Atividade(nome=desafio.nome, pontos=desafio.pontos)
             db.add(db_atividade)
-            db.flush() # flush to get the id
+            db.flush()  # flush to get the id
 
             # create 'Desafios' object
             db_desafio = Desafios(
                 descricao=desafio.descricao,
-                empresa_id=desafio.empresa_id,
-                atividade_id=db_atividade.id
+                # empresa_id=desafio.empresa_id,
+                atividade_id=db_atividade.id,
             )
             db.add(db_desafio)
 
@@ -51,12 +47,12 @@ def create_desafio(
                 nome=db_atividade.nome,
                 pontos=db_atividade.pontos,
                 descricao=db_desafio.descricao,
-                empresa_id=db_desafio.empresa_id
             )
     except Exception as e:
         db.rollback()
         return HTTPException(status_code=400, detail=str(e))
 
+
 @router.get("/", response_model=List[Desafio])
 def read_desafios(skip: int = 0, limit: int = 10, db: Session = Depends(get_db)):
     # Join 'Atividade' and 'Desafios' tables
@@ -66,16 +62,16 @@ def read_desafios(skip: int = 0, limit: int = 10, db: Session = Depends(get_db))
             Atividade.nome,
             Atividade.pontos,
             Desafios.descricao,
-            Desafios.empresa_id
             )
         .join(Atividade, Desafios.atividade_id == Atividade.id)
         .offset(skip)
         .limit(limit)
         .all()
     )
-    
+
     return db_desafios
 
+
 @router.get("/{desafio_id}", response_model=Desafio)
 def read_desafio(desafio_id: int, db: Session = Depends(get_db)):
     # Join 'Atividade' and 'Desafios' tables
@@ -85,7 +81,6 @@ def read_desafio(desafio_id: int, db: Session = Depends(get_db)):
             Atividade.nome,
             Atividade.pontos,
             Desafios.descricao,
-            Desafios.empresa_id
             )
         .join(Atividade, Desafios.atividade_id == Atividade.id)
         .filter(Desafios.id == desafio_id)
@@ -95,12 +90,13 @@ def read_desafio(desafio_id: int, db: Session = Depends(get_db)):
         raise HTTPException(status_code=404, detail="Desafio not found")
     return db_desafio
 
+
 @router.put("/{desafio_id}", response_model=Desafio)
 def update_desafio(
     desafio_id: int,
     desafio: DesafioUpdate,
     current_user: Annotated[Users, Depends(get_current_active_user)],
-    db: Session = Depends(get_db)
+    db: Session = Depends(get_db),
 ):
     # TODO: check if user is allowed to update desafio (staff)
 
@@ -111,7 +107,6 @@ def update_desafio(
             Atividade.nome,
             Atividade.pontos,
             Desafios.descricao,
-            Desafios.empresa_id
             )
         .join(Atividade, Desafios.atividade_id == Atividade.id)
         .filter(Desafios.id == desafio_id)
@@ -119,33 +114,32 @@ def update_desafio(
     )
     if db_desafio is None:
         raise HTTPException(status_code=404, detail="Desafio not found")
-    
+
     # update 'Atividade' object
-    db.query(Atividade).filter(Atividade.id == db_desafio.id).update({
-        "nome": desafio.nome,
-        "pontos": desafio.pontos
-    })
+    db.query(Atividade).filter(Atividade.id == db_desafio.id).update(
+        {"nome": desafio.nome, "pontos": desafio.pontos}
+    )
     # update 'Desafios' object
     db.query(Desafios).filter(Desafios.id == db_desafio.id).update({
         "descricao": desafio.descricao,
-        "empresa_id": desafio.empresa_id
     })
     db.commit()
-    
+
     # return updated object
     return Desafio(
         id=db_desafio.id,
         nome=desafio.nome,
         pontos=desafio.pontos,
         descricao=desafio.descricao,
-        empresa_id=desafio.empresa_id
     )
 
+
 @router.delete("/{desafio_id}", response_model=Desafio)
 def delete_desafio(
     desafio_id: int,
     current_user: Annotated[Users, Depends(get_current_active_user)],
-    db: Session = Depends(get_db)):
+    db: Session = Depends(get_db),
+):
     # TODO: check if user is allowed to delete desafio (staff)
 
     # Join 'Atividade' and 'Desafios' tables
@@ -155,7 +149,6 @@ def delete_desafio(
             Atividade.nome,
             Atividade.pontos,
             Desafios.descricao,
-            Desafios.empresa_id
             )
         .join(Atividade, Desafios.atividade_id == Atividade.id)
         .filter(Desafios.id == desafio_id)
@@ -163,8 +156,8 @@ def delete_desafio(
     )
     if db_desafio is None:
         raise HTTPException(status_code=404, detail="Desafio not found")
-    
+
     # delete atividade (this will delete desafio too)
     db.query(Atividade).filter(Atividade.id == db_desafio.id).delete()
     db.commit()
-    return db_desafio
\ No newline at end of file
+    return db_desafio
diff --git a/frontend/public/icons/circle_right.svg b/frontend/public/icons/circle_right.svg
new file mode 100644
index 0000000..04ed392
--- /dev/null
+++ b/frontend/public/icons/circle_right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#ffffff" d="M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM241 377c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l87-87-87-87c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L345 239c9.4 9.4 9.4 24.6 0 33.9L241 377z"/></svg>
\ No newline at end of file
diff --git a/frontend/public/icons/circle_right_30.svg b/frontend/public/icons/circle_right_30.svg
new file mode 100644
index 0000000..04ed392
--- /dev/null
+++ b/frontend/public/icons/circle_right_30.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#ffffff" d="M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM241 377c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l87-87-87-87c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L345 239c9.4 9.4 9.4 24.6 0 33.9L241 377z"/></svg>
\ No newline at end of file
diff --git a/frontend/public/logo_white.png b/frontend/public/logo_white.png
new file mode 100644
index 0000000..87d3032
Binary files /dev/null and b/frontend/public/logo_white.png differ
diff --git a/frontend/public/loop.png b/frontend/public/loop.png
new file mode 100644
index 0000000..29121e4
Binary files /dev/null and b/frontend/public/loop.png differ
diff --git a/frontend/src/components/BaseLayout.jsx b/frontend/src/components/BaseLayout.jsx
new file mode 100644
index 0000000..3472627
--- /dev/null
+++ b/frontend/src/components/BaseLayout.jsx
@@ -0,0 +1,10 @@
+import React from "react";
+import Navbar from "./Navbar";
+export default function BaseLayout({ children }) {
+  return (
+    <>
+      <Navbar />
+      {children}
+    </>
+  );
+}
diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx
new file mode 100644
index 0000000..e03348d
--- /dev/null
+++ b/frontend/src/components/Navbar.jsx
@@ -0,0 +1,85 @@
+export default function Navbar() {
+  return (
+    <div className="navbar bg-base-100 py-6 px-5 w-full">
+      <div className="navbar-start">
+        <div className="h-full max-w-48">
+          <img
+            className="max-h-full max-w-full w-auto object-contain"
+            src="/public/logo_white.png"
+            alt="logo"
+          />
+        </div>
+      </div>
+      <div className="navbar-center hidden lg:flex">
+        <ul className="menu menu-horizontal px-1">
+          <li>
+            <a>Item 1</a>
+          </li>
+          <li>
+            <details>
+              <summary>Parent</summary>
+              <ul className="p-2">
+                <li>
+                  <a>Submenu 1</a>
+                </li>
+                <li>
+                  <a>Submenu 2</a>
+                </li>
+              </ul>
+            </details>
+          </li>
+          <li>
+            <a>Item 3</a>
+          </li>
+        </ul>
+      </div>
+      <div className="navbar-end">
+        <a className="btn btn-primary text-white border-white mx-3">Button</a>
+        <div className="dropdown dropdown-end">
+          <div
+            tabIndex={0}
+            role="button"
+            className="btn btn-secondary border-white lg:hidden"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="h-5 w-5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M4 6h16M4 12h8m-8 6h16"
+              />
+            </svg>
+          </div>
+          <ul
+            tabIndex={0}
+            className="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow"
+          >
+            <li>
+              <a>Item 1</a>
+            </li>
+            <li>
+              <a>Parent</a>
+              <ul className="p-2">
+                <li>
+                  <a>Submenu 1</a>
+                </li>
+                <li>
+                  <a>Submenu 2</a>
+                </li>
+              </ul>
+            </li>
+            <li>
+              <a>Item 3</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/pages/desafios.jsx b/frontend/src/pages/desafios.jsx
new file mode 100644
index 0000000..9eb8506
--- /dev/null
+++ b/frontend/src/pages/desafios.jsx
@@ -0,0 +1,86 @@
+import React, { useState, useEffect } from "react";
+export const Desafios = () => {
+    const [desafios, setDesafios] = useState([]);
+    const [loading, setLoading] = useState(true);
+    useEffect(() => {
+        fetch("http://127.0.0.1:8000/desafios")
+            .then((response) => response.json())
+            .then((data) => {
+                setDesafios(data);
+                setLoading(false);
+            });
+    }, []);
+    const handleAddDesafio = (event) => {
+        event.preventDefault();
+        const nome = event.target.nome.value;
+        const pontos = event.target.pontos.value;
+        const descricao = event.target.descricao.value;
+        fetch("http://127.0.0.1:8000/desafios", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify({ nome, pontos, descricao }),
+        })
+            .then((response) => response.json())
+            .then((data) => {
+                setDesafios([...desafios, data]);
+                event.target.reset();
+            });
+    };
+    return (
+        <>
+            <h1 className="text-4xl font-semibold">Desafios</h1>
+            {loading ? (
+                <p>Loading...</p>
+            ) : (
+                <div className="overflow-x-auto">
+                    <table className="table">
+                        <thead>
+                            <tr>
+                                <th></th>
+                                <th>Nome</th>
+                                <th>Pontos</th>
+                                <th>Descrição</th>
+                            </tr>
+                        </thead>
+                        {desafios.map((desafio) => (
+                            <tr key={desafio.id}>
+                                <td>{desafio.id}</td>
+                                <td>{desafio.nome}</td>
+                                <td>{desafio.pontos}</td>
+                                <td>{desafio.descricao}</td>
+                            </tr>
+                        ))}
+                    </table>
+                </div>
+            )}
+            <form
+                className="overflow-x-auto flex flex-col"
+                onSubmit={handleAddDesafio}
+            >
+                <label>Nome</label>
+                <input
+                    className="input input-bordered w-full max-w-xs"
+                    type="text"
+                    name="nome"
+                />
+                <label>Pontos</label>
+                <input
+                    className="input input-bordered w-full max-w-xs"
+                    type="number"
+                    name="pontos"
+                />
+                <label>Descrição</label>
+                <input
+                    className="input input-bordered w-full max-w-xs"
+                    type="text"
+                    name="descricao"
+                />
+                <button type="submit" className="btn btn-primary max-w-xs mt-6">
+                    Adicionar
+                </button>
+            </form>
+        </>
+    );
+};
diff --git a/frontend/src/pages/home.jsx b/frontend/src/pages/home.jsx
index 2ac79bc..17e6bb3 100644
--- a/frontend/src/pages/home.jsx
+++ b/frontend/src/pages/home.jsx
@@ -1,22 +1,54 @@
-import useAuthUser from "react-auth-kit/hooks/useAuthUser";
-import useSignOut from "react-auth-kit/hooks/useSignOut";
-import { useNavigate } from "react-router-dom";
+import BaseLayout from "../components/BaseLayout";
 export const Home = () => {
-  const auth = useAuthUser();
-  const signOut = useSignOut();
-  const navigate = useNavigate();
-
-  const logout = () => {
-    signOut();
-    navigate("/login");
-  }
-
   return (
-    <>
-      <p className="text-xl">Hello {auth.username}</p>
-      <button onClick={logout} className="btn btn-primary">
-        Logout
-      </button>
-    </>
+    <BaseLayout>
+      <div className="h-fit w-full px-4">
+        <div className="w-full rounded-xl bg-gradient-to-tr from-secondary to-[#444444] h-[45vh] flex flex-col items-center justify-center px-12">
+          <div className="max-w-full object-contain mb-6">
+            <img
+              className="object-contain max-w-full max-h-full"
+              src="public/loop.png"
+            />
+          </div>
+          <div className="font-bold text-4xl bg-gradient-to-tr from-primary to-[#8B4615] text-transparent bg-clip-text drop-shadow-md">
+            DETI4Devs
+          </div>
+          <div className="text-md text-center">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod
+          </div>
+          <div className="text-md text-center mt-1 underline">Saber mais</div>
+        </div>
+        <div className="w-full h-36 flex flex-row gap-4 my-3">
+          <div className="w-full rounded-xl bg-secondary p-4 flex flex-col justify-between">
+            <div className="text-xs text-left">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod
+            </div>
+            <div className="flex flex-row justify-between items-center h-8">
+              <div className="text-xl font-semibold">Eventos</div>
+              <img src="public/icons/circle_right.svg" className="w-8 h-8" />
+            </div>
+          </div>
+          <div className="w-full rounded-xl bg-[#182361] p-4 flex flex-col justify-between">
+            <div className="text-xs text-left">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod
+            </div>
+            <div className="flex flex-row justify-between items-center">
+              <div className="text-xl font-semibold">Empresas</div>
+              <img src="public/icons/circle_right.svg" className="w-8 h-8" />
+            </div>
+          </div>
+        </div>
+        <div className="w-full rounded-xl bg-primary h-36 flex flex-row justify-between items-center px-6">
+          <div className="text-3xl font-semibold">Horário</div>
+          <img
+            src="public/icons/circle_right_30.svg"
+            className="w-12 h-12 rotate-[-45deg]"
+          />
+        </div>
+      </div>
+    </BaseLayout>
   );
 };
diff --git a/frontend/src/pages/login.jsx b/frontend/src/pages/login.jsx
index e481828..571173d 100644
--- a/frontend/src/pages/login.jsx
+++ b/frontend/src/pages/login.jsx
@@ -2,6 +2,7 @@ import { useForm } from "react-hook-form";
 import { login } from "../api/auth";
 import useSignIn from "react-auth-kit/hooks/useSignIn";
 import { useNavigate } from "react-router-dom";
+import Navbar from "../components/Navbar";
 
 export const Login = () => {
   const {
@@ -21,33 +22,36 @@ export const Login = () => {
         signIn({
           auth: {
             token: response.data.access_token,
-            type: response.data.token_type
+            type: response.data.token_type,
           },
           userState: response.data.user,
         })
       ) {
         return navigate("/");
-      }
-      else {
+      } else {
         console.log("Failed to login");
       }
     }
   };
 
   return (
-    <form onSubmit={handleSubmit(onSubmit)} className="form-control">
-      <input
-        placeholder="Username"
-        className="input input-bordered"
-        {...register("username", { required: true })}
-      />
-      <input
-        placeholder="Password"
-        type="password"
-        className="input input-bordered"
-        {...register("password", { required: true })}
-      />
-      <button type="submit" className="btn btn-primary">Login</button>
-    </form>
+    <>
+      <form onSubmit={handleSubmit(onSubmit)} className="form-control">
+        <input
+          placeholder="Username"
+          className="input input-bordered"
+          {...register("username", { required: true })}
+        />
+        <input
+          placeholder="Password"
+          type="password"
+          className="input input-bordered"
+          {...register("password", { required: true })}
+        />
+        <button type="submit" className="btn btn-primary">
+          Login
+        </button>
+      </form>
+    </>
   );
 };
diff --git a/frontend/src/utils/router.jsx b/frontend/src/utils/router.jsx
index a09cf01..604ff0a 100644
--- a/frontend/src/utils/router.jsx
+++ b/frontend/src/utils/router.jsx
@@ -1,19 +1,20 @@
 import { createBrowserRouter } from "react-router-dom";
-import { Home } from "../pages/home"
-import { Login } from "../pages/login"
-import { Register } from "../pages/register"
+import { Home } from "../pages/home";
+import { Login } from "../pages/login";
+import { Register } from "../pages/register";
 import AuthOutlet from "@auth-kit/react-router/AuthOutlet";
+import { Desafios } from "../pages/desafios";
 
 export const router = createBrowserRouter([
   {
     path: "/",
-    element: <AuthOutlet fallbackPath='/login' />,
+    element: <AuthOutlet fallbackPath="/login" />,
     children: [
       {
         path: "/",
         element: <Home />,
-      }
-    ]
+      },
+    ],
   },
   {
     path: "/login",
@@ -23,4 +24,8 @@ export const router = createBrowserRouter([
     path: "/register",
     element: <Register />,
   },
-])
+  {
+    path: "/desafios",
+    element: <Desafios />,
+  },
+]);
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 1de8634..68ca561 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,13 +1,19 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
     extend: {},
   },
-  plugins: [
-    require('daisyui')
-  ],
-}
+  plugins: [require("daisyui")],
+  daisyui: {
+    themes: [
+      {
+        dark: {
+          primary: "#f27a23",
+          secondary: "#272654",
+          "base-100": "#1b1b1b",
+        },
+      },
+    ],
+  },
+};