diff --git a/data/api.json b/data/api.json
index 45eb641..fc917fc 100644
--- a/data/api.json
+++ b/data/api.json
@@ -38,31 +38,45 @@
       "description": "Cenas finalizadas"
     }
   ],
+  "actors": [
+    {
+      "id": "1",
+      "name": "Jaja",
+      "bio": "Ator principal com experiência em teatro e TV",
+      "scenes": []
+    }
+  ],
   "scenes": [
     {
       "id": "1",
-      "title": "A Chegada",
+      "title": "A Chegada 2",
       "description": "João chega à cidade em busca de uma nova vida",
-      "step": 1,
+      "step": 2,
       "episode": "1",
       "columnId": "column-1",
-      "recordDate": "2000-03-15",
+      "recordDate": "2026-03-15",
       "recordLocation": "Estúdio Central",
-      "updatedAt": "2025-06-05T23:23:13.281Z",
-      "version": 0.9819784473304957
+      "order": 20,
+      "updatedAt": "2025-06-16T16:26:31.504Z",
+      "version": 0.02944438360700985
     },
     {
       "id": "2",
-      "step": 2,
+      "title": "O Encontro 2",
+      "description": "João conhece Maria na praça da cidade",
+      "step": 3,
       "episode": "1",
-      "title": "O Encontro",
       "columnId": "column-2",
-      "recordDate": "2024-03-20",
+      "recordDate": "2026-03-20",
       "recordLocation": "Praça Central",
-      "description": "João conhece Maria na praça da cidade"
+      "order": 20,
+      "actors": [],
+      "updatedAt": "2025-06-17T02:05:47.821Z",
+      "version": 0.26566516779415716
     },
     {
       "id": "3",
+      "order": 2,
       "step": 3,
       "episode": "1",
       "title": "A Conversa",
@@ -73,6 +87,7 @@
     },
     {
       "id": "4",
+      "order": 3,
       "step": 4,
       "episode": "1",
       "title": "O Desafio",
@@ -83,6 +98,7 @@
     },
     {
       "id": "5",
+      "order": 4,
       "step": 5,
       "episode": "1",
       "title": "A Vitória",
@@ -93,26 +109,34 @@
     },
     {
       "id": "6",
-      "step": 1,
+      "order": 21,
+      "step": 2,
       "episode": "2",
       "title": "Novos Horizontes",
       "columnId": "column-6",
       "recordDate": "2024-04-10",
       "recordLocation": "Estúdio Central",
-      "description": "Maria apresenta João a novos amigos"
+      "description": "Maria apresenta João a novos amigos",
+      "updatedAt": "2025-06-16T16:26:37.455Z",
+      "version": 0.971949121331033
     },
     {
       "id": "7",
-      "step": 2,
+      "title": "O Projeto 2",
+      "description": "João e Maria começam um projeto juntos",
+      "step": 3,
       "episode": "2",
-      "title": "O Projeto",
-      "columnId": "column-7",
-      "recordDate": "2024-04-15",
+      "recordDate": "2029-04-15",
       "recordLocation": "Sala de Reuniões",
-      "description": "João e Maria começam um projeto juntos"
+      "columnId": "column-7",
+      "order": 21,
+      "actors": [],
+      "updatedAt": "2025-06-17T03:16:30.519Z",
+      "version": 0.7616206455723247
     },
     {
       "id": "8",
+      "order": 7,
       "step": 3,
       "episode": "2",
       "title": "Os Obstáculos",
@@ -123,6 +147,7 @@
     },
     {
       "id": "9",
+      "order": 8,
       "step": 4,
       "episode": "2",
       "title": "A Superação",
@@ -133,6 +158,7 @@
     },
     {
       "id": "10",
+      "order": 9,
       "step": 5,
       "episode": "2",
       "title": "O Sucesso",
@@ -143,17 +169,21 @@
     },
     {
       "id": "11",
-      "step": 1,
+      "order": 22,
+      "step": 2,
       "episode": "3",
       "title": "A Mudança",
       "columnId": "column-11",
       "recordDate": "2024-05-05",
       "recordLocation": "Estúdio Central",
-      "description": "João decide mudar de cidade"
+      "description": "João decide mudar de cidade",
+      "updatedAt": "2025-06-16T16:26:47.742Z",
+      "version": 0.1521792912180978
     },
     {
       "id": "12",
-      "step": 2,
+      "order": 22,
+      "step": 3,
       "episode": "3",
       "title": "A Despedida",
       "columnId": "column-12",
@@ -163,6 +193,7 @@
     },
     {
       "id": "13",
+      "order": 12,
       "step": 3,
       "episode": "3",
       "title": "A Saudade",
@@ -173,6 +204,7 @@
     },
     {
       "id": "14",
+      "order": 13,
       "step": 4,
       "episode": "3",
       "title": "A Decisão",
@@ -183,6 +215,7 @@
     },
     {
       "id": "15",
+      "order": 14,
       "step": 5,
       "episode": "3",
       "title": "O Reencontro",
@@ -193,16 +226,21 @@
     },
     {
       "id": "16",
+      "title": "Novos Planos",
+      "description": "O casal faz novos planos juntos",
       "step": 1,
       "episode": "4",
-      "title": "Novos Planos",
-      "columnId": "column-16",
       "recordDate": "2024-06-01",
       "recordLocation": "Café",
-      "description": "O casal faz novos planos juntos"
+      "columnId": "column-16",
+      "order": 15,
+      "actors": [
+        "1"
+      ]
     },
     {
       "id": "17",
+      "order": 16,
       "step": 2,
       "episode": "4",
       "title": "A Busca",
@@ -213,6 +251,7 @@
     },
     {
       "id": "18",
+      "order": 17,
       "step": 3,
       "episode": "4",
       "title": "A Escolha",
@@ -223,6 +262,7 @@
     },
     {
       "id": "19",
+      "order": 18,
       "step": 4,
       "episode": "4",
       "title": "A Mudança",
@@ -233,6 +273,7 @@
     },
     {
       "id": "20",
+      "order": 19,
       "step": 5,
       "episode": "4",
       "title": "A Festa",
@@ -243,6 +284,7 @@
     },
     {
       "id": "21",
+      "order": 20,
       "step": 1,
       "episode": "5",
       "title": "O Trabalho",
@@ -253,6 +295,7 @@
     },
     {
       "id": "22",
+      "order": 21,
       "step": 2,
       "episode": "5",
       "title": "A Adaptação",
@@ -263,6 +306,7 @@
     },
     {
       "id": "23",
+      "order": 22,
       "step": 3,
       "episode": "5",
       "title": "Os Colegas",
@@ -273,6 +317,7 @@
     },
     {
       "id": "24",
+      "order": 23,
       "step": 4,
       "episode": "5",
       "title": "O Projeto",
@@ -283,6 +328,7 @@
     },
     {
       "id": "25",
+      "order": 24,
       "step": 5,
       "episode": "5",
       "title": "O Sucesso",
@@ -293,6 +339,7 @@
     },
     {
       "id": "26",
+      "order": 25,
       "step": 1,
       "episode": "6",
       "title": "A Promoção",
@@ -303,6 +350,7 @@
     },
     {
       "id": "27",
+      "order": 26,
       "step": 2,
       "episode": "6",
       "title": "A Celebração",
@@ -313,6 +361,7 @@
     },
     {
       "id": "28",
+      "order": 27,
       "step": 3,
       "episode": "6",
       "title": "Os Novos Desafios",
@@ -323,6 +372,7 @@
     },
     {
       "id": "29",
+      "order": 28,
       "step": 4,
       "episode": "6",
       "title": "A Equipe",
@@ -333,6 +383,7 @@
     },
     {
       "id": "30",
+      "order": 29,
       "step": 5,
       "episode": "6",
       "title": "O Resultado",
@@ -343,6 +394,7 @@
     },
     {
       "id": "31",
+      "order": 30,
       "step": 1,
       "episode": "7",
       "title": "A Viagem",
@@ -353,6 +405,7 @@
     },
     {
       "id": "32",
+      "order": 31,
       "step": 2,
       "episode": "7",
       "title": "O Encontro",
@@ -363,6 +416,7 @@
     },
     {
       "id": "33",
+      "order": 32,
       "step": 3,
       "episode": "7",
       "title": "A Negociação",
@@ -373,6 +427,7 @@
     },
     {
       "id": "34",
+      "order": 33,
       "step": 4,
       "episode": "7",
       "title": "O Contrato",
@@ -383,6 +438,7 @@
     },
     {
       "id": "35",
+      "order": 34,
       "step": 5,
       "episode": "7",
       "title": "O Retorno",
@@ -393,6 +449,7 @@
     },
     {
       "id": "36",
+      "order": 35,
       "step": 1,
       "episode": "8",
       "title": "A Surpresa",
@@ -403,6 +460,7 @@
     },
     {
       "id": "37",
+      "order": 36,
       "step": 2,
       "episode": "8",
       "title": "A Decisão",
@@ -413,6 +471,7 @@
     },
     {
       "id": "38",
+      "order": 37,
       "step": 3,
       "episode": "8",
       "title": "O Momento",
@@ -423,6 +482,7 @@
     },
     {
       "id": "39",
+      "order": 38,
       "step": 4,
       "episode": "8",
       "title": "A Celebração",
@@ -433,6 +493,7 @@
     },
     {
       "id": "40",
+      "order": 39,
       "step": 5,
       "episode": "8",
       "title": "O Futuro",
@@ -443,6 +504,7 @@
     },
     {
       "id": "41",
+      "order": 40,
       "step": 1,
       "episode": "9",
       "title": "A Mudança",
@@ -453,6 +515,7 @@
     },
     {
       "id": "42",
+      "order": 41,
       "step": 2,
       "episode": "9",
       "title": "A Adaptação",
@@ -463,6 +526,7 @@
     },
     {
       "id": "43",
+      "order": 42,
       "step": 3,
       "episode": "9",
       "title": "Os Desafios",
@@ -473,6 +537,7 @@
     },
     {
       "id": "44",
+      "order": 43,
       "step": 4,
       "episode": "9",
       "title": "A Superação",
@@ -483,6 +548,7 @@
     },
     {
       "id": "45",
+      "order": 44,
       "step": 5,
       "episode": "9",
       "title": "O Sucesso",
@@ -493,6 +559,7 @@
     },
     {
       "id": "46",
+      "order": 45,
       "step": 1,
       "episode": "10",
       "title": "O Projeto",
@@ -503,6 +570,7 @@
     },
     {
       "id": "47",
+      "order": 46,
       "step": 2,
       "episode": "10",
       "title": "A Equipe",
@@ -513,6 +581,7 @@
     },
     {
       "id": "48",
+      "order": 47,
       "step": 3,
       "episode": "10",
       "title": "O Desenvolvimento",
@@ -523,6 +592,7 @@
     },
     {
       "id": "49",
+      "order": 48,
       "step": 4,
       "episode": "10",
       "title": "Os Ajustes",
@@ -533,6 +603,7 @@
     },
     {
       "id": "50",
+      "order": 49,
       "step": 5,
       "episode": "10",
       "title": "A Conclusão",
@@ -543,6 +614,7 @@
     },
     {
       "id": "51",
+      "order": 50,
       "step": 1,
       "episode": "11",
       "title": "A Viagem",
@@ -553,6 +625,7 @@
     },
     {
       "id": "52",
+      "order": 51,
       "step": 2,
       "episode": "11",
       "title": "O Destino",
@@ -563,6 +636,7 @@
     },
     {
       "id": "53",
+      "order": 52,
       "step": 3,
       "episode": "11",
       "title": "A Exploração",
@@ -573,6 +647,7 @@
     },
     {
       "id": "54",
+      "order": 53,
       "step": 4,
       "episode": "11",
       "title": "As Descobertas",
@@ -583,6 +658,7 @@
     },
     {
       "id": "55",
+      "order": 54,
       "step": 5,
       "episode": "11",
       "title": "O Retorno",
@@ -593,6 +669,7 @@
     },
     {
       "id": "56",
+      "order": 55,
       "step": 1,
       "episode": "12",
       "title": "A Festa",
@@ -603,6 +680,7 @@
     },
     {
       "id": "57",
+      "order": 56,
       "step": 2,
       "episode": "12",
       "title": "Os Convidados",
@@ -613,6 +691,7 @@
     },
     {
       "id": "58",
+      "order": 57,
       "step": 3,
       "episode": "12",
       "title": "A Celebração",
@@ -623,6 +702,7 @@
     },
     {
       "id": "59",
+      "order": 58,
       "step": 4,
       "episode": "12",
       "title": "Os Momentos",
@@ -633,6 +713,7 @@
     },
     {
       "id": "60",
+      "order": 59,
       "step": 5,
       "episode": "12",
       "title": "A Despedida",
@@ -643,6 +724,7 @@
     },
     {
       "id": "61",
+      "order": 60,
       "step": 1,
       "episode": "13",
       "title": "O Ano Novo",
@@ -653,6 +735,7 @@
     },
     {
       "id": "62",
+      "order": 61,
       "step": 2,
       "episode": "13",
       "title": "As Metas",
@@ -663,6 +746,7 @@
     },
     {
       "id": "63",
+      "order": 62,
       "step": 3,
       "episode": "13",
       "title": "Os Objetivos",
@@ -673,6 +757,7 @@
     },
     {
       "id": "64",
+      "order": 63,
       "step": 4,
       "episode": "13",
       "title": "O Plano",
@@ -683,6 +768,7 @@
     },
     {
       "id": "65",
+      "order": 64,
       "step": 5,
       "episode": "13",
       "title": "A Execução",
@@ -693,6 +779,7 @@
     },
     {
       "id": "66",
+      "order": 65,
       "step": 1,
       "episode": "14",
       "title": "O Desafio",
@@ -703,6 +790,7 @@
     },
     {
       "id": "67",
+      "order": 66,
       "step": 2,
       "episode": "14",
       "title": "A Preparação",
@@ -713,6 +801,7 @@
     },
     {
       "id": "68",
+      "order": 67,
       "step": 3,
       "episode": "14",
       "title": "O Enfrentamento",
@@ -723,6 +812,7 @@
     },
     {
       "id": "69",
+      "order": 68,
       "step": 4,
       "episode": "14",
       "title": "A Superação",
@@ -733,6 +823,7 @@
     },
     {
       "id": "70",
+      "order": 69,
       "step": 5,
       "episode": "14",
       "title": "A Vitória",
@@ -743,6 +834,7 @@
     },
     {
       "id": "71",
+      "order": 70,
       "step": 1,
       "episode": "15",
       "title": "A Mudança",
@@ -753,6 +845,7 @@
     },
     {
       "id": "72",
+      "order": 71,
       "step": 2,
       "episode": "15",
       "title": "A Adaptação",
@@ -763,6 +856,7 @@
     },
     {
       "id": "73",
+      "order": 72,
       "step": 3,
       "episode": "15",
       "title": "Os Novos Caminhos",
@@ -773,6 +867,7 @@
     },
     {
       "id": "74",
+      "order": 73,
       "step": 4,
       "episode": "15",
       "title": "As Descobertas",
@@ -783,6 +878,7 @@
     },
     {
       "id": "75",
+      "order": 74,
       "step": 5,
       "episode": "15",
       "title": "O Futuro",
@@ -793,6 +889,7 @@
     },
     {
       "id": "76",
+      "order": 75,
       "step": 1,
       "episode": "16",
       "title": "O Projeto",
@@ -803,6 +900,7 @@
     },
     {
       "id": "77",
+      "order": 76,
       "step": 2,
       "episode": "16",
       "title": "A Equipe",
@@ -813,6 +911,7 @@
     },
     {
       "id": "78",
+      "order": 77,
       "step": 3,
       "episode": "16",
       "title": "O Desenvolvimento",
@@ -823,6 +922,7 @@
     },
     {
       "id": "79",
+      "order": 78,
       "step": 4,
       "episode": "16",
       "title": "Os Ajustes",
@@ -833,6 +933,7 @@
     },
     {
       "id": "80",
+      "order": 79,
       "step": 5,
       "episode": "16",
       "title": "A Conclusão",
@@ -843,6 +944,7 @@
     },
     {
       "id": "81",
+      "order": 80,
       "step": 1,
       "episode": "17",
       "title": "A Viagem",
@@ -853,6 +955,7 @@
     },
     {
       "id": "82",
+      "order": 81,
       "step": 2,
       "episode": "17",
       "title": "O Destino",
@@ -863,6 +966,7 @@
     },
     {
       "id": "83",
+      "order": 82,
       "step": 3,
       "episode": "17",
       "title": "A Exploração",
@@ -873,6 +977,7 @@
     },
     {
       "id": "84",
+      "order": 83,
       "step": 4,
       "episode": "17",
       "title": "As Descobertas",
@@ -883,6 +988,7 @@
     },
     {
       "id": "85",
+      "order": 84,
       "step": 5,
       "episode": "17",
       "title": "O Retorno",
@@ -893,6 +999,7 @@
     },
     {
       "id": "86",
+      "order": 85,
       "step": 1,
       "episode": "18",
       "title": "A Festa",
@@ -903,6 +1010,7 @@
     },
     {
       "id": "87",
+      "order": 86,
       "step": 2,
       "episode": "18",
       "title": "Os Convidados",
@@ -913,6 +1021,7 @@
     },
     {
       "id": "88",
+      "order": 87,
       "step": 3,
       "episode": "18",
       "title": "A Celebração",
@@ -923,6 +1032,7 @@
     },
     {
       "id": "89",
+      "order": 88,
       "step": 4,
       "episode": "18",
       "title": "Os Momentos",
@@ -933,6 +1043,7 @@
     },
     {
       "id": "90",
+      "order": 89,
       "step": 5,
       "episode": "18",
       "title": "A Despedida",
@@ -943,6 +1054,7 @@
     },
     {
       "id": "91",
+      "order": 90,
       "step": 1,
       "episode": "19",
       "title": "O Ano Novo",
@@ -953,6 +1065,7 @@
     },
     {
       "id": "92",
+      "order": 91,
       "step": 2,
       "episode": "19",
       "title": "As Metas",
@@ -963,6 +1076,7 @@
     },
     {
       "id": "93",
+      "order": 92,
       "step": 3,
       "episode": "19",
       "title": "Os Objetivos",
@@ -973,6 +1087,7 @@
     },
     {
       "id": "94",
+      "order": 93,
       "step": 4,
       "episode": "19",
       "title": "O Plano",
@@ -983,6 +1098,7 @@
     },
     {
       "id": "95",
+      "order": 94,
       "step": 5,
       "episode": "19",
       "title": "A Execução",
@@ -993,6 +1109,7 @@
     },
     {
       "id": "96",
+      "order": 95,
       "step": 1,
       "episode": "20",
       "title": "O Desafio",
@@ -1003,6 +1120,7 @@
     },
     {
       "id": "97",
+      "order": 96,
       "step": 2,
       "episode": "20",
       "title": "A Preparação",
@@ -1013,6 +1131,7 @@
     },
     {
       "id": "98",
+      "order": 97,
       "step": 3,
       "episode": "20",
       "title": "O Enfrentamento",
@@ -1023,6 +1142,7 @@
     },
     {
       "id": "99",
+      "order": 98,
       "step": 4,
       "episode": "20",
       "title": "A Superação",
@@ -1033,6 +1153,7 @@
     },
     {
       "id": "100",
+      "order": 99,
       "step": 5,
       "episode": "20",
       "title": "A Vitória",
diff --git a/package.json b/package.json
index 9b54b86..7f8f3d1 100644
--- a/package.json
+++ b/package.json
@@ -11,16 +11,20 @@
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@headlessui/react": "^2.2.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "daisyui": "^5.0.43",
     "lucide-react": "^0.511.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-hot-toast": "^2.5.2",
     "react-router-dom": "^7.6.1",
     "tailwind-merge": "^3.3.0",
-    "tailwindcss": "^4.1.8"
+    "tailwindcss": "^4.1.8",
+    "zod": "^3.25.67"
   },
   "devDependencies": {
     "@eslint/js": "^9.27.0",
@@ -35,6 +39,7 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "globals": "^16.2.0",
+    "json-server": "1.0.0-beta.3",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.33.0",
     "vite": "^6.3.5"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d1a1c5b..208c6d7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,9 @@ importers:
       '@dnd-kit/core':
         specifier: ^6.3.1
         version: 6.3.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@dnd-kit/sortable':
+        specifier: ^10.0.0
+        version: 10.0.0(@dnd-kit/core@6.3.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react@19.1.0)
       '@dnd-kit/utilities':
         specifier: ^3.2.2
         version: 3.2.2(react@19.1.0)
@@ -23,6 +26,9 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      daisyui:
+        specifier: ^5.0.43
+        version: 5.0.43
       lucide-react:
         specifier: ^0.511.0
         version: 0.511.0(react@19.1.0)
@@ -32,6 +38,9 @@ importers:
       react-dom:
         specifier: ^19.1.0
         version: 19.1.0(react@19.1.0)
+      react-hot-toast:
+        specifier: ^2.5.2
+        version: 2.5.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       react-router-dom:
         specifier: ^7.6.1
         version: 7.6.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -41,6 +50,9 @@ importers:
       tailwindcss:
         specifier: ^4.1.8
         version: 4.1.8
+      zod:
+        specifier: ^3.25.67
+        version: 3.25.67
     devDependencies:
       '@eslint/js':
         specifier: ^9.27.0
@@ -78,6 +90,9 @@ importers:
       globals:
         specifier: ^16.2.0
         version: 16.2.0
+      json-server:
+        specifier: 1.0.0-beta.3
+        version: 1.0.0-beta.3
       typescript:
         specifier: ~5.8.3
         version: 5.8.3
@@ -184,6 +199,12 @@ packages:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
 
+  '@dnd-kit/sortable@10.0.0':
+    resolution: {integrity: sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==}
+    peerDependencies:
+      '@dnd-kit/core': ^6.3.0
+      react: '>=16.8.0'
+
   '@dnd-kit/utilities@3.2.2':
     resolution: {integrity: sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==}
     peerDependencies:
@@ -463,6 +484,9 @@ packages:
     resolution: {integrity: sha512-ROFF39F6ZrnzSUEmQQZUar0Jt4xVoP9WnDRdWwF4NNcXs3xBTLgBUDoOwW141y1jP+S8nahIbdxbFC7IShw9Iw==}
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
 
+  '@polka/url@1.0.0-next.29':
+    resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
+
   '@react-aria/focus@3.20.3':
     resolution: {integrity: sha512-rR5uZUMSY4xLHmpK/I8bP1V6vUNHFo33gTvrvNUsAKKqvMfa7R2nu5A6v97dr5g6tVH6xzpdkPsOJCWh90H2cw==}
     peerDependencies:
@@ -708,6 +732,82 @@ packages:
   '@tanstack/virtual-core@3.13.9':
     resolution: {integrity: sha512-3jztt0jpaoJO5TARe2WIHC1UQC3VMLAFUW5mmMo0yrkwtDB2AQP0+sh10BVUpWrnvHjSLvzFizydtEGLCJKFoQ==}
 
+  '@tinyhttp/accepts@2.2.3':
+    resolution: {integrity: sha512-9pQN6pJAJOU3McmdJWTcyq7LLFW8Lj5q+DadyKcvp+sxMkEpktKX5sbfJgJuOvjk6+1xWl7pe0YL1US1vaO/1w==}
+    engines: {node: '>=12.20.0'}
+
+  '@tinyhttp/app@2.5.2':
+    resolution: {integrity: sha512-DcB3Y8GQppLQlO2VxRYF7LzTEAoZb+VRQXuIsErcu2fNaM1xdx6NQZDso5rlZUiaeg6KYYRfU34N4XkZbv6jSA==}
+    engines: {node: '>=14.21.3'}
+
+  '@tinyhttp/content-disposition@2.2.2':
+    resolution: {integrity: sha512-crXw1txzrS36huQOyQGYFvhTeLeG0Si1xu+/l6kXUVYpE0TjFjEZRqTbuadQLfKGZ0jaI+jJoRyqaWwxOSHW2g==}
+    engines: {node: '>=12.20.0'}
+
+  '@tinyhttp/content-type@0.1.4':
+    resolution: {integrity: sha512-dl6f3SHIJPYbhsW1oXdrqOmLSQF/Ctlv3JnNfXAE22kIP7FosqJHxkz/qj2gv465prG8ODKH5KEyhBkvwrueKQ==}
+    engines: {node: '>=12.4'}
+
+  '@tinyhttp/cookie-signature@2.1.1':
+    resolution: {integrity: sha512-VDsSMY5OJfQJIAtUgeQYhqMPSZptehFSfvEEtxr+4nldPA8IImlp3QVcOVuK985g4AFR4Hl1sCbWCXoqBnVWnw==}
+    engines: {node: '>=12.20.0'}
+
+  '@tinyhttp/cookie@2.1.1':
+    resolution: {integrity: sha512-h/kL9jY0e0Dvad+/QU3efKZww0aTvZJslaHj3JTPmIPC9Oan9+kYqmh3M6L5JUQRuTJYFK2nzgL2iJtH2S+6dA==}
+    engines: {node: '>=12.20.0'}
+
+  '@tinyhttp/cors@2.0.1':
+    resolution: {integrity: sha512-qrmo6WJuaiCzKWagv2yA/kw6hIISfF/hOqPWwmI6w0o8apeTMmRN3DoCFvQ/wNVuWVdU5J4KU7OX8aaSOEq51A==}
+    engines: {node: '>=12.20 || 14.x || >=16'}
+
+  '@tinyhttp/encode-url@2.1.1':
+    resolution: {integrity: sha512-AhY+JqdZ56qV77tzrBm0qThXORbsVjs/IOPgGCS7x/wWnsa/Bx30zDUU/jPAUcSzNOzt860x9fhdGpzdqbUeUw==}
+    engines: {node: '>=12.20.0'}
+
+  '@tinyhttp/etag@2.1.2':
+    resolution: {integrity: sha512-j80fPKimGqdmMh6962y+BtQsnYPVCzZfJw0HXjyH70VaJBHLKGF+iYhcKqzI3yef6QBNa8DKIPsbEYpuwApXTw==}
+    engines: {node: '>=12.20.0'}
+
+  '@tinyhttp/forwarded@2.1.2':
+    resolution: {integrity: sha512-9H/eulJ68ElY/+zYpTpNhZ7vxGV+cnwaR6+oQSm7bVgZMyuQfgROW/qvZuhmgDTIxnGMXst+Ba4ij6w6Krcs3w==}
+    engines: {node: '>=12.20.0'}
+
+  '@tinyhttp/logger@2.1.0':
+    resolution: {integrity: sha512-Ma1fJ9CwUbn9r61/4HW6+nflsVoslpOnCrfQ6UeZq7GGIgwLzofms3HoSVG7M+AyRMJpxlfcDdbH5oFVroDMKA==}
+    engines: {node: '>=14.18 || >=16.20'}
+
+  '@tinyhttp/proxy-addr@2.2.1':
+    resolution: {integrity: sha512-BicqMqVI91hHq2BQmnqJUh0FQUnx7DncwSGgu2ghlh+JZG2rHK2ZN/rXkfhrx1rrUw6hnd0L36O8GPMh01+dDQ==}
+    engines: {node: '>=12.20.0'}
+
+  '@tinyhttp/req@2.2.5':
+    resolution: {integrity: sha512-trfsXwtmsNjMcGKcLJ+45h912kLRqBQCQD06ams3Tq0kf4gHLxjHjoYOC1Z9yGjOn81XllRx8wqvnvr+Kbe3gw==}
+    engines: {node: '>=12.20.0'}
+
+  '@tinyhttp/res@2.2.5':
+    resolution: {integrity: sha512-yBsqjWygpuKAVz4moWlP4hqzwiDDqfrn2mA0wviJAcgvGiyOErtlQwXY7aj3aPiCpURvxvEFO//Gdy6yV+xEpA==}
+    engines: {node: '>=12.20.0'}
+
+  '@tinyhttp/router@2.2.3':
+    resolution: {integrity: sha512-O0MQqWV3Vpg/uXsMYg19XsIgOhwjyhTYWh51Qng7bxqXixxx2PEvZWnFjP7c84K7kU/nUX41KpkEBTLnznk9/Q==}
+    engines: {node: '>=12.20.0'}
+
+  '@tinyhttp/send@2.2.3':
+    resolution: {integrity: sha512-o4cVHHGQ8WjVBS8UT0EE/2WnjoybrfXikHwsRoNlG1pfrC/Sd01u1N4Te8cOd/9aNGLr4mGxWb5qTm2RRtEi7g==}
+    engines: {node: '>=12.20.0'}
+
+  '@tinyhttp/type-is@2.2.4':
+    resolution: {integrity: sha512-7F328NheridwjIfefBB2j1PEcKKABpADgv7aCJaE8x8EON77ZFrAkI3Rir7pGjopV7V9MBmW88xUQigBEX2rmQ==}
+    engines: {node: '>=12.20.0'}
+
+  '@tinyhttp/url@2.1.1':
+    resolution: {integrity: sha512-POJeq2GQ5jI7Zrdmj22JqOijB5/GeX+LEX7DUdml1hUnGbJOTWDx7zf2b5cCERj7RoXL67zTgyzVblBJC+NJWg==}
+    engines: {node: '>=12.20.0'}
+
+  '@tinyhttp/vary@0.1.3':
+    resolution: {integrity: sha512-SoL83sQXAGiHN1jm2VwLUWQSQeDAAl1ywOm6T0b0Cg1CZhVsjoiZadmjhxF6FHCCY7OHHVaLnTgSMxTPIDLxMg==}
+    engines: {node: '>=12.20'}
+
   '@trivago/prettier-plugin-sort-imports@5.2.2':
     resolution: {integrity: sha512-fYDQA9e6yTNmA13TLVSA+WMQRc5Bn/c0EUBditUHNfMMxN7M82c38b1kEggVE3pLpZ0FwkwJkUEKMiOi52JXFA==}
     engines: {node: '>18.12'}
@@ -909,6 +1009,14 @@ packages:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
 
+  chalk@5.4.1:
+    resolution: {integrity: sha512-zgVZuo2WcZgfUEmsn6eO3kINexW8RAE4maiQ8QNs8CtpPCSyMiYsULR3HQYkm3w8FIA3SberyMJMSldGsW+U3w==}
+    engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
+
+  chokidar@4.0.3:
+    resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
+    engines: {node: '>= 14.16.0'}
+
   chownr@3.0.0:
     resolution: {integrity: sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==}
     engines: {node: '>=18'}
@@ -927,6 +1035,9 @@ packages:
   color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
+  colorette@2.0.20:
+    resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
+
   concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
@@ -944,6 +1055,9 @@ packages:
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
+  daisyui@5.0.43:
+    resolution: {integrity: sha512-2pshHJ73vetSpsbAyaOncGnNYL0mwvgseS1EWy1I9Qpw8D11OuBoDNIWrPIME4UFcq2xuff3A9x+eXbuFR9fUQ==}
+
   data-view-buffer@1.0.2:
     resolution: {integrity: sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==}
     engines: {node: '>= 0.4'}
@@ -956,6 +1070,9 @@ packages:
     resolution: {integrity: sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==}
     engines: {node: '>= 0.4'}
 
+  dayjs@1.11.13:
+    resolution: {integrity: sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==}
+
   debug@3.2.7:
     resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
     peerDependencies:
@@ -992,6 +1109,10 @@ packages:
     resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
     engines: {node: '>=0.10.0'}
 
+  dot-prop@9.0.0:
+    resolution: {integrity: sha512-1gxPBJpI/pcjQhKgIU91II6Wkay+dLcN3M6rf2uwP8hRur3HtQXjVrdAK3sjC0piaEuxzMwjXChcETiJl47lAQ==}
+    engines: {node: '>=18'}
+
   dunder-proto@1.0.1:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
     engines: {node: '>= 0.4'}
@@ -1015,6 +1136,10 @@ packages:
     resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
     engines: {node: '>= 0.4'}
 
+  es-escape-html@0.1.1:
+    resolution: {integrity: sha512-yUx1o+8RsG7UlszmYPtks+dm6Lho2m8lgHMOsLJQsFI0R8XwUJwiMhM1M4E/S8QLeGyf6MkDV/pWgjQ0tdTSyQ==}
+    engines: {node: '>=12.x'}
+
   es-object-atoms@1.1.1:
     resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
     engines: {node: '>= 0.4'}
@@ -1145,6 +1270,10 @@ packages:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
     engines: {node: '>=0.10.0'}
 
+  eta@3.5.0:
+    resolution: {integrity: sha512-e3x3FBvGzeCIHhF+zhK8FZA2vC5uFn6b4HJjegUbIWrDb4mJ7JjTGMJY9VGIbRVpmSwHopNiaJibhjIr+HfLug==}
+    engines: {node: '>=6.0.0'}
+
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
@@ -1250,6 +1379,11 @@ packages:
     resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==}
     engines: {node: '>= 0.4'}
 
+  goober@2.1.16:
+    resolution: {integrity: sha512-erjk19y1U33+XAMe1VTvIONHYoSqE4iS7BYUZfHaqeohLmnC0FdxEh7rQU+6MZ4OajItzjZFSRtVANrQwNq6/g==}
+    peerDependencies:
+      csstype: ^3.0.10
+
   gopd@1.2.0:
     resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
     engines: {node: '>= 0.4'}
@@ -1287,6 +1421,13 @@ packages:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
 
+  header-range-parser@1.1.3:
+    resolution: {integrity: sha512-B9zCFt3jH8g09LR1vHL4pcAn8yMEtlSlOUdQemzHMRKMImNIhhszdeosYFfNW0WXKQtXIlWB+O4owHJKvEJYaA==}
+    engines: {node: '>=12.22.0'}
+
+  http-status-emojis@2.2.0:
+    resolution: {integrity: sha512-ompKtgwpx8ff0hsbpIB7oE4ax1LXoHmftsHHStMELX56ivG3GhofTX8ZHWlUaFKfGjcGjw6G3rPk7dJRXMmbbg==}
+
   ignore@5.3.2:
     resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
     engines: {node: '>= 4'}
@@ -1303,10 +1444,18 @@ packages:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
 
+  inflection@3.0.2:
+    resolution: {integrity: sha512-+Bg3+kg+J6JUWn8J6bzFmOWkTQ6L/NHfDRSYU+EVvuKHDxUDHAXgqixHfVlzuBQaPOTac8hn43aPhMNk6rMe3g==}
+    engines: {node: '>=18.0.0'}
+
   internal-slot@1.1.0:
     resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
     engines: {node: '>= 0.4'}
 
+  ipaddr.js@2.2.0:
+    resolution: {integrity: sha512-Ag3wB2o37wslZS19hZqorUnrnzSkpOVy+IiiDEiTqNubEYpYuHWIf6K4psgN2ZWKExS4xhVCrRVfb/wfW8fWJA==}
+    engines: {node: '>= 10'}
+
   is-array-buffer@3.0.5:
     resolution: {integrity: sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==}
     engines: {node: '>= 0.4'}
@@ -1438,6 +1587,11 @@ packages:
   json-schema-traverse@0.4.1:
     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
 
+  json-server@1.0.0-beta.3:
+    resolution: {integrity: sha512-DwE69Ep5ccwIJZBUIWEENC30Yj8bwr4Ax9W9VoIWAYnB8Sj4ReptscO8/DRHv/nXwVlmb3Bk73Ls86+VZdYkkA==}
+    engines: {node: '>=18.3'}
+    hasBin: true
+
   json-stable-stringify-without-jsonify@1.0.1:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
 
@@ -1531,6 +1685,10 @@ packages:
   lodash@4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
 
+  lowdb@7.0.1:
+    resolution: {integrity: sha512-neJAj8GwF0e8EpycYIDFqEPcx9Qz4GUho20jWFR7YiFeXzF1YMLdxB36PypcTSPMA+4+LvgyMacYhlr18Zlymw==}
+    engines: {node: '>=18'}
+
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
@@ -1554,6 +1712,15 @@ packages:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
 
+  milliparsec@4.0.0:
+    resolution: {integrity: sha512-/wk9d4Z6/9ZvoEH/6BI4TrTCgmkpZPuSRN/6fI9aUHOfXdNTuj/VhLS7d+NqG26bi6L9YmGXutVYvWC8zQ0qtA==}
+    engines: {node: '>=20'}
+
+  mime@4.0.4:
+    resolution: {integrity: sha512-v8yqInVjhXyqP6+Kw4fV3ZzeMRqEW6FotRsKXjRS5VMTNIuXsdRoAvklpoRgSqXm6o9VNH4/C0mgedko9DdLsQ==}
+    engines: {node: '>=16'}
+    hasBin: true
+
   minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
 
@@ -1577,6 +1744,10 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  mrmime@2.0.1:
+    resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
+    engines: {node: '>=10'}
+
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
@@ -1588,6 +1759,10 @@ packages:
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
+  negotiator@0.6.4:
+    resolution: {integrity: sha512-myRT3DiWPHqho5PrJaIRyaMv2kgYf0mUVgBNOYMuCH5Ki1yEiQaf/ZJuQ62nvpc44wL5WDbTX7yGJi1Neevw8w==}
+    engines: {node: '>= 0.6'}
+
   node-releases@2.0.19:
     resolution: {integrity: sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==}
 
@@ -1690,6 +1865,13 @@ packages:
     peerDependencies:
       react: ^19.1.0
 
+  react-hot-toast@2.5.2:
+    resolution: {integrity: sha512-Tun3BbCxzmXXM7C+NI4qiv6lT0uwGh4oAfeJyNOjYUejTsm35mK9iCaYLGv8cBz9L5YxZLx/2ii7zsIwPtPUdw==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: '>=16'
+      react-dom: '>=16'
+
   react-refresh@0.17.0:
     resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==}
     engines: {node: '>=0.10.0'}
@@ -1715,6 +1897,10 @@ packages:
     resolution: {integrity: sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==}
     engines: {node: '>=0.10.0'}
 
+  readdirp@4.1.2:
+    resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
+    engines: {node: '>= 14.18.0'}
+
   reflect.getprototypeof@1.0.10:
     resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
     engines: {node: '>= 0.4'}
@@ -1723,6 +1909,10 @@ packages:
     resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==}
     engines: {node: '>= 0.4'}
 
+  regexparam@2.0.2:
+    resolution: {integrity: sha512-A1PeDEYMrkLrfyOwv2jwihXbo9qxdGD3atBYQA9JJgreAx8/7rC6IUkWOw2NQlOxLp2wL0ifQbh1HuidDfYA6w==}
+    engines: {node: '>=8'}
+
   resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
@@ -1807,10 +1997,22 @@ packages:
     resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
     engines: {node: '>= 0.4'}
 
+  sirv@2.0.4:
+    resolution: {integrity: sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==}
+    engines: {node: '>= 10'}
+
+  sort-on@6.1.0:
+    resolution: {integrity: sha512-WTECP0nYNWO1n2g5bpsV0yZN9cBmZsF8ThHFbOqVN0HBFRoaQZLLEMvMmJlKHNPYQeVngeI5+jJzIfFqOIo1OA==}
+    engines: {node: '>=18'}
+
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
 
+  steno@4.0.2:
+    resolution: {integrity: sha512-yhPIQXjrlt1xv7dyPQg2P17URmXbuM5pdGkpiMB3RenprfiBlvK415Lctfe0eshk90oA7/tNq7WEiMK8RSP39A==}
+    engines: {node: '>=18'}
+
   stop-iteration-iterator@1.1.0:
     resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==}
     engines: {node: '>= 0.4'}
