diff --git a/index.html b/index.html
index b336c98..fa21765 100644
--- a/index.html
+++ b/index.html
@@ -1,3 +1,34 @@
-<h1>Igor Costa.io</h1>
-
-<p>Senior Architect @ GitHub</p>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Igor Costa.io</title>
+    <link rel="stylesheet" href="styles.css">
+    <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Source Code Pro', monospace;
+        }
+        .dark-theme {
+            background-color: #333;
+            color: white;
+        }
+        .light-theme {
+            background-color: #FFF;
+            color: black;
+        }
+        .toggle-theme-btn {
+            position: fixed;
+            top: 10px;
+            right: 10px;
+        }
+    </style>
+    <script src="theme-toggle.js" defer></script>
+</head>
+<body>
+    <h1>Igor Costa.io</h1>
+    <p>Senior Architect @ GitHub</p>
+    <button id="theme-toggle" class="toggle-theme-btn">Toggle Theme</button>
+</body>
+</html>
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..859151b
--- /dev/null
+++ b/script.js
@@ -0,0 +1,25 @@
+// Function to toggle between dark and light theme
+function toggleTheme() {
+    const body = document.body;
+    const currentTheme = localStorage.getItem('theme');
+    if (currentTheme === 'dark') {
+        body.classList.replace('dark-theme', 'light-theme');
+        localStorage.setItem('theme', 'light');
+    } else {
+        body.classList.replace('light-theme', 'dark-theme');
+        localStorage.setItem('theme', 'dark');
+    }
+}
+
+// Event listener for the theme toggle button
+document.getElementById('theme-toggle').addEventListener('click', toggleTheme);
+
+// Check local storage for theme preference and apply it
+document.addEventListener('DOMContentLoaded', () => {
+    const savedTheme = localStorage.getItem('theme');
+    if (savedTheme === 'dark') {
+        document.body.classList.add('dark-theme');
+    } else {
+        document.body.classList.add('light-theme');
+    }
+});
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..1dbc594
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,42 @@
+@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');
+
+:root {
+  --dark-bg: #2b2d42;
+  --dark-text: #edf2f4;
+  --light-bg: #edf2f4;
+  --light-text: #2b2d42;
+}
+
+body {
+  font-family: 'Source Code Pro', monospace;
+  background: var(--light-bg);
+  color: var(--light-text);
+  transition: all 0.5s ease;
+}
+
+.dark-theme {
+  background: var(--dark-bg);
+  color: var(--dark-text);
+}
+
+.light-theme {
+  background: var(--light-bg);
+  color: var(--light-text);
+}
+
+.toggle-theme-btn {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  padding: 10px 20px;
+  background-color: #8d99ae;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+.toggle-theme-btn:hover {
+  background-color: #4c5c68;
+}
diff --git a/theme-toggle.js b/theme-toggle.js
new file mode 100644
index 0000000..859151b
--- /dev/null
+++ b/theme-toggle.js
@@ -0,0 +1,25 @@
+// Function to toggle between dark and light theme
+function toggleTheme() {
+    const body = document.body;
+    const currentTheme = localStorage.getItem('theme');
+    if (currentTheme === 'dark') {
+        body.classList.replace('dark-theme', 'light-theme');
+        localStorage.setItem('theme', 'light');
+    } else {
+        body.classList.replace('light-theme', 'dark-theme');
+        localStorage.setItem('theme', 'dark');
+    }
+}
+
+// Event listener for the theme toggle button
+document.getElementById('theme-toggle').addEventListener('click', toggleTheme);
+
+// Check local storage for theme preference and apply it
+document.addEventListener('DOMContentLoaded', () => {
+    const savedTheme = localStorage.getItem('theme');
+    if (savedTheme === 'dark') {
+        document.body.classList.add('dark-theme');
+    } else {
+        document.body.classList.add('light-theme');
+    }
+});
