diff --git a/index.html b/index.html
index c0a2218..fa1abd6 100644
--- a/index.html
+++ b/index.html
@@ -15,6 +15,7 @@
         href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Prata&family=Unbounded:wght@200;300;400;500;600;700;800;900&display=swap"
         rel="stylesheet">
     <link rel="stylesheet" href="./styles.css">
+    <script src="script.js" defer></script>
 </head>
 
 <body>
@@ -73,6 +74,8 @@ <h1 class="app__title">
             <p class="app__footer-text">
                 Projeto fictício e sem fins comerciais. Imagens geradas por IA no Adobe Firefly.Desenvolvido por Alura. 
             </p>
+
+            <input class="toggle-checkbox" type="checkbox">
         </footer>
     </main>
 
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..8a1cc9e
--- /dev/null
+++ b/script.js
@@ -0,0 +1,20 @@
+const html = document.querySelector('html')
+
+const focoBt = document.querySelector('.app__card-button--foco')
+const curtoBt = document.querySelector('.app__card-button--curto')
+
+focoBt.addEventListener('click', () => {
+    html.setAttribute('data-contexto', 'foco')
+} )
+
+curtoBt.addEventListener('click', () => {
+    html.setAttribute('data-contexto', 'descanso-curto')
+} )
+
+html.addEventListener('onscroll', () => {
+    html.setAttribute('data-contexto', 'foco')
+})
+
+
+
+