@@ -1872,6 +2074,10 @@ packages:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
 
+  totalist@3.0.1:
+    resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
+    engines: {node: '>=6'}
+
   ts-api-utils@2.1.0:
     resolution: {integrity: sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==}
     engines: {node: '>=18.12'}
@@ -1888,6 +2094,10 @@ packages:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
 
+  type-fest@4.41.0:
+    resolution: {integrity: sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==}
+    engines: {node: '>=16'}
+
   typed-array-buffer@1.0.3:
     resolution: {integrity: sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==}
     engines: {node: '>= 0.4'}
@@ -2010,6 +2220,9 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
 
+  zod@3.25.67:
+    resolution: {integrity: sha512-idA2YXwpCdqUSKRCACDE6ItZD9TZzy3OZMtpfLoh6oPR47lipysRrJfjzMqFxQ3uJuUPyUeWe1r9vLH33xO/Qw==}
+
 snapshots:
 
   '@ampproject/remapping@2.3.0':
@@ -2140,6 +2353,13 @@ snapshots:
       react-dom: 19.1.0(react@19.1.0)
       tslib: 2.8.1
 
+  '@dnd-kit/sortable@10.0.0(@dnd-kit/core@6.3.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@dnd-kit/core': 6.3.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@dnd-kit/utilities': 3.2.2(react@19.1.0)
+      react: 19.1.0
+      tslib: 2.8.1
+
   '@dnd-kit/utilities@3.2.2(react@19.1.0)':
     dependencies:
       react: 19.1.0
