diff --git a/index.html b/index.html
index 173566a..23836bf 100644
--- a/index.html
+++ b/index.html
@@ -12,11 +12,15 @@ <h1 id="header-title">DnD battles</h1>
     </header>
 
     <main>
-
+        <div class="charapter-box">
+            <button class="add-char-btn">+</button>
+        </div>
     </main>
 
     <footer>
 
     </footer>
+
+    <script src="js/main.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..04389f1
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,9 @@
+function addCharacter() {
+    const character = document.createElement('div');
+    character.classList.add("charapter-box");
+    document.querySelector("main").appendChild(character);
+}
+
+document.querySelector(".add-char-btn").addEventListener("click", () =>
+    addCharacter()
+);
\ No newline at end of file
diff --git a/styles/style.css b/styles/style.css
index fc263fd..7bd56aa 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -2,6 +2,7 @@ body {
     padding: 0;
     margin: 0;
     border: none;
+    height: 100%;
 }
 
 header {
@@ -12,10 +13,39 @@ header {
 }
 
 #header-title {
-    color: #797593;
+    color: #575279;
     margin-left: 30px
 }
 
 main {
     background: #faf4ed;
+    padding: 40px 15px 40px 15px;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.charapter-box {
+    background: #f2e9e1;
+    border: 1px solid #cecacd;
+    border-radius: 15px;
+    height: 80px;
+    width: 80%;
+    text-align: center;
+}
+
+.charapter-box:not(:first-child) {
+    margin-top: 30px;
+}
+
+.add-char-btn {
+    color: #575279;
+    background: transparent;
+    width: 100%;
+    height: 100%;
+    border: none;
+    border-radius: 15px;
+    font-size: 40px;
+    padding: 0;
 }