diff --git a/dom-merge-conflict/tasks/buttons-and-counter/src/app.js b/dom-merge-conflict/tasks/buttons-and-counter/src/app.js
index af608eb6..13fa471e 100644
--- a/dom-merge-conflict/tasks/buttons-and-counter/src/app.js
+++ b/dom-merge-conflict/tasks/buttons-and-counter/src/app.js
@@ -1,4 +1,7 @@
 //increments the number in a node's text
+import { header } from "./header.js";
+import { main } from "./main.js"; 
+
 function increment(node) {
   let current = node.textContent;
   node.textContent = Number(current) + 1;
@@ -7,20 +10,13 @@ function increment(node) {
 export function App() {
   const body = document.createElement("body");
 
-  const header = document.createElement("header");
-  header.innerHTML = `
-        <h1>Number Counter</h1>
-        <p>A simple counter. Press increment to increase the count by one.</p>
-    `;
+
   body.appendChild(header);
 
-  const main = document.createElement("main");
-  main.innerHTML = `
-        <p id="counter" data-testid="counter">0</p>
-        <button id="increment">Increment</button>
-    `;
+ 
   body.appendChild(main);
 
+
   const button = body.querySelector("#increment");
   const counter = body.querySelector("#counter");
   button.addEventListener("click", () => {
diff --git a/dom-merge-conflict/tasks/buttons-and-counter/src/header.js b/dom-merge-conflict/tasks/buttons-and-counter/src/header.js
new file mode 100644
index 00000000..9b4d1a44
--- /dev/null
+++ b/dom-merge-conflict/tasks/buttons-and-counter/src/header.js
@@ -0,0 +1,7 @@
+  export function header() {
+  
+  const header = document.createElement("header");
+  header.innerHTML = `
+        <h1>Number Counter</h1>
+        <p>A simple counter. Press increment to increase the count by one.</p>
+    `;}
\ No newline at end of file
diff --git a/dom-merge-conflict/tasks/buttons-and-counter/src/main.js b/dom-merge-conflict/tasks/buttons-and-counter/src/main.js
new file mode 100644
index 00000000..3e35c284
--- /dev/null
+++ b/dom-merge-conflict/tasks/buttons-and-counter/src/main.js
@@ -0,0 +1,6 @@
+  export function main() {
+  const main = document.createElement("main");
+  main.innerHTML = `
+        <p id="counter" data-testid="counter">0</p>
+        <button id="increment">Increment</button>
+    `;}
\ No newline at end of file