@@ -2347,6 +2567,8 @@ snapshots:
 
   '@pkgr/core@0.2.4': {}
 
+  '@polka/url@1.0.0-next.29': {}
+
   '@react-aria/focus@3.20.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@react-aria/interactions': 3.25.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -2543,6 +2765,86 @@ snapshots:
 
   '@tanstack/virtual-core@3.13.9': {}
 
+  '@tinyhttp/accepts@2.2.3':
+    dependencies:
+      mime: 4.0.4
+      negotiator: 0.6.4
+
+  '@tinyhttp/app@2.5.2':
+    dependencies:
+      '@tinyhttp/cookie': 2.1.1
+      '@tinyhttp/proxy-addr': 2.2.1
+      '@tinyhttp/req': 2.2.5
+      '@tinyhttp/res': 2.2.5
+      '@tinyhttp/router': 2.2.3
+      header-range-parser: 1.1.3
+      regexparam: 2.0.2
+
+  '@tinyhttp/content-disposition@2.2.2': {}
+
+  '@tinyhttp/content-type@0.1.4': {}
+
+  '@tinyhttp/cookie-signature@2.1.1': {}
+
+  '@tinyhttp/cookie@2.1.1': {}
+
+  '@tinyhttp/cors@2.0.1':
+    dependencies:
+      '@tinyhttp/vary': 0.1.3
+
+  '@tinyhttp/encode-url@2.1.1': {}
+
+  '@tinyhttp/etag@2.1.2': {}
+
+  '@tinyhttp/forwarded@2.1.2': {}
+
+  '@tinyhttp/logger@2.1.0':
+    dependencies:
+      colorette: 2.0.20
+      dayjs: 1.11.13
+      http-status-emojis: 2.2.0
+
+  '@tinyhttp/proxy-addr@2.2.1':
+    dependencies:
+      '@tinyhttp/forwarded': 2.1.2
+      ipaddr.js: 2.2.0
+
+  '@tinyhttp/req@2.2.5':
+    dependencies:
+      '@tinyhttp/accepts': 2.2.3
+      '@tinyhttp/type-is': 2.2.4
+      '@tinyhttp/url': 2.1.1
+      header-range-parser: 1.1.3
+
+  '@tinyhttp/res@2.2.5':
+    dependencies:
+      '@tinyhttp/content-disposition': 2.2.2
+      '@tinyhttp/cookie': 2.1.1
+      '@tinyhttp/cookie-signature': 2.1.1
+      '@tinyhttp/encode-url': 2.1.1
+      '@tinyhttp/req': 2.2.5
+      '@tinyhttp/send': 2.2.3
+      '@tinyhttp/vary': 0.1.3
+      es-escape-html: 0.1.1
+      mime: 4.0.4
+
+  '@tinyhttp/router@2.2.3': {}
+
+  '@tinyhttp/send@2.2.3':
+    dependencies:
+      '@tinyhttp/content-type': 0.1.4
+      '@tinyhttp/etag': 2.1.2
+      mime: 4.0.4
+
+  '@tinyhttp/type-is@2.2.4':
+    dependencies:
+      '@tinyhttp/content-type': 0.1.4
+      mime: 4.0.4
+
+  '@tinyhttp/url@2.1.1': {}
+
+  '@tinyhttp/vary@0.1.3': {}
+
   '@trivago/prettier-plugin-sort-imports@5.2.2(prettier@3.5.3)':
     dependencies:
       '@babel/generator': 7.27.3
@@ -2815,6 +3117,12 @@ snapshots:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
 
+  chalk@5.4.1: {}
+
+  chokidar@4.0.3:
+    dependencies:
+      readdirp: 4.1.2
+
   chownr@3.0.0: {}
 
   class-variance-authority@0.7.1:
@@ -2829,6 +3137,8 @@ snapshots:
 
   color-name@1.1.4: {}
 
+  colorette@2.0.20: {}
+
   concat-map@0.0.1: {}
 
   convert-source-map@2.0.0: {}
@@ -2843,6 +3153,8 @@ snapshots:
 
   csstype@3.1.3: {}
 
+  daisyui@5.0.43: {}
+
   data-view-buffer@1.0.2:
     dependencies:
       call-bound: 1.0.4
@@ -2861,6 +3173,8 @@ snapshots:
       es-errors: 1.3.0
       is-data-view: 1.0.2
 
+  dayjs@1.11.13: {}
+
   debug@3.2.7:
     dependencies:
       ms: 2.1.3
@@ -2889,6 +3203,10 @@ snapshots:
     dependencies:
       esutils: 2.0.3
 
+  dot-prop@9.0.0:
+    dependencies:
+      type-fest: 4.41.0
+
   dunder-proto@1.0.1:
     dependencies:
       call-bind-apply-helpers: 1.0.2
@@ -2963,6 +3281,8 @@ snapshots:
 
   es-errors@1.3.0: {}
 
+  es-escape-html@0.1.1: {}
+
   es-object-atoms@1.1.1:
     dependencies:
       es-errors: 1.3.0
@@ -3147,6 +3467,8 @@ snapshots:
 
   esutils@2.0.3: {}
 
+  eta@3.5.0: {}
+
   fast-deep-equal@3.1.3: {}
 
   fast-diff@1.3.0: {}
@@ -3256,6 +3578,10 @@ snapshots:
       define-properties: 1.2.1
       gopd: 1.2.0
 
+  goober@2.1.16(csstype@3.1.3):
+    dependencies:
+      csstype: 3.1.3
+
   gopd@1.2.0: {}
 
   graceful-fs@4.2.11: {}
@@ -3284,6 +3610,10 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
+  header-range-parser@1.1.3: {}
+
+  http-status-emojis@2.2.0: {}
+
   ignore@5.3.2: {}
 
   ignore@7.0.4: {}
@@ -3295,12 +3625,16 @@ snapshots:
 
   imurmurhash@0.1.4: {}
 
+  inflection@3.0.2: {}
+
   internal-slot@1.1.0:
     dependencies:
       es-errors: 1.3.0
       hasown: 2.0.2
       side-channel: 1.1.0
 
+  ipaddr.js@2.2.0: {}
+
   is-array-buffer@3.0.5:
     dependencies:
       call-bind: 1.0.8
@@ -3428,6 +3762,22 @@ snapshots:
 
   json-schema-traverse@0.4.1: {}
 
+  json-server@1.0.0-beta.3:
+    dependencies:
+      '@tinyhttp/app': 2.5.2
+      '@tinyhttp/cors': 2.0.1
+      '@tinyhttp/logger': 2.1.0
+      chalk: 5.4.1
+      chokidar: 4.0.3
+      dot-prop: 9.0.0
+      eta: 3.5.0
+      inflection: 3.0.2
+      json5: 2.2.3
+      lowdb: 7.0.1
+      milliparsec: 4.0.0
+      sirv: 2.0.4
+      sort-on: 6.1.0
+
   json-stable-stringify-without-jsonify@1.0.1: {}
 
   json5@1.0.2:
@@ -3498,6 +3848,10 @@ snapshots:
 
   lodash@4.17.21: {}
 
+  lowdb@7.0.1:
+    dependencies:
+      steno: 4.0.2
+
   lru-cache@5.1.1:
     dependencies:
       yallist: 3.1.1
@@ -3519,6 +3873,10 @@ snapshots:
       braces: 3.0.3
       picomatch: 2.3.1
 
+  milliparsec@4.0.0: {}
+
+  mime@4.0.4: {}
+
   minimatch@3.1.2:
     dependencies:
       brace-expansion: 1.1.11
@@ -3537,12 +3895,16 @@ snapshots:
 
   mkdirp@3.0.1: {}
 
+  mrmime@2.0.1: {}
+
   ms@2.1.3: {}
 
   nanoid@3.3.11: {}
 
   natural-compare@1.4.0: {}
 
+  negotiator@0.6.4: {}
+
   node-releases@2.0.19: {}
 
   object-inspect@1.13.4: {}
@@ -3642,6 +4004,13 @@ snapshots:
       react: 19.1.0
       scheduler: 0.26.0
 
+  react-hot-toast@2.5.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
+    dependencies:
+      csstype: 3.1.3
+      goober: 2.1.16(csstype@3.1.3)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+
   react-refresh@0.17.0: {}
 
   react-router-dom@7.6.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
@@ -3660,6 +4029,8 @@ snapshots:
 
   react@19.1.0: {}
 
+  readdirp@4.1.2: {}
+
   reflect.getprototypeof@1.0.10:
     dependencies:
       call-bind: 1.0.8
@@ -3680,6 +4051,8 @@ snapshots:
       gopd: 1.2.0
       set-function-name: 2.0.2
 
+  regexparam@2.0.2: {}
+
   resolve-from@4.0.0: {}
 
   resolve@1.22.10:
@@ -3803,8 +4176,20 @@ snapshots:
       side-channel-map: 1.0.1
       side-channel-weakmap: 1.0.2
 
+  sirv@2.0.4:
+    dependencies:
+      '@polka/url': 1.0.0-next.29
+      mrmime: 2.0.1
+      totalist: 3.0.1
+
+  sort-on@6.1.0:
+    dependencies:
+      dot-prop: 9.0.0
+
   source-map-js@1.2.1: {}
 
+  steno@4.0.2: {}
+
   stop-iteration-iterator@1.1.0:
     dependencies:
       es-errors: 1.3.0
@@ -3873,6 +4258,8 @@ snapshots:
     dependencies:
       is-number: 7.0.0
 
+  totalist@3.0.1: {}
+
   ts-api-utils@2.1.0(typescript@5.8.3):
     dependencies:
       typescript: 5.8.3
@@ -3890,6 +4277,8 @@ snapshots:
     dependencies:
       prelude-ls: 1.2.1
 
+  type-fest@4.41.0: {}
+
   typed-array-buffer@1.0.3:
     dependencies:
       call-bound: 1.0.4
@@ -4021,3 +4410,5 @@ snapshots:
   yallist@5.0.0: {}
 
   yocto-queue@0.1.0: {}
+
+  zod@3.25.67: {}
diff --git a/src/App.tsx b/src/App.tsx
index c0ff118..6847825 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,13 +1,18 @@
-import {ProductionProvider} from "./contexts/production"
-import Routes from "./routes"
-import "./styles/global.css"
+import { Toast } from './components/atoms';
+import { ProductionProvider } from './contexts/production';
+import { ScenesProvider } from './contexts/scenes';
+import Routes from './routes';
+import './styles/global.css';
 
 function App() {
   return (
     <ProductionProvider>
-      <Routes />
+      <ScenesProvider>
+        <Routes />
+        <Toast />
+      </ScenesProvider>
     </ProductionProvider>
-  )
+  );
 }
 
-export default App
+export default App;
diff --git a/src/components/atoms/Button/@types/index.ts b/src/components/atoms/Button/@types/index.ts
new file mode 100644
index 0000000..602826f
--- /dev/null
+++ b/src/components/atoms/Button/@types/index.ts
@@ -0,0 +1,9 @@
+import { type VariantProps } from 'class-variance-authority';
+
+import { type buttonVariants } from '../variants';
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
diff --git a/src/components/atoms/Button/index.tsx b/src/components/atoms/Button/index.tsx
new file mode 100644
index 0000000..1f21e05
--- /dev/null
+++ b/src/components/atoms/Button/index.tsx
@@ -0,0 +1,20 @@
+import { forwardRef } from 'react';
+
+import { Button as HeadlessButton } from '@headlessui/react';
+
+import { cn } from '../../../utils/cn';
+import { type ButtonProps } from './@types';
+import { buttonVariants } from './variants';
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? HeadlessButton : 'button';
+    return (
+      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+    );
+  },
+);
+
+Button.displayName = 'Button';
+
+export { Button };
diff --git a/src/components/button/index.tsx b/src/components/atoms/Button/variants.ts
similarity index 57%
rename from src/components/button/index.tsx
rename to src/components/atoms/Button/variants.ts
index 4fcc7d0..1634472 100644
--- a/src/components/button/index.tsx
+++ b/src/components/atoms/Button/variants.ts
@@ -1,12 +1,7 @@
-import {forwardRef} from 'react';
+import { cva } from 'class-variance-authority';
 
-import {Button as HeadlessButton} from '@headlessui/react';
-import {type VariantProps, cva} from 'class-variance-authority';
-
-import {cn} from '../../utils/cn';
-
-const buttonVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+export const buttonVariants = cva(
+  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer',
   {
     variants: {
       variant: {
@@ -28,22 +23,5 @@ const buttonVariants = cva(
       variant: 'default',
       size: 'default',
     },
-  }
-);
-
-interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps {
-  asChild?: boolean;
-}
-
-const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? HeadlessButton : 'button';
-    return (
-      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
-    );
   },
 );
