diff --git a/assets/code/DOM.js b/assets/code/DOM.js
new file mode 100644
index 0000000..52533b6
--- /dev/null
+++ b/assets/code/DOM.js
@@ -0,0 +1,40 @@
+export const createTitle = (name,...classes) => {
+    let h1El = document.createElement("h1")
+    h1El.classList.add(...classes)
+    h1El.textContent = name
+    return h1El 
+}
+
+export const createDivWithID = id => {
+    let divEl = document.createElement("div")
+    divEl.setAttribute("id",id)
+    return divEl
+}
+
+export const createDivWithClasses = (...classes) => {
+    let divEl = document.createElement("div")
+    divEl.classList.add(...classes)
+    return divEl
+}
+
+export const createParagraph = (name) => {
+    let pEl = document.createElement("p")
+    pEl.textContent = name
+    return pEl
+}
+
+export const createImage = (src, alt, ...classes) => {
+    let imgEl = document.createElement("img")
+    imgEl.setAttribute("src", src)
+    imgEl.setAttribute("alt", alt)
+    imgEl.classList.add(...classes)
+    return imgEl
+}
+
+export const createButton = (value, ...classes) => {
+    let btnEl = document.createElement("button")
+    btnEl.setAttribute("type","button")
+    btnEl.classList.add(...classes)
+    btnEl.textContent = value
+    return btnEl
+}
\ No newline at end of file
diff --git a/assets/code/DOM/DOM.js b/assets/code/DOM/DOM.js
new file mode 100644
index 0000000..be450d2
--- /dev/null
+++ b/assets/code/DOM/DOM.js
@@ -0,0 +1,134 @@
+export const createTitle = (name, ...classes) => {
+    let h1El = document.createElement("h1")
+    h1El.classList.add(...classes)
+    h1El.textContent = name
+    return h1El
+}
+
+export const createDivWithID = id => {
+    let divEl = document.createElement("div")
+    divEl.setAttribute("id", id)
+    return divEl
+}
+
+export const createDivWithClasses = (...classes) => {
+    let divEl = document.createElement("div")
+    divEl.classList.add(...classes)
+    return divEl
+}
+
+export const createParagraph = (name) => {
+    let pEl = document.createElement("p")
+    pEl.textContent = name
+    return pEl
+}
+
+export const createImage = (src, alt, ...classes) => {
+    let imgEl = document.createElement("img")
+    imgEl.setAttribute("src", src)
+    imgEl.setAttribute("alt", alt)
+    imgEl.classList.add(...classes)
+    return imgEl
+}
+
+export const createOption = (value, textContent) => {
+    let optionEl = document.createElement("option")
+    optionEl.setAttribute("value", value)
+    optionEl.textContent = textContent
+    return optionEl
+}
+
+export const createCheckBox = (...classes) => {
+    let checkBoxEl = document.createElement("input")
+    checkBoxEl.setAttribute("type", "checkbox");
+    checkBoxEl.classList.add(...classes)
+    return checkBoxEl
+}
+
+export const createSelect = (...classes) => {
+    let selectEl = document.createElement("select")
+    selectEl.classList.add(...classes)
+    return selectEl
+}
+
+export const createInputTypeNumber = (id, nome) => {
+    let inputEl = document.createElement("input")
+    inputEl.setAttribute("type", "number")
+    inputEl.setAttribute("id", id)
+    inputEl.setAttribute("name", nome)
+    return inputEl
+}
+
+export const getSelectMarked = (idSelect) => {
+    let selectEl = document.getElementById(idSelect)
+    let valueSelected = selectEl.options[selectEl.selectedIndex].value
+    return valueSelected
+}
+
+export const getInputValueByName = (nameInput) => {
+    let inputEl = document.getElementsByName(nameInput)[0]
+    return inputEl.value
+}
+
+export const getIDElement = element => element.getAttribute("id")
+
+export const isInputNull = valor => {
+    if (valor === "") return true
+    else return false
+}
+
+export const setDefaultValueSelect = (selectElement, selectedValue) => {
+    let indexSelected = selectElement.selectedIndex
+    for (let i = 0; i < selectElement.options.length; i++) {
+        if (selectElement.options[i].value == selectedValue) {
+            selectElement.selectedIndex = i
+            break
+        }
+    }
+    return selectElement
+}
+
+//O attribute é a propridade dos objetos do array que vai ser colocada no valor
+export const setOptionsInASelect = (arrayItens, idSelect, valueAttribute, textContentAttribute) => {
+    let currentSelectEl = document.getElementById(idSelect)
+    arrayItens.forEach(valor => {
+        let currentOption = createOption(valor[valueAttribute], valor[textContentAttribute])
+        currentSelectEl.appendChild(currentOption)
+    })
+}
+
+//sem parametro no listener
+export const addEventToElementOnClick = (element, event) => {
+    element.addEventListener("click", event)
+}
+
+export const addEventToHTMLCollectionOnClick = (HTMLCollection, event) => {
+    let buttonsArray = Array.prototype.slice.call(HTMLCollection)
+    buttonsArray.forEach(elemento => {
+        elemento.addEventListener("click", event)
+    })
+}
+
+//retorna um array com a posição na lista dos selecionados
+export const selectedCheckBox = (containerList) => {
+    let containerEl = document.getElementById(containerList)
+    let nodeChild = containerEl.childNodes
+    let arrayNodeChild = Array.prototype.slice.call(nodeChild)
+    let selectedPositionCheckbox = []
+    arrayNodeChild.forEach((valor, indice) => {
+        console.log(valor.childNodes[1].childNodes[0].checked)
+        if (valor.childNodes[1].childNodes[0].checked) {
+            selectedPositionCheckbox.push(indice)
+        }
+    })
+
+    return selectedPositionCheckbox
+}
+
+export const checkCheckboxes = (arrayIDs) => {
+    arrayIDs.forEach((valor) => {
+        let currentItem = document.getElementById(valor)
+        currentItem.childNodes[1].childNodes[0].checked = true
+    })
+}
+
diff --git a/assets/code/DOM/modal.js b/assets/code/DOM/modal.js
new file mode 100644
index 0000000..97ee781
--- /dev/null
+++ b/assets/code/DOM/modal.js
@@ -0,0 +1,14 @@
+export const openModal = (modalEl,fadeEl) => {
+    fadeEl.style.display = "flex";
+    modalEl.style.display = "flex";
+}
+
+export const closeModal = (modalEl,fadeEl) => {
+    modalEl.style.display = "none"
+    fadeEl.style.display = "none"
+}
+
+export const declineActionModal = (modalEl,fadeEl) => {
+    modalEl.style.display = "none";
+    fadeEl.style.display = "none";
+}
diff --git a/assets/code/classes/instEmpr.js b/assets/code/classes/instEmpr.js
new file mode 100644
index 0000000..3292dc1
--- /dev/null
+++ b/assets/code/classes/instEmpr.js
@@ -0,0 +1,8 @@
+export class instEmpr {
+    constructor(nome,responsavel,contato,instEmpr) {
+        this.nome = nome
+        this.responsavel = responsavel
+        this.contato = contato
+        this.instEmpr = instEmpr
+    }
+}
\ No newline at end of file
diff --git a/assets/code/classes/squad.js b/assets/code/classes/squad.js
new file mode 100644
index 0000000..836c580
--- /dev/null
+++ b/assets/code/classes/squad.js
@@ -0,0 +1,9 @@
+export class squad {
+    constructor(arrayIDAlunos,arrayIDMentores,empresaResponsavel,numeroSquad,programaResidencia) {
+        this.arrayIDAlunos = arrayIDAlunos
+        this.arrayIDMentores = arrayIDMentores
+        this.empresaResponsavel = empresaResponsavel
+        this.numeroSquad = numeroSquad
+        this.programaResidencia = programaResidencia
+    }
+}
\ No newline at end of file
diff --git a/assets/code/classes/usuario.js b/assets/code/classes/usuario.js
new file mode 100644
index 0000000..4b7b679
--- /dev/null
+++ b/assets/code/classes/usuario.js
@@ -0,0 +1,9 @@
+export class usuario {
+    constructor(nome, email, funcao, instEmpr, senha) {
+        this.nome = nome
+        this.email = email
+        this.funcao = funcao
+        this.instEmpr = instEmpr
+        this.senha = senha
+    }
+}
\ No newline at end of file
diff --git a/assets/code/control/control.js b/assets/code/control/control.js
new file mode 100644
index 0000000..f9c59d9
--- /dev/null
+++ b/assets/code/control/control.js
@@ -0,0 +1 @@
+import { getAll } from "../db/CRUD.js"
diff --git a/assets/code/db/CRUD.js b/assets/code/db/CRUD.js
new file mode 100644
index 0000000..6218b8a
--- /dev/null
+++ b/assets/code/db/CRUD.js
@@ -0,0 +1,111 @@
+import { getFirestore, getDocs, collection, addDoc, doc, getDoc, updateDoc, deleteDoc, query, where } from "https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js";
+import { removeKeyObject } from "./removeKeyObject.js";
+import { setIDObjects } from "./setIDObjects.js"
+
+const db = getFirestore();
+
+
+export async function add(obj, collectionref) {
+    try {
+        await addDoc(collection(db, collectionref), Object.assign({}, obj))
+        return "sucesso";
+    } catch (e) {
+        console.error("Error:", e);
+    }
+}
+
+export async function getAll(collectionref) {
+    try {
+        let searchArray = [];
+        let currentObject;
+        let documents = await getDocs(collection(db, collectionref))
+        documents.forEach(valor => {
+            currentObject = valor.data();
+            currentObject = setIDObjects(currentObject, valor.id);
+            searchArray.push(currentObject);
+            console.log(searchArray);
+        });
+
+        return searchArray;
+    } catch (e) {
+        console.log(`Error: ${e}`);
+    }
+}
+
+//Retorna uma promisse daqui em diante
+export const get = (id, collectionref) => {
+    try {
+        return getDoc(doc(db, collectionref, id)).then(doc => setIDObjects(doc.data(), id))
+    } catch (e) {
+        console.log(`Error: ${e}`)
+    }
+}
+
+export async function update(obj, collectionref) {
+    try {
+        await updateDoc(doc(db, collectionref, obj.id), Object.assign({}, obj))
+        return "sucesso" 
+    } catch (e) {
+        console.log(`Error: ${e}`);
+    }
+}
+
+export const del = (id, collectionref) => {
+    try {
+        return deleteDoc(doc(db, collectionref, id)).then(() => "Sucesso")
+    } catch (e) {
+        console.log(`Error: ${e}`)
+    }
+}
+
+export async function filterByOneKey(collectionref,key,arrayValue) {
+    try {
+        console.log(collectionref)
+        let searchArray = []
+        let currentObject
+        const q = query(collection(db,collectionref), where(key, "in", arrayValue))
+
+        const documents = await getDocs(q)
+        documents.forEach((doc) => {
+            currentObject = doc.data()
+            currentObject = setIDObjects(currentObject, doc.id)
+            if(collectionref = "usuarios") {
+                currentObject = removeKeyObject(currentObject, "senha")
+            }
+            console.log(currentObject)
+            searchArray.push(currentObject)
+        })
+        return searchArray
+    }catch (e) {
+        console.log(`Error: ${e}`)
+    }
+}
+
+//TODO - Transformar essa função em uma função(ou criar outra) que recebe um array de arrays com par key - arrayValue para criar um filtro de NKeys
+export async function filterByTwoKeys(collectionref, keyOne, valueOne, keyTwo, valueTwo) {
+    try {
+        let searchArray = []
+        let currentObject
+        console.log(keyOne)
+        console.log(keyTwo)
+        const q = query(collection(db, collectionref),where(keyOne, "==",valueOne), where(keyTwo,"==",valueTwo))
+
+        const documents = await getDocs(q)
+        documents.forEach((doc) => {
+            currentObject = doc.data()
+            currentObject = setIDObjects(currentObject, doc.id)
+            if(collectionref = "usuarios") {
+                currentObject = removeKeyObject(currentObject, "senha")
+            }
+            console.log(currentObject)
+            searchArray.push(currentObject)
+        })
+        console.log(searchArray)
+
+        return searchArray
+    }catch (e) {
+        console.log(`Error: ${e}`)
+    }
+}
+
+
diff --git a/assets/code/db/firebase.js b/assets/code/db/firebase.js
new file mode 100644
index 0000000..89dc76e
--- /dev/null
+++ b/assets/code/db/firebase.js
@@ -0,0 +1,22 @@
+// Import the functions you need from the SDKs you need
+import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js";
+
+// TODO: Add SDKs for Firebase products that you want to use
+// https://firebase.google.com/docs/web/setup#available-libraries
+
+// Your web app's Firebase configuration
+// For Firebase JS SDK v7.20.0 and later, measurementId is optional
+const firebaseConfig = {
+  apiKey: "AIzaSyAgkTFLUyk8vZWIL9ZcGqgifavQc6EAH80",
+  authDomain: "dock-tech.firebaseapp.com",
+  projectId: "dock-tech",
+  storageBucket: "dock-tech.appspot.com",
+  messagingSenderId: "612768628457",
+  appId: "1:612768628457:web:6aa323ec3505159008fa78",
+  measurementId: "G-CXH880JV5H"
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+
+
diff --git a/assets/code/db/removeKeyObject.js b/assets/code/db/removeKeyObject.js
new file mode 100644
index 0000000..70913e1
--- /dev/null
+++ b/assets/code/db/removeKeyObject.js
@@ -0,0 +1,4 @@
+export const removeKeyObject = (object,key) => {
+    delete object[key]
+    return object
+}
\ No newline at end of file
diff --git a/assets/code/db/setIDObjects.js b/assets/code/db/setIDObjects.js
new file mode 100644
index 0000000..da17b72
--- /dev/null
+++ b/assets/code/db/setIDObjects.js
@@ -0,0 +1,9 @@
+export const setIDObjects = (object, id) => {
+    Object.defineProperty(object, "id", {
+        enumerable: true,
+        writable: false,
+        value: id
+    })
+
+    return object
+}
\ No newline at end of file
diff --git a/assets/global-images/Group 52.png b/assets/global-images/Group 52.png
new file mode 100644
index 0000000..08486c5
Binary files /dev/null and b/assets/global-images/Group 52.png differ
diff --git a/assets/global-images/add-light.png b/assets/global-images/add-light.png
new file mode 100644
index 0000000..6c9d94c
Binary files /dev/null and b/assets/global-images/add-light.png differ
diff --git a/assets/global-images/add.png b/assets/global-images/add.png
new file mode 100644
index 0000000..6c7597b
Binary files /dev/null and b/assets/global-images/add.png differ
diff --git a/assets/global-images/back.png b/assets/global-images/back.png
new file mode 100644
index 0000000..d0efeed
Binary files /dev/null and b/assets/global-images/back.png differ
diff --git a/assets/global-images/edit.png b/assets/global-images/edit.png
new file mode 100644
index 0000000..af5ea80
Binary files /dev/null and b/assets/global-images/edit.png differ
diff --git a/assets/global-images/icons/icon-nav-dockTech.png b/assets/global-images/icons/icon-nav-dockTech.png
new file mode 100644
index 0000000..08486c5
Binary files /dev/null and b/assets/global-images/icons/icon-nav-dockTech.png differ
diff --git a/assets/global-images/icons/icons8-casa-30.png b/assets/global-images/icons/icons8-casa-30.png
new file mode 100644
index 0000000..e515250
Binary files /dev/null and b/assets/global-images/icons/icons8-casa-30.png differ
diff --git "a/assets/global-images/icons/icons8-usu\303\241rio-de-g\303\252nero-neutro-50.png" "b/assets/global-images/icons/icons8-usu\303\241rio-de-g\303\252nero-neutro-50.png"
new file mode 100644
index 0000000..6226162
Binary files /dev/null and "b/assets/global-images/icons/icons8-usu\303\241rio-de-g\303\252nero-neutro-50.png" differ
diff --git a/assets/global-images/icons8-excluir-480.png b/assets/global-images/icons8-excluir-480.png
new file mode 100644
index 0000000..8d7eae5
Binary files /dev/null and b/assets/global-images/icons8-excluir-480.png differ
diff --git a/assets/global-images/icons8-ok-50.png b/assets/global-images/icons8-ok-50.png
new file mode 100644
index 0000000..9e3d47f
Binary files /dev/null and b/assets/global-images/icons8-ok-50.png differ
diff --git a/assets/global-images/icons8-ok-64.png b/assets/global-images/icons8-ok-64.png
new file mode 100644
index 0000000..ee96298
Binary files /dev/null and b/assets/global-images/icons8-ok-64.png differ
diff --git a/assets/global-images/icons8-ok-65.png b/assets/global-images/icons8-ok-65.png
new file mode 100644
index 0000000..81105c0
Binary files /dev/null and b/assets/global-images/icons8-ok-65.png differ
diff --git a/assets/global-images/icons8-ok-cinza.png b/assets/global-images/icons8-ok-cinza.png
new file mode 100644
index 0000000..87fd3a2
Binary files /dev/null and b/assets/global-images/icons8-ok-cinza.png differ
diff --git a/assets/global-images/icons8-x-50.png b/assets/global-images/icons8-x-50.png
new file mode 100644
index 0000000..61c3bbe
Binary files /dev/null and b/assets/global-images/icons8-x-50.png differ
diff --git a/assets/global-images/icons8-xbox-x-50.png b/assets/global-images/icons8-xbox-x-50.png
new file mode 100644
index 0000000..805b0e2
Binary files /dev/null and b/assets/global-images/icons8-xbox-x-50.png differ
diff --git a/assets/global-images/next-left-2.png b/assets/global-images/next-left-2.png
new file mode 100644
index 0000000..e720631
Binary files /dev/null and b/assets/global-images/next-left-2.png differ
diff --git a/assets/global-images/next.png b/assets/global-images/next.png
new file mode 100644
index 0000000..bbf89bd
Binary files /dev/null and b/assets/global-images/next.png differ
diff --git a/assets/global-images/notification.png b/assets/global-images/notification.png
new file mode 100644
index 0000000..d707ff1
Binary files /dev/null and b/assets/global-images/notification.png differ
diff --git a/assets/global-images/ok.png b/assets/global-images/ok.png
new file mode 100644
index 0000000..85664f2
Binary files /dev/null and b/assets/global-images/ok.png differ
diff --git a/assets/global-images/remove.png b/assets/global-images/remove.png
new file mode 100644
index 0000000..d983f0b
Binary files /dev/null and b/assets/global-images/remove.png differ
diff --git a/assets/global-images/user.png b/assets/global-images/user.png
new file mode 100644
index 0000000..06b2b1f
Binary files /dev/null and b/assets/global-images/user.png differ
diff --git a/assets/global-images/x.png b/assets/global-images/x.png
new file mode 100644
index 0000000..91e2598
Binary files /dev/null and b/assets/global-images/x.png differ
diff --git a/assets/nav-icon-bar.css b/assets/nav-icon-bar.css
new file mode 100644
index 0000000..337b902
--- /dev/null
+++ b/assets/nav-icon-bar.css
@@ -0,0 +1,8 @@
+.icon-bar {
+  max-width: 100%;
+  background-color: #D3D2EB;
+  display: flex;
+  justify-content: space-between;
+  margin: 0px;
+}
+
diff --git a/assets/style/list-adm.css b/assets/style/list-adm.css
new file mode 100644
index 0000000..3616f21
--- /dev/null
+++ b/assets/style/list-adm.css
@@ -0,0 +1,21 @@
+/* Arquivo onde será colocado a estilização das listas que se repetem no ADM */
+.listaItens{
+    display: flex;
+    justify-content: space-between;
+    margin: 10px auto;
+    width: 100%;
+    padding: 20px;
+    box-sizing: border-box;
+    border: #101A3F solid 2px;
+    border-radius: 5px;
+    color: #101A3F;
+    background-color: #D3D2EB;
+    font-weight: bold;
+}
+#listaTrilhas {
+    list-style: none;
+    font-size: 18px;
+    color: #101a3f;
+    background-color: #101A3F;
+    width: 100%;
+}
\ No newline at end of file
diff --git a/assets/styleGLOBAL.css b/assets/styleGLOBAL.css
index 11726e2..3c9c8a1 100644
--- a/assets/styleGLOBAL.css
+++ b/assets/styleGLOBAL.css
@@ -1,52 +1,191 @@
-/*Fontes*/
-@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,500&display=swap');
-*{
-    padding: 0;
-    margin: 0;
-}
-body{
-    font-family: 'Roboto Flex', sans-serif;
-}
-/*flex-box do nav*/
-.container-flex{
-    display: flex;
-}
-.item-flex{
-    justify-content: flex-start;
-    align-items: center;
-    padding: 5px 10px;
-}
-nav{
-    background-color: #101a3f;
-    margin-top: 0;
-    color: #d3d2eb;
-    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-}
-a{
-    color:#d3d2eb;
-    text-decoration: none;
-}
-a:visited{
-    color:#d3d2eb;
-    text-decoration: none;
-}
-a:hover{
-    color:#d3d2eb;
-    text-decoration: none;
-}
-/*Footer*/
-footer{
-    color: #101a3f;
-    bottom: 0;
-    left:0;
-    width: 100%;
-    font-weight: 800;
-    font-size: 16px;
-    text-align: center;
-    position: absolute;
-}
-@media (max-width:1000px){
-    footer{
-        font-size: 12px!important;
-    }   
-}
\ No newline at end of file
+/*Fontes*/
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,500&display=swap');
+
+*{
+    padding: 0;
+    margin: 0;
+}
+body{
+    font-family: 'Roboto Flex', sans-serif;
+}
+/*flex-box do nav*/
+.container-flex{
+    display: flex;
+}
+.item-flex{
+    justify-content: flex-start;
+    align-items: center;
+    padding: 5px 10px;
+}
+nav{
+    background-color: #101a3f;
+    margin-top: 0;
+    color: #d3d2eb;
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+}
+a{
+    color:#d3d2eb;
+    text-decoration: none;
+}
+a:visited{
+    color:#d3d2eb;
+    text-decoration: none;
+}
+a:hover{
+    color:#d3d2eb;
+    text-decoration: none;
+}
+/*Footer*/
+footer{
+    color: #101a3f;
+    /* bottom: 0; */
+    /* left:0; */
+    width: 100%;
+    font-weight: 800;
+    font-size: 16px;
+    text-align: center;
+    position: absolute;
+}
+@media (max-width:1000px){
+    footer{
+        font-size: 12px!important;
+    }
+}
+
+/*Flex*/
+
+.row {
+	flex-direction: row;
+}
+.row-reverse {
+	flex-direction: row-reverse;
+}
+.column {
+	flex-direction: column;
+}
+.column-reverse {
+	flex-direction: column-reverse;
+}
+
+.flex-start {
+	justify-content: flex-start;
+}
+
+.flex-end {
+	justify-content: flex-end;
+}
+
+.center {
+	justify-content: center;
+}
+
+.space-between {
+	justify-content: space-between;
+}
+
+.space-around {
+    justify-content: space-around;
+}
+
+
+/*mouse*/
+
+.mousePointer {
+    cursor: pointer;
+}
+
+/*fontes*/
+
+.fonteCinza {
+    color: #d3d2eb;
+}
+
+/* formulario */
+
+.button{
+    cursor: pointer;
+    width: 64px;
+    height: 64px;
+}
+
+#container-buttons{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 20px;
+  max-width: 450px;
+}
+
+  form {
+    max-width: 300px;
+    margin: 10px auto;
+    padding: 10px 20px;
+    background: #101a3f;
+    color:#d3d2eb;
+    border-radius: 8px;
+  }
+
+  h1 {
+    margin: 0 0 30px 0;
+    text-align: center;
+  }
+
+  input[type="text"],
+  input[type="password"],
+  input[type="date"],
+  input[type="datetime"],
+  input[type="email"],
+  input[type="number"],
+  input[type="search"],
+  input[type="tel"],
+  input[type="time"],
+  input[type="url"],
+  textarea,
+  select {
+    background: rgba(255,255,255,0.1);
+    border: none;
+    font-size: 16px;
+    height: auto;
+    margin: 0;
+    outline: 0;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    padding-left: 10px;
+    box-sizing: border-box;
+    width: 100%;
+    background-color: #e8eeef;
+    color: #787a7c;
+    box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
+    margin-bottom: 30px;
+  }
+
+  input[type="radio"],
+  input[type="checkbox"] {
+    margin: 0 4px 8px 0;
+  }
+
+  select {
+    padding: 6px;
+    height: 32px;
+    border-radius: 2px;
+  }
+
+  fieldset {
+    margin-bottom: 30px;
+    border: none;
+  }
+
+  legend {
+    font-size: 1.4em;
+    margin-bottom: 10px;
+  }
+
+  label {
+    display: block;
+    margin-bottom: 8px;
+  }
+
+  label.light {
+    font-weight: 300;
+    display: inline;
+  }
diff --git a/dogo.mp4 b/dogo.mp4
new file mode 100644
index 0000000..02bb549
Binary files /dev/null and b/dogo.mp4 differ
diff --git a/tela-de-login/js/buttonHandler.js b/tela-de-login/js/buttonHandler.js
deleted file mode 100644
index 162938a..0000000
--- a/tela-de-login/js/buttonHandler.js
+++ /dev/null
@@ -1,16 +0,0 @@
-window.onload = (e) => {
-    e.preventDefault();
-}
-button = document.getElementById('enter');
-loadingImg = document.getElementById('loading-image');
-
-button.addEventListener('click', (e) => {
-    if (e.target == button) {
-        button.style.display = 'none';
-        loadingImg.style.display = 'block';
-        setTimeout( () => {
-            //mudar para a página inicial
-            window.location.href = 'password_recover.html'
-        }, 1000);
-    }
-});
\ No newline at end of file
diff --git a/tela-de-login/js/confirmation.js b/tela-de-login/js/confirmation.js
deleted file mode 100644
index 670fcbf..0000000
--- a/tela-de-login/js/confirmation.js
+++ /dev/null
@@ -1,20 +0,0 @@
-window.onload = (e) => {
-    e.preventDefault();
-}
-
-var modal = document.getElementById("main-modal");
-var button = document.getElementById("enter");
-
-window.onclick = (e) => {
-    if (e.target == modal) {
-      modal.style.display = "block";
-    }
-}
-
-
-//definindo o display pra none novamente
-modal.style.display = "none"
-
-button.onclick = () => {
-  modal.style.display = "block";
-}
\ No newline at end of file
diff --git a/tela-de-login/login.html b/tela-de-login/login.html
deleted file mode 100644
index 9c2ba97..0000000
--- a/tela-de-login/login.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<!DOCTYPE html>
-<html lang="pt-br">
-    <head>
-        <meta charset="UTF-8"/>
-        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
-        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-        <!--CSS da página-->
-        <link rel="stylesheet" href="styleLOGIN.css"/>
-        <!--CSS Global-->
-        <link rel="stylesheet" href="../assets/styleGLOBAL.css"/>
-        <!--Ícone-->
-        <link rel="icon" type="image/png" href="../assets/global-images/icone.png"/>
-        <!--Ícone loading-->
-        <script src="./js/buttonHandler.js" defer></script>
-        <title>Login</title>
-    </head>
-    <body>
-        <header>
-            <nav class="container-flex">
-                <div class="item-flex">
-                    <a href="#">Fale Conosco</a>
-                </div>
-                <div class="item-flex">
-                    <a href="#">O que é o <span class="orange-logo">Dock</span><span class="green-logo">Tech</span>?</a>
-                </div>               
-            </nav>
-        </header>
-        <main>
-            <div class="flex-pai">
-                <div class="flex-form">
-                    <div class="item-form">
-                        <img src="../assets/global-images/logo.png" alt="Logo DockTech" width="250" id="logo-img"/>
-                    </div>
-                    <div class="item-form">
-                        <input type="email" name="login-mail" id="login-mail" placeholder=' input("email")'/>                
-                    </div>
-                    <div class="item-form">                
-                        <input type="password" name="login-password" id="login-password" placeholder=' input("senha")'/>
-                    </div>
-                    <div class="item-form esqueci-senha">
-                        <a href="password_recover.html"><spam class="green-senha">esqueciSenha</spam><spam class="azul-senha">( )</spam></a>
-                    </div>
-                    <div class="item-form">
-                        <input type="submit" value="Enter" id="enter"/>
-                        <img style="display: none;"  id='loading-image' src="./page-images/loading-gif.gif">
-                    </div>
-                </div>
-            </div>
-        </main>
-        <footer>
-            <div>SQUAD 18 &copy; Todos os direitos reservados - 2022</div>
-        </footer>
-    </body>
-</html>
\ No newline at end of file
diff --git a/tela-de-login/page-images/goback.png b/tela-de-login/page-images/goback.png
deleted file mode 100644
index 7bb69ef..0000000
Binary files a/tela-de-login/page-images/goback.png and /dev/null differ
diff --git a/tela-de-login/page-images/loading-gif.gif b/tela-de-login/page-images/loading-gif.gif
deleted file mode 100644
index 72208b7..0000000
Binary files a/tela-de-login/page-images/loading-gif.gif and /dev/null differ
diff --git a/tela-de-login/password_recover.html b/tela-de-login/password_recover.html
deleted file mode 100644
index bb75fbb..0000000
--- a/tela-de-login/password_recover.html
+++ /dev/null
@@ -1,76 +0,0 @@
-<!DOCTYPE html>
-<html lang="pt-br">
-
-<head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <!--CSS da página-->
-    <link rel="stylesheet" href="stylePWRECOVER.css" />
-    <!--CSS Global-->
-    <link rel="stylesheet" href="../assets/styleGLOBAL.css" />
-    <!--Ícone-->
-    <link rel="icon" type="image/png" href="../assets/global-images/icone.png" />
-    <script src="js/confirmation.js" defer></script>
-    <title>Recuperar Conta</title>
-</head>
-
-<body>
-    <header>
-        <nav class="container-flex">
-            <div class="item-flex">
-                <a href="#">Fale Conosco</a>
-            </div>
-            <div class="item-flex">
-                <a href="#">O que é o <span class="orange-logo">Dock</span><span class="green-logo">Tech</span>?</a>
-            </div>
-        </nav>
-    </header>
-    <main>
-        <div class="flex-pai">
-            <div class="flex-form">
-                <div class="item-form">
-                    <div class="arrow-back">
-                        <a href="login.html"><img src="./page-images/goback.png" alt="Return" id="goback-img"></a>
-                    </div>
-                    <img src="../assets/global-images/logo.png" alt="Logo DockTech" width="250" id="logo-img" />
-                </div>
-                <div class="recover-text">
-                    <p>Digite o email da sua conta</p>
-                </div>
-                <div class="item-form">
-                    <input type="email" name="login-mail" id="login-mail" placeholder=' input("email")' />
-                </div>
-                <div class="item-form">
-                    <button type="submit" id="enter">Enter</button>
-                </div>
-            </div>
-        </div>
-
-        <div id="main-modal" class="main-modal">
-            <!-- Conteúdo do modal -->
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h2>
-                        <span class="orange-logo">Dock</span><span class="green-logo">Tech</span>
-                    </h2>
-                </div>
-                <div class="modal-body">
-                    <p>Caso o endereço colocado seja um email vinculado<br>ao DockTech, em poucos
-                        minutos chegará um email<br> com um link de redefinição de senha.<br> Por favor
-                        verifique sua caixa de entrada, lixo eletrônico e spam.</p>
-                    <form method="POST" action="login.html">
-                        <input type="submit" id="return-index" value="Retornar a tela inicial">
-                    </form>
-                </div>
-            </div>
-
-        </div>
-
-    </main>
-    <footer>
-        <div>SQUAD 18 &copy; Todos os direitos reservados - 2022</div>
-    </footer>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/tela-de-login/styleLOGIN.css b/tela-de-login/styleLOGIN.css
deleted file mode 100644
index e114b62..0000000
--- a/tela-de-login/styleLOGIN.css
+++ /dev/null
@@ -1,111 +0,0 @@
-/*Flex-box formulário*/
-.flex-form{
-    display: flex;
-    flex-direction: column;
-    background-color: white;
-    max-width: 25%;
-    margin: auto;    
-    margin-top: 50px;
-    border-radius: 7px;
-    align-items: center;
-    min-width: 300px;
-}
-.item-form{
-    justify-content: center;
-    margin-bottom: 15px;
-}
-.flex-pai{
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    margin: auto;
-}
-/*Cosméticos*/
-.green-logo{
-    color: #147e17;
-}
-.orange-logo{
-    color: #f05a05;
-}
-.green-senha{
-    color: #53983A;
-    font-weight: 600;
-}
-.azul-senha{
-    color: #101a3f;
-    font-weight: 600;
-}
-.esqueci-senha{
-    font-size: 14px;
-}
-#enter{
-    width: 200px;
-    padding: 5px;
-    color: #f05a05;
-    background-color: #101a3f;
-    border-radius: 10px;
-    font-size: 18px;
-    font-weight: 900;
-}
-#loading-image {
-    height: 65px;
-    width: 65px;
-}
-input#login-mail{
-    border-radius: 7px;
-    border:2px solid #f05a05;
-    height: 25px;
-    width: 200px;
-    text-align: center;
-    font-family: monospace;
-    font-weight: 800;
-    background-color: #CBD0E5;
-}
-input#login-password{
-    border-radius: 7px;
-    border:2px solid #f05a05;
-    width: 200px;
-    height: 25px;
-    text-align: center;
-    font-family: monospace;
-    font-weight: 800;
-    background-color: #CBD0E5;
-}
-/*Background*/
-body{
-    background-image: url(../assets/global-images/fundo6.png);
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-color: #d3d2eb;
-}
-/*Recursividade*/
-@media (min-height:650px){
-    .flex-form{
-        margin-top: 100px;
-    }
-}
-@media (max-width:1000px){
-    #logo-img{
-        width:150px;
-    }
-    nav{
-        font-size: 14px!important;
-    }    
-}
-@media (max-width:800px){
-    body{
-        background-image: none;
-        background-color: #d3d2eb;
-    }
-}
-@media (max-width:500px){
-    .item-flex{
-        padding: 10px;
-    }
-    .flex-form{
-        min-width: 250px;
-    }
-    #logo-img{
-        width: 125px;
-    }
-}
\ No newline at end of file
diff --git a/tela-de-login/stylePWRECOVER.css b/tela-de-login/stylePWRECOVER.css
deleted file mode 100644
index 5b9723e..0000000
--- a/tela-de-login/stylePWRECOVER.css
+++ /dev/null
@@ -1,178 +0,0 @@
-/*Flex-box formulário*/
-.flex-form{
-    display: flex;
-    flex-direction: column;
-    background-color: white;
-    max-width: 25%;
-    margin: auto;    
-    margin-top: 50px;
-    border-radius: 7px;
-    align-items: center;
-    min-width: 300px;
-}
-.item-form{
-    justify-content: center;
-    margin-bottom: 15px;
-}
-.flex-pai{
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    margin: auto;
-}
-/*Cosméticos*/
-.green-logo{
-    color: #147e17;
-}
-.orange-logo{
-    color: #f05a05;
-}
-.green-senha{
-    color: #53983A;
-    font-weight: 600;
-}
-.azul-senha{
-    color: #101a3f;
-    font-weight: 600;
-}
-.esqueci-senha{
-    font-size: 14px;
-}
-
-.recover-text {
-    color: #101a3f;
-    font-weight: 600;
-}
-
-
-#enter{
-    width: 200px;
-    padding: 5px;
-    color: #f05a05;
-    background-color: #101a3f;
-    border-radius: 10px;
-    font-size: 18px;
-    font-weight: 900;
-}
-#return-index {
-    width: 250px;
-    margin-top: 10px;
-    margin-bottom: 10px;
-    padding: 5px;
-    color: #53983a;
-    background-color: #101a3f;
-    border-radius: 10px;
-    font-size: 18px;
-    font-weight: 900;
-}
-#goback-img {
-    text-align: left;
-    padding-top: 20px;
-}
-input#login-mail{
-    border-radius: 7px;
-    border:2px solid #f05a05;
-    width: 200px;
-    height: 25px;
-    text-align: center;
-    font-family: monospace;
-    font-weight: 800;
-    background-color: #CBD0E5;
-}
-/*Background*/
-body{
-    background-image: url(../assets/global-images/fundo6.png);
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-color: #d3d2eb;
-}
-
-/*Conteúdo do Modal: Password Recovery*/
-
-.main-modal {
-  display: none; 
-  position: fixed;
-  z-index: 1; 
-  padding-top: 200px; 
-  left: 0;
-  top: 0;
-  width: 100%; 
-  height: 100%; 
-  overflow: auto; 
-  background-color: rgb(0,0,0); 
-  background-color: rgba(0,0,0,0.4); 
-}
-
-  
-.modal-content {
-    position: relative;
-    background-color: rgb(214 214 232);
-    color: #101a3f;
-    font-weight: 600;
-    text-align: center;
-    width: 40%;
-    margin: auto;
-    padding: 0;
-    border: 2px solid #101a3f;
-    border-radius: 2px;
-    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-    -webkit-animation-name: animatetop;
-    -webkit-animation-duration: 0.4s;
-    -webkit-box-shadow: 5px 5px 15px 5px #000000; 
-    box-shadow: 5px 5px 15px 5px #000000;
-    animation-name: animatetop;
-    animation-duration: 0.4s
-}
-
-.modal-header {
-    padding: 2px 16px;
-    background-color: rgb(214 214 232);
-    color: white;
-}
-  
-.modal-body {padding: 2px 16px;}
-
-/*Recursividade*/
-@media (min-height:650px){
-    .flex-form{
-        margin-top: 100px;
-    }
-}
-@media (max-width:1000px){
-    #logo-img{
-        width:150px;
-    }
-    nav{
-        font-size: 14px!important;
-    }    
-}
-@media (max-width:800px){
-    body{
-        background-image: none;
-        background-color: #d3d2eb;
-    }
-}
-@media (max-width:500px){
-    .item-flex{
-        padding: 10px;
-    }
-    .flex-form{
-        min-width: 250px;
-    }
-    #logo-img{
-        width: 125px;
-    }
-}
-
-/* Animação back in do modal */
-
-
-@-webkit-keyframes animatetop {
-    from {top:-300px; opacity:0} 
-    to {top:0; opacity:1}
-  }
-  
-@keyframes animatetop {
-    from {top:-300px; opacity:0}
-    to {top:0; opacity:1}
-}
\ No newline at end of file
diff --git a/tela-video/comments/comentarios.css b/tela-video/comments/comentarios.css
new file mode 100644
index 0000000..04457e5
--- /dev/null
+++ b/tela-video/comments/comentarios.css
@@ -0,0 +1,61 @@
+#containerComentario {
+    display: flex;
+    flex-direction: column;
+    justify-content: stretch;
+}
+
+#containerComentario .itemComentario {
+    margin: 5px;
+}
+
+#comment-box, #post,#cancel {
+    border: none;
+    border-radius: 5px;
+}
+#post:hover{
+    background-color: deeppink;
+}
+
+ul {
+    list-style-type: none;
+}
+
+#question-generator {
+    border: none;
+    background-color: #101A3F;
+    color: #FFFFFF;
+    padding: 15px;
+    width: 30%;
+}
+
+#question-generator:hover{
+    cursor: pointer;
+    border: solid #FFFFFF;
+}
+
+#title-text-wrapper{
+    display: flex;
+    flex-direction: column;
+    flex-grow: 0;
+}
+
+#comment-box {
+    width: 600px;
+    height: 100px;
+    margin-top: 10px;
+}
+
+#title-box{
+    width: 600px;
+}
+
+#title-text,#comment-text{
+    border-radius: 40px;
+    align-content: center;
+    width: 180px;
+    padding: 6px;
+    color: #FFFFFF;
+    font-family: Arial, Helvetica, sans-serif;
+    background-color: #101A3F;
+}
+
diff --git a/tela-video/comments/comentarios.js b/tela-video/comments/comentarios.js
new file mode 100644
index 0000000..5caeff2
--- /dev/null
+++ b/tela-video/comments/comentarios.js
@@ -0,0 +1,91 @@
+window.addEventListener("load", function () {
+    const questionButton = document.querySelector('#question-generator');
+    questionButton.addEventListener('click', createComment);
+    questionButton.addEventListener('click', () => questionButton.classList.add("invisible"));
+});
+
+function createComment() {
+
+    const containerComentario = document.querySelector('#containerComentario');
+    containerComentario.removeEventListener('click', createComment);
+    const button = document.querySelector('#question-generator');
+
+
+    const div1 = document.createElement('div');
+    div1.classList.add('itemComentario');
+    div1.setAttribute("id", "title-text-wrapper");
+
+    const titleText = document.createElement('p');
+    titleText.setAttribute("id", "title-text");
+    titleText.textContent = "Insira um titulo";
+
+    const titleBox = document.createElement('textarea');
+    titleBox.setAttribute("id", "title-box");
+
+    const commentText = document.createElement('p');
+    commentText.setAttribute("id", "comment-text");
+    commentText.textContent = "Digite seu comentario";
+
+    const commentBox = document.createElement('textarea');
+    commentBox.setAttribute("id", "comment-box");
+
+    const div2 = document.createElement('div');
+    div2.classList.add('itemComentario');
+
+    const postButton = document.createElement('button');
+    postButton.setAttribute("id", "post");
+    postButton.textContent = 'Postar';
+
+    postButton.addEventListener("click", function () {
+        if (!(commentBox.value == null || titleBox.value == null)) {
+            const commentDiv = document.createElement("div");
+            commentDiv.classList.add('itemComentario');
+
+            const commentBoxValue = commentBox.value;
+            const titleBoxValue = titleBox.value;
+
+            commentBox.value = "";
+            titleBox.value = "";
+
+
+            const title = document.createElement("p");
+            const titleText = document.createTextNode(titleBoxValue);
+            title.appendChild(titleText);
+            document.getElementById
+
+            const comment = document.createElement("p");
+            const text = document.createTextNode(commentBoxValue);
+            comment.appendChild(text);
+
+            commentDiv.appendChild(title);
+            commentDiv.appendChild(comment);
+
+            document.getElementById("containerComentario").appendChild(commentDiv);
+        }
+
+
+
+    });
+
+    const cancelButton = document.createElement('button');
+    cancelButton.setAttribute("id", "cancel");
+    cancelButton.textContent = 'Cancelar';
+
+    cancelButton.addEventListener("click", () => {
+        div1.remove();
+        div2.remove();
+        button.classList.remove("invisible");
+    });
+
+
+    div1.appendChild(titleText);
+    div1.appendChild(titleBox);
+    div1.appendChild(commentText);
+    div1.appendChild(commentBox);
+    containerComentario.appendChild(div1);
+
+    div2.appendChild(postButton);
+    div2.appendChild(cancelButton);
+    containerComentario.appendChild(div2);
+
+}
diff --git a/tela-video/comments/comments.html b/tela-video/comments/comments.html
new file mode 100644
index 0000000..13a3661
--- /dev/null
+++ b/tela-video/comments/comments.html
@@ -0,0 +1,12 @@
+<div id="containerComentario">
+    <div class="itemComentario">
+        <button id="question-generator">Faca uma pergunta</button>
+    </div>
+</div>
+</div>
+
+<ul id="unordered">
+
+</ul>
+
+<script src="comentarios.js"></script>
diff --git a/tela-video/index.html b/tela-video/index.html
new file mode 100644
index 0000000..2fc4a1f
--- /dev/null
+++ b/tela-video/index.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DockTech - Aula</title>
+    <link rel="stylesheet" href="../assets/styleGLOBAL.css">
+    <link rel="stylesheet" href="../assets/nav-icon-bar.css">
+    <link rel="stylesheet" href="./style/style.css">
+    <link rel="stylesheet" href="./style/trilha.css">
+    <link rel="stylesheet" href="./style/video-player.css">
+    <link rel="stylesheet" href="./style/tabs.css">
+    <link rel="stylesheet" href="./style/progress-bar.css">
+    <script type="module"  src="./js/code.js" defer="defer"></script>
+    <script type="module"  src="./js/tabs.js" defer="defer"></script>
+    <link rel="icon" href="../assets/global-images/icone.png" type="image/png">
+</head>
+<body>
+
+    <header>
+        <nav class="container-flex">
+            <img src="../assets/global-images/icons/icon-nav-dockTech.png" alt="Ícone do DockTech com o nome" class="item-flex">
+        </nav>
+    </header>
+
+    <div class="principal-wrapper">
+        <h2 id="video-player-title"></h2>
+        <div class="first-line-wrapper">
+            <div class="videoPlayer">
+
+                <div id="video-external">
+                    <iframe width="560" height="315" src="" id="first-video" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+                </div>
+                <!-- <div id="video-external"></video> -->
+                <div id="video-internal"></div>
+                <!-- <video id="video-internal"></video> -->
+            </div>
+            <div class="blocoTrilha">
+                <div id="trilha">
+                    <!-- Trilha em inglês? -->
+                    <h3 id="title-trilha">Trilha de aulas</h3>
+                </div>
+                <div id="progress-bar">
+                    <div id="concluded-progress">
+                        <div id="text-progress">
+                            <span>Progresso</span>&#160;&#160;
+                            <span id="percentual-progress"></span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+        <div class="second-line-wrapper">
+            <div id="container-tabs">
+                <div class="item" id="comments">
+                    <p>Fórum do Vídeo</p>
+                </div>
+                <div class="item" id="exercises">
+                    <p>Exercícios</p>
+                </div>
+                <div class="item" id="notes">
+                    <p>Anotações</p>
+
+                </div>
+                <div class="item" id="shell">
+                    <p>Shell</p>
+                </div>
+            </div>
+
+        </div>
+        <div class="third-line-wrapper">
+            <div id="append"></div>
+        </div>
+        <footer>
+            <div>SQUAD 18 &copy; Todos os direitos reservados - 2022</div>
+        </footer>
+    </div>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/tela-video/js/code.js b/tela-video/js/code.js
new file mode 100644
index 0000000..b476763
--- /dev/null
+++ b/tela-video/js/code.js
@@ -0,0 +1,23 @@
+//API Script
+let tag = document.createElement('script');
+tag.src = "https://www.youtube.com/iframe_api";
+let firstScriptTag = document.getElementsByTagName('script')[0];
+firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+
+import {trilha} from "./currentTrilha.js"
+import {dynamicTrilha} from "./trilha.js"
+import {saveCurrentStats} from "./control.js"
+import {responsiveVideo, onPlayerReady, onPlayerStateChange, buildExternalVideo} from "./video-player.js"
+
+dynamicTrilha(trilha)
+
+window.addEventListener("beforeunload", saveCurrentStats)
+responsiveVideo();
+let firstV = window.document.getElementById("first-video");
+
+window.onload = function(){
+    window.document.getElementById("first-video").src = trilha.modules[0].lessons[0].link
+}
+
+
+
diff --git a/tela-video/js/control.js b/tela-video/js/control.js
new file mode 100644
index 0000000..ca6c19d
--- /dev/null
+++ b/tela-video/js/control.js
@@ -0,0 +1,65 @@
+import {player} from "./video-player.js"
+import {trilha} from "./currentTrilha.js"
+
+
+export let currentTypeVideo //O tipo do vídeo do momento
+export let currentPositionOrder //Qual a posição do vídeo sendo reproduzido no momento na trilha
+export let currentSecondsVideoPlayer //O tempo salvo do video no momento
+export let currentVideoPlayerTimeComplete //Temp em segundos do vídeo completo 
+export let isLessonsConcludedArray = [] //array que vai dizer na posição da vídeo aula se aquele vídeo foi concluído ou não 
+
+
+trilha.modules.forEach(valor => {
+    valor.lessons.forEach(valor => {
+        isLessonsConcludedArray.push(false) //Por padrão cada posição do array é falsa, é colocado aqui para que ele tenha a mesma quantidade de falses da quantidade de aula
+    })
+})
+
+export const changeCurrentPositionOrder = position => currentPositionOrder = position
+
+export const saveCurrentStats = () => {
+    switch (currentTypeVideo) {
+        case "external":
+            changeCurrentSecondsVideoPlayer(Math.ceil(player.getCurrentTime()))
+            console.log("extStas" + currentSecondsVideoPlayer)      
+            break
+        case "internal":
+            changeCurrentSecondsVideoPlayer(Math.ceil(player.currentTime))
+            console.log("intStats" + currentSecondsVideoPlayer)
+            break;
+    }
+}
+
+export const changeCurrentTypeVideo = (videoType) => {
+    currentTypeVideo = videoType
+}
+
+export const changeCurrentSecondsVideoPlayer = sec => {
+    currentSecondsVideoPlayer = sec
+}
+
+export const changecurrentVideoPlayerTimeComplete = () => {
+    switch(currentTypeVideo) {
+        case "external":
+            currentVideoPlayerTimeComplete = player.getDuration()
+            console.log("extComplete|" + currentVideoPlayerTimeComplete)
+            break;
+        case "internal":
+            currentVideoPlayerTimeComplete = player.duration
+            console.log("intComplete|" +  currentVideoPlayerTimeComplete)
+            break;
+    }
+}
+
+export const isTrilhaCompleted = () => {
+    let isCompleted = false
+    isCompleted = isLessonsConcludedArray.every(valor => valor)
+    return isCompleted
+}
+
+export const pushLessonConcludedArray = (position) => {
+    isLessonsConcludedArray[position] = true
+    console.log(isLessonsConcludedArray)
+}
+
+
diff --git a/tela-video/js/currentTrilha.js b/tela-video/js/currentTrilha.js
new file mode 100644
index 0000000..3ce4733
--- /dev/null
+++ b/tela-video/js/currentTrilha.js
@@ -0,0 +1,68 @@
+//Estrutura dos objetos:
+//Trilha
+// Um atributo título: String
+// Um atributo fases da residência : Array[String]
+// Um atributo módulos : Array (cada espaço do array com um objeto modulo)
+//  
+// Modulo
+// Um atributo titulo: String
+// Um atributo lessons : Array (cada espaço do array com um objeto lesson)
+//
+//lesson
+// Um atríbuto lessonTitle : String
+// Um atributo videoType: String
+// Um atributo link: String
+export const trilha = {
+    title: "Banco de Dados",
+    residenceStage: ["Grow Up"],
+    modules: [
+        {
+            title: "Introdução a banco de dados",
+            lessons: [
+                {
+                    lessonTitle: "O que é Banco de Dados?",
+                    videoType: "external",
+                    link: "https://www.youtube.com/embed/Ofktsne-utM"
+                },
+                {
+                    lessonTitle: "Instalando o MySQL",
+                    videoType: "external",
+                    link: "https://www.youtube.com/embed/5JbAOWJbgIA"
+                }
+            ]
+        },
+        {
+            title: "MySQL",
+            lessons: [
+                {
+                    lessonTitle: "Criando o primeiro banco de Dados",
+                    videoType: "external",
+                    link: "https://www.youtube.com/embed/m9YPlX0fcJk"
+                },
+                {
+                    lessonTitle: "dogo do fim da aula",
+                    videoType: "internal",
+                    link: "../dogo.mp4"
+                }
+            ]
+        }, {
+            title:"Trailers",
+            lessons: [
+                {
+                    lessonTitle: "Oficial Trailer 1 - Bleach",
+                    videoType:"external",
+                    link: "https://www.youtube.com/embed/1sygUhb8Q2Y"
+                }, 
+                {
+                    lessonTitle: "Oficial Trailer 2 - Bleach",
+                    videoType:"external",
+                    link: "https://www.youtube.com/embed/fzR82oXbjnY"
+                },
+                {
+                    lessonTitle:"Oficial Trailer 3 - Bleach",
+                    videoType:"external",
+                    link: "https://www.youtube.com/embed/78WIYzX_m98"
+                }
+            ]
+        }]
+}
\ No newline at end of file
diff --git a/tela-video/js/progress-bar.js b/tela-video/js/progress-bar.js
new file mode 100644
index 0000000..4ce8fe6
--- /dev/null
+++ b/tela-video/js/progress-bar.js
@@ -0,0 +1,39 @@
+//percent/100 * all = part | percent = part *100/all
+import { isLessonsConcludedArray } from "./control.js"
+
+const getWidthProgressConcluded = (width = 428,part,all) => ((width/all)*part).toFixed(2)
+
+const getConcludedProgressBar = () => document.getElementById("concluded-progress")
+
+const getPartConcludedLessons = (lessonsConcludedArray = isLessonsConcludedArray) => {
+    return lessonsConcludedArray.reduce((total,valor) => {
+        if(valor) return ++total
+        return total
+    },0)
+}
+
+const getTotalLessons = (lessonsConcludedArray = isLessonsConcludedArray) => lessonsConcludedArray.length
+
+const setConcludedProgressBarWidth = (part,all, widthProgessBar) => {
+    let concludedProgressBar = getConcludedProgressBar()
+    let newWidth = getWidthProgressConcluded(widthProgessBar,part,all)
+    concludedProgressBar.style.width = newWidth + "px";
+    concludedProgressBar.style.height = "100%";
+    concludedProgressBar.style.backgroundColor = "#147E17";
+}
+
+const getPercentageConcluded = (part,all) => ((part/all)*100).toFixed(2)
+
+const setConcludedProgressBarPercentage = (part,all) => {
+    document.getElementById("percentual-progress").textContent = `${getPercentageConcluded(part,all)}%`
+
+}
+
+export const changeProgressBar = () => {
+    let part = getPartConcludedLessons()
+    let all = getTotalLessons()
+    let widthProgessBar = document.getElementById("progress-bar").clientWidth
+
+    setConcludedProgressBarWidth(part,all, widthProgessBar)
+    setConcludedProgressBarPercentage(part,all)
+}
\ No newline at end of file
diff --git a/tela-video/js/tabs.js b/tela-video/js/tabs.js
new file mode 100644
index 0000000..8d03719
--- /dev/null
+++ b/tela-video/js/tabs.js
@@ -0,0 +1,121 @@
+const changeTabs = (eventTarget) => {
+    removeAllTabActive()
+    removeAllContentTab()
+    setTabActive(eventTarget.target.parentNode)
+}
+
+
+const removeAllContentTab = () => {
+    document.getElementById("append").innerHTML = ""
+}
+
+const tabs = Array.prototype.slice.call(document.getElementsByClassName("item"))
+
+tabs.forEach(valor => {
+    valor.addEventListener("click", changeTabs)
+})
+
+const setTabActive = element => element.classList.add("active")
+
+const removeAllTabActive = () => {
+    tabs.forEach(valor => valor.classList.remove("active"))
+}
+
+const setContentOfContentTab = (tab) => {
+
+
+    switch(tab) {
+        case "comments":
+
+        break
+        case "exercises":
+
+        break
+        case "notes":
+
+        break
+        case "comments":
+
+        break
+    }
+}
+
+let contentTabEl = document.getElementById("append")
+
+const setComments = () => {
+    
+}
+
+///////////////////////////////////////////////////////////////////////////
+// window.addEventListener("load", function(){
+    // const abaAnotacao = document.querySelector("#abaAnotacao");
+    // abaAnotacao.addEventListener("click", mudarAnotacao);
+// });
+
+function mudarAnotacao(){
+
+    const appendDiv = document.querySelector('#append');
+    const abaAnotacao = document.querySelector('#abaAnotacao');
+    abaAnotacao.setAttribute('id','active');
+    
+    const containerAnotacao = document.createElement('div');
+    containerAnotacao.setAttribute("id", "containerAnotacao");
+
+    const div1 = document.createElement('div'); 
+    div1.classList.add("itemAnotacao");
+
+    const div2 = document.createElement('div');
+    div2.classList.add("itemAnotacao");
+
+    const textElement = document.createElement('p');
+    const value = document.createTextNode("Criar uma nova anotacao em 10:32");
+    textElement.appendChild(value);
+
+    const addButton = document.createElement("i");
+    addButton.innerHTML = '<i class="fa-solid fa-circle-plus"></i>';
+
+    div1.appendChild(textElement);
+    containerAnotacao.appendChild(div1);
+
+    div2.appendChild(addButton);
+    containerAnotacao.appendChild(div2);
+
+    appendDiv.appendChild(containerAnotacao);
+
+    addButton.addEventListener("click", anotacaoTransicao, {once:true});
+    addButton.addEventListener('click', () => containerAnotacao.remove());
+
+}
+
+function anotacaoTransicao() {
+    const div1 = document.createElement('div');
+    div1.classList.add('itemAnotacao');
+
+    const videoTimer = document.createElement('p');
+    const timerValue = document.createTextNode("TESTE");
+    videoTimer.appendChild(timerValue);
+    videoTimer.setAttribute("id", "videoTimer");
+
+    const annotationBox = document.createElement('textarea');
+    annotationBox.setAttribute("id", "annotationBox");
+
+    const div2 = document.createElement('div2');
+    div2.setAttribute("id", "div2");
+
+    const saveButton = document.createElement('button');
+    saveButton.textContent = 'Salvar Anotacao';
+    saveButton.setAttribute("id", "saveButton");
+
+    const cancelButton = document.createElement('button');
+    cancelButton.textContent = 'Cancelar';
+    cancelButton.setAttribute("id", "cancelButton");
+
+    const containerAnotacao = document.querySelector('#append');
+    div1.appendChild(videoTimer);
+    div1.appendChild(annotationBox);
+    containerAnotacao.appendChild(div1);
+
+    div2.appendChild(saveButton);
+    div2.appendChild(cancelButton);
+    containerAnotacao.appendChild(div2);
+}
\ No newline at end of file
diff --git a/tela-video/js/trilha.js b/tela-video/js/trilha.js
new file mode 100644
index 0000000..0f3a5ac
--- /dev/null
+++ b/tela-video/js/trilha.js
@@ -0,0 +1,78 @@
+import {changeCurrentPositionOrder,saveCurrentStats, changeCurrentTypeVideo, currentPositionOrder} from "./control.js"
+import {deletePreviousVideo, reBuildIframe, changeVideoTitle} from "./video-player.js"
+
+let countPositionOrder //Contador utilizado para inserir a posição do elemento no DOM
+
+export const dynamicTrilha = (trilhaJSON) => {
+    countPositionOrder = 0
+    const trilhaEL = document.getElementById("trilha")
+    let summaryEL = document.createElement("ol")
+    summaryEL.classList.add("summary")
+
+    trilhaJSON.modules.forEach((valor) => {
+        let module = createModule(valor.title)
+        let subModule = createLessonsModule();
+        let contentModuleArray = valor.lessons
+
+        contentModuleArray.forEach((value) => {
+            let lesson = createLesson(value)
+            let checkbox = createCheckbox()
+
+            lesson.appendChild(checkbox)
+            countPositionOrder++
+            subModule.appendChild(lesson)
+        })
+
+        module.appendChild(subModule)
+        summaryEL.appendChild(module)
+    })
+    trilhaEL.appendChild(summaryEL)
+}
+
+export const createModule = (text) => {
+    let li = document.createElement("li")
+    li.classList.add("module")
+    li.textContent =  "- " + text
+    return li
+}
+
+//Lesson para não colocar class e confundir com o do HTML
+export const createLessonsModule = () => {
+    let ol = document.createElement("ol")
+    ol.classList.add("sub-module")
+    return ol;
+}
+
+export const createLesson = (lesson) => {
+    let div = document.createElement("div")
+    div.classList.add("lesson")
+    let li = document.createElement("li")
+    li.textContent = lesson.lessonTitle
+    li.setAttribute("id", countPositionOrder)
+    li.addEventListener("click", (eventTarget) => {
+        changeCurrentPositionOrder(Number(eventTarget.target.id))
+        saveCurrentStats()
+        deletePreviousVideo()
+        changeCurrentTypeVideo(lesson.videoType)
+        reBuildIframe(lesson.link, lesson.videoType)
+        changeVideoTitle(lesson.lessonTitle)
+    })
+    div.appendChild(li)
+    return div;
+}
+
+export const createCheckbox = () => {
+    let checkbox = document.createElement("input")
+    checkbox.setAttribute("type", "checkbox")
+    checkbox.setAttribute("name", countPositionOrder)
+    checkbox.setAttribute("disabled","disabled")
+
+    return checkbox
+}
+
+
+
+
+export const changeCheckBox = () => {
+    document.getElementsByName(currentPositionOrder)[0].setAttribute("checked","checked")
+}
\ No newline at end of file
diff --git a/tela-video/js/video-player.js b/tela-video/js/video-player.js
new file mode 100644
index 0000000..ffbe05a
--- /dev/null
+++ b/tela-video/js/video-player.js
@@ -0,0 +1,152 @@
+import { currentTypeVideo, changecurrentVideoPlayerTimeComplete, pushLessonConcludedArray, currentPositionOrder, saveCurrentStats, currentVideoPlayerTimeComplete, changeCurrentSecondsVideoPlayer } from "./control.js"
+import { changeProgressBar } from "./progress-bar.js"
+import { changeCheckBox } from "./trilha.js"
+import { trilha } from "./currentTrilha.js"
+
+
+export let player //Objeto do videoPlayer
+
+export const reBuildIframe = (link, videoType) => {
+    switch (videoType) {
+        case "external":
+            buildExternalVideo(link.slice(30)) //A partir do 30 só fica o ID do link
+            break
+        case "internal":
+            buildInternalVideo(link)
+            break
+    }
+}
+
+export const deletePreviousVideo = () => {
+    switch (currentTypeVideo) {
+        case "external":
+            player.destroy()
+            break
+        case "internal":
+            player.remove()
+            break
+    }
+    player = null
+}
+
+export const changeVideoTitle = title => {
+    document.getElementById("video-player-title").textContent = title;
+}
+// verificar tamanho da tela e redimensiona o vídeo
+export const responsiveVideo = () => {
+    let larguraDoVideo;
+    window.addEventListener('resize', function () {
+        var larguraDaPagina = window.innerWidth;       
+        if (larguraDaPagina >= 1000) {
+            larguraDoVideo = '650px';
+        } else if (larguraDaPagina >= 720) {
+            larguraDoVideo = '500px';
+        } else {
+            larguraDoVideo = '350px';
+        }
+        switch (currentTypeVideo){
+            case "external":
+                player.getIframe().setAttribute("width", larguraDoVideo);
+                break;
+            case "internal":
+                player.setAttribute("width", larguraDoVideo);
+                break;
+        }
+        
+    });
+}
+
+//External
+export const buildExternalVideo = videoID => {
+    if(window.innerWidth>=1000){
+        player = new YT.Player('video-external', {
+            //height: '720px',
+            width: '650px',
+            //Primeiro vídeo da trilha
+            videoId: videoID,
+            events: {
+                'onReady': onPlayerReady,
+                'onStateChange': onPlayerStateChange
+            }
+        })
+    }else if(window.innerWidth>=720){
+        player = new YT.Player('video-external', {
+            //height: '720px',
+            width: '500px',
+            //Primeiro vídeo da trilha
+            videoId: videoID,
+            events: {
+                'onReady': onPlayerReady,
+                'onStateChange': onPlayerStateChange
+            }
+        })
+    }else{
+        player = new YT.Player('video-external', {
+            //height: '720px',
+            width: '350px',
+            //Primeiro vídeo da trilha
+            videoId: videoID,
+            events: {
+                'onReady': onPlayerReady,
+                'onStateChange': onPlayerStateChange
+            }
+        })
+    }
+    
+}
+
+export const onPlayerStateChange = (objectEvent) => {
+    if (objectEvent.data == YT.PlayerState.ENDED) {
+        onPlayerEnded()
+    }
+    saveCurrentStats()
+}
+
+export const onPlayerReady = () => {
+    player.playVideo()
+    changecurrentVideoPlayerTimeComplete()
+}
+
+export const onPlayerEnded = () => {
+    changeCurrentSecondsVideoPlayer(currentVideoPlayerTimeComplete)
+    pushLessonConcludedArray(currentPositionOrder)
+    changeCheckBox(currentPositionOrder)
+    changeProgressBar()
+}
+
+//Internal
+export const buildInternalVideo = link => {
+
+    let isCurrentTimeSaved = false
+
+    player = document.createElement("video")
+    player.setAttribute("src", link)
+    
+    if(window.innerWidth>=1000){
+        player.setAttribute("width", 650)
+    }else if(window.innerWidth>=720){
+        player.setAttribute("width", 500)
+    }else{
+        player.setAttribute("width", 350)
+    }
+    
+    player.setAttribute("controls", "true")
+    player.setAttribute("autoplay", "autoplay")
+
+    player.addEventListener("play", () => {
+        if (!isCurrentTimeSaved) {
+            changecurrentVideoPlayerTimeComplete()
+            !!isCurrentTimeSaved
+        }
+        saveCurrentStats()
+    })
+    player.addEventListener("pause", saveCurrentStats)
+    player.addEventListener("ended", onPlayerEnded)
+
+    document.getElementById("video-internal").appendChild(player)
+}
+
+
+
+
+
diff --git a/tela-video/notepad/notepad.css b/tela-video/notepad/notepad.css
new file mode 100644
index 0000000..8c73e9a
--- /dev/null
+++ b/tela-video/notepad/notepad.css
@@ -0,0 +1,86 @@
+#container-notepad{
+    font-family: Verdana,Tahoma, sans-serif;
+    width: 600px;
+    height: 50px;
+    margin: 20px;
+    border-radius: 3px;
+    background-color: #101A3F;
+    display: flex;
+    justify-content: space-between;  
+    border: solid 1px black;
+ }
+
+
+ .item-notepad{
+    padding: 5px;
+    align-self: center;
+    color: #FFFFFF;
+    display: flex;
+    flex-direction: row;
+ }
+
+ .item-notepad i {
+    padding: 5px;
+    cursor: pointer;
+ }
+
+ .fa-solid, .fa-solid-circle-plus {
+      padding: 5px;
+      cursor: pointer;
+ }
+
+ #videoTimer {
+   align-self: none;
+   background-color: #101A3F;
+   color: #FFFFFF;
+   border-radius: 40px;
+   padding: 5px;
+   font-size: small;
+   margin-right: 10px;
+ }
+
+ #annotationBox{
+   width: 600px;
+   background-color: #101A3F;
+   color: #FFFFFF;
+ }
+
+ #div2{
+    margin-top: 5px;
+    width: 660px;
+    padding: 5px;
+    align-self: center;
+    color: #FFFFFF;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+ }
+
+ #saveButton {
+   width: 180;
+   height: 70;
+   background-color: #101A3F;
+   color: #FFFFFF;
+   padding: 10px;
+   margin-left: 20px;
+   border-radius: 5px;
+ }
+
+ #saveButton:hover {
+   border: solid #FFFFFF 2px;
+   cursor: pointer;
+ }
+
+ #cancelButton {
+   margin-left: 15px;
+   border: none;
+   background-color: #D3D2EB;
+ }
+
+ #cancelButton:hover{
+   color: #FFFFFF;
+   background-color: red;
+   border: solid 2px black;
+ }
+
+
diff --git a/tela-video/notepad/notepad.html b/tela-video/notepad/notepad.html
new file mode 100644
index 0000000..77702ea
--- /dev/null
+++ b/tela-video/notepad/notepad.html
@@ -0,0 +1,11 @@
+<div id="container-notepad">
+    <div class="item-notepad">
+        <p>Criar uma nova anotacao em 10:32</p>
+    </div>
+    <div id="addButton" class="item-notepad">
+        <i class="fa-solid fa-circle-plus"></i>
+    </div>
+</div>
+<div id="append">
+</div>
+<script src="./notepad.js"></script>
\ No newline at end of file
diff --git a/tela-video/notepad/notepad.js b/tela-video/notepad/notepad.js
new file mode 100644
index 0000000..fccf4a7
--- /dev/null
+++ b/tela-video/notepad/notepad.js
@@ -0,0 +1,48 @@
+const body = document.querySelector('body');
+
+window.addEventListener("load", function () {
+    const addButton = document.querySelector('#addButton');
+    const containerAnotacao = document.querySelector('#containerAnotacao');
+    addButton.addEventListener('click', createAnnotation);
+    addButton.addEventListener('click', () => containerAnotacao.remove());
+});
+
+
+function createAnnotation(){
+    const div1 = document.createElement('div');
+    div1.classList.add('itemAnotacao');
+
+    const videoTimer = document.createElement('p');
+    const timerValue = document.createTextNode("TESTE");
+    videoTimer.appendChild(timerValue);
+    videoTimer.setAttribute("id", "videoTimer");
+
+    const annotationBox = document.createElement('textarea');
+    annotationBox.setAttribute("id", "annotationBox");
+
+    const div2 = document.createElement('div2');
+    div2.setAttribute("id", "div2");
+
+    const saveButton = document.createElement('button');
+    saveButton.textContent = 'Salvar Anotacao';
+    saveButton.setAttribute("id", "saveButton");
+
+    const cancelButton = document.createElement('button');
+    cancelButton.textContent = 'Cancelar';
+    cancelButton.setAttribute("id", "cancelButton");
+
+    cancelButton.addEventListener("click", () => {
+        div1.remove();
+        div2.remove();
+        body.appendChild(containerAnotacao);
+    });
+
+    const containerAnotacao = document.querySelector('#append');
+    div1.appendChild(videoTimer);
+    div1.appendChild(annotationBox);
+    containerAnotacao.appendChild(div1);
+
+    div2.appendChild(saveButton);
+    div2.appendChild(cancelButton);
+    containerAnotacao.appendChild(div2);
+};
diff --git a/tela-video/style/progress-bar.css b/tela-video/style/progress-bar.css
new file mode 100644
index 0000000..b42dd54
--- /dev/null
+++ b/tela-video/style/progress-bar.css
@@ -0,0 +1,14 @@
+#progress-bar {
+    width: 90%;
+    color:black;
+    border:1px solid white;
+    margin-bottom: 15px;
+    margin-top: 10px;
+  }
+
+
+  #text-progress {
+    padding: 4px;
+    color:white;
+    display:flex;
+  }
\ No newline at end of file
diff --git a/tela-video/style/style.css b/tela-video/style/style.css
new file mode 100644
index 0000000..f0be3e7
--- /dev/null
+++ b/tela-video/style/style.css
@@ -0,0 +1,74 @@
+
+*{
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  /* border: 5px solid orange; */
+}
+body {
+  background-color: #101A3F;
+  font-size: 16px;
+  width: 100%;
+}
+
+.invisible {
+  display: none;
+}
+
+.principal-wrapper {
+  display: flex;
+  flex-direction: column;
+  margin-top: 20px;
+  width: 80%;
+  margin:auto;
+  justify-content: center;
+  align-items: center;
+}
+
+.first-line-wrapper {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 15px;
+  align-items: center;
+  margin-top: 5%;
+}
+
+.second-line-wrapper {
+  display:flex;
+  justify-content: space-between;
+}
+
+nav{
+  background-color: #D3D2EB !important;
+
+}
+nav>img{
+  height: 40px;
+}
+header{
+  width: 100%;
+  padding: 5px 10px;
+  background-color: #D3D2EB !important;
+}
+::-webkit-scrollbar{
+  width: 8px;
+  background-color: #101a3f70;
+}
+::-webkit-scrollbar-thumb{
+  background-color: #283669;
+  border-radius: 6px;
+}
+
+footer{
+  text-align: center;
+  bottom: 3%;
+  color: #D3D2EB;
+  width: auto;
+  text-align: center;
+}
+
+@media (max-width:1000px){
+  footer{
+    position: sticky;
+  }
+}
\ No newline at end of file
diff --git a/tela-video/style/tabs.css b/tela-video/style/tabs.css
new file mode 100644
index 0000000..5a3fc96
--- /dev/null
+++ b/tela-video/style/tabs.css
@@ -0,0 +1,128 @@
+#container-tabs {
+  display: flex;
+  background-color: #101A3F;
+  justify-content: space-around;
+  max-width: 70%;
+}
+
+.item {
+  padding: 1px;
+  height: 30px;
+  min-width: 150px;
+  max-width: 17.5%;
+  width: inherit;
+  color: #FFFFFF;
+  background-color: #101A3F;
+  border-radius: 10px 10px 0px 0px;
+  border: #D3D2EB solid 1px;
+}
+
+.item p {
+  margin: 0;
+  text-align: center;
+  margin: 3px
+}
+
+.item:hover {
+  background-color: #D3D2EB;
+  cursor: pointer;
+  color: #101A3F
+}
+
+.active {
+  background-color: #D3D2EB;
+  cursor: pointer;
+  color: #101A3F
+}
+
+/* Estilo Aba Anotacao */
+
+#containerAnotacao {
+  font-family: Verdana, Tahoma, sans-serif;
+  width: 600px;
+  height: 50px;
+  margin: 20px;
+  border-radius: 3px;
+  color: #D3D2EB;
+  background-color: #101A3F;
+  display: flex;
+  justify-content: space-between;
+  border: solid 1px black;
+}
+
+
+.itemAnotacao {
+  padding: 5px;
+  align-self: center;
+  color: #FFFFFF;
+  display: flex;
+  flex-direction: row;
+}
+
+.itemAnotacao i {
+  padding: 5px;
+  cursor: pointer;
+}
+
+.fa-solid,
+.fa-solid-circle-plus {
+  padding: 5px;
+  cursor: pointer;
+}
+
+#videoTimer {
+  align-self: none;
+  background-color: #101A3F;
+  color: #FFFFFF;
+  border-radius: 40px;
+  padding: 5px;
+  font-size: small;
+  margin-right: 10px;
+}
+
+#annotationBox {
+  width: 600px;
+  background-color: #101A3F;
+  color: #FFFFFF;
+}
+
+#div2 {
+  margin-top: 5px;
+  width: 660px;
+  padding: 5px;
+  align-self: center;
+  color: #FFFFFF;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}
+
+#saveButton {
+  width: 180;
+  height: 70;
+  background-color: #101A3F;
+  color: #FFFFFF;
+  padding: 10px;
+  margin-left: 20px;
+  border-radius: 5px;
+}
+
+#saveButton:hover {
+  border: solid #FFFFFF 2px;
+  cursor: pointer;
+}
+
+#cancelButton {
+  margin-left: 15px;
+  border: none;
+  background-color: #D3D2EB;
+}
+
+#cancelButton:hover {
+  color: #FFFFFF;
+  background-color: red;
+  border: solid 2px black;
+}
+.second-line-wrapper{
+  display:none;
+}
\ No newline at end of file
diff --git a/tela-video/style/trilha.css b/tela-video/style/trilha.css
new file mode 100644
index 0000000..7316dc1
--- /dev/null
+++ b/tela-video/style/trilha.css
@@ -0,0 +1,88 @@
+#trilha {
+    display: flex;
+    flex-direction: column;
+    background-color: #D3D2EB;
+    color: #101A3F;
+    border-radius: 7px;
+    padding: 10px;
+}
+#trilha{
+    max-width: 30%;
+    min-width: 300px;
+    height: 280px;
+    overflow: scroll;
+    overflow-x: hidden;
+    margin-left: 10px;
+}
+#title-trilha {
+    text-align: center;
+    border-bottom: 1px solid black;
+    display: inline-block;
+    font-size: 1.5rem;
+}
+
+.lesson {
+    display: flex;
+    justify-content: space-between;
+    margin-left: 15px;
+    font-size: 1.2rem;
+
+}
+
+
+.lesson:hover {
+    cursor: pointer;
+}
+
+
+/* Display sumário com sub sumário */
+ol {
+    counter-reset: item;
+}
+
+li {
+    display: block;
+
+}
+
+li:before {
+    content: counters(item, ".") " ";
+    counter-increment: item;
+}
+
+.module {
+    font-size: 1.2rem;
+}
+
+.lesson li {
+    font-size: 1rem;
+    max-width: 312px;
+}
+
+input[type=checkbox] {
+    max-height:18px;
+}
+.blocoTrilha{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+@media (max-width:1170px){
+    .first-line-wrapper{
+        flex-direction: column;
+    }
+    #trilha{
+        max-width: 100%;
+        margin-top: 25px;
+    }
+    body{
+        font-size: 12px;
+    }
+    .second-line-wrapper{
+        flex-direction: column-reverse;
+        margin-top: 15px;
+        justify-content: center;
+        align-items: center;
+    }
+}
\ No newline at end of file
diff --git a/tela-video/style/video-player.css b/tela-video/style/video-player.css
new file mode 100644
index 0000000..0cf07d3
--- /dev/null
+++ b/tela-video/style/video-player.css
@@ -0,0 +1,10 @@
+#video-external,
+#video-input {
+  border-radius: 7px;
+
+}
+
+#video-player-title {
+  color: #D3D2EB;
+  margin-top: 3%;
+}