diff --git a/assets/media/button.png b/assets/media/button.png
new file mode 100644
index 0000000..cd15c34
Binary files /dev/null and b/assets/media/button.png differ
diff --git a/assets/media/click.mp3 b/assets/media/click.mp3
new file mode 100644
index 0000000..694de78
Binary files /dev/null and b/assets/media/click.mp3 differ
diff --git a/assets/media/dark-settings.png b/assets/media/dark-settings.png
new file mode 100644
index 0000000..018fbe0
Binary files /dev/null and b/assets/media/dark-settings.png differ
diff --git a/assets/media/light-settings.png b/assets/media/light-settings.png
new file mode 100644
index 0000000..336a98b
Binary files /dev/null and b/assets/media/light-settings.png differ
diff --git a/assets/media/moon.png b/assets/media/moon.png
new file mode 100644
index 0000000..f889555
Binary files /dev/null and b/assets/media/moon.png differ
diff --git a/assets/media/reset.mp3 b/assets/media/reset.mp3
new file mode 100644
index 0000000..14aa850
Binary files /dev/null and b/assets/media/reset.mp3 differ
diff --git a/assets/media/sun.png b/assets/media/sun.png
new file mode 100644
index 0000000..556d3ea
Binary files /dev/null and b/assets/media/sun.png differ
diff --git a/assets/scripts/index.js b/assets/scripts/index.js
new file mode 100644
index 0000000..93ae1e6
--- /dev/null
+++ b/assets/scripts/index.js
@@ -0,0 +1,221 @@
+const max = document.getElementById("max");
+const resets = document.getElementById("resets");
+const button = document.getElementById("button");
+const number = document.getElementById("number");
+
+const audio = new Audio('assets/media/click.mp3');
+const audio2 = new Audio('assets/media/reset.mp3');
+
+const body = document.getElementById("body");
+const bg2 = document.getElementById("bg2");
+const bg1 = document.getElementById("bg1");
+const mode = document.getElementById("mode");
+const credits = document.getElementById("credits");
+const link = document.getElementById("link");
+
+var click = 0, resetChance = 0, resetsValue = 0, maxValue = 0, flag = 0;
+var randomChance = Math.floor(Math.random() * 101);
+
+button.addEventListener("click", mainFunction);
+
+function mainFunction(){
+    buttonClicked();
+
+    randomChance = Math.floor(Math.random() * 101);
+    if(randomChance < resetChance){
+        audio2.play();
+        buttonReset();
+    } else{
+        audio.play();
+        buttonContinue();
+    }
+}
+
+function buttonClicked(){
+    button.disabled = true;
+    button.classList.add("button-hover");
+    
+    setTimeout(function(){
+        button.classList.remove("button-hover");
+    }, 180);
+
+    setTimeout(function(){
+        button.disabled = false;
+    }, 400);
+}
+
+function buttonReset(){
+    number.innerHTML = "0";
+    resetChance = 0;
+    resetsValue += 1;
+    resets.innerHTML = `Resets ${resetsValue}`;
+
+    changeBg2();
+}
+
+function changeBg2(){
+    let width = window.innerWidth;
+
+    if(width <= 500){
+        bg2.style.width = '370px';
+        bg2.style.height = '370px';
+        bg2.style.transform = 'translate(-35px, -5px)';
+    } else{
+        bg2.style.width = '450px';
+        bg2.style.height = '450px';
+        bg2.style.transform = 'translate(-30px, 0px)';
+    }
+
+    setTimeout(function(){
+        if(width <= 500){
+            bg2.style.width = '340px';
+            bg2.style.height = '340px';
+            bg2.style.transform = 'translate(-20px, 10px)';
+        } else{
+            bg2.style.width = '430px';
+            bg2.style.height = '430px';
+            bg2.style.transform = 'translate(-20px, 10px)';
+        }
+    }, 150);
+}
+
+function buttonContinue() {
+    click += 1;
+    resetChance += 1;
+
+    setTimeout(function(){
+        number.innerHTML = resetChance;
+
+        if(resetChance > maxValue){
+            maxValue = resetChance;
+            max.innerHTML = `Max ${maxValue}`
+        }
+    }, 200);
+}
+
+
+/* ---------------------------------------- Dark Mode ----------------------------------------*/
+mode.addEventListener("click", () => {
+    const darkModeOn = mode.classList.contains("dark-mode");
+    const darkModeBg2 = bg2.classList.contains("dark-bg2");
+    const darkSettings = settings.classList.contains("dark-settings");
+    const darkItens = itens.classList.contains("dark-itens");
+    const darkLabel = label.classList.contains("dark-label");
+    const darkInputs = inputs.classList.contains("dark-inputs");
+    const darkBack = back.classList.contains("dark-back");
+
+    mode.disabled = true;
+
+    body.classList.toggle("dark-body");
+    max.classList.toggle("dark-max");
+    resets.classList.toggle("dark-resets"); 
+    credits.classList.toggle("dark-credits");
+    link.classList.toggle("dark-link");
+    
+    mode.classList.add("dark-mode");
+    mode.classList.remove("light-mode");
+
+    bg2.classList.add("dark-bg2");
+    bg2.classList.remove("light-bg2");
+
+    settings.classList.add("dark-settings");
+    settings.classList.remove("light-settings");
+
+    itens.classList.add("dark-itens");
+    itens.classList.remove("light-itens");
+
+    label.classList.add("dark-label");
+    label.classList.remove("light-label");
+
+    inputs.classList.add("dark-inputs");
+    inputs.classList.remove("light-inputs");
+
+    back.classList.add("dark-back");
+    back.classList.remove("light-back");
+    
+    if(darkModeBg2) {
+        bg2.classList.remove("dark-bg2");
+        bg2.classList.add("light-bg2");
+    }
+
+    if(darkModeOn){
+        mode.classList.add("light-mode");
+        mode.classList.remove("dark-mode");
+    }
+
+    if(darkSettings){
+        settings.classList.add("light-settings");
+        settings.classList.remove("dark-settings");
+    }
+
+    if(darkItens){
+        itens.classList.add("light-itens");
+        itens.classList.remove("dark-itens");
+    }
+
+    if(darkLabel){
+        label.classList.add("light-label");
+        label.classList.remove("dark-label");
+    }
+
+    if(darkInputs){
+        inputs.classList.add("light-inputs");
+        inputs.classList.remove("dark-inputs");
+    }
+
+    if(darkBack){
+        back.classList.add("light-back");
+        back.classList.remove("dark-back");
+    }
+
+    setTimeout(function(){
+        mode.disabled = false;
+    }, 250);
+});
+
+/* ---------------------------------------- Settings ----------------------------------------*/
+const settings = document.getElementById("settings");
+const back = document.getElementById("back");
+const menu = document.getElementById("menu");
+const itens = document.getElementById("itens");
+const label = document.getElementById("label");
+const inputs = document.getElementById("inputs");
+
+settings.addEventListener("click", openMenu);
+back.addEventListener("click", closeMenu);
+
+function openMenu(){
+    menu.classList.add("open");
+    menu.classList.remove("closed");
+}
+
+function closeMenu(){
+    menu.classList.add("closed");
+    menu.classList.remove("open");
+}
+
+/* ---------------------------------------- Cores do Botão ----------------------------------------*/
+const red = document.querySelector("#red");
+const green = document.querySelector("#green");
+const brown = document.querySelector("#brown");
+const purple = document.querySelector("#purple");
+
+red.addEventListener("click", () => {
+    button.style.backgroundColor = '#FF494B';
+    bg1.style.backgroundColor = '#9a2f30';
+});
+
+green.addEventListener("click", () => {
+    button.style.background = '#A1E4C6';
+    bg1.style.backgroundColor = '#74bda4';
+});
+
+brown.addEventListener("click", () => {
+    button.style.background = '#461e29';
+    bg1.style.backgroundColor = '#230f14';
+});
+
+purple.addEventListener("click", () => {
+    button.style.backgroundColor = '#aa7dfc';
+    bg1.style.backgroundColor = '#8a66c5';
+});
diff --git a/assets/styles/index.css b/assets/styles/index.css
new file mode 100644
index 0000000..4d1b2ce
--- /dev/null
+++ b/assets/styles/index.css
@@ -0,0 +1,354 @@
+@charset "UTF-8";
+
+html {
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Comic Neue', sans-serif;
+    color: #252425;
+}
+
+body {
+    width: 100%;
+    height: 100vh;
+    background-color: #fbf5de;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    transition: 250ms ease-in-out;
+}
+
+.dark-body {
+    background: #252425;
+}
+
+#max, #resets {
+    width: fit-content;
+    margin: 50px auto 0px auto;
+    font-weight: 700;
+    font-size: 48px;
+    transition: 150ms ease-in-out;
+}
+
+#resets {
+    font-size: 38px;
+    margin-top: 20px;
+}
+
+.dark-max, .dark-resets {
+    color: #f5f3e4;
+}
+
+#all {
+    width: fit-content;
+    margin: 0 auto;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+#button {
+    background-color: #FF494B;
+    border: none;
+    border-radius: 100%;
+    margin: 150px auto 0px auto;
+    width: 390px;
+    height: 390px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 100ms ease-in-out;
+}
+
+#bg1 {
+    width: 390px;
+    height: 390px;
+    border-radius: 100%;
+    background-color: #9a2f30;
+    transform: translateY(25px);
+    margin: 150px auto 0px auto;
+    position: absolute;
+    z-index: -998;
+    transition: all 100ms ease-in-out;
+}
+
+.dark-bg2 {
+    width: 430px;
+    height: 430px;
+    border-radius: 100%;
+    background-color: #636263;
+    transform: translate(-20px, 10px);
+    margin: 150px auto 0px auto;
+    position: absolute;
+    z-index: -999;
+    transition: all 250ms ease-in;
+}
+
+.light-bg2 {
+    width: 430px;
+    height: 430px;
+    border-radius: 100%;
+    background-color: #c5c0ac;
+    transform: translate(-20px, 10px);
+    margin: 150px auto 0px auto;
+    position: absolute;
+    z-index: -999;
+    transition: all 250ms ease-in;
+}
+
+#button:hover {
+    cursor: pointer;
+}
+
+.button-hover {
+    transform: translateY(25px);
+}
+
+#button:hover span{
+    color: rgba(0, 0, 0, 0.6);
+}
+
+#button:focus{
+    outline: thin dotted;
+    outline: 0px auto -webkit-focus-ring-color;
+    outline-offset: 0px;
+}
+
+#button span {
+    font-size: 90px;
+    font-weight: 700;
+    color: rgba(0, 0, 0, 0.45);
+    width: 200px;
+    text-align: center;
+    transition: 200ms ease-in;
+}
+
+#mode {
+    border: none;
+    position: fixed;
+    width: 70px;
+    height: 70px;
+    left: 2%;
+    top: 2%;
+    background-size: contain;
+    background-repeat: no-repeat;
+    transition: 120ms ease-in;
+}
+
+#mode:hover {
+    transform: scale(1.03);
+    cursor: pointer;
+}
+
+.light-mode {
+    background: url('../media/moon.png');
+}
+
+.dark-mode {
+    background: url('../media/sun.png');
+}
+
+#credits {
+    position: fixed;
+    bottom: 2%;
+    align-self: center;
+    font-weight: 500;
+    flex-wrap: wrap;
+    padding: 10px;
+    text-align: center;
+    transition: 200ms ease-in;
+}
+
+#credits a {
+    transition: 200ms ease-in;
+}
+
+.dark-credits, .dark-link {
+    color: #c5c0ac;
+}
+
+#settings {
+    position: fixed;
+    right: 2%;
+    border: none;
+    top: 2%;
+    width: 70px;
+    height: 70px;
+    background-size: cover;
+    background-repeat: no-repeat;
+    transition: 200ms ease-in;
+}
+
+#settings:hover {
+    transform: scale(1.03);
+    cursor: pointer;
+}
+
+.light-settings {
+    background: url('../media/light-settings.png');
+}
+
+.dark-settings {
+    background: url('../media/dark-settings.png');
+}
+
+#menu {
+    position: absolute;
+    align-self: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    backdrop-filter: blur(3px);
+    transition: 500ms;
+}
+
+.open {
+    z-index: 999;
+    width: 100%;
+    height: 100%;
+    opacity: 1;
+}
+
+.closed {
+    z-index: -999;
+    width: 0%;
+    height: 0%;
+    opacity: 0;
+}
+
+#itens {
+    border-radius: 20px;
+    width: 400px;
+    height: 300px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 40px;
+}
+
+.light-itens {
+    color: black;
+    background-color: #fbf5de;
+    border: solid 10px #cac4af;
+}
+
+.dark-itens {
+    color: white;
+    background-color: #252425;
+    border: solid 10px #676667;
+}
+
+#label {
+    width: 95%;
+    height: 100px;
+    padding: 10px;
+    gap: 20px;
+    display: flex;
+    flex-direction: column;
+    font-size: 30px;
+    font-weight: 700;
+    align-items: center;
+}
+
+.light-label, .light-inputs, .light-back {
+    color: black;
+}
+
+.dark-label, .dark-inputs, .dark-back {
+    color: #f5f3e4;
+}
+
+#inputs {
+    font-size: 24px;
+    font-weight: 500;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+}
+
+.bt {
+    background-color: transparent;
+    border: 3px solid #cac4af;
+    border-radius: 4px;
+    width: 60px;
+    height: 30px;
+    transition: 150ms ease-in;
+}
+
+.bt:hover {
+    cursor: pointer;
+    transform: scale(1.1);
+}
+
+#back {
+    font-size: 26px;
+    font-weight: 700;
+    transition: 150ms;
+}
+
+#back:hover {
+    transform: scale(1.05);
+    cursor: pointer;
+}
+
+@media (max-width: 500px){
+    body {
+        overflow: hidden;
+        width: 100vw;
+        height: 100vh;
+    }
+
+    #button {
+        margin: 100px auto 0px auto;
+        width: 300px;
+        height: 300px;
+    }
+
+    #bg1 {
+        margin: 100px auto 0px auto;
+        width: 300px;
+        height: 300px;
+    }
+
+    .dark-bg2 {
+        margin: 100px auto 0px auto;
+        width: 340px;
+        height: 340px;
+    }
+
+    .light-bg2 {
+        margin: 100px auto 0px auto;
+        width: 340px;
+        height: 340px;
+    }
+
+    #credits {
+        position: fixed;
+        bottom: 1%;
+        align-self: center;
+        font-weight: 500;
+        flex-wrap: wrap;
+        padding: 10px;
+        text-align: center;
+        transition: 200ms ease-in;
+    }
+
+    #itens {
+        width: 350px;
+    }
+
+    #inputs {
+        font-size: 20px;
+        font-weight: 500;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        gap: 10px;
+    }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..f543841
--- /dev/null
+++ b/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
+
+    <link rel="stylesheet" href="assets/styles/index.css">
+    <link rel="shortcut icon" href="assets/media/button.png" type="image/x-icon">
+    <title>The Button</title>
+</head>
+<body id="body">
+    <h1 id="max">Max </h1>
+    <h3 id="resets">Resets </h3>   
+    <div id="all">
+        <button id="button">
+            <span id="number">0</span>
+        </button>
+        <div id="bg1"></div>
+        <div id="bg2" class="light-bg2"></div>
+    </div>
+    <button id="mode" class="light-mode"></button>
+    <button id="settings" class="light-settings"></button>
+    <div id="menu" class="closed">
+        <div id="itens" class="light-itens">
+            <div id="label" class="light-label">
+                Button Color
+                <div id="inputs" class="light-inputs">
+                    <input type="radio" name="color" id="red">Red
+                    <input type="radio" name="color" id="green">Green
+                    <input type="radio" name="color" id="brown">Brown
+                    <input type="radio" name="color" id="purple">Purple
+                </div>
+            </div>
+            <span id="back" class="light-back">Back</span>
+        </div>
+    </div>
+    <p id="credits">Remake feito por Eytor Lima | Créditos a Elendow, desenvolvedor do jogo original - <strong><a href="https://store.steampowered.com/app/1999740/THE_BUTTON_by_Elendow/" target="_blank" rel="license" id="link">The Button</a></strong>.</p>
+    <script src="assets/scripts/index.js"></script>
+</body>
+</html>
\ No newline at end of file