diff --git a/docs/assets/images/conteudos.png b/docs/assets/images/conteudos.png
new file mode 100644
index 0000000..b151b7a
Binary files /dev/null and b/docs/assets/images/conteudos.png differ
diff --git a/docs/assets/images/favoritos.png b/docs/assets/images/favoritos.png
new file mode 100644
index 0000000..b972b2d
Binary files /dev/null and b/docs/assets/images/favoritos.png differ
diff --git a/docs/pages/PERFIL.html b/docs/pages/PERFIL.html
index d5fb302..201611a 100644
--- a/docs/pages/PERFIL.html
+++ b/docs/pages/PERFIL.html
@@ -158,7 +158,7 @@ <h1 class="nome-usuario" id="nome-usuario"> Fulano de Tal</h1>
     <script>
         const fetchUserData = async () => {
             try {
-                const response = await fetch('http://localhost:3001/perfil/1'); // Ajuste o ID conforme necessário
+                const response = await fetch('http://localhost:3001/perfil'); // Ajuste o ID conforme necessário
                 if (response.ok) {
                     const usuario = await response.json();
                     document.getElementById('nome-usuario').innerText = usuario.nome;
diff --git a/docs/pages/app_createtopic.html b/docs/pages/app_createtopic.html
index 048b4df..37ee2a2 100644
--- a/docs/pages/app_createtopic.html
+++ b/docs/pages/app_createtopic.html
@@ -205,7 +205,7 @@
       <li><a href="conteudo.html">Menu Principal</a></li>
       <li><a href="app_createtopic.html">Adicionar conteúdo</a></li>
       <li><a href="app_edittopic.html">Editar tópico</a></li>
-      <li><a href="app_sendmessage.html">Criar Mensagem</a></li>
+      <li><a href="sendmessage_staff.html">Criar Mensagem</a></li>
       <li><a href="index.html">Sair</a></li>
     </ul>
   </div>
diff --git a/docs/pages/app_edittopic.html b/docs/pages/app_edittopic.html
index fe23589..c770359 100644
--- a/docs/pages/app_edittopic.html
+++ b/docs/pages/app_edittopic.html
@@ -127,7 +127,7 @@
       <li><a href="conteudo.html">Menu Principal</a></li>
       <li><a href="app_createtopic.html">Adicionar conteúdo</a></li>
       <li><a href="app_edittopic.html">Editar tópico</a></li>
-      <li><a href="app_sendmessage.html">Criar Mensagem</a></li>
+      <li><a href="sendmessage_staff.html">Criar Mensagem</a></li>
       <li><a href="index.html">Sair</a></li>
     </ul>
 </div>
diff --git a/docs/pages/conteudo.html b/docs/pages/conteudo.html
index fbe82ed..7de2c1b 100644
--- a/docs/pages/conteudo.html
+++ b/docs/pages/conteudo.html
@@ -40,16 +40,16 @@
         if (localStorage.getItem("tipoUsuario") == "cliente") {
             listaMenu.innerHTML = `
                 <li><a href=\"conteudo.html\">Conteúdos</a></li>
-                <li><a href=\"perfil.html\">Meu Perfil</a></li>
+                <li><a href=\"PERFIL.html\">Meu Perfil</a></li>
                 <li><a href=\"favoritos.html\">Favoritos</a></li>
-                <li><a href=\"forum.html\">Fórum</a></li>
+                <li><a href=\"FORUM.html\">Fórum</a></li>
                 <li><a href=\"index.html\">Sair</a></li>`
         } else {
             listaMenu.innerHTML = `
-            <li><a href=\"conteudo.html\">Meu Conteúdo</a></li>
+            <li><a href=\"conteudo_staff.html\">Meu Conteúdo</a></li>
             <li><a href=\"app_createtopic\">Adicionar Conteúdo</a></li>
-            <li><a href=\"forum.html\">Fórum</a></li>
-            <li><a href=\"perfi.html\">Meu Perfil</a></li>
+            <li><a href=\"forum_staff.html\">Fórum</a></li>
+            <li><a href=\"perfil_staff.html\">Meu Perfil</a></li>
             <li><a href=\"index.html\">Sair</a></li>  `
         }
 
diff --git a/docs/pages/conteudo_staff.html b/docs/pages/conteudo_staff.html
new file mode 100644
index 0000000..e643d31
--- /dev/null
+++ b/docs/pages/conteudo_staff.html
@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Conteúdo</title>
+    <link rel="stylesheet" href="./styles.css">
+
+<body>
+    <div class="navbar">
+        <div class="logo">
+            <img src="img/logo_redonda.png" alt="Logo do Site">
+        </div>
+        <ul id="lista-menu">
+            <li><a href="conteudo_staff.html">Meu Conteúdo</a></li>
+            <li><a href="app_createtopic.html">Adicionar Conteúdo</a></li>
+            <li><a href="forum_staff.html">Fórum</a></li>
+            <li><a href="perfil_staff.html">Meu Perfil</a></li>
+            <li><a href="index.html">Sair</a></li>
+        </ul>
+    </div>
+    <div class="search-bar">
+        <input type="text" class="search-input" id="searchInput">
+        <button class="search-button" onclick="search()">Search</button>
+    </div>
+    <div class="menu-bar">
+        <div class="menu" onclick="toggleMenu()">Categorias</div>
+        <div class="menu-options" id="menuOptions">
+            <!-- Categoria opções serão adicionadas aqui -->
+        </div>
+    </div>
+    <div class="content-grid" id="content-grid">
+        <!-- Cards do grid serão adicionados aqui -->
+    </div>
+
+    <script>
+        var listaMenu = document.getElementById("lista-menu");
+
+        if (localStorage.getItem("tipoUsuario") == "cliente") {
+            listaMenu.innerHTML = `
+                <li><a href=\"conteudo.html\">Conteúdos</a></li>
+                <li><a href=\"PERFIL.html\">Meu Perfil</a></li>
+                <li><a href=\"favoritos.html\">Favoritos</a></li>
+                <li><a href=\"FORUM.html\">Fórum</a></li>
+                <li><a href=\"index.html\">Sair</a></li>`
+        } else {
+            listaMenu.innerHTML = `
+            <li><a href=\"conteudo_staff.html\">Meu Conteúdo</a></li>
+            <li><a href=\"app_createtopic\">Adicionar Conteúdo</a></li>
+            <li><a href=\"forum_staff.html\">Fórum</a></li>
+            <li><a href=\"perfil_staff.html\">Meu Perfil</a></li>
+            <li><a href=\"index.html\">Sair</a></li>  `
+        }
+
+        const contentGrid = document.getElementById("content-grid");
+        const inputSearch = document.querySelector(".search-input");
+        const menuOptions = document.getElementById("menuOptions");
+
+        let items = [];
+
+        const categories = [
+            "Todas as categorias", "Comunicação", "E-mail", "Internet", "Pesquisa", "Mensagens",
+            "Videoconferência", "Redes Sociais", "Navegação", "Mapas",
+            "Tecnologia", "Celulares", "Segurança", "Videochamadas",
+            "Computadores", "Entretenimento", "Vídeos", "Fotografia", "Acessibilidade"
+        ];
+
+        function toggleMenu() {
+            if (menuOptions.style.display === "none" || menuOptions.style.display === "") {
+                menuOptions.style.display = "flex";
+            } else {
+                menuOptions.style.display = "none";
+            }
+        }
+
+        function filterByCategory(category) {
+            contentGrid.innerHTML = ""; // Limpa o conteúdo atual
+
+            if (category === "Todas as categorias") {
+                items.forEach(item => addHTML(item));
+            } else {
+                items
+                    .filter(item => item.categorias.includes(category))
+                    .forEach(item => addHTML(item));
+            }
+        }
+
+        function addHTML(item) {
+            const div = document.createElement("div");
+            div.classList.add("col-md-4", "mb-4");
+            div.innerHTML = `
+                <div class="card h-100">
+                    <img src="${item.imagem}" class="card-img-top img-fluid" alt="Imagem do Repositório">
+                    <div class="card-body">
+                        <h5 class="card-title">${item.titulo}</h5>
+                        <button class="favorite-button" onclick="addToFavorites('${item.id}')">Favoritar</button>
+                    </div>
+                </div>
+            `;
+            contentGrid.appendChild(div);
+        }
+
+        inputSearch.oninput = () => {
+            contentGrid.innerHTML = "";
+
+            items
+                .filter(item => item.titulo.toLowerCase().includes(inputSearch.value.toLowerCase()))
+                .forEach(item => addHTML(item));
+        };
+
+        fetch("http://localhost:3001/topicos")
+            .then(response => response.json())
+            .then(data => {
+                data.forEach(item => {
+                    addHTML(item);
+                    items.push(item);
+                });
+            })
+            .catch(error => {
+                console.error("Erro ao carregar JSON:", error);
+            });
+
+        categories.forEach(category => {
+            const div = document.createElement("div");
+            div.classList.add("menu-option");
+            div.textContent = category;
+            div.onclick = () => {
+                filterByCategory(category);
+                toggleMenu();
+            };
+            menuOptions.appendChild(div);
+        });
+
+        function addToFavorites(id) {
+            const item = items.find(item => item.id === id.toString());
+            if (item) {
+                const { id, titulo, imagem, categorias } = item;
+                fetch('http://localhost:3001/favoritos', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        UserId: 2,
+                        id: id.toString(),
+                        titulo: titulo,
+                        imagem: imagem,
+                        categorias: categorias
+                    })
+                })
+                    .then(response => response.json())
+                    .then(data => {
+                        alert("Item adicionado aos favoritos!");
+                    })
+                    .catch(error => {
+                        console.error("Erro ao adicionar aos favoritos:", error);
+                    });
+            }
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/docs/pages/forum_staff.html b/docs/pages/forum_staff.html
new file mode 100644
index 0000000..8f4e561
--- /dev/null
+++ b/docs/pages/forum_staff.html
@@ -0,0 +1,311 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Fórum</title>
+    <style>
+        body {
+            margin: 0;
+            font-family: Arial, sans-serif;
+            display: flex;
+            flex-direction: row;
+            min-height: 100vh;
+            overflow-x: hidden;
+        }
+
+        .navbar {
+            width: 200px;
+            background-color: blue;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: flex-start;
+            padding: 20px;
+            position: fixed;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            color: white;
+        }
+
+        .navbar .logo {
+            margin-bottom: 20px;
+            width: 75%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .navbar .logo img {
+            max-width: 100%;
+            height: auto;
+        }
+
+        .navbar ul {
+            list-style-type: none;
+            padding: 0;
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            margin-top: auto;
+            margin-bottom: auto;
+        }
+
+        .navbar ul li {
+            width: 100%;
+            text-align: center;
+            margin: 10px 0;
+        }
+
+        .navbar ul li a {
+            color: white;
+            text-decoration: none;
+            display: block;
+            padding: 10px 0;
+        }
+
+        .navbar ul li a:hover {
+            background-color: #0056b3;
+        }
+
+        .main-content {
+            margin-left: 220px; 
+            padding: 20px;
+            flex-grow: 1;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
+        h1 {
+            margin-top: 20px;
+        }
+
+        .message-container {
+            width: 100%;
+            max-width: 800px;
+            margin-bottom: 20px;
+        }
+        
+        .message {
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            padding: 10px;
+            margin-bottom: 10px;
+            position: relative;
+        }
+        
+        .message-header {
+            font-weight: bold;
+            margin-bottom: 5px;
+        }
+        
+        .message-body {
+            margin-bottom: 5px;
+        }
+        
+        .delete-button {
+            background-color: #ff3333;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            padding: 5px 10px;
+            cursor: pointer;
+            margin-top: 5px;
+        }
+        
+        .edit-button {
+            background-color: #4CAF50; /* Green */
+            border: none;
+            color: white;
+            padding: 5px 10px;
+            text-align: center;
+            text-decoration: none;
+            display: inline-block;
+            font-size: 12px;
+            border-radius: 5px;
+            cursor: pointer;
+            position: absolute;
+            top: 5px;
+            right: 5px;
+        }
+        
+        .save-button {
+            background-color: #4CAF50;
+            color: white;
+            padding: 5px 10px;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 12px;
+            margin-right: 5px;
+            margin-top: 10px;
+        }
+
+        .cancel-button {
+            background-color: #ccc;
+            color: black;
+            padding: 5px 10px;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 12px;
+            margin-top: 10px;
+        }
+
+        .edit-area {
+            display: none;
+            flex-direction: column;
+            margin-top: 10px;
+        }
+        
+        .edit-content {
+            width: 100%;
+            padding: 10px;
+            font-size: 14px;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            margin-bottom: 10px;
+        }
+        
+        .add-message-button {
+            background-color: #007bff;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            padding: 10px 20px;
+            cursor: pointer;
+            font-size: 14px;
+            margin-top: 20px;
+            text-decoration: none;
+            text-align: center;
+        }
+
+        .add-message-button:hover {
+            background-color: #0056b3;
+        }
+    </style>
+</head>
+<body>
+    <div class="navbar">
+        <div class="logo">
+            <img src="img/logo_redonda.png" alt="Logo do Site">
+        </div>
+        <ul>
+            <li><a href="conteudo_staff.html">Meu Conteúdo</a></li>
+            <li><a href="app_createtopic.html">Adicionar Conteúdo</a></li>
+            <li><a href="forum_staff.html">Fórum</a></li>
+            <li><a href="perfil_staff.html">Meu Perfil</a></li>
+            <li><a href="index.html">Sair</a></li>
+        </ul>
+    </div>
+
+    <div class="main-content">
+        <h1>Fórum</h1>
+        <div id="message-container" class="message-container"></div>
+        <a href="sendmessage_staff.html" class="add-message-button">Enviar mensagem</a>
+    </div>
+
+    <script>
+        const fetchMessages = async () => {
+            try {
+                const response = await fetch('http://localhost:3001/mensagens'); // Altere o endpoint conforme necessário
+                if (response.ok) {
+                    const mensagens = await response.json();
+                    displayMessages(mensagens);
+                } else {
+                    console.error('Erro ao buscar mensagens do fórum:', response.status);
+                }
+            } catch (error) {
+                console.error('Erro ao buscar mensagens do fórum:', error);
+            }
+        };
+
+        const displayMessages = (mensagens) => {
+            const messageContainer = document.getElementById('message-container');
+            messageContainer.innerHTML = '';
+            mensagens.forEach(mensagem => {
+                const mensagemDiv = document.createElement('div');
+                mensagemDiv.classList.add('message');
+                mensagemDiv.setAttribute('data-id', mensagem.id); // Adicione um atributo para identificação
+                mensagemDiv.innerHTML = `
+                    <p class="message-header" id="title-${mensagem.id}">Título: ${mensagem.titulo}</p>
+                    <p class="message-header" id="author-${mensagem.id}">Autor: ${mensagem.autor}</p>
+                    <p class="message-body" id="content-${mensagem.id}">Conteúdo: ${mensagem.conteudo}</p>
+                    <button class="delete-button" onclick="deleteMessage('${mensagem.id}')">Excluir</button>
+                    <button class="edit-button" onclick="toggleEdit('${mensagem.id}')">Editar</button>
+                    <div class="edit-area" id="edit-area-${mensagem.id}">
+                        <input class="edit-content" id="edit-title-${mensagem.id}" value="${mensagem.titulo}">
+                        <input class="edit-content" id="edit-author-${mensagem.id}" value="${mensagem.autor}">
+                        <textarea class="edit-content" id="edit-content-${mensagem.id}">${mensagem.conteudo}</textarea>
+                        <button class="save-button" onclick="saveEdit('${mensagem.id}')">Salvar</button>
+                        <button class="cancel-button" onclick="toggleEdit('${mensagem.id}')">Cancelar</button>
+                    </div>
+                `;
+                messageContainer.appendChild(mensagemDiv);
+            });
+        };
+
+        const deleteMessage = async (messageId) => {
+            try {
+                const response = await fetch(`http://localhost:3001/mensagens/${messageId}`, {
+                    method: 'DELETE'
+                });
+                if (response.ok) {
+                    fetchMessages(); // Atualiza a lista de mensagens após a exclusão
+                } else {
+                    console.error('Erro ao excluir mensagem:', response.status);
+                }
+            } catch (error) {
+                console.error('Erro ao excluir mensagem:', error);
+            }
+        };
+
+        const toggleEdit = (messageId) => {
+            const editArea = document.getElementById(`edit-area-${messageId}`);
+            const titleParagraph = document.getElementById(`title-${messageId}`);
+            const authorParagraph = document.getElementById(`author-${messageId}`);
+            const contentParagraph = document.getElementById(`content-${messageId}`);
+            if (editArea.style.display === 'none' || !editArea.style.display) {
+                editArea.style.display = 'flex';
+                titleParagraph.style.display = 'none';
+                authorParagraph.style.display = 'none';
+                contentParagraph.style.display = 'none';
+            } else {
+                editArea.style.display = 'none';
+                titleParagraph.style.display = 'block';
+                authorParagraph.style.display = 'block';
+                contentParagraph.style.display = 'block';
+            }
+        };
+
+        const saveEdit = async (messageId) => {
+            const newTitle = document.getElementById(`edit-title-${messageId}`).value;
+            const newAuthor = document.getElementById(`edit-author-${messageId}`).value;
+            const newContent = document.getElementById(`edit-content-${messageId}`).value;
+            try {
+                const response = await fetch(`http://localhost:3001/mensagens/${messageId}`, {
+                    method: 'PUT',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({ titulo: newTitle, autor: newAuthor, conteudo: newContent })
+                });
+                if (response.ok) {
+                    fetchMessages(); // Atualiza a lista de mensagens após a edição
+                } else {
+                    console.error('Erro ao editar mensagem:', response.status);
+                }
+            } catch (error) {
+                console.error('Erro ao editar mensagem:', error);
+            }
+        };
+
+        window.onload = () => {
+            fetchMessages();
+        };
+    </script>
+</body>
+</html>
diff --git a/docs/pages/perfil_staff.html b/docs/pages/perfil_staff.html
new file mode 100644
index 0000000..b4f6541
--- /dev/null
+++ b/docs/pages/perfil_staff.html
@@ -0,0 +1,203 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Meu Perfil</title>
+    <style>
+        body {
+            margin: 0;
+            font-family: Arial, sans-serif;
+            display: flex;
+            flex-direction: row;
+            min-height: 100vh;
+            overflow-x: hidden;
+        }
+
+        .navbar {
+            width: 200px;
+            background-color: blue;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: flex-start;
+            padding: 20px;
+            position: fixed;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            color: white;
+        }
+
+        .navbar .logo {
+            margin-bottom: 20px;
+            width: 75%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .navbar .logo img {
+            max-width: 100%;
+            height: auto;
+        }
+
+        .navbar ul {
+            list-style-type: none;
+            padding: 0;
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            margin-top: auto;
+            margin-bottom: auto;
+        }
+
+        .navbar ul li {
+            width: 100%;
+            text-align: center;
+            margin: 10px 0;
+        }
+
+        .navbar ul li a {
+            color: white;
+            text-decoration: none;
+            display: block;
+            padding: 10px 0;
+        }
+
+        .navbar ul li a:hover {
+            background-color: #0056b3;
+        }
+
+        .main-content {
+            margin-left: 220px; 
+            padding: 20px;
+            flex-grow: 1;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
+        h1 {
+            margin-top: 20px;
+        }
+
+        .foto-container {
+            border: 5px solid #ddd;
+            border-radius: 50%;
+            width: 160px;
+            height: 160px;
+            overflow: hidden;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+
+        .foto-container img {
+            width: 150px;
+            height: 150px;
+            object-fit: cover;
+            border-radius: 50%;
+        }
+
+        .nome-usuario, .senha-usuario {
+            font-size: 24px;
+            margin: 10px 0;
+            text-align: center;
+        }
+
+        .senha-usuario {
+            font-size: 18px;
+            color: #666;
+            margin: 5px 0;
+        }
+
+        .change-photo-button {
+            margin-top: 10px;
+            padding: 5px 10px;
+            font-size: 16px;
+            cursor: pointer;
+            border: none;
+            border-radius: 5px;
+            background-color: #0751ff;
+            color: white;
+        }
+
+        .input-foto {
+            display: none;
+        }
+    </style>
+</head>
+<body>
+    <div class="navbar">
+        <div class="logo">
+            <img src="img/logo_redonda.png" alt="Logo do Site">
+        </div>
+        <ul>
+            <li><a href="conteudo_staff.html">Meu Conteúdo</a></li>
+            <li><a href="app_createtopic.html">Adicionar Conteúdo</a></li>
+            <li><a href="forum_staff.html">Fórum</a></li>
+            <li><a href="perfil_staff.html">Meu Perfil</a></li>
+            <li><a href="index.html">Sair</a></li>
+        </ul>
+    </div>
+
+    <div class="main-content">
+        <h1>Meu Perfil</h1>
+        <div class="foto-container">
+            <img id="foto-usuario" src="" alt="Foto do Usuário">
+        </div>
+        <button class="change-photo-button" id="change-photo-button">Editar Foto</button>
+        <input type="file" id="input-foto" class="input-foto" accept="image/*">
+        <h1 class="nome-usuario" id="nome-usuario"> Fulano de Tal</h1>
+        <p class="senha-usuario" id="senha-usuario">+55 3399830948</p>
+    </div>
+
+    <script>
+        const fetchUserData = async () => {
+            try {
+                const response = await fetch('http://localhost:3001/perfil'); // Ajuste o ID conforme necessário
+                if (response.ok) {
+                    const usuario = await response.json();
+                    document.getElementById('nome-usuario').innerText = usuario.nome;
+                    document.getElementById('senha-usuario').innerText = `Senha: ${usuario.Senha}`;
+
+                    const fotoSalva = localStorage.getItem('foto-usuario');
+                    if (fotoSalva) {
+                        document.getElementById('foto-usuario').src = fotoSalva;
+                    } else {
+                        document.getElementById('foto-usuario').src = usuario.foto;
+                    }
+                } else {
+                    console.error('Erro ao buscar dados do usuário:', response.status);
+                }
+            } catch (error) {
+                console.error('Erro ao buscar dados do usuário:', error);
+            }
+        };
+
+        window.onload = () => {
+            fetchUserData();
+
+            document.getElementById('change-photo-button').addEventListener('click', () => {
+                document.getElementById('input-foto').click(); 
+            });
+
+            document.getElementById('input-foto').addEventListener('change', (event) => {
+                const file = event.target.files[0];
+                if (file) {
+                    const reader = new FileReader();
+                    reader.onload = function(e) {
+                        const newFoto = e.target.result;
+                        document.getElementById('foto-usuario').src = newFoto;
+                        localStorage.setItem('foto-usuario', newFoto); 
+                    }
+                    reader.readAsDataURL(file);
+                }
+            });
+        };
+    </script>
+</body>
+</html>
diff --git a/docs/pages/sendmessage_staff.html b/docs/pages/sendmessage_staff.html
new file mode 100644
index 0000000..f4633b9
--- /dev/null
+++ b/docs/pages/sendmessage_staff.html
@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Create Message</title>
+<style>
+body {
+    margin: 0;
+    font-family: Arial, sans-serif;
+    display: flex;
+    flex-direction: row;
+    min-height: 100vh;
+    overflow-x: hidden;
+}
+
+.navbar {
+    width: 200px;
+    background-color: blue;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 20px;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    color: white;
+}
+
+.navbar .logo {
+    margin-bottom: 20px;
+    width: 75%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.navbar .logo img {
+    max-width: 100%;
+    height: auto;
+}
+
+.navbar ul {
+    list-style-type: none;
+    padding: 0;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: auto;
+    margin-bottom: auto;
+}
+
+.navbar ul li {
+    width: 100%;
+    text-align: center;
+    margin: 10px 0;
+}
+
+.navbar ul li a {
+    color: white;
+    text-decoration: none;
+    display: block;
+    padding: 10px 0;
+}
+
+.navbar ul li a:hover {
+    background-color: #0056b3;
+}
+
+.content {
+    margin-left: 220px; /* Ajuste para compensar a largura da navbar */
+    padding: 20px;
+}
+
+form {
+    width: 500px;
+    margin: 50px auto;
+}
+
+form input,
+form textarea,
+form select,
+form button {
+    display: block;
+    width: 100%;
+    margin-bottom: 25px;
+    margin-top: 10px;
+}
+
+form button {
+    background-color: blue; /* Mesma cor da navbar */
+    color: white;
+    border: none;
+    padding: 10px;
+    cursor: pointer;
+}
+
+#backToForum {
+    background-color: blue; /* Mesma cor da navbar */
+    color: white;
+    border: none;
+    padding: 10px;
+    cursor: pointer;
+    width: 100%; /* Largura total do formulário */
+    margin-top: 20px; /* Espaço extra acima do botão */
+    text-align: center; /* Centralizar texto */
+}
+</style>
+</head>
+<body>
+
+<div class="navbar">
+  <div class="logo">
+    <img src="img/logo_redonda.png" alt="Logo do Site">
+</div>
+    <ul>
+        <li><a href="index.html">Sair</a></li>
+    </ul>
+</div>
+
+<div class="content">
+  <h1>Digite aqui sua dúvida</h1>
+  <form id="messageForm">
+    <label for="titulo">Título da mensagem:</label>
+    <input type="text" id="titulo" name="titulo">
+
+    <label for="conteudo">Conteúdo da mensagem:</label>
+    <textarea id="conteudo" name="conteudo"></textarea>
+
+    <button type="submit">Enviar</button>
+    <button id="backToForum" onclick="location.href='forum_staff.html'" type="button">Voltar ao Fórum</button>
+  </form>
+</div>
+
+<script>
+document.getElementById('messageForm').addEventListener('submit', function(event) {
+  event.preventDefault();
+
+  const form = event.target;
+  const formData = new FormData(form);
+
+  const userName = "Neide Rocha de Silva";
+
+  const messageObject = Object.fromEntries(formData.entries());
+  messageObject.autor = userName;
+
+  fetch('http://localhost:3000/mensagens', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(messageObject),
+  })
+    .then(response => response.json())
+    .then(data => {
+      console.log('New message added:', data);
+      form.reset();
+    })
+    .catch(error => {
+      console.error('Error adding new message:', error);
+    });
+});
+</script>
+
+</body>
+</html>
