diff --git "a/docs/docs/introdu\303\247\303\243o.md" "b/docs/docs/introdu\303\247\303\243o.md"
index 8a1be12..4cbf26e 100644
--- "a/docs/docs/introdu\303\247\303\243o.md"
+++ "b/docs/docs/introdu\303\247\303\243o.md"
@@ -1,9 +1,12 @@
---
-title: "🏥 Introdução"
-sidebar_label: "Introdução"
+title: Introdução
+sidebar_label: Introdução
sidebar_position: 1
---
+# 🏥 Introdução
+
+
O Hospital de Clínicas da Unicamp, uma referência em saúde pública no estado de São Paulo, enfrenta um desafio crítico no setor farmacêutico: a separação manual de medicamentos para pacientes internados. Esse processo, conhecido como montagem da “Fita de medicamentos”, é essencial para garantir que cada paciente receba os remédios corretos no momento adequado. No entanto, a alta demanda e a complexidade desse procedimento resulta em riscos como erros de separação, duplicidade e desperdício, além de consumir um tempo valioso da equipe hospitalar.
## 🦾 A Solução Tecnológica e o Papel do Braço Robótico
diff --git a/docs/docs/wireflow.md b/docs/docs/wireflow.md
new file mode 100644
index 0000000..330b4da
--- /dev/null
+++ b/docs/docs/wireflow.md
@@ -0,0 +1,226 @@
+---
+title: Wire Flow
+sidebar_label: Wire Flow
+sidebar_position: 6
+---
+
+# 🔁 Wire Flow
+
+## 🔍 O que é?
+
+ O **Wire Flow** é uma representação visual do fluxo de usuário (*User Flow*), mas com um diferencial: **ele tangibiliza a experiência do usuário através das telas da aplicação**. Enquanto o *User Flow* descreve a jornada do usuário dentro do sistema de forma abstrata, o *Wire Flow* ilustra esse caminho por meio das **interfaces reais**, ajudando a visualizar como cada interação acontece na prática.
+
+:::info
+
+Seu principal objetivo é alinhar experiência do usuário, design e desenvolvimento, garantindo que a navegação seja fluida e eficiente.
+
+Além disso, o Wire Flow permite antecipar possíveis obstáculos antes mesmo da implementação, reduzindo retrabalho e melhorando a usabilidade da aplicação.
+:::
+
+ No contexto do **Prescript**, desenvolvido para o **Hospital de Clínicas da UNICAMP**, o *Wire Flow* facilita a construção da plataforma ao conectar as **User Stories** do farmacêutico com as telas que representam cada etapa da jornada do usuário. Menciona-se que o *Wire Flow* foi elaborado **exclusivamente para a jornada do farmacêutico**, uma vez que foi entendido, pelo grupo, que a enfermeira não terá um contato direto com a plataforma. O foco da aplicação web está assim na **separação e rastreabilidade dos medicamentos** pelo farmacêutico, garantindo um processo mais seguro e eficiente.
+
+ Dessa forma, o *Wire Flow* se torna uma ferramenta essencial para o desenvolvimento de um sistema **intuitivo, eficiente e com menor taxa de erros**.
+
+---
+
+## 🎯 Como funciona?
+
+ O *Wire Flow* é estruturado com base nas **User Stories** do farmacêutico, que descrevem as ações necessárias para a validação e gerenciamento da separação de medicamentos. A partir dessas histórias, definimos as **telas e os caminhos possíveis** que ele pode seguir dentro da aplicação. As telas, nesse primeiro momento, são como o próprio nome do _Wire Flow_ sugere, *Wireframes*, que nada mais são do que esboços dos principais elementos a serem considerados para aquela interface em si.
+
+:::note
+
+#### 📂 **Acesso ao Wireflow e Detalhamento das Telas**
+
+Para visualizar **todas as telas da aplicação** e os **fluxos mapeados em detalhes**, acesse o protótipo no Figma:
+
+🔗 **[Wireflow Prescript - Figma](https://www.figma.com/design/mTmSbriLSMBXScYLQt8FNS/Wireframe-Prescript?node-id=81-1874&t=ek58XkjD6Rbm9391-1)**
+:::
+
+ Abaixo, estão as **principais telas do Prescript** e seus respectivos fluxos dentro da plataforma:
+
+---
+
+## 🖥️ **Principais Telas da Plataforma**
+
+### **1️⃣ Tela de Login**
+
+
+Figura 1 - Tela de Login do Prescript
+
+
+
+
+
+Fonte: Material produzido pelos autores (2025)
+
+
+🔹 Permite o acesso à plataforma via credenciais.
+🔹 Conta com feature já implementada de autenticação.
+🔹 **User Flow relacionado:** *Acessar a plataforma fazendo login.*
+
+
+### **2️⃣ Tela Geral de Prescrições**
+
+
+Figura 2 - Tela Geral de Prescrições
+
+
+
+
+
+Fonte: Material produzido pelos autores (2025)
+
+
+🔹 Exibe **todas as fitas de medicamentos**, divididas em três categorias:
+ - **A seguir** → Fitas aguardando separação.
+ - **Em progresso** → Fitas cuja separação já foi iniciada.
+ - **Pronta** → Fitas já separadas pelo robô.
+
+🔹 **User Flow relacionado:** *Colocar uma fita em progresso.*
+
+### **3️⃣ Tela de Histórico de Fitas**
+
+
+Figura 3 - Tela de Histórico do Wireframe
+
+
+
+
+
+Fonte: Material produzido pelos autores (2025)
+
+
+🔹 Permite **consultar fitas já processadas**.
+🔹 Possibilita a **exportação de relatórios** de fitas prontas ou expiradas dentro de um período específico.
+🔹 **User Flow relacionado:** *Exportar relatório de fitas prontas ou expiradas.*
+
+### **4️⃣ Tela de Visualização do Card da Fita**
+
+
+Figura 4 - Card da Fita de Medicamentos
+
+
+
+
+
+Fonte: Material produzido pelos autores (2025)
+
+
+🔹 Apresenta **detalhes da fita**, incluindo:
+ - Status
+ - Lista de medicamentos
+ - Datas de validade
+ - Farmacêutico responsável pela aprovação
+
+🔹 **User Flow relacionado:** *Visualizar o card da fita.*
+
+---
+
+## 🔄 **Fluxos de Usuário**
+
+### **1️⃣ Fluxo de Acessar a Plataforma (Login)**
+**User Story:**
+*"Como farmacêutico, quero acessar a plataforma com credenciais seguras para validar prescrições."*
+
+
+Figura 5 - Fluxo de Login na Plataforma
+
+
+
+
+
+Fonte: Material produzido pelos autores (2025)
+
+
+📌 **Passos do fluxo:**
+1. Usuário acessa a tela de **Login**.
+2. Insere suas **credenciais**.
+3. O sistema valida os dados e redireciona para a **Tela Geral de Prescrições**.
+
+
+### **2️⃣ Fluxo de Visualizar o Card da Fita**
+**User Story:**
+*"Como farmacêutico, quero visualizar os detalhes de uma fita de medicamentos para verificar sua composição e rastreabilidade."*
+
+
+Figura 6 - Fluxo de Visualizar o Card da Fita na Plataforma
+
+
+
+
+
+Fonte: Material produzido pelos autores (2025)
+
+
+📌 **Passos do fluxo:**
+1. Usuário acessa a **Tela Geral de Prescrições**, após login.
+2. Visualiza os filtros de status das fitas conforme necessidade (**A seguir, Em progresso, Pronta**).
+3. Clica em uma fita específica para **visualizar seus detalhes**.
+4. O sistema exibe a **Tela de Visualização do Card da Fita**.
+
+
+### **3️⃣ Fluxo de Colocar uma Fita em Progresso**
+**User Story:**
+*"Como farmacêutico, quero alterar o status de uma fita para 'Em progresso' para indicar que sua separação foi iniciada."*
+
+
+Figura 7 - Fluxo de Colocar uma Fita em Progresso
+
+
+
+
+
+Fonte: Material produzido pelos autores (2025)
+
+
+ *Recomenda-se visualizar essa imagem através do [link da produção no Figma](https://www.figma.com/design/mTmSbriLSMBXScYLQt8FNS/Wireframe-Prescript?node-id=81-1874&t=ek58XkjD6Rbm9391-1), para conseguir observar os detalhes, por conta do dimensionamento da largura aqui no Docusaurus.*
+
+📌 **Passos do fluxo:**
+1. Usuário acessa a **Tela Geral de Prescrições**.
+2. Seleciona uma fita ou todas as fitas disponíveis na aba **"A seguir"**.
+3. Clica na opção **"Colocar em produção"**.
+4. O sistema move a(s) fita(s) para a categoria **"Em progresso"** e o robô a coloca na fila para separação.
+
+
+### **4️⃣ Fluxo de Exportar Relatório**
+**User Story:**
+*"Como farmacêutico, quero exportar um relatório de fitas de medicamentos que ficaram prontas em determinado período."*
+
+
+Figura 8 - Fluxo de Exportar Relatório das Fitas
+
+
+
+
+
+Fonte: Material produzido pelos autores (2025)
+
+
+ *Recomenda-se visualizar essa imagem através do [link da produção no Figma](https://www.figma.com/design/mTmSbriLSMBXScYLQt8FNS/Wireframe-Prescript?node-id=81-1874&t=ek58XkjD6Rbm9391-1), para conseguir observar os detalhes, por conta do dimensionamento da largura aqui no Docusaurus.*
+
+📌 **Passos do fluxo:**
+1. Usuário acessa a **Tela de Histórico de Fitas**.
+2. Seleciona o período em que se deseja exportar o relatório.
+3. Clica em **Exportar Relatório**.
+4. O sistema gera um arquivo com os dados solicitados.
+
+---
+## 🦾 Prototipagem no Figma
+
+ Além das descrições sobre as telas e os fluxos dispostas acima, é possível também verificar **a prototipagem desenvolvida** com as telas, também no Figma, para guiar os principais fluxos do usuário no vídeo abaixo:
+
+
+Vídeo 1 - Prototipagem dos Principais Fluxos
+
+
+
+
+
+Fonte: Material produzido pelos autores (2025)
+
+
+## ✅ Conclusão
+
+ O **Wire Flow** é uma ferramenta essencial para conectar a **jornada do farmacêutico, as telas da aplicação e as User Stories**. Ele possibilita que designers e desenvolvedores compreendam de forma clara como o sistema deve funcionar, garantindo uma **experiência fluida e sem obstáculos**.
+
+ No contexto do **Prescript**, o *Wire Flow* permite estruturar a navegação de forma intuitiva para farmacêuticos, tornando o processo de separação de medicamentos mais **seguro, eficiente e rastreável**. Com isso, **a plataforma se torna mais funcional e a taxa de erros no desenvolvimento é reduzida significativamente.**
diff --git a/docs/static/img/card_fita_medicamentos.png b/docs/static/img/card_fita_medicamentos.png
new file mode 100644
index 0000000..b0caf6f
Binary files /dev/null and b/docs/static/img/card_fita_medicamentos.png differ
diff --git a/docs/static/img/card_wireflow.png b/docs/static/img/card_wireflow.png
new file mode 100644
index 0000000..94d4038
Binary files /dev/null and b/docs/static/img/card_wireflow.png differ
diff --git a/docs/static/img/historico_wireflow.png b/docs/static/img/historico_wireflow.png
new file mode 100644
index 0000000..3ee603f
Binary files /dev/null and b/docs/static/img/historico_wireflow.png differ
diff --git a/docs/static/img/historico_wireframe.png b/docs/static/img/historico_wireframe.png
new file mode 100644
index 0000000..eebd467
Binary files /dev/null and b/docs/static/img/historico_wireframe.png differ
diff --git a/docs/static/img/homepage_wireframe.png b/docs/static/img/homepage_wireframe.png
new file mode 100644
index 0000000..00a95a0
Binary files /dev/null and b/docs/static/img/homepage_wireframe.png differ
diff --git a/docs/static/img/login_wireflow.png b/docs/static/img/login_wireflow.png
new file mode 100644
index 0000000..0582594
Binary files /dev/null and b/docs/static/img/login_wireflow.png differ
diff --git a/docs/static/img/login_wireframe.png b/docs/static/img/login_wireframe.png
new file mode 100644
index 0000000..48af71b
Binary files /dev/null and b/docs/static/img/login_wireframe.png differ
diff --git a/docs/static/img/prototipagem_video.gif b/docs/static/img/prototipagem_video.gif
new file mode 100644
index 0000000..dc05dc3
Binary files /dev/null and b/docs/static/img/prototipagem_video.gif differ
diff --git a/docs/static/img/separacao_wireflow.png b/docs/static/img/separacao_wireflow.png
new file mode 100644
index 0000000..215d093
Binary files /dev/null and b/docs/static/img/separacao_wireflow.png differ
diff --git "a/docs/static/img/separa\303\247\303\243o das fitas de medicamento.png" "b/docs/static/img/separa\303\247\303\243o das fitas de medicamento.png"
new file mode 100644
index 0000000..1f35998
Binary files /dev/null and "b/docs/static/img/separa\303\247\303\243o das fitas de medicamento.png" differ