-
-Button.displayName = 'Button';
-
-export { Button };
diff --git a/src/components/atoms/Input/@types/index.ts b/src/components/atoms/Input/@types/index.ts
new file mode 100644
index 0000000..f59483d
--- /dev/null
+++ b/src/components/atoms/Input/@types/index.ts
@@ -0,0 +1,9 @@
+import { type VariantProps } from 'class-variance-authority';
+
+import { type inputVariants } from '../variants';
+
+export interface InputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,
+    VariantProps<typeof inputVariants> {
+  error?: boolean;
+}
diff --git a/src/components/atoms/Input/index.tsx b/src/components/atoms/Input/index.tsx
new file mode 100644
index 0000000..a2c6af9
--- /dev/null
+++ b/src/components/atoms/Input/index.tsx
@@ -0,0 +1,44 @@
+import { forwardRef } from 'react';
+
+import { cva } from 'class-variance-authority';
+
+import { cn } from '../../../utils/cn';
+import { type InputProps } from './@types';
+
+const inputVariants = cva(
+  'flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'border-input',
+        error: 'border-destructive focus-visible:ring-destructive',
+      },
+      inputSize: {
+        default: 'h-10',
+        sm: 'h-9 px-2',
+        lg: 'h-11 px-4',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      inputSize: 'default',
+    },
+  },
+);
+
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, variant, inputSize, error, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(inputVariants({ variant: error ? 'error' : variant, inputSize, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+
+Input.displayName = 'Input';
+
+export { Input };
diff --git a/src/components/atoms/Input/variants.ts b/src/components/atoms/Input/variants.ts
new file mode 100644
index 0000000..c4d3203
--- /dev/null
+++ b/src/components/atoms/Input/variants.ts
@@ -0,0 +1,22 @@
+import { cva } from 'class-variance-authority';
+
+export const inputVariants = cva(
+  'flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'border-input',
+        error: 'border-destructive focus-visible:ring-destructive',
+      },
+      inputSize: {
+        default: 'h-10',
+        sm: 'h-9 px-2',
+        lg: 'h-11 px-4',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      inputSize: 'default',
+    },
+  },
+);
diff --git a/src/components/title/index.tsx b/src/components/atoms/Title/index.tsx
similarity index 67%
rename from src/components/title/index.tsx
rename to src/components/atoms/Title/index.tsx
index bdf3246..dd18a07 100644
--- a/src/components/title/index.tsx
+++ b/src/components/atoms/Title/index.tsx
@@ -1,4 +1,4 @@
-import { useProduction } from '../../hooks/useProduction';
+import { useProduction } from '../../../hooks/useProduction';
 
 const Title = () => {
   const { selectedProduction } = useProduction();
@@ -6,4 +6,4 @@ const Title = () => {
   return <h1 className='text-2xl font-bold text-primary'>{selectedProduction?.name}</h1>;
 };
 
-export default Title;
+export { Title };
diff --git a/src/components/atoms/Toast/index.tsx b/src/components/atoms/Toast/index.tsx
new file mode 100644
index 0000000..1952760
--- /dev/null
+++ b/src/components/atoms/Toast/index.tsx
@@ -0,0 +1,28 @@
+import { Toaster } from 'react-hot-toast';
+
+export function Toast() {
+  return (
+    <Toaster
+      position='top-right'
+      toastOptions={{
+        duration: 3000,
+        style: {
+          background: '#333',
+          color: '#fff',
+        },
+        success: {
+          duration: 3000,
+          style: {
+            background: '#22c55e',
+          },
+        },
+        error: {
+          duration: 4000,
+          style: {
+            background: '#ef4444',
+          },
+        },
+      }}
+    />
+  );
+}
diff --git a/src/components/atoms/index.ts b/src/components/atoms/index.ts
new file mode 100644
index 0000000..b5c6be9
--- /dev/null
+++ b/src/components/atoms/index.ts
@@ -0,0 +1,6 @@
+import { Button } from './Button';
+import { Input } from './Input';
+import { Title } from './Title';
+import { Toast } from './Toast';
+
+export { Input, Title, Toast, Button };
diff --git a/src/components/card/index.tsx b/src/components/card/index.tsx
deleted file mode 100644
index 53c4f4b..0000000
--- a/src/components/card/index.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import {type ReactNode} from "react"
-
-interface QuickLink {
-  label: string
-  count?: number
-  onClick?: () => void
-}
-
-interface CardFooter {
-  label: string
-  onClick?: () => void
-}
-
-interface CardProps {
-  icon: ReactNode
-  title: string
-  subtitle?: string
-  quickLinks?: QuickLink[]
-  footer?: CardFooter
-  className?: string
-}
-
-export function Card({icon, title, subtitle, quickLinks = [], footer, className = ""}: CardProps) {
-  return (
-    <div
-      className={`bg-[#232329] rounded-lg shadow p-4 flex flex-col gap-2 min-w-[260px] max-w-xs ${className}`}
-    >
-      <div className='flex items-start gap-3'>
-        <div className='mt-1 text-2xl text-white'>{icon}</div>
-        <div className='flex-1 min-w-0'>
-          <div
-            className='font-semibold text-white text-ellipsis overflow-hidden whitespace-nowrap text-base'
-            title={title}
-          >
-            {title}
-          </div>
-          {subtitle && (
-            <div className='text-xs text-zinc-400 leading-tight truncate' title={subtitle}>
-              {subtitle}
-            </div>
-          )}
-        </div>
-      </div>
-      {quickLinks.length > 0 && (
-        <div className='mt-2'>
-          <div className='text-xs text-zinc-300 font-medium mb-1'>Links rápidos</div>
-          <ul className='flex flex-col gap-1'>
-            {quickLinks.map(link => (
-              <li
-                key={link.label}
-                className='flex items-center justify-between text-sm text-zinc-100 cursor-pointer hover:underline'
-                onClick={link.onClick}
-              >
-                {link.label}
-                {link.count !== undefined && (
-                  <span className='ml-2 bg-zinc-700 text-xs rounded-full px-2 py-0.5 text-zinc-200 font-semibold'>
-                    {link.count}
-                  </span>
-                )}
-              </li>
-            ))}
-          </ul>
-        </div>
-      )}
-      {footer && <div className='border-t border-zinc-700 my-2' />}
-      {footer && (
-        <button
-          className='flex items-center justify-between w-full text-xs text-zinc-300 py-1 px-2 rounded hover:bg-zinc-800 transition'
-          onClick={footer.onClick}
-        >
-          {footer.label}
-          <svg
-            className='ml-1 w-4 h-4'
-            fill='none'
-            stroke='currentColor'
-            strokeWidth={2}
-            viewBox='0 0 24 24'
-          >
-            <path strokeLinecap='round' strokeLinejoin='round' d='M19 9l-7 7-7-7' />
-          </svg>
-        </button>
-      )}
-    </div>
-  )
-}
diff --git a/src/components/column/index.tsx b/src/components/column/index.tsx
deleted file mode 100644
index ff57656..0000000
--- a/src/components/column/index.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { type ReactNode, useEffect, useState } from 'react';
-
-import { useDroppable } from '@dnd-kit/core';
-
-import { cn } from '../../utils/cn';
-
-interface ColumnProps {
-  id: string;
-  step: number;
-  label: string;
-  count?: number;
-  description?: string;
-  children?: ReactNode;
-}
-
-export function Column({ id, step, label, count, description, children }: ColumnProps) {
-  const [disabled, setDisabled] = useState(false);
-
-  const { setNodeRef, isOver, active, over } = useDroppable({
-    id,
-    data: {
-      step,
-    },
-    disabled,
-  });
-
-  useEffect(() => {
-    if (!over) {
-      setDisabled(false);
-      return;
-    }
-
-    const actual = active?.data.current?.step;
-
-    if (actual) {
-      const isDisabled = step === actual;
-      setDisabled(isDisabled);
-    } else {
-      setDisabled(false);
-    }
-  }, [active, over, setDisabled, step]);
-
-  return (
-    <div
-      ref={setNodeRef}
-      className={cn(
-        'flex flex-col bg-secondary rounded-lg border border-border w-72 min-w-[16rem] max-w-xs h-full',
-        isOver && !disabled && 'border-primary',
-        disabled && 'opacity-50 border-none cursor-not-allowed',
-      )}
-    >
-      <div className='flex items-center justify-between px-4 py-3 border-b border-border'>
-        <div className='flex items-center gap-2'>
-          <span className='font-semibold text-foreground'>{label}</span>
-          {typeof count === 'number' && (
-            <span className='bg-muted text-xs rounded-full px-2 py-0.5 text-muted-foreground font-semibold'>
-              {count}
-            </span>
-          )}
-        </div>
-      </div>
-      {description && <div className='px-4 py-1 text-xs text-muted-foreground'>{description}</div>}
-      <div className='flex-1 overflow-y-auto px-2 py-2 space-y-2'>{children}</div>
-    </div>
-  );
-}
diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
deleted file mode 100644
index 58a2892..0000000
--- a/src/components/header/index.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import {Button} from "../button"
-import {Input} from "../input"
-
-export function Header() {
-  return (
-    <header className='sticky top-0 z-50 flex items-center justify-between w-full gap-8 px-6 py-4 border-b border-border bg-background'>
-      <div className='flex items-center gap-12'>
-        <h1 className='text-xl font-semibold text-foreground'>StudioFlow</h1>
-      </div>
-
-      <div className='flex items-center gap-2 grow justify-center max-w-xl'>
-        <Input placeholder='Pesquisar' className='grow' />
-        <Button variant='default'>Criar</Button>
-      </div>
-
-      <div className='flex items-center gap-2'>
-        <span className='text-sm text-muted-foreground'>John Doe</span>
-        <div className='w-8 h-8 rounded-full bg-primary flex items-center justify-center text-primary-foreground text-sm font-medium'>
-          JD
-        </div>
-      </div>
-    </header>
-  )
-}
diff --git a/src/components/input/index.tsx b/src/components/input/index.tsx
deleted file mode 100644
index eb1130d..0000000
--- a/src/components/input/index.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import {forwardRef} from "react"
-
-import {type VariantProps, cva} from "class-variance-authority"
-
-import {cn} from "../../utils/cn"
-
-const inputVariants = cva(
-  "flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default: "border-input",
-        error: "border-destructive focus-visible:ring-destructive"
-      },
-      inputSize: {
-        default: "h-10",
-        sm: "h-9 px-2",
-        lg: "h-11 px-4"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      inputSize: "default"
-    }
-  }
-)
-
-interface InputProps extends Omit, VariantProps {
-  error?: boolean
-}
-
-const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({className, variant, inputSize, error, type, ...props}, ref) => {
-    return (
-      <input
-        type={type}
-        className={cn(inputVariants({variant: error ? "error" : variant, inputSize, className}))}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-
-Input.displayName = "Input"
-
-export {Input}
diff --git a/src/components/layout/index.tsx b/src/components/layout/index.tsx
deleted file mode 100644
index ef5b637..0000000
--- a/src/components/layout/index.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import {Outlet} from "react-router-dom"
-
-import {Header} from "../header"
-import {Sidebar} from "../sidebar"
-
-export function Layout() {
-  return (
-    <div className='flex h-screen flex-col'>
-      <Header />
-      <div className='flex flex-1 overflow-hidden'>
-        <Sidebar />
-        <main className='flex-1 overflow-hidden p-6'>
-          <Outlet />
-        </main>
-      </div>
-    </div>
-  )
-}
diff --git a/src/components/modal/index.tsx b/src/components/modal/index.tsx
deleted file mode 100644
index 94114dd..0000000
--- a/src/components/modal/index.tsx
+++ /dev/null
@@ -1,197 +0,0 @@
-import {Fragment, useState} from "react"
-
-import {Dialog, DialogPanel, DialogTitle, Transition, TransitionChild} from "@headlessui/react"
-import {XIcon} from "lucide-react"
-
-import {type Scene as SceneDetails} from "../../reducers/scenes"
-
-interface ModalProps {
-  isOpen: boolean
-  onClose: () => void
-  scene?: SceneDetails
-  onUpdate?: (scene: SceneDetails) => void
-}
-
-const steps: Record = {
-  1: "Roteirizado",
-  2: "Em pré-produção",
-  3: "Em gravação",
-  4: "Em pós-produção",
-  5: "Finalizado"
-}
-
-const Modal = ({isOpen, onClose, scene, onUpdate}: ModalProps) => {
-  const [editedScene, setEditedScene] = useState<SceneDetails | undefined>(scene)
-  const [isSaving, setIsSaving] = useState(false)
-
-  const handleChange = (field: keyof SceneDetails, value: string | number) => {
-    if (!editedScene) return
-
-    if (field === "recordDate") {
-      const date = new Date(value as string)
-      if (date.toString() === "Invalid Date") {
-        setEditedScene({...editedScene, [field as string]: value})
-        return
-      }
-    }
-
-    setEditedScene({...editedScene, [field]: value})
-  }
-
-  const handleSave = async () => {
-    if (!editedScene || !onUpdate) return
-
-    setIsSaving(true)
-
-    await fetch(`${import.meta.env.VITE_API_URL}/scenes/${editedScene.id}`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify({
-        ...editedScene,
-        updatedAt: new Date().toISOString(),
-        version: Math.random()
-      })
-    })
-
-    onUpdate(editedScene)
-    onClose()
-    setIsSaving(false)
-  }
-
-  return (
-    <Transition appear show={isOpen} as={Fragment}>
-      <Dialog as='div' className='relative z-50' onClose={onClose}>
-        <TransitionChild
-          as={Fragment}
-          enter='ease-out duration-300'
-          enterFrom='opacity-0'
-          enterTo='opacity-100'
-          leave='ease-in duration-200'
-          leaveFrom='opacity-100'
-          leaveTo='opacity-0'
-        >
-          <div className='fixed inset-0 bg-black/25' />
-        </TransitionChild>
-
-        <div className='fixed inset-0 overflow-y-auto'>
-          <div className='flex min-h-full items-center justify-center p-4 text-center'>
-            <TransitionChild
-              as={Fragment}
-              enter='ease-out duration-300'
-              enterFrom='opacity-0 scale-95'
-              enterTo='opacity-100 scale-100'
-              leave='ease-in duration-200'
-              leaveFrom='opacity-100 scale-100'
-              leaveTo='opacity-0 scale-95'
-            >
-              <DialogPanel className='w-full max-w-md transform overflow-hidden rounded-2xl bg-background p-6 text-left align-middle shadow-xl transition-all'>
-                <div className='flex items-center justify-between mb-4'>
-                  <DialogTitle as='h3' className='text-lg font-medium leading-6 text-primary'>
-                    Detalhes da Cena
-                  </DialogTitle>
-                  <button
-                    onClick={onClose}
-                    className='rounded-full p-1 hover:bg-primary/10 transition-colors'
-                  >
-                    <XIcon className='h-5 w-5 text-primary' />
-                  </button>
-                </div>
-
-                {editedScene ? (
-                  <div className='space-y-4'>
-                    <div>
-                      <h4 className='text-sm font-medium text-primary/70'>Título</h4>
-                      <input
-                        type='text'
-                        value={editedScene.title}
-                        onChange={e => handleChange("title", e.target.value)}
-                        className='mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-primary focus:outline-none focus:ring-2 focus:ring-primary/50'
-                      />
-                    </div>
-
-                    <div>
-                      <h4 className='text-sm font-medium text-primary/70'>Descrição</h4>
-                      <textarea
-                        value={editedScene.description}
-                        onChange={e => handleChange("description", e.target.value)}
-                        className='mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-primary focus:outline-none focus:ring-2 focus:ring-primary/50'
-                        rows={3}
-                      />
-                    </div>
-
-                    <div>
-                      <h4 className='text-sm font-medium text-primary/70'>Episódio</h4>
-                      <input
-                        type='text'
-                        value={editedScene.episode}
-                        onChange={e => handleChange("episode", e.target.value)}
-                        className='mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-primary focus:outline-none focus:ring-2 focus:ring-primary/50'
-                      />
-                    </div>
-
-                    <div>
-                      <h4 className='text-sm font-medium text-primary/70'>Status</h4>
-                      <select
-                        value={editedScene.step}
-                        onChange={e => handleChange("step", Number(e.target.value))}
-                        className='mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-primary focus:outline-none focus:ring-2 focus:ring-primary/50'
-                      >
-                        {Object.entries(steps).map(([value, label]) => (
-                          <option key={value} value={value}>
-                            {label}
-                          </option>
-                        ))}
-                      </select>
-                    </div>
-
-                    <div>
-                      <h4 className='text-sm font-medium text-primary/70'>Data de Gravação</h4>
-                      <input
-                        type='date'
-                        value={editedScene.recordDate}
-                        onChange={e => handleChange("recordDate", e.target.value)}
-                        className='mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-primary focus:outline-none focus:ring-2 focus:ring-primary/50'
-                      />
-                    </div>
-
-                    <div>
-                      <h4 className='text-sm font-medium text-primary/70'>Local de Gravação</h4>
-                      <input
-                        type='text'
-                        value={editedScene.recordLocation}
-                        onChange={e => handleChange("recordLocation", e.target.value)}
-                        className='mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-primary focus:outline-none focus:ring-2 focus:ring-primary/50'
-                      />
-                    </div>
-
-                    <div className='mt-6 flex justify-end gap-3'>
-                      <button
-                        onClick={onClose}
-                        className='rounded-md px-4 py-2 text-sm font-medium text-primary hover:bg-primary/10'
-                      >
-                        Cancelar
-                      </button>
-                      <button
-                        onClick={handleSave}
-                        disabled={isSaving}
-                        className='rounded-md bg-primary px-4 py-2 text-sm font-medium text-accent hover:bg-primary/90 disabled:opacity-50'
-                      >
-                        {isSaving ? "Salvando..." : "Salvar"}
-                      </button>
-                    </div>
-                  </div>
-                ) : (
-                  <p className='text-primary'>Nenhuma cena selecionada</p>
-                )}
-              </DialogPanel>
-            </TransitionChild>
-          </div>
-        </div>
-      </Dialog>
-    </Transition>
-  )
-}
-
-export {Modal, type SceneDetails}
diff --git a/src/components/molecules/ActorSelector/index.tsx b/src/components/molecules/ActorSelector/index.tsx
new file mode 100644
index 0000000..3580e52
--- /dev/null
+++ b/src/components/molecules/ActorSelector/index.tsx
@@ -0,0 +1,109 @@
+import { useState } from 'react';
+
+import { Check, ChevronsUpDown, X } from 'lucide-react';
+
+import { type Actor } from '../../../types/actor';
+import { cn } from '../../../utils/cn';
+
+interface ActorSelectorProps {
+  actors: Actor[];
+  selectedActors: string[];
+  onSelect: (actorIds: string[]) => void;
+}
+
+export function ActorSelector({ actors, selectedActors, onSelect }: ActorSelectorProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const filteredActors = actors.filter(
+    (actor) =>
+      actor.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      actor.bio.toLowerCase().includes(searchTerm.toLowerCase()),
+  );
+
+  const selectedActorsData = actors.filter((actor) => selectedActors.includes(actor.id));
+
+  const toggleActor = (actorId: string) => {
+    const newSelected = selectedActors.includes(actorId)
+      ? selectedActors.filter((id) => id !== actorId)
+      : [...selectedActors, actorId];
+    onSelect(newSelected);
+  };
+
+  return (
+    <div className='relative'>
+      <div className='flex flex-wrap gap-2 p-2 border rounded-md bg-background'>
+        {selectedActorsData.map((actor) => (
+          <div
+            key={actor.id}
+            className='flex items-center gap-1 px-2 py-1 bg-primary/10 rounded-full text-sm'
+          >
+            <span>{actor.name}</span>
+            <button
+              type='button'
+              onClick={() => toggleActor(actor.id)}
+              className='hover:text-destructive'
+              aria-label={`Remove ${actor.name}`}
+            >
+              <X className='h-3 w-3' />
+            </button>
+          </div>
+        ))}
+        <button
+          type='button'
+          onClick={() => setIsOpen(!isOpen)}
+          className='flex items-center gap-2 px-2 py-1 text-sm text-primary/70 hover:text-primary'
+          aria-expanded={isOpen}
+          aria-haspopup='listbox'
+        >
+          <span>Adicionar Atores</span>
+          <ChevronsUpDown className='h-4 w-4' />
+        </button>
+      </div>
+
+      {isOpen && (
+        <div
+          className='absolute z-10 w-full mt-1 bg-background border rounded-md shadow-lg'
+          role='listbox'
+        >
+          <div className='p-2 border-b'>
+            <input
+              type='text'
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              placeholder='Search actors...'
+              className='w-full px-2 py-1 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50'
+              aria-label='Search actors'
+            />
+          </div>
+          <div className='max-h-48 overflow-y-auto'>
+            {filteredActors.map((actor) => (
+              <button
+                key={actor.id}
+                type='button'
+                onClick={() => toggleActor(actor.id)}
+                className={cn(
+                  'flex items-center gap-2 w-full px-4 py-2 text-sm hover:bg-primary/10',
+                  selectedActors.includes(actor.id) && 'bg-primary/5',
+                )}
+                role='option'
+                aria-selected={selectedActors.includes(actor.id)}
+              >
+                <Check
+                  className={cn(
+                    'h-4 w-4',
+                    selectedActors.includes(actor.id) ? 'text-primary' : 'text-transparent',
+                  )}
+                />
+                <div className='flex flex-col items-start'>
+                  <span>{actor.name}</span>
+                  <span className='text-xs text-primary/50'>{actor.bio}</span>
+                </div>
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/molecules/Card/@types/index.ts b/src/components/molecules/Card/@types/index.ts
new file mode 100644
index 0000000..e3152d3
--- /dev/null
+++ b/src/components/molecules/Card/@types/index.ts
@@ -0,0 +1,37 @@
+import { type ReactNode } from 'react';
+
+interface QuickLink {
+  label: string;
+  count?: number;
+  onClick?: () => void;
+}
+
+interface CardFooter {
+  label: string;
+  onClick?: () => void;
+}
+
+interface CardProps {
+  title: string;
+  icon: ReactNode;
+  subtitle?: string;
+  className?: string;
+  footer?: CardFooter;
+  quickLinks?: QuickLink[];
+}
+
+interface QuickLinksProps {
+  links: QuickLink[];
+}
+
+interface FooterProps {
+  footer?: CardFooter;
+}
+
+interface HeaderProps {
+  title: string;
+  icon: ReactNode;
+  subtitle?: string;
+}
+
+export type { QuickLink, CardFooter, CardProps, QuickLinksProps, FooterProps, HeaderProps };
diff --git a/src/components/molecules/Card/footer.tsx b/src/components/molecules/Card/footer.tsx
new file mode 100644
index 0000000..4e66e5d
--- /dev/null
+++ b/src/components/molecules/Card/footer.tsx
@@ -0,0 +1,32 @@
+import { type FooterProps } from './@types';
+
+function ChevronDownIcon() {
+  return (
+    <svg
+      className='ml-1 w-4 h-4'
+      fill='none'
+      stroke='currentColor'
+      strokeWidth={2}
+      viewBox='0 0 24 24'
+    >
+      <path strokeLinecap='round' strokeLinejoin='round' d='M19 9l-7 7-7-7' />
+    </svg>
+  );
+}
+
+export function CardFooter({ footer }: FooterProps) {
+  if (!footer) return null;
+
+  return (
+    <>
+      <div className='border-t border-zinc-700 my-2' />
+      <button
+        className='flex items-center justify-between w-full text-xs text-zinc-300 py-1 px-2 rounded hover:bg-zinc-800 transition'
+        onClick={footer.onClick}
+      >
+        {footer.label}
+        <ChevronDownIcon />
+      </button>
+    </>
+  );
+}
diff --git a/src/components/molecules/Card/header.tsx b/src/components/molecules/Card/header.tsx
new file mode 100644
index 0000000..a47f1ff
--- /dev/null
+++ b/src/components/molecules/Card/header.tsx
@@ -0,0 +1,22 @@
+import { type HeaderProps } from './@types';
+
+export function CardHeader({ icon, title, subtitle }: HeaderProps) {
+  return (
+    <div className='flex items-start gap-3'>
+      <div className='mt-1 text-2xl text-white'>{icon}</div>
+      <div className='flex-1 min-w-0'>
+        <h3
+          className='font-semibold text-white text-ellipsis overflow-hidden whitespace-nowrap text-base'
+          title={title}
+        >
+          {title}
+        </h3>
+        {subtitle && (
+          <p className='text-xs text-zinc-400 leading-tight truncate' title={subtitle}>
+            {subtitle}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/molecules/Card/index.tsx b/src/components/molecules/Card/index.tsx
new file mode 100644
index 0000000..1ede7e3
--- /dev/null
+++ b/src/components/molecules/Card/index.tsx
@@ -0,0 +1,23 @@
+import { type CardProps } from './@types';
+import { CardFooter } from './footer';
+import { CardHeader } from './header';
+import { QuickLinks } from './quickLinks';
+
+export function Card({
+  icon,
+  title,
+  footer,
+  subtitle,
+  className = '',
+  quickLinks = [],
+}: CardProps) {
+  return (
+    <div
+      className={`bg-[#232329] rounded-lg shadow p-4 flex flex-col gap-2 min-w-[260px] max-w-xs ${className}`}
+    >
+      <CardHeader icon={icon} title={title} subtitle={subtitle} />
+      <QuickLinks links={quickLinks} />
+      <CardFooter footer={footer} />
+    </div>
+  );
+}
diff --git a/src/components/molecules/Card/quickLinks.tsx b/src/components/molecules/Card/quickLinks.tsx
new file mode 100644
index 0000000..bdb42ff
--- /dev/null
+++ b/src/components/molecules/Card/quickLinks.tsx
@@ -0,0 +1,32 @@
+import { type QuickLink, type QuickLinksProps } from './@types';
+
+function QuickLinkItem({ label, count, onClick }: QuickLink) {
+  return (
+    <li
+      className='flex items-center justify-between text-sm text-zinc-100 cursor-pointer hover:underline'
+      onClick={onClick}
+    >
+      {label}
+      {count !== undefined && (
+        <span className='ml-2 bg-zinc-700 text-xs rounded-full px-2 py-0.5 text-zinc-200 font-semibold'>
+          {count}
+        </span>
+      )}
+    </li>
+  );
+}
+
+export function QuickLinks({ links }: QuickLinksProps) {
+  if (links.length === 0) return null;
+
+  return (
+    <div className='mt-2'>
+      <div className='text-xs text-zinc-300 font-medium mb-1'>Links rápidos</div>
+      <ul className='flex flex-col gap-1'>
+        {links.map((link) => (
+          <QuickLinkItem key={link.label} {...link} />
+        ))}
+      </ul>
+    </div>
+  );
+}
diff --git a/src/components/molecules/Column/@types/index.ts b/src/components/molecules/Column/@types/index.ts
new file mode 100644
index 0000000..cf9e15e
--- /dev/null
+++ b/src/components/molecules/Column/@types/index.ts
@@ -0,0 +1,14 @@
+import { type ReactNode } from 'react';
+
+import { type Scene } from '../../../../reducers/scenes';
+
+interface ColumnProps {
+  id: string;
+  step: number;
+  label: string;
+  count: number;
+  scenes: Scene[];
+  children: ReactNode;
+}
+
+export type { ColumnProps };
diff --git a/src/components/molecules/Column/index.tsx b/src/components/molecules/Column/index.tsx
new file mode 100644
index 0000000..162fc07
--- /dev/null
+++ b/src/components/molecules/Column/index.tsx
@@ -0,0 +1,57 @@
+import { useDroppable } from '@dnd-kit/core';
+import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
+
+import { cn } from '../../../utils/cn';
+import { type ColumnProps } from './@types';
+
+export function Column({ id, step, label, scenes, count, children }: ColumnProps) {
+  const { setNodeRef, active } = useDroppable({
+    id,
+    data: {
+      step,
+    },
+  });
+
+  if (!active) {
+    return (
+      <div
+        ref={setNodeRef}
+        className='flex flex-col gap-1 p-1.5 bg-secondary rounded-lg border border-border w-72 min-w-64 max-w-xs h-fit max-h-[calc(100vh-210px)] '
+      >
+        <div className='flex items-center justify-between'>
+          <h3 className='text-sm font-medium text-foreground'>{label}</h3>
+          <span className='text-sm text-muted-foreground'>{count}</span>
+        </div>
+
+        <div className='flex flex-col gap-2 p-2 min-h-[200px] rounded-lg border border-border bg-background/50 overflow-auto'>
+          {children}
+        </div>
+      </div>
+    );
+  }
+
+  const isNextStep = active?.data.current?.step === step - 1;
+
+  return (
+    <div
+      ref={setNodeRef}
+      className={cn(
+        'flex flex-col gap-1 p-1.5 bg-secondary rounded-lg border border-border w-72 min-w-[16rem] max-w-xs h-fit transition-all duration-100',
+        isNextStep || active?.data.current?.step === step
+          ? 'border-primary bg-primary/5'
+          : 'opacity-40 cursor-not-allowed',
+      )}
+    >
+      <div className='flex items-center justify-between'>
+        <h3 className='text-sm font-medium text-foreground'>{label}</h3>
+        <span className='text-sm text-muted-foreground'>{count}</span>
+      </div>
+
+      <div className='flex flex-col gap-2 p-2 min-h-[200px] rounded-lg border border-border bg-background/50 overflow-auto'>
+        <SortableContext items={scenes.map((s) => s.id)} strategy={verticalListSortingStrategy}>
+          <div className='flex flex-col gap-2'>{children}</div>
+        </SortableContext>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/molecules/Modal/@types/index.ts b/src/components/molecules/Modal/@types/index.ts
new file mode 100644
index 0000000..1306a05
--- /dev/null
+++ b/src/components/molecules/Modal/@types/index.ts
@@ -0,0 +1,13 @@
+import { type Scene } from '../../../../reducers/scenes';
+
+type SceneDetails = Scene;
+
+interface BaseModalProps {
+  title: string;
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+  maxWidth?: 'sm' | 'md' | 'lg' | 'xl';
+}
+
+export type { SceneDetails, BaseModalProps };
diff --git a/src/components/molecules/Modal/index.tsx b/src/components/molecules/Modal/index.tsx
new file mode 100644
index 0000000..f72d1d4
--- /dev/null
+++ b/src/components/molecules/Modal/index.tsx
@@ -0,0 +1,69 @@
+import { Fragment } from 'react';
+
+import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react';
+import { X } from 'lucide-react';
+
+import { cn } from '../../../utils/cn';
+import { type BaseModalProps } from './@types';
+
+const maxWidthClasses = {
+  sm: 'max-w-sm',
+  md: 'max-w-md',
+  lg: 'max-w-lg',
+  xl: 'max-w-xl',
+};
+
+export function BaseModal({ isOpen, onClose, title, children, maxWidth = 'md' }: BaseModalProps) {
+  return (
+    <Transition appear show={isOpen} as={Fragment}>
+      <Dialog as='div' className='relative z-50' onClose={onClose}>
+        <TransitionChild
+          as={Fragment}
+          enter='ease-out duration-300'
+          enterFrom='opacity-0'
+          enterTo='opacity-100'
+          leave='ease-in duration-200'
+          leaveFrom='opacity-100'
+          leaveTo='opacity-0'
+        >
+          <div className='fixed inset-0 bg-black/25' />
+        </TransitionChild>
+
+        <div className='fixed inset-0 overflow-y-auto'>
+          <div className='flex min-h-full items-center justify-center p-4 text-center'>
+            <TransitionChild
+              as={Fragment}
+              enter='ease-out duration-300'
+              enterFrom='opacity-0 scale-95'
+              enterTo='opacity-100 scale-100'
+              leave='ease-in duration-200'
+              leaveFrom='opacity-100 scale-100'
+              leaveTo='opacity-0 scale-95'
+            >
+              <DialogPanel
+                className={cn(
+                  'w-full transform overflow-auto rounded-2xl bg-background p-6 text-left align-middle shadow-xl transition-all',
+                  maxWidthClasses[maxWidth],
+                )}
+              >
+                <div className='flex items-center justify-between mb-4'>
+                  <DialogTitle as='h3' className='text-lg font-medium leading-6 text-primary'>
+                    {title}
+                  </DialogTitle>
+                  <button
+                    onClick={onClose}
+                    className='rounded-full p-1 hover:bg-primary/10 transition-colors'
+                  >
+                    <X className='h-5 w-5 text-primary' />
+                  </button>
+                </div>
+
+                {children}
+              </DialogPanel>
+            </TransitionChild>
+          </div>
+        </div>
+      </Dialog>
+    </Transition>
+  );
+}
diff --git a/src/components/molecules/Scene/@types/index.ts b/src/components/molecules/Scene/@types/index.ts
new file mode 100644
index 0000000..86443bd
--- /dev/null
+++ b/src/components/molecules/Scene/@types/index.ts
@@ -0,0 +1,17 @@
+import { type Scene as SceneType } from '../../../../reducers/scenes';
+
+interface SceneProps {
+  id: string;
+  step: number;
+  order: number;
+  title: string;
+  episode: string;
+  columnId: string;
+  recordDate: string;
+  description: string;
+  recordLocation: string;
+  actors?: string[];
+  onUpdate?: (scene: SceneType) => void;
+}
+
+export type { SceneProps };
diff --git a/src/components/molecules/Scene/index.tsx b/src/components/molecules/Scene/index.tsx
new file mode 100644
index 0000000..d9a2274
--- /dev/null
+++ b/src/components/molecules/Scene/index.tsx
@@ -0,0 +1,125 @@
+import { useMemo, useState } from 'react';
+import toast from 'react-hot-toast';
+
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+
+import { useActors } from '../../../hooks/useActors';
+import { useSceneOperations } from '../../../hooks/useSceneOperations';
+import { type Scene as SceneType } from '../../../types/scene';
+import { cn } from '../../../utils/cn';
+import { SceneModal } from '../../organisms';
+import { type SceneProps } from './@types';
+
+const heavyComputation = (text: string) => {
+  return text.trim();
+};
+
+export function Scene({
+  id,
+  step,
+  order,
+  title,
+  episode,
+  columnId,
+  recordDate,
+  description,
+  recordLocation,
+  actors = [],
+  onUpdate,
+}: SceneProps) {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const { actors: sceneActors, isLoading: isLoadingActors } = useActors(actors);
+  const { updateScene } = useSceneOperations();
+
+  const computedTitle = useMemo(() => {
+    return heavyComputation(title);
+  }, [title]);
+
+  const computedDescription = useMemo(() => {
+    return heavyComputation(description);
+  }, [description]);
+
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id,
+    data: {
+      type: 'Scene',
+      step,
+      title,
+      episode,
+      columnId,
+      recordDate,
+      description,
+      recordLocation,
+      order,
+      actors,
+    },
+  });
+
+  const style = {
+    transform: CSS.Translate.toString(transform),
+    transition,
+  };
+
+  const sceneDetails: SceneType = {
+    id,
+    title,
+    description,
+    step,
+    episode,
+    columnId,
+    recordDate,
+    recordLocation,
+    order,
+    actors,
+  };
+
+  const handleUpdate = async (updatedScene: SceneType) => {
+    try {
+      await updateScene(updatedScene);
+      if (onUpdate) {
+        await onUpdate(updatedScene);
+      }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Error fetching actors';
+      toast.error(message);
+    }
+  };
+
+  return (
+    <div>
+      <SceneModal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        scene={sceneDetails}
+        onUpdate={handleUpdate}
+        mode='edit'
+      />
+      <div
+        ref={setNodeRef}
+        style={style}
+        {...attributes}
+        {...listeners}
+        onClick={() => setIsModalOpen(true)}
+        className={cn(
+          'flex flex-col gap-2 p-2 cursor-pointer bg-primary text-accent rounded-lg border border-border',
+          isDragging && 'opacity-50',
+        )}
+      >
+        <div className='flex flex-col gap-1'>
+          <span className='text-sm font-medium'>{computedTitle}</span>
+          <span className='text-xs'>{computedDescription}</span>
+          {!isLoadingActors && sceneActors.length > 0 && (
+            <div className='mt-2 flex flex-wrap gap-1'>
+              {sceneActors.map((actor) => (
+                <span key={actor.id} className='text-xs bg-accent/20 px-2 py-0.5 rounded-full'>
+                  {actor.name}
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/molecules/index.ts b/src/components/molecules/index.ts
new file mode 100644
index 0000000..7512a51
--- /dev/null
+++ b/src/components/molecules/index.ts
@@ -0,0 +1,6 @@
+import { Card } from './Card';
+import { Column } from './Column';
+import { BaseModal } from './Modal';
+import { Scene } from './Scene';
+
+export { Card, Column, BaseModal, Scene };
diff --git a/src/components/organisms/ActorModal/@types/index.ts b/src/components/organisms/ActorModal/@types/index.ts
new file mode 100644
index 0000000..f3ff3bd
--- /dev/null
+++ b/src/components/organisms/ActorModal/@types/index.ts
@@ -0,0 +1,10 @@
+import { type Actor } from '../../../../types/actor';
+import { type ActorFormData } from '../useActorForm';
+
+export interface ActorModalProps {
+  actor?: Actor;
+  isOpen: boolean;
+  onClose: () => void;
+  mode?: 'create' | 'edit';
+  onSave: (actor: ActorFormData) => Promise<void>;
+}
diff --git a/src/components/organisms/ActorModal/index.tsx b/src/components/organisms/ActorModal/index.tsx
new file mode 100644
index 0000000..1e8f49e
--- /dev/null
+++ b/src/components/organisms/ActorModal/index.tsx
@@ -0,0 +1,85 @@
+import { BaseModal } from '../../molecules';
+import { type ActorModalProps } from './@types';
+import { useActorForm } from './useActorForm';
+
+export function ActorModal({ isOpen, onClose, onSave, mode = 'create', actor }: ActorModalProps) {
+  const { formData, errors, isSubmitting, handleChange, handleSubmit } = useActorForm(actor);
+
+  const handleFormSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const success = await handleSubmit(onSave);
+    if (success) onClose();
+  };
+
+  const modalTitle = mode === 'create' ? 'Adicionar novos Atores' : 'Editar Atore';
+  const submitButtonText = isSubmitting ? 'Salvando...' : mode === 'create' ? 'Criar' : 'Salvar';
+
+  return (
+    <BaseModal
+      isOpen={isOpen}
+      onClose={onClose}
+      title={modalTitle}
+      aria-labelledby='actor-modal-title'
+    >
+      <form onSubmit={handleFormSubmit} className='space-y-4'>
+        <div>
+          <label htmlFor='actor-name' className='block text-sm font-medium mb-1'>
+            Nome
+          </label>
+          <input
+            id='actor-name'
+            type='text'
+            value={formData.name}
+            onChange={(e) => handleChange('name', e.target.value)}
+            className='w-full p-2 border rounded'
+            aria-invalid={!!errors.name}
+            aria-describedby={errors.name ? 'name-error' : undefined}
+          />
+          {errors.name && (
+            <p id='name-error' className='mt-1 text-sm text-destructive'>
+              {errors.name}
+            </p>
+          )}
+        </div>
+
+        <div>
+          <label htmlFor='actor-bio' className='block text-sm font-medium mb-1'>
+            Biografia
+          </label>
+          <textarea
+            rows={3}
+            id='actor-bio'
+            value={formData.bio}
+            aria-invalid={!!errors.bio}
+            className='w-full p-2 border rounded'
+            onChange={(e) => handleChange('bio', e.target.value)}
+            aria-describedby={errors.bio ? 'bio-error' : undefined}
+          />
+          {errors.bio && (
+            <p id='bio-error' className='mt-1 text-sm text-destructive'>
+              {errors.bio}
+            </p>
+          )}
+        </div>
+
+        <div className='flex justify-end gap-2'>
+          <button
+            type='button'
+            onClick={onClose}
+            className='px-4 py-2 text-sm font-medium text-primary hover:bg-primary/10 rounded-md transition-colors'
+            disabled={isSubmitting}
+          >
+            Cancel
+          </button>
+          <button
+            type='submit'
+            disabled={isSubmitting}
+            className='px-4 py-2 text-sm font-medium text-primary-foreground bg-primary hover:bg-primary/90 rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed'
+          >
+            {submitButtonText}
+          </button>
+        </div>
+      </form>
+    </BaseModal>
+  );
+}
diff --git a/src/components/organisms/ActorModal/useActorForm.ts b/src/components/organisms/ActorModal/useActorForm.ts
new file mode 100644
index 0000000..e045008
--- /dev/null
+++ b/src/components/organisms/ActorModal/useActorForm.ts
@@ -0,0 +1,68 @@
+import { useState } from 'react';
+import { toast } from 'react-hot-toast';
+
+import { z } from 'zod';
+
+const actorSchema = z.object({
+  name: z.string().min(1, 'Name is required'),
+  bio: z.string().min(1, 'Bio is required'),
+});
+
+export type ActorFormData = z.infer<typeof actorSchema>;
+
+export function useActorForm(initialData?: Partial<ActorFormData>) {
+  const [formData, setFormData] = useState<ActorFormData>({
+    bio: initialData?.bio || '',
+    name: initialData?.name || '',
+  });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [errors, setErrors] = useState<Partial<ActorFormData>>({});
+
+  const validate = (): boolean => {
+    try {
+      actorSchema.parse(formData);
+      setErrors({});
+      return true;
+    } catch (error) {
+      if (error instanceof z.ZodError) {
+        const newErrors = error.formErrors.fieldErrors;
+        setErrors({
+          name: newErrors.name?.[0],
+          bio: newErrors.bio?.[0],
+        });
+      }
+      return false;
+    }
+  };
+
+  const handleChange = (field: keyof ActorFormData, value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+    if (errors[field]) {
+      setErrors((prev) => ({ ...prev, [field]: undefined }));
+    }
+  };
+
+  const handleSubmit = async (onSave: (data: ActorFormData) => Promise<void>) => {
+    if (!validate()) return;
+
+    setIsSubmitting(true);
+    try {
+      await onSave(formData);
+      toast.success('Actor saved successfully!');
+      return true;
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : 'Failed to save actor');
+      return false;
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return {
+    errors,
+    formData,
+    isSubmitting,
+    handleChange,
+    handleSubmit,
+  };
+}
diff --git a/src/components/organisms/Header/index.tsx b/src/components/organisms/Header/index.tsx
new file mode 100644
index 0000000..73977a5
--- /dev/null
+++ b/src/components/organisms/Header/index.tsx
@@ -0,0 +1,37 @@
+import { SearchIcon } from 'lucide-react';
+
+import { Input } from '../../atoms/Input';
+
+interface HeaderProps {
+  searchTerm: string;
+  onSearchChange: (value: string) => void;
+}
+
+export function Header({ searchTerm, onSearchChange }: HeaderProps) {
+  return (
+    <header className='sticky top-0 z-50 flex items-center justify-between w-full gap-8 px-6 py-4 border-b border-border bg-background'>
+      <div className='flex items-center gap-12'>
+        <h1 className='text-xl font-semibold text-foreground'>StudioFlow</h1>
+      </div>
+
+      <div className='flex items-center gap-2 grow justify-center max-w-xl'>
+        <div className='relative w-full max-w-xl'>
+          <SearchIcon className='absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground' />
+          <Input
+            placeholder='Buscar cenas...'
+            value={searchTerm}
+            onChange={(e) => onSearchChange(e.target.value)}
+            className='pl-9 w-full'
+          />
+        </div>
+      </div>
+
+      <div className='flex items-center gap-2'>
+        <span className='text-sm text-muted-foreground hidden md:block'>John Doe</span>
+        <div className='w-8 h-8 rounded-full bg-primary flex items-center justify-center text-primary-foreground text-sm font-medium'>
+          JD
+        </div>
+      </div>
+    </header>
+  );
+}
diff --git a/src/components/organisms/SceneModal/@types/index.ts b/src/components/organisms/SceneModal/@types/index.ts
new file mode 100644
index 0000000..74738eb
--- /dev/null
+++ b/src/components/organisms/SceneModal/@types/index.ts
@@ -0,0 +1,30 @@
+import { z } from 'zod';
+
+import { type Scene } from '../../../../reducers/scenes';
+
+const sceneSchema = z.object({
+  id: z.string(),
+  title: z.string().min(1, 'Title is required'),
+  description: z.string().min(1, 'Description is required'),
+  step: z.number().min(1),
+  episode: z.string().min(1, 'Episode is required'),
+  recordDate: z.string().refine((val) => !isNaN(new Date(val).getTime())),
+  recordLocation: z.string().min(1, 'Location is required'),
+  columnId: z.string(),
+  order: z.number(),
+  actors: z.array(z.string()),
+});
+
+interface SceneModalProps {
+  scene?: Scene;
+  isOpen: boolean;
+  scenes?: Scene[];
+  onClose: () => void;
+  mode?: 'create' | 'edit';
+  onUpdate: (scene: Scene) => Promise<void>;
+}
+
+type SceneDetails = z.infer<typeof sceneSchema>;
+
+export { sceneSchema };
+export type { SceneDetails, SceneModalProps };
diff --git a/src/components/organisms/SceneModal/index.tsx b/src/components/organisms/SceneModal/index.tsx
new file mode 100644
index 0000000..4e2d8cc
--- /dev/null
+++ b/src/components/organisms/SceneModal/index.tsx
@@ -0,0 +1,189 @@
+import { useEffect, useState } from 'react';
+import { toast } from 'react-hot-toast';
+
+import { api } from '../../../services/api';
+import { type Actor } from '../../../types/actor';
+import { STEPS } from '../../../utils/utils';
+import { Button } from '../../atoms';
+import { BaseModal } from '../../molecules';
+import { ActorSelector } from '../../molecules/ActorSelector';
+import { type SceneModalProps } from './@types';
+import { useSceneForm } from './useSceneForm';
+
+export function SceneModal({ isOpen, onClose, scene, onUpdate, mode = 'edit' }: SceneModalProps) {
+  const [actors, setActors] = useState<Actor[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const { formData, validate, handleChange } = useSceneForm(scene);
+
+  const fetchActors = async () => {
+    try {
+      const data = (await api.actors.getAll()) as Actor[];
+      setActors(data);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Error fetching actors';
+      toast.error(message);
+    }
+  };
+
+  useEffect(() => {
+    const loadActors = async () => {
+      setIsLoading(true);
+      try {
+        await fetchActors();
+      } catch (error) {
+        const message = error instanceof Error ? error.message : 'Error loading actors';
+        toast.error(message);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    if (isOpen) loadActors();
+  }, [isOpen]);
+
+  const handleSave = async () => {
+    if (!validate()) return;
+
+    setIsSubmitting(true);
+    try {
+      await onUpdate(formData);
+      onClose();
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Failed to save scene';
+      setError(message);
+      toast.error(message);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const nextStep = scene?.step ? scene.step + 1 : 1;
+  const availableSteps = Object.entries(STEPS).filter(
+    ([step]) => Number(step) === scene?.step || Number(step) === nextStep,
+  );
+
+  return (
+    <BaseModal
+      isOpen={isOpen}
+      onClose={onClose}
+      title={mode === 'create' ? 'Criar nova cena' : 'Detalhes da cena'}
+      aria-labelledby='scene-modal-title'
+    >
+      {mode === 'create' && (
+        <div className='mb-4 p-3 rounded-md bg-yellow-500 text-black text-sm'>
+          📢 Aviso: Todas as novas cenas criadas serão iniciadas automaticamente na coluna "
+          {STEPS[1]}".
+        </div>
+      )}
+
+      {error && (
+        <div className='mb-4 p-3 rounded-md bg-destructive/10 text-destructive text-sm'>
+          {error}
+        </div>
+      )}
+
+      <div className='space-y-4'>
+        <div>
+          <h4 className='text-sm font-medium text-primary/70'>Título</h4>
+          <input
+            type='text'
+            value={formData.title}
+            onChange={(e) => handleChange('title', e.target.value)}
+            className='mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-primary focus:outline-none focus:ring-2 focus:ring-primary/50'
+          />
+        </div>
+
+        <div>
+          <h4 className='text-sm font-medium text-primary/70'>Descrição</h4>
+          <textarea
+            value={formData.description}
+            onChange={(e) => handleChange('description', e.target.value)}
+            className='mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-primary focus:outline-none focus:ring-2 focus:ring-primary/50'
+            rows={3}
+          />
+        </div>
+
+        <div>
+          <h4 className='text-sm font-medium text-primary/70'>Episódio</h4>
+          <input
+            type='text'
+            value={formData.episode}
+            onChange={(e) => handleChange('episode', e.target.value)}
+            className='mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-primary focus:outline-none focus:ring-2 focus:ring-primary/50'
+          />
+        </div>
+
+        <div>
+          <h4 className='text-sm font-medium text-primary/70'>Status</h4>
+          <select
+            value={formData.step}
+            onChange={(e) => handleChange('step', Number(e.target.value))}
+            disabled={mode === 'create'}
+            className='mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-primary focus:outline-none focus:ring-2 focus:ring-primary/50 disabled:opacity-50 disabled:cursor-not-allowed'
+          >
+            {availableSteps.map(([value, label]) => (
+              <option key={value} value={value}>
+                {label}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        <div>
+          <h4 className='text-sm font-medium text-primary/70'>Data de Gravação</h4>
+          <input
+            type='date'
+            value={formData.recordDate}
+            onChange={(e) => handleChange('recordDate', e.target.value)}
+            min={new Date().toISOString().split('T')[0]}
+            className='mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-primary focus:outline-none focus:ring-2 focus:ring-primary/50'
+          />
+        </div>
+
+        <div>
+          <h4 className='text-sm font-medium text-primary/70'>Local de Gravação</h4>
+          <input
+            type='text'
+            value={formData.recordLocation}
+            onChange={(e) => handleChange('recordLocation', e.target.value)}
+            className='mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-primary focus:outline-none focus:ring-2 focus:ring-primary/50'
+          />
+        </div>
+
+        <div>
+          <label className='text-sm font-medium text-primary/70'>Atores</label>
+          {isLoading ? (
+            <div>Carregando Atores...</div>
+          ) : (
+            <ActorSelector
+              actors={actors}
+              selectedActors={formData.actors}
+              onSelect={(actors) => handleChange('actors', actors)}
+            />
+          )}
+        </div>
+
+        <div className='flex justify-end gap-2 mt-6'>
+          <button
+            type='button'
+            onClick={onClose}
+            className='px-4 py-2 text-sm font-medium text-primary hover:bg-primary/10 rounded-md transition-colors'
+            disabled={isSubmitting}
+          >
+            Cancel
+          </button>
+          <Button
+            type='button'
+            onClick={handleSave}
+            disabled={isSubmitting}
+            className='h-9 px-4 md:px-6'
+          >
+            {isSubmitting ? 'Salvando...' : mode === 'create' ? 'Criar' : 'Salvar'}
+          </Button>
+        </div>
+      </div>
+    </BaseModal>
+  );
+}
diff --git a/src/components/organisms/SceneModal/useSceneForm.ts b/src/components/organisms/SceneModal/useSceneForm.ts
new file mode 100644
index 0000000..6621d10
--- /dev/null
+++ b/src/components/organisms/SceneModal/useSceneForm.ts
@@ -0,0 +1,49 @@
+import { useState } from 'react';
+
+import { z } from 'zod';
+
+import { type SceneDetails, sceneSchema } from './@types';
+
+export function useSceneForm(initialData?: Partial<SceneDetails>) {
+  const [formData, setFormData] = useState<SceneDetails>({
+    id: initialData?.id || '',
+    title: initialData?.title || '',
+    description: initialData?.description || '',
+    step: initialData?.step || 1,
+    episode: initialData?.episode || '',
+    recordDate: initialData?.recordDate || new Date().toISOString().split('T')[0],
+    recordLocation: initialData?.recordLocation || '',
+    columnId: initialData?.columnId || 'column-1',
+    order: initialData?.order || 0,
+    actors: initialData?.actors || [],
+  });
+  const [errors, setErrors] = useState<Partial<Record<keyof SceneDetails, string>>>({});
+
+  const validate = (): boolean => {
+    try {
+      sceneSchema.parse(formData);
+      setErrors({});
+      return true;
+    } catch (error) {
+      if (error instanceof z.ZodError) {
+        const newErrors = error.formErrors.fieldErrors;
+        setErrors(newErrors);
+      }
+      return false;
+    }
+  };
+
+  const handleChange = <K extends keyof SceneDetails>(field: K, value: SceneDetails[K]) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+    if (errors[field]) {
+      setErrors((prev) => ({ ...prev, [field]: undefined }));
+    }
+  };
+
+  return {
+    errors,
+    formData,
+    validate,
+    handleChange,
+  };
+}
diff --git a/src/components/organisms/Sidebar/@types/index.ts b/src/components/organisms/Sidebar/@types/index.ts
new file mode 100644
index 0000000..c878fe5
--- /dev/null
+++ b/src/components/organisms/Sidebar/@types/index.ts
@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+
+interface NavItem {
+  href: string;
+  label: string;
+  icon: ReactNode;
+}
+
+export type { NavItem };
diff --git a/src/components/organisms/Sidebar/index.tsx b/src/components/organisms/Sidebar/index.tsx
new file mode 100644
index 0000000..ff9fac2
--- /dev/null
+++ b/src/components/organisms/Sidebar/index.tsx
@@ -0,0 +1,75 @@
+import { NavLink } from 'react-router-dom';
+
+import { cn } from '../../../utils/cn';
+
+const navigation = [
+  {
+    name: 'Studio',
+    href: '/',
+    icon: (
+      <svg
+        xmlns='http://www.w3.org/2000/svg'
+        fill='none'
+        viewBox='0 0 24 24'
+        strokeWidth={1.5}
+        stroke='currentColor'
+        className='w-5 h-5'
+      >
+        <path
+          strokeLinecap='round'
+          strokeLinejoin='round'
+          d='M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25'
+        />
+      </svg>
+    ),
+  },
+  {
+    name: 'Atores',
+    href: '/actors',
+    icon: (
+      <svg
+        xmlns='http://www.w3.org/2000/svg'
+        fill='none'
+        viewBox='0 0 24 24'
+        strokeWidth={1.5}
+        stroke='currentColor'
+        className='w-5 h-5'
+      >
+        <path
+          strokeLinecap='round'
+          strokeLinejoin='round'
+          d='M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z'
+        />
+      </svg>
+    ),
+  },
+];
+
+export function Sidebar() {
+  return (
+    <div className='flex h-full max-w-14 w-full md:max-w-64 flex-col border-r border-border bg-background'>
+      <div className='flex h-14 items-center border-b border-border px-0.5 md:px-4'>
+        <h2 className='text-lg font-semibold text-foreground'>Menu</h2>
+      </div>
+      <nav className='flex-1 space-y-1 px-2 py-4'>
+        {navigation.map((item) => (
+          <NavLink
+            key={item.name}
+            to={item.href}
+            className={({ isActive }) =>
+              cn(
+                'group flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',
+                isActive
+                  ? 'bg-primary text-primary-foreground'
+                  : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
+              )
+            }
+          >
+            {item.icon}
+            <span className='hidden md:block'>{item.name}</span>
+          </NavLink>
+        ))}
+      </nav>
+    </div>
+  );
+}
diff --git a/src/components/organisms/index.ts b/src/components/organisms/index.ts
new file mode 100644
index 0000000..11e4146
--- /dev/null
+++ b/src/components/organisms/index.ts
@@ -0,0 +1,6 @@
+import { ActorModal } from './ActorModal';
+import { Header } from './Header';
+import { SceneModal } from './SceneModal';
+import { Sidebar } from './Sidebar';
+
+export { Header, Sidebar, ActorModal, SceneModal };
diff --git a/src/components/scene/index.tsx b/src/components/scene/index.tsx
deleted file mode 100644
index 7ba3f0c..0000000
--- a/src/components/scene/index.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import { useMemo, useState } from 'react';
-
-import { useDraggable } from '@dnd-kit/core';
-import { CSS } from '@dnd-kit/utilities';
-
-import { type Scene as SceneType } from '../../reducers/scenes';
-import { Modal } from '../modal';
-
-interface SceneProps {
-  id: string;
-  step: number;
-  title: string;
-  columnId: string;
-  description: string;
-  episode: string;
-  recordDate: string;
-  recordLocation: string;
-  onUpdate?: (scene: SceneType) => void;
-}
-
-const heavyComputation = (text: string) => {
-  return text.trim();
-};
-
-const Scene = ({
-  id,
-  title,
-  description,
-  columnId,
-  step,
-  episode,
-  recordDate,
-  recordLocation,
-  onUpdate,
-}: SceneProps) => {
-  const [isModalOpen, setIsModalOpen] = useState(false);
-
-  const computedTitle = useMemo(() => {
-    return heavyComputation(title);
-  }, [title]);
-
-  const computedDescription = useMemo(() => {
-    return heavyComputation(description);
-  }, [description]);
-
-  const { attributes, listeners, setNodeRef, transform, active } = useDraggable({
-    id,
-    attributes: { role: 'button' },
-    data: {
-      columnId,
-      step,
-      title,
-      description,
-      episode,
-      recordDate,
-      recordLocation,
-    },
-  });
-
-  const sceneDetails: SceneType = {
-    id,
-    title,
-    description,
-    step,
-    episode,
-    columnId,
-    recordDate,
-    recordLocation,
-  };
-
-  const handleUpdate = (updatedScene: SceneType) => {
-    if (onUpdate) {
-      onUpdate(updatedScene);
-    }
-  };
-
-  if (active?.id === id) {
-    return (
-      <div
-        ref={setNodeRef}
-        {...listeners}
-        {...attributes}
-        className='flex flex-col gap-2 p-2 cursor-pointer bg-primary opacity-50 text-accent rounded-lg border border-border'
-      >
-        <div className='flex flex-col gap-1'>
-          <span className='text-sm font-medium'>{computedTitle}</span>
-          <span className='text-xs'>{computedDescription}</span>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div>
-      <Modal
-        isOpen={isModalOpen}
-        onClose={() => setIsModalOpen(false)}
-        scene={sceneDetails}
-        onUpdate={handleUpdate}
-      />
-
-      <div
-        ref={setNodeRef}
-        style={{
-          transform: CSS.Translate.toString(transform),
-        }}
-        {...listeners}
-        {...attributes}
-        onClick={() => setIsModalOpen(true)}
-        className='flex flex-col gap-2 p-2 cursor-pointer bg-primary text-accent rounded-lg border border-border'
-      >
-        <div className='flex flex-col gap-1'>
-          <span className='text-sm font-medium'>{computedTitle}</span>
-          <span className='text-xs'>{computedDescription}</span>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export { Scene, type SceneProps };
diff --git a/src/components/sidebar/index.tsx b/src/components/sidebar/index.tsx
deleted file mode 100644
index d910517..0000000
--- a/src/components/sidebar/index.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import {NavLink} from "react-router-dom"
-
-import {cn} from "../../utils/cn"
-
-const navigation = [
-  {
-    name: "Studio",
-    href: "/",
-    icon: (
-      <svg
-        xmlns='http://www.w3.org/2000/svg'
-        fill='none'
-        viewBox='0 0 24 24'
-        strokeWidth={1.5}
-        stroke='currentColor'
-        className='w-5 h-5'
-      >
-        <path
-          strokeLinecap='round'
-          strokeLinejoin='round'
-          d='M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25'
-        />
-      </svg>
-    )
-  }
-]
-
-export function Sidebar() {
-  return (
-    <div className='flex h-full w-64 flex-col border-r border-border bg-background'>
-      <div className='flex h-14 items-center border-b border-border px-4'>
-        <h2 className='text-lg font-semibold text-foreground'>Menu</h2>
-      </div>
-      <nav className='flex-1 space-y-1 px-2 py-4'>
-        {navigation.map(item => (
-          <NavLink
-            key={item.name}
-            to={item.href}
-            className={({isActive}) =>
-              cn(
-                "group flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors",
-                isActive
-                  ? "bg-primary text-primary-foreground"
-                  : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
-              )
-            }
-          >
-            {item.icon}
-            {item.name}
-          </NavLink>
-        ))}
-      </nav>
-    </div>
-  )
-}
diff --git a/src/components/templates/Layout/index.tsx b/src/components/templates/Layout/index.tsx
new file mode 100644
index 0000000..123ff30
--- /dev/null
+++ b/src/components/templates/Layout/index.tsx
@@ -0,0 +1,36 @@
+import { useMemo, useState } from 'react';
+import { Outlet } from 'react-router-dom';
+
+import { Header, Sidebar } from '../../organisms';
+import { useScenes } from '../../../contexts/scenes';
+import { type Scene } from '../../../reducers/scenes';
+
+export function Layout() {
+  const { scenes } = useScenes();
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const filteredScenes = useMemo(() => {
+    if (!searchTerm.trim()) return scenes;
+
+    const searchLower = searchTerm.toLowerCase();
+    return scenes.filter(
+      (scene: Scene) =>
+        scene.title.toLowerCase().includes(searchLower) ||
+        scene.description.toLowerCase().includes(searchLower) ||
+        scene.episode.toLowerCase().includes(searchLower) ||
+        scene.recordLocation.toLowerCase().includes(searchLower),
+    );
+  }, [scenes, searchTerm]);
+
+  return (
+    <div className='flex h-screen flex-col'>
+      <Header searchTerm={searchTerm} onSearchChange={setSearchTerm} />
+      <div className='flex flex-1 overflow-hidden'>
+        <Sidebar />
+        <main className='flex-1 overflow-hidden p-2'>
+          <Outlet context={{ filteredScenes }} />
+        </main>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/templates/index.ts b/src/components/templates/index.ts
new file mode 100644
index 0000000..4fa0462
--- /dev/null
+++ b/src/components/templates/index.ts
@@ -0,0 +1,3 @@
+import { Layout } from './Layout';
+
+export { Layout };
diff --git a/src/contexts/production.tsx b/src/contexts/production.tsx
index f3b4aaa..f9582d0 100644
--- a/src/contexts/production.tsx
+++ b/src/contexts/production.tsx
@@ -1,107 +1,157 @@
-import {createContext, useEffect, useReducer} from "react"
-import {type ReactNode} from "react"
+import { type ReactNode, createContext, useEffect, useReducer } from 'react';
 
 interface Production {
-  id: string
-  name: string
-  description?: string
+  id: string;
+  name: string;
+  description?: string;
 }
 
 interface ProductionState {
-  productions: Production[]
-  selectedProduction: Production | null
-  isLoading: boolean
-  error: string | null
+  productions: Production[];
+  selectedProduction: Production | null;
+  isLoading: boolean;
+  error: string | null;
 }
 
 type ProductionAction =
-  | {type: "SET_PRODUCTIONS"; payload: Production[]}
-  | {type: "SELECT_PRODUCTION"; payload: Production}
-  | {type: "SET_LOADING"; payload: boolean}
-  | {type: "SET_ERROR"; payload: string | null}
-
-const initialState: ProductionState = {
-  productions: [],
-  selectedProduction: null,
-  isLoading: false,
-  error: null
-}
+  | { type: 'SET_PRODUCTIONS'; payload: Production[] }
+  | { type: 'SELECT_PRODUCTION'; payload: Production }
+  | { type: 'SET_LOADING'; payload: boolean }
+  | { type: 'SET_ERROR'; payload: string | null };
+
+const COOKIE_NAME = 'selected_production';
+const COOKIE_OPTIONS = {
+  path: '/',
+  secure: true,
+  sameSite: 'strict' as const,
+  maxAge: 24 * 60 * 60,
+};
+
+const loadState = (): ProductionState => {
+  try {
+    const cookies = document.cookie.split(';');
+    const selectedProductionCookie = cookies.find((cookie) =>
+      cookie.trim().startsWith(`${COOKIE_NAME}=`),
+    );
+
+    if (selectedProductionCookie) {
+      const selectedProduction = JSON.parse(
+        decodeURIComponent(selectedProductionCookie.split('=')[1]),
+      );
+      return {
+        productions: [],
+        selectedProduction,
+        isLoading: false,
+        error: null,
+      };
+    }
+  } catch (error) {
+    console.error('Error loading production state:', error);
+  }
+  return {
+    productions: [],
+    selectedProduction: null,
+    isLoading: false,
+    error: null,
+  };
+};
+
+const initialState: ProductionState = loadState();
 
 function productionReducer(state: ProductionState, action: ProductionAction): ProductionState {
+  let newState: ProductionState;
+
   switch (action.type) {
-    case "SET_PRODUCTIONS":
-      return {
+    case 'SET_PRODUCTIONS':
+      newState = {
         ...state,
         productions: action.payload,
-        error: null
-      }
-    case "SELECT_PRODUCTION":
-      return {
+        error: null,
+      };
+      break;
+    case 'SELECT_PRODUCTION':
+      newState = {
         ...state,
-        selectedProduction: action.payload
+        selectedProduction: action.payload,
+      };
+      if (action.payload) {
+        document.cookie = `${COOKIE_NAME}=${encodeURIComponent(JSON.stringify(action.payload))}; ${Object.entries(
+          COOKIE_OPTIONS,
+        )
+          .map(([key, value]) => `${key}=${value}`)
+          .join('; ')}`;
+      } else {
+        document.cookie = `${COOKIE_NAME}=; ${Object.entries({ ...COOKIE_OPTIONS, maxAge: 0 })
+          .map(([key, value]) => `${key}=${value}`)
+          .join('; ')}`;
       }
-    case "SET_LOADING":
-      return {
+      break;
+    case 'SET_LOADING':
+      newState = {
         ...state,
-        isLoading: action.payload
-      }
-    case "SET_ERROR":
-      return {
+        isLoading: action.payload,
+      };
+      break;
+    case 'SET_ERROR':
+      newState = {
         ...state,
         error: action.payload,
-        isLoading: false
-      }
+        isLoading: false,
+      };
+      break;
     default:
-      return state
+      return state;
   }
+
+  return newState;
 }
 
 interface ProductionContextType extends ProductionState {
-  selectProduction: (production: Production) => void
-  fetchProductions: () => Promise
-  deselectProduction: () => void
+  selectProduction: (production: Production) => void;
+  fetchProductions: () => Promise<void>;
+  deselectProduction: () => void;
 }
 
-const ProductionContext = createContext<ProductionContextType | undefined>(undefined)
+const ProductionContext = createContext<ProductionContextType | undefined>(undefined);
 
-function ProductionProvider({children}: {children: ReactNode}) {
-  const [state, dispatch] = useReducer(productionReducer, initialState)
+function ProductionProvider({ children }: { children: ReactNode }) {
+  const [state, dispatch] = useReducer(productionReducer, initialState);
 
   const fetchProductions = async () => {
     try {
-      dispatch({type: "SET_LOADING", payload: true})
-      const response = await fetch(`${import.meta.env.VITE_API_URL}/productions`)
+      dispatch({ type: 'SET_LOADING', payload: true });
+      const response = await fetch(`${import.meta.env.VITE_API_URL}/productions`);
 
       if (!response.ok) {
-        throw new Error("Failed to fetch productions")
+        throw new Error('Failed to fetch productions');
       }
 
-      const data = await response.json()
-      dispatch({type: "SET_PRODUCTIONS", payload: data})
+      const data = await response.json();
+      dispatch({ type: 'SET_PRODUCTIONS', payload: data });
     } catch (error) {
       dispatch({
-        type: "SET_ERROR",
-        payload: error instanceof Error ? error.message : "An error occurred"
-      })
+        type: 'SET_ERROR',
+        payload: error instanceof Error ? error.message : 'An error occurred',
+      });
     } finally {
-      dispatch({type: "SET_LOADING", payload: false})
+      dispatch({ type: 'SET_LOADING', payload: false });
     }
-  }
+  };
 
   const selectProduction = (production: Production) => {
-    dispatch({type: "SELECT_PRODUCTION", payload: production})
-  }
+    dispatch({ type: 'SELECT_PRODUCTION', payload: production });
+  };
   const deselectProduction = () => {
-    dispatch({type: "SELECT_PRODUCTION", payload: initialState.productions[0]})
-  }
+    dispatch({ type: 'SELECT_PRODUCTION', payload: initialState.productions[0] });
+  };
 
   useEffect(() => {
-    fetchProductions()
+    fetchProductions();
 
-    window.addEventListener("storage", () => {
-      fetchProductions()
-    })
-  }, [])
+    window.addEventListener('storage', () => {
+      fetchProductions();
+    });
+  }, []);
 
   return (
     <ProductionContext.Provider
@@ -109,12 +159,12 @@ function ProductionProvider({children}: {children: ReactNode}) {
         ...state,
         selectProduction,
         deselectProduction,
-        fetchProductions
+        fetchProductions,
       }}
     >
       {children}
     </ProductionContext.Provider>
-  )
+  );
 }
 
-export {ProductionProvider, ProductionContext}
+export { ProductionProvider, ProductionContext };
diff --git a/src/contexts/scenes.tsx b/src/contexts/scenes.tsx
new file mode 100644
index 0000000..d7a6912
--- /dev/null
+++ b/src/contexts/scenes.tsx
@@ -0,0 +1,103 @@
+import { type ReactNode, createContext, useContext, useEffect, useReducer } from 'react';
+
+import { initialSceneState, sceneReducer } from '../reducers/scenes';
+import { api } from '../services/api';
+import { type Scene, type SceneState } from '../types/scene';
+
+interface ScenesContextType extends SceneState {
+  fetchScenes: () => Promise<void>;
+  updateScene: (scene: Scene) => Promise<void>;
+  createScene: (scene: Scene, scenes: Scene[]) => Promise<void>;
+  reorderScenes: (step: number, activeId: string, overId: string) => void;
+}
+
+const ScenesContext = createContext<ScenesContextType | undefined>(undefined);
+
+export function ScenesProvider({ children }: { children: ReactNode }) {
+  const [state, dispatch] = useReducer(sceneReducer, initialSceneState);
+
+  const fetchScenes = async () => {
+    try {
+      dispatch({ type: 'SET_LOADING', payload: true });
+      const scenes = await api.scenes.getAll();
+      dispatch({ type: 'SET_SCENES', payload: scenes });
+    } catch (error) {
+      dispatch({
+        type: 'SET_ERROR',
+        payload: error instanceof Error ? error.message : 'Unknown error',
+      });
+    } finally {
+      dispatch({ type: 'SET_LOADING', payload: false });
+    }
+  };
+
+  const updateScene = async (scene: Scene) => {
+    try {
+      const updatedScene = await api.scenes.update(scene);
+      dispatch({ type: 'UPDATE_SCENE', payload: updatedScene });
+    } catch (error) {
+      dispatch({
+        type: 'SET_ERROR',
+        payload: error instanceof Error ? error.message : 'Failed to update scene',
+      });
+      throw error;
+    }
+  };
+
+  const createScene = async (scene: Scene, scenes: Scene[]) => {
+    try {
+      const body = {
+        ...scene,
+        order: scenes?.length ?? 0,
+        id: (scenes.length + 1).toString(),
+      };
+
+      const newScene = await api.scenes.create(body);
+      dispatch({ type: 'CREATE_SCENE', payload: newScene });
+    } catch (error) {
+      dispatch({
+        type: 'SET_ERROR',
+        payload: error instanceof Error ? error.message : 'Failed to create scene',
+      });
+      throw error;
+    }
+  };
+
+  const reorderScenes = (step: number, activeId: string, overId: string) => {
+    if (!activeId || !overId || activeId === overId) return;
+
+    const scenesInStep = state.scenes.filter((s) => s.step === step);
+    const activeExists = scenesInStep.some((s) => s.id === activeId);
+    const overExists = scenesInStep.some((s) => s.id === overId);
+
+    if (!activeExists || !overExists) return;
+
+    dispatch({ type: 'REORDER_SCENES', payload: { step, activeId, overId } });
+  };
+
+  useEffect(() => {
+    fetchScenes();
+  }, []);
+
+  return (
+    <ScenesContext.Provider
+      value={{
+        ...state,
+        fetchScenes,
+        updateScene,
+        createScene,
+        reorderScenes,
+      }}
+    >
+      {children}
+    </ScenesContext.Provider>
+  );
+}
+
+export function useScenes() {
+  const context = useContext(ScenesContext);
+  if (!context) {
+    throw new Error('useScenes must be used within a ScenesProvider');
+  }
+  return context;
+}
diff --git a/src/hooks/useActors.ts b/src/hooks/useActors.ts
new file mode 100644
index 0000000..cf8649a
--- /dev/null
+++ b/src/hooks/useActors.ts
@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react';
+import toast from 'react-hot-toast';
+
+import { api } from '../services/api';
+import { type Actor } from '../types/actor';
+
+export function useActors(actorIds: string[] = []) {
+  const [actors, setActors] = useState<Actor[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    const fetchActors = async () => {
+      if (actorIds.length === 0) return;
+
+      try {
+        setIsLoading(true);
+        const data = (await api.actors.getAll()) as Actor[];
+        const filteredActors = data.filter((actor) => actorIds.includes(actor.id));
+        setActors(filteredActors);
+      } catch (error) {
+        const message = error instanceof Error ? error.message : 'Error fetching actors';
+        toast.error(message);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchActors();
+  }, [actorIds]);
+
+  return { actors, isLoading };
+}
diff --git a/src/hooks/useSceneOperations.ts b/src/hooks/useSceneOperations.ts
new file mode 100644
index 0000000..171099f
--- /dev/null
+++ b/src/hooks/useSceneOperations.ts
@@ -0,0 +1,56 @@
+import { useCallback } from 'react';
+import { toast } from 'react-hot-toast';
+
+import { useScenes } from '../contexts/scenes';
+import { api } from '../services/api';
+import { showErrorToast } from '../services/errorHandler';
+import { type Scene } from '../types/scene';
+
+export const useSceneOperations = () => {
+  const { scenes, updateScene: updateSceneContext, createScene: createSceneContext } = useScenes();
+
+  const updateScene = useCallback(
+    async (scene: Scene) => {
+      try {
+        const updatedScene = await api.scenes.update(scene);
+        updateSceneContext(updatedScene);
+        toast.success('Cena atualizada com sucesso!');
+      } catch (error) {
+        showErrorToast(error);
+        throw error;
+      }
+    },
+    [updateSceneContext],
+  );
+
+  const createScene = useCallback(
+    async (scene: Scene) => {
+      try {
+        const newScene = await api.scenes.create(scene);
+        createSceneContext(newScene, scenes);
+        toast.success('Cena criada com sucesso!');
+      } catch (error) {
+        showErrorToast(error);
+        throw error;
+      }
+    },
+    [createSceneContext, scenes],
+  );
+
+  const deleteScene = useCallback(async (sceneId: string) => {
+    try {
+      await api.scenes.delete(sceneId);
+      toast.success('Cena excluída com sucesso!');
+    } catch (error) {
+      showErrorToast(error);
+      throw error;
+    }
+  }, []);
+
+  return {
+    scenes,
+    updateScene,
+    createScene,
+    deleteScene,
+  };
+};
diff --git a/src/pages/Actors.tsx b/src/pages/Actors.tsx
new file mode 100644
index 0000000..24d524c
--- /dev/null
+++ b/src/pages/Actors.tsx
@@ -0,0 +1,96 @@
+import { useEffect, useState } from 'react';
+
+import { Plus } from 'lucide-react';
+
+import { Button } from '../components/atoms';
+import { ActorModal } from '../components/organisms';
+import { useProduction } from '../hooks/useProduction';
+import { api } from '../services/api';
+import { type Actor, type ActorFormData } from '../types/actor';
+
+export function Actors() {
+  const { selectedProduction } = useProduction();
+  const [isLoading, setIsLoading] = useState(true);
+  const [actors, setActors] = useState<Actor[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  useEffect(() => {
+    fetchActors();
+  }, []);
+
+  const fetchActors = async () => {
+    try {
+      const data = (await api.actors.getAll()) as Actor[];
+      setActors(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'An error occurred');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleSave = async (actorData: ActorFormData) => {
+    try {
+      const newActor = {
+        ...actorData,
+        id: actors.length.toString(),
+        scenes: [],
+      };
+
+      await api.actors.create(newActor);
+      await fetchActors();
+      setIsModalOpen(false);
+    } catch (err) {
+      throw err instanceof Error ? err : new Error('An error occurred');
+    }
+  };
+
+  if (isLoading)
+    return (
+      <div className='flex justify-center items-center h-screen'>
+        <div className='animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-blue-500'></div>
+      </div>
+    );
+  if (error) return <div className='p-4 text-red-500'>{error}</div>;
+
+  return (
+    <div className='p-4'>
+      <div className='flex justify-between items-center mb-6'>
+        <h1 className='text-2xl font-bold'>Atores</h1>
+        <Button
+          className='h-9 px-4 md:px-6'
+          disabled={!selectedProduction}
+          onClick={() => setIsModalOpen(true)}
+        >
+          <Plus className='h-4 w-4 md:mr-2' />
+          <span className='hidden md:inline'>Adicionar Ator</span>
+        </Button>
+      </div>
+
+      <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4'>
+        {actors.map((actor) => (
+          <div
+            key={actor.id}
+            className='group relative border rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow'
+          >
+            <div className='flex items-start justify-between gap-2'>
+              <div className='flex-1'>
+                <h2 className='text-xl font-semibold mb-2'>{actor.name}</h2>
+                <p className='text-gray-600 mb-2'>{actor.bio}</p>
+                <p className='text-sm text-gray-500'>Cenas: {actor.scenes.length}</p>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <ActorModal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        onSave={handleSave}
+        mode='create'
+      />
+    </div>
+  );
+}
diff --git a/src/pages/Studio/index.tsx b/src/pages/Studio/index.tsx
index 9057f2f..01f29e5 100644
--- a/src/pages/Studio/index.tsx
+++ b/src/pages/Studio/index.tsx
@@ -1,99 +1,114 @@
-import { useEffect, useReducer, useState } from 'react';
+import { useMemo, useState } from 'react';
+import { useOutletContext } from 'react-router-dom';
 
 import {
   DndContext,
   type DragEndEvent,
+  type DragOverEvent,
   DragOverlay,
   type DragStartEvent,
   PointerSensor,
+  closestCorners,
   useSensor,
   useSensors,
 } from '@dnd-kit/core';
-import { ArrowLeftIcon, PlayIcon } from 'lucide-react';
+import { ArrowLeftIcon, PlayIcon, Plus } from 'lucide-react';
 
-import { Button } from '../../components/button';
-import { Card } from '../../components/card';
-import { Column } from '../../components/column';
-import { Scene, type SceneProps } from '../../components/scene';
-import Title from '../../components/title';
+import { Button, Title } from '../../components/atoms';
+import { Card, Column, Scene } from '../../components/molecules';
+import { type SceneProps } from '../../components/molecules/Scene/@types';
+import { SceneModal } from '../../components/organisms';
+import { useScenes } from '../../contexts/scenes';
 import { useProduction } from '../../hooks/useProduction';
-import { type Scene as SceneDetails, initialSceneState, sceneReducer } from '../../reducers/scenes';
-
-const steps: Record<number, string> = {
-  1: 'Roteirizado',
-  2: 'Em pré-produção',
-  3: 'Em gravação',
-  4: 'Em pós-produção',
-  5: 'Finalizado',
-};
+import { type Scene as SceneDetails } from '../../reducers/scenes';
+import { STEPS } from '../../utils/utils';
+
+interface OutletContext {
+  filteredScenes: SceneDetails[];
+}
 
 const Studio = () => {
   const { selectedProduction, productions, selectProduction, deselectProduction } = useProduction();
-
-  const [state, dispatch] = useReducer(sceneReducer, initialSceneState);
-
+  const { loading, scenes, updateScene, reorderScenes, createScene } = useScenes();
   const [activeScene, setActiveScene] = useState<SceneProps | null>(null);
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+  const { filteredScenes } = useOutletContext<OutletContext>();
+
+  const scenesByStep = useMemo(() => {
+    return filteredScenes.reduce(
+      (acc, scene) => {
+        if (!acc[scene.step]) {
+          acc[scene.step] = [];
+        }
+        acc[scene.step].push(scene);
+        return acc;
+      },
+      {} as Record<number, SceneDetails[]>,
+    );
+  }, [filteredScenes]);
 
   const handleDragStart = (event: DragStartEvent) => {
     const { active } = event;
-
     setActiveScene({
       id: active.id as string,
       step: active.data.current?.step,
-      columnId: active.data.current?.columnId,
+      order: active.data.current?.order,
       title: active.data.current?.title,
-      description: active.data.current?.description,
       episode: active.data.current?.episode,
+      columnId: active.data.current?.columnId,
       recordDate: active.data.current?.recordDate,
+      description: active.data.current?.description,
       recordLocation: active.data.current?.recordLocation,
     });
   };
 
+  const handleDragOver = (event: DragOverEvent) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+
+    const activeStep = active.data.current?.step;
+    const overStep = over.data.current?.step;
+
+    if (activeStep !== overStep) return;
+
+    const activeId = active.id.toString();
+    const overId = over.id.toString();
+
+    if (activeId !== overId) {
+      reorderScenes(activeStep, activeId, overId);
+    }
+  };
+
   const handleDragEnd = (event: DragEndEvent) => {
     setActiveScene(null);
-
     const { active, over } = event;
-
     if (!over || active.id === over.id) return;
 
     const fromStep = active.data.current?.step;
     const toStep = over.data.current?.step;
 
-    if (typeof toStep !== 'number' || fromStep === toStep) return;
+    if (fromStep === toStep) return;
 
-    dispatch({
-      type: 'MOVE_SCENE',
-      payload: {
-        id: active.id as string,
-        toStep,
-      },
-    });
+    if (typeof toStep !== 'number') return;
+    if (toStep !== fromStep + 1) return;
+
+    const scene = scenes.find((s) => s.id === active.id);
+    if (!scene) return;
+
+    const targetStepScenes = scenes.filter((s) => s.step === toStep);
+    const newOrder = targetStepScenes.length;
+
+    updateScene({ ...scene, step: toStep, order: newOrder });
   };
 
   const handleSceneUpdate = (updatedScene: SceneDetails) => {
-    dispatch({
-      type: 'UPDATE_SCENE',
-      payload: updatedScene,
-    });
+    updateScene(updatedScene);
   };
 
-  const fetchScenes = async () => {
-    try {
-      dispatch({ type: 'SET_LOADING', payload: true });
-
-      const response = await fetch(`${import.meta.env.VITE_API_URL}/scenes`);
-      if (!response.ok) throw new Error('Failed to fetch scenes');
-
-      const data = await response.json();
-      dispatch({ type: 'SET_SCENES', payload: data });
-    } catch (err) {
-      dispatch({
-        type: 'SET_ERROR',
-        payload: err instanceof Error ? err.message : 'Unknown error',
-      });
-    } finally {
-      dispatch({ type: 'SET_LOADING', payload: false });
-    }
+  const handleCreateScene = async (newScene: SceneDetails) => {
+    if (!selectedProduction) return;
+    await createScene(newScene, scenes);
+    setIsCreateModalOpen(false);
   };
 
   const sensors = useSensors(
@@ -105,10 +120,6 @@ const Studio = () => {
     }),
   );
 
-  useEffect(() => {
-    fetchScenes();
-  }, []);
-
   if (!selectedProduction) {
     return (
       <div className='w-screen bg-background p-4 flex flex-col gap-4'>
@@ -134,32 +145,70 @@ const Studio = () => {
     );
   }
 
+  if (loading) {
+    return (
+      <div className='flex justify-center items-center h-screen'>
+        <div className='animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-blue-500'></div>
+      </div>
+    );
+  }
+
   return (
-    <div className='w-full bg-background p-4 flex flex-col gap-4 h-full'>
-      <div className='flex items-center gap-4'>
-        <Button variant='outline' size='icon' onClick={() => deselectProduction()}>
-          <ArrowLeftIcon />
+    <div className='w-full bg-background p-2 flex flex-col gap-4 h-full'>
+      <div className='flex justify-between items-center gap-4'>
+        <div className='flex items-center gap-4'>
+          <Button variant='outline' size='icon' onClick={() => deselectProduction()}>
+            <ArrowLeftIcon />
+          </Button>
+          <Title />
+        </div>
+
+        <Button
+          onClick={() => setIsCreateModalOpen(true)}
+          disabled={!selectedProduction}
+          className='h-9 px-4 md:px-6'
+        >
+          <Plus className='h-4 w-4 md:mr-2' />
+          <span className='hidden md:inline'>Criar</span>
         </Button>
-        <Title />
       </div>
-      <div className='flex gap-4 overflow-x-auto w-full h-full'>
-        <DndContext onDragStart={handleDragStart} onDragEnd={handleDragEnd} sensors={sensors}>
+
+      <SceneModal
+        mode='create'
+        scenes={scenes}
+        isOpen={isCreateModalOpen}
+        onClose={() => setIsCreateModalOpen(false)}
+        onUpdate={(newScene) => handleCreateScene(newScene)}
+      />
+
+      <div className='flex gap-4 overflow-x-auto w-full h-full pr-2'>
+        <DndContext
+          sensors={sensors}
+          onDragEnd={handleDragEnd}
+          onDragOver={handleDragOver}
+          onDragStart={handleDragStart}
+          collisionDetection={closestCorners}
+        >
           <DragOverlay>{activeScene ? <Scene {...activeScene} /> : null}</DragOverlay>
-          {[1, 2, 3, 4, 5].map((step) => (
-            <Column
-              key={step}
-              id={`column-${step}`}
-              step={step}
-              label={steps[step]}
-              count={state.scenes.filter((s) => s.step === step).length}
-            >
-              {state.scenes
-                .filter((scene) => scene.step === step)
-                .map((scene) => (
-                  <Scene key={scene.id} {...scene} onUpdate={handleSceneUpdate} />
-                ))}
-            </Column>
-          ))}
+          {[1, 2, 3, 4, 5].map((step) => {
+            const stepScenes = scenesByStep[step] || [];
+            return (
+              <Column
+                key={step}
+                scenes={stepScenes}
+                id={`column-${step}`}
+                step={step}
+                label={STEPS[step]}
+                count={stepScenes.length}
+              >
+                {stepScenes
+                  .sort((a, b) => a.order - b.order)
+                  .map((scene) => (
+                    <Scene key={scene.id} {...scene} onUpdate={handleSceneUpdate} />
+                  ))}
+              </Column>
+            );
+          })}
         </DndContext>
       </div>
     </div>
diff --git a/src/reducers/scenes.ts b/src/reducers/scenes.ts
index d0a2cc7..b41fd38 100644
--- a/src/reducers/scenes.ts
+++ b/src/reducers/scenes.ts
@@ -1,63 +1,81 @@
-type Scene = {
-  id: string;
-  title: string;
-  description: string;
-  step: number;
-  columnId: string;
-  episode: string;
-  recordDate: string;
-  recordLocation: string;
-};
+import { arrayMove } from '@dnd-kit/sortable';
 
-type State = {
-  scenes: Scene[];
-  loading: boolean;
-  error: string | null;
-};
+import { type Scene, type SceneAction, type SceneState } from '../types/scene';
 
-const initialSceneState: State = {
+const initialSceneState: SceneState = {
   scenes: [],
   loading: false,
   error: null,
 };
 
-type Action =
-  | { type: 'SET_SCENES'; payload: Scene[] }
-  | { type: 'MOVE_SCENE'; payload: { id: string; toStep: number } }
-  | { type: 'SET_LOADING'; payload: boolean }
-  | { type: 'SET_ERROR'; payload: string | null }
-  | { type: 'UPDATE_SCENE'; payload: Scene };
-
-const sceneReducer = (state: State, action: Action): State => {
+const sceneReducer = (state: SceneState, action: SceneAction): SceneState => {
   switch (action.type) {
-    case 'SET_SCENES':
-      return { ...state, scenes: action.payload, error: null };
-
-    case 'MOVE_SCENE':
-      return {
-        ...state,
-        scenes: state.scenes.map((scene) =>
-          scene.id === action.payload.id ? { ...scene, step: action.payload.toStep } : scene,
-        ),
-      };
-
-    case 'UPDATE_SCENE':
-      return {
-        ...state,
-        scenes: state.scenes.map((scene) =>
-          scene.id === action.payload.id ? { ...scene, ...action.payload } : scene,
-        ),
-      };
-
-    case 'SET_LOADING':
-      return { ...state, loading: action.payload };
-
-    case 'SET_ERROR':
-      return { ...state, error: action.payload };
-
-    default:
+  case 'SET_SCENES':
+    return { ...state, scenes: action.payload, error: null };
+
+  case 'MOVE_SCENE': {
+    const { id, toStep } = action.payload;
+    return {
+      ...state,
+      scenes: state.scenes.map((scene) => (scene.id === id ? { ...scene, step: toStep } : scene)),
+    };
+  }
+
+  case 'UPDATE_SCENE': {
+    const { id } = action.payload;
+    return {
+      ...state,
+      scenes: state.scenes.map((scene) =>
+        scene.id === id ? { ...scene, ...action.payload } : scene,
+      ),
+    };
+  }
+
+  case 'CREATE_SCENE': {
+    return {
+      ...state,
+      scenes: [...state.scenes, action.payload],
+    };
+  }
+
+  case 'REORDER_SCENES': {
+    const { step, activeId, overId } = action.payload;
+
+    const scenesInStep = state.scenes
+      .filter((s) => s.step === step)
+      .sort((a, b) => a.order - b.order);
+
+    const activeIndex = scenesInStep.findIndex((s) => s.id === activeId);
+    const overIndex = scenesInStep.findIndex((s) => s.id === overId);
+
+    if (activeIndex === -1 || overIndex === -1 || activeIndex === overIndex) {
       return state;
+    }
+
+    const reorderedScenesInStep = arrayMove(scenesInStep, activeIndex, overIndex);
+    const updatedScenesInStep = reorderedScenesInStep.map((scene, index) => ({
+      ...scene,
+      order: index,
+    }));
+
+    const newScenes = state.scenes.map((scene) => {
+      if (scene.step !== step) return scene;
+      const updatedScene = updatedScenesInStep.find((s) => s.id === scene.id);
+      return updatedScene || scene;
+    });
+
+    return { ...state, scenes: newScenes };
+  }
+
+  case 'SET_LOADING':
+    return { ...state, loading: action.payload };
+
+  case 'SET_ERROR':
+    return { ...state, error: action.payload };
+
+  default:
+    return state;
   }
 };
 
-export { initialSceneState, sceneReducer, type Scene };
+export { type Scene, sceneReducer, initialSceneState };
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 8ce80b7..d1783a8 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,22 +1,27 @@
-import {RouterProvider, createBrowserRouter} from "react-router-dom"
+import { RouterProvider, createBrowserRouter } from 'react-router-dom';
 
-import {Layout} from "../components/layout"
-import Studio from "../pages/Studio"
+import { Layout } from '../components/templates';
+import Studio from '../pages/Studio';
+import { Actors } from '../pages/Actors';
 
 const router = createBrowserRouter([
   {
     element: <Layout />,
     children: [
       {
-        path: "/",
-        element: <Studio />
-      }
-    ]
-  }
-])
+        path: '/',
+        element: <Studio />,
+      },
+      {
+        path: '/actors',
+        element: <Actors />,
+      },
+    ],
+  },
+]);
 
 const Routes = () => {
-  return <RouterProvider router={router} />
-}
+  return <RouterProvider router={router} />;
+};
 
-export default Routes
+export default Routes;
diff --git a/src/services/api.ts b/src/services/api.ts
new file mode 100644
index 0000000..4a445be
--- /dev/null
+++ b/src/services/api.ts
@@ -0,0 +1,133 @@
+import { type Scene } from '../types/scene';
+import { AppError, errorMessages, handleError } from './errorHandler';
+
+const API_URL = import.meta.env.VITE_API_URL;
+
+async function handleResponse<T>(response: Response): Promise<T> {
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({}));
+    throw new AppError(
+      error.message || errorMessages.SERVER_ERROR,
+      'API_ERROR',
+      response.status,
+      error,
+    );
+  }
+  return response.json();
+}
+
+export const api = {
+  scenes: {
+    getAll: async (): Promise<Scene[]> => {
+      try {
+        const response = await fetch(`${API_URL}/scenes`);
+        return handleResponse<Scene[]>(response);
+      } catch (error) {
+        throw handleError(error);
+      }
+    },
+
+    getById: async (id: string): Promise<Scene> => {
+      try {
+        const response = await fetch(`${API_URL}/scenes/${id}`);
+        return handleResponse<Scene>(response);
+      } catch (error) {
+        throw handleError(error);
+      }
+    },
+
+    create: async (scene: Scene): Promise<Scene> => {
+      try {
+        const response = await fetch(`${API_URL}/scenes`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(scene),
+        });
+        return handleResponse<Scene>(response);
+      } catch (error) {
+        throw handleError(error);
+      }
+    },
+
+    update: async (scene: Scene): Promise<Scene> => {
+      try {
+        const response = await fetch(`${API_URL}/scenes/${scene.id}`, {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(scene),
+        });
+        return handleResponse<Scene>(response);
+      } catch (error) {
+        throw handleError(error);
+      }
+    },
+
+    delete: async (id: string): Promise<void> => {
+      try {
+        const response = await fetch(`${API_URL}/scenes/${id}`, {
+          method: 'DELETE',
+        });
+        await handleResponse(response);
+      } catch (error) {
+        throw handleError(error);
+      }
+    },
+  },
+
+  actors: {
+    getAll: async () => {
+      try {
+        const response = await fetch(`${API_URL}/actors`);
+        return handleResponse(response);
+      } catch (error) {
+        throw handleError(error);
+      }
+    },
+
+    getById: async (id: string) => {
+      try {
+        const response = await fetch(`${API_URL}/actors/${id}`);
+        return handleResponse(response);
+      } catch (error) {
+        throw handleError(error);
+      }
+    },
+
+    create: async (actor: { name: string; bio: string }) => {
+      try {
+        const response = await fetch(`${API_URL}/actors`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(actor),
+        });
+        return handleResponse(response);
+      } catch (error) {
+        throw handleError(error);
+      }
+    },
+
+    update: async (id: string, actor: { name: string; bio: string }) => {
+      try {
+        const response = await fetch(`${API_URL}/actors/${id}`, {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(actor),
+        });
+        return handleResponse(response);
+      } catch (error) {
+        throw handleError(error);
+      }
+    },
+
+    delete: async (id: string) => {
+      try {
+        const response = await fetch(`${API_URL}/actors/${id}`, {
+          method: 'DELETE',
+        });
+        await handleResponse(response);
+      } catch (error) {
+        throw handleError(error);
+      }
+    },
+  },
+};
diff --git a/src/services/errorHandler.ts b/src/services/errorHandler.ts
new file mode 100644
index 0000000..dd655a9
--- /dev/null
+++ b/src/services/errorHandler.ts
@@ -0,0 +1,57 @@
+import { toast } from 'react-hot-toast';
+
+export class AppError extends Error {
+  constructor(
+    message: string,
+    public code: string,
+    public status?: number,
+    public details?: unknown,
+  ) {
+    super(message);
+    this.name = 'AppError';
+  }
+}
+
+export const errorMessages = {
+  NETWORK_ERROR: 'Erro de conexão. Verifique sua internet.',
+  SERVER_ERROR: 'Erro no servidor. Tente novamente mais tarde.',
+  NOT_FOUND: 'Recurso não encontrado.',
+  UNAUTHORIZED: 'Você não tem permissão para realizar esta ação.',
+  VALIDATION_ERROR: 'Dados inválidos. Verifique os campos.',
+  UNKNOWN_ERROR: 'Ocorreu um erro inesperado.',
+} as const;
+
+export function handleError(error: unknown): AppError {
+  if (error instanceof AppError) {
+    return error;
+  }
+
+  if (error instanceof Error) {
+    if (error.message.includes('Network Error')) {
+      return new AppError(errorMessages.NETWORK_ERROR, 'NETWORK_ERROR');
+    }
+
+    if (error.message.includes('404')) {
+      return new AppError(errorMessages.NOT_FOUND, 'NOT_FOUND', 404);
+    }
+
+    if (error.message.includes('401') || error.message.includes('403')) {
+      return new AppError(errorMessages.UNAUTHORIZED, 'UNAUTHORIZED', 401);
+    }
+
+    if (error.message.includes('validation')) {
+      return new AppError(errorMessages.VALIDATION_ERROR, 'VALIDATION_ERROR', 400);
+    }
+  }
+
+  return new AppError(errorMessages.UNKNOWN_ERROR, 'UNKNOWN_ERROR');
+}
+
+export function showErrorToast(error: unknown): void {
+  const appError = handleError(error);
+  toast.error(appError.message);
+}
+
+export function isAppError(error: unknown): error is AppError {
+  return error instanceof AppError;
+}
diff --git a/src/styles/global.css b/src/styles/global.css
index fed2832..288fe3c 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -10,4 +10,18 @@
   body {
     @apply bg-background text-foreground;
   }
+
+  *::-webkit-scrollbar {
+    width: 5px !important;
+    height: 5px !important;
+  }
+
+  *::-webkit-scrollbar-track {
+    background: transparent !important;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    border-radius: 10px !important;
+    background: #c7c6d0 !important;
+  }
 }
diff --git a/src/types/actor.ts b/src/types/actor.ts
new file mode 100644
index 0000000..7ca7ad2
--- /dev/null
+++ b/src/types/actor.ts
@@ -0,0 +1,10 @@
+interface Actor {
+  id: string;
+  name: string;
+  bio: string;
+  scenes: string[];
+}
+
+type ActorFormData = Omit<Actor, 'id' | 'scenes'>;
+
+export type { Actor, ActorFormData };
diff --git a/src/types/scene.ts b/src/types/scene.ts
new file mode 100644
index 0000000..a08eeab
--- /dev/null
+++ b/src/types/scene.ts
@@ -0,0 +1,35 @@
+import { z } from 'zod';
+
+const sceneSchema = z.object({
+  id: z.string(),
+  title: z.string().min(1, 'Title is required'),
+  description: z.string().min(1, 'Description is required'),
+  step: z.number().min(1),
+  episode: z.string().min(1, 'Episode is required'),
+  recordDate: z.string().refine((val) => !isNaN(new Date(val).getTime())),
+  recordLocation: z.string().min(1, 'Location is required'),
+  columnId: z.string(),
+  order: z.number(),
+  actors: z.array(z.string()),
+});
+
+type Scene = z.infer<typeof sceneSchema>;
+
+interface SceneState {
+  scenes: Scene[];
+  loading: boolean;
+  error: string | null;
+}
+
+type SceneAction =
+  | { type: 'SET_SCENES'; payload: Scene[] }
+  | { type: 'MOVE_SCENE'; payload: { id: string; toStep: number } }
+  | { type: 'SET_LOADING'; payload: boolean }
+  | { type: 'SET_ERROR'; payload: string | null }
+  | { type: 'UPDATE_SCENE'; payload: Scene }
+  | { type: 'REORDER_SCENES'; payload: { step: number; activeId: string; overId: string } }
+  | { type: 'CREATE_SCENE'; payload: Scene };
+
+export { sceneSchema };
+
+export type { Scene, SceneState, SceneAction };
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
new file mode 100644
index 0000000..b16ecf6
--- /dev/null
+++ b/src/utils/utils.ts
@@ -0,0 +1,7 @@
+export const STEPS: Record<number, string> = {
+  1: 'Roteirizado',
+  2: 'Em pré-produção',
+  3: 'Em gravação',
+  4: 'Em pós-produção',
+  5: 'Finalizado',
+};
diff --git a/vite.config.ts b/vite.config.ts
index ea298da..46ac457 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,6 +1,6 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import tailwindcss from '@tailwindcss/vite'
+import tailwindcss from '@tailwindcss/vite';
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
 
 // https://vite.dev/config/
 export default defineConfig({
@@ -17,10 +17,10 @@ export default defineConfig({
     rollupOptions: {
       output: {
         manualChunks: {
-          'vendor': ['react', 'react-dom'],
-          'tailwind': ['tailwindcss', 'daisyui'],
-        }
-      }
-    }
-  }
-})
+          vendor: ['react', 'react-dom'],
+          tailwind: ['tailwindcss', 'daisyui'],
+        },
+      },
+    },
+  },
+});