diff --git a/src/app.css b/src/app.css
index 545869c..03b05b9 100644
--- a/src/app.css
+++ b/src/app.css
@@ -15,6 +15,6 @@
 body {
   margin: 0;
   padding: 0;
-  background-color: #F2F2F2;
+  background-color: #F3F4F9;
   width: 100vw;
 }
\ No newline at end of file
diff --git a/src/components/Header.svelte b/src/components/Header.svelte
index dbd8301..53c7a31 100644
--- a/src/components/Header.svelte
+++ b/src/components/Header.svelte
@@ -1,15 +1,14 @@
-
-    <div class="head">SMART HOME</div>
+<div class="head">SMART HOME</div>
 
 <style>
-    .head {
-        background-color: #fff;
-        width: 100vw;
-        height: 70px;
-        display: flex;
-        align-items:center;
-        justify-content: flex-start;
-        padding-left: 20px;
-        box-shadow: 0px 2px 4px rgba(0, 0, 3, 0.05);
-    }
+  .head {
+    background-color: #fff;
+    width: 100vw;
+    height: 70px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    padding-left: 20px;
+    box-shadow: 0px 2px 4px rgba(0, 0, 3, 0.05);
+  }
 </style>
diff --git a/src/libs/DeviceDetails.svelte b/src/libs/DeviceDetails.svelte
index 20c9e3c..7b406e7 100644
--- a/src/libs/DeviceDetails.svelte
+++ b/src/libs/DeviceDetails.svelte
@@ -1,5 +1,8 @@
 <script>
+  import Button from "./ui/Button.svelte";
+  import Stepper from "./ui/Stepper.svelte";
   export let deviceLog;
+  let buttonText = "Run";
 </script>
 
 <div class="table-wrapper">
@@ -24,7 +27,11 @@
         <div>{log.sensor_value}</div>
         <div>{log.battery_life}</div>
       {:else}
-      <div>door switch</div>
+        <div>door switch</div>
+        <div><Button {buttonText} /></div>
+        <br>
+        <div><Stepper /></div>
+        <br>
       {/if}
     {/each}
     <div class="divider"></div>
@@ -32,65 +39,59 @@
 </div>
 
 <style>
-    .table-wrapper {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      margin-top: 20px;
-      flex-direction: column;
-      background-color: white;
-      width: 95%;
-      border-radius: 4px;
-      box-shadow: 0px 2px 4px rgba(0, 0, 3, 0.05);
-    }
-    .table {
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
-    .table-head-item {
-      width: 100%;
-      display: flex;
-      justify-content: start;
-      align-items: center;
-      padding: 5px 10px 10px 10px;
-      color: #535151;
-      font-size: 16px;
-    }
-    .table-row {
-      display: flex;
-      width: 100%;
-      text-decoration: none;
-      color: inherit;
-    }
-    .table-body-item {
-      width: calc(100% / 7);
-      display: flex;
-      justify-content: start;
-      padding: 5px 10px 10px 10px;
-    }
-    .table-head {
-      font-size: 15px;
-    }
-    .divider {
-      width: 100%;
-      background-color: #f2f2f2;
-      height: 1px;
-    }
-    /* Link bileşeni üzerinde cursor:pointer stilini uygulama */
-    :global(.svelte-routing-link) {
-      display: flex;
-      width: 100%;
-      text-decoration: none;
-      color: inherit;
-    }
-    :global(.svelte-routing-link:hover) {
-      cursor: pointer;
-      display: flex;
-      width: 100%;
-      text-decoration: none;
-      color: inherit;
-      background-color: #f3f3f3;
-    }
-  </style>
+  .table-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 20px;
+    flex-direction: column;
+    background-color: white;
+    width: 95%;
+    border-radius: 4px;
+    box-shadow: 0px 2px 4px rgba(0, 0, 3, 0.05);
+  }
+  .table {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .table-head-item {
+    width: 100%;
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    padding: 5px 10px 10px 10px;
+    color: #535151;
+    font-size: 16px;
+  }
+  .table-row {
+    display: flex;
+    width: 100%;
+    text-decoration: none;
+    color: inherit;
+  }
+  .table-head {
+    font-size: 15px;
+  }
+  .divider {
+    width: 100%;
+    background-color: #f2f2f2;
+    height: 1px;
+  }
+  /* Link bileşeni üzerinde cursor:pointer stilini uygulama */
+  :global(.svelte-routing-link) {
+    display: flex;
+    width: 100%;
+    text-decoration: none;
+    color: inherit;
+  }
+  :global(.svelte-routing-link:hover) {
+    cursor: pointer;
+    display: flex;
+    width: 100%;
+    text-decoration: none;
+    color: inherit;
+    background-color: #f3f3f3;
+  }
+</style>
diff --git a/src/libs/ui/Button.svelte b/src/libs/ui/Button.svelte
new file mode 100644
index 0000000..af15dec
--- /dev/null
+++ b/src/libs/ui/Button.svelte
@@ -0,0 +1,32 @@
+<script>
+  export let buttonText;
+</script>
+
+<div class="button">
+  {buttonText}
+</div>
+
+<style>
+  .button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    padding: 5px;
+    width: 100px;
+    height: 38px;
+    border-radius: 5px;
+    background-color: #364bc5;
+    color: #fff;
+    cursor: pointer;
+    -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+    -khtml-user-select: none; /* Konqueror HTML */
+    -moz-user-select: none; /* Firefox */
+    -ms-user-select: none; /* Internet Explorer/Edge */
+    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
+  }
+  .button:active {
+    background-color: #6a7bdd;
+  }
+</style>
diff --git a/src/libs/ui/Stepper.svelte b/src/libs/ui/Stepper.svelte
new file mode 100644
index 0000000..9e720ec
--- /dev/null
+++ b/src/libs/ui/Stepper.svelte
@@ -0,0 +1,86 @@
+<script>
+  let counter = 0;
+
+  const increaseCounter = () => {
+    counter++;
+  };
+  const decreaseCounter = () => {
+    counter = counter < 1 ? 0 : counter - 1;
+  };
+</script>
+
+<div class="stepper">
+  <div
+    class="button decrease"
+    on:click={decreaseCounter}
+    tabindex="0"
+    role="button"
+    on:keydown={(e) => e.key === "Enter" && decreaseCounter()}
+  >
+    -
+  </div>
+  <div class="number">{counter}</div>
+  <div
+    class="button increase"
+    on:click={increaseCounter}
+    tabindex="0"
+    role="button"
+    on:keydown={(e) => e.key === "Enter" && decreaseCounter()}
+  >
+    +
+  </div>
+</div>
+
+<style>
+  .stepper {
+    height: 45px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 5px;
+    border: solid 1px #7B819E;
+    box-sizing: border-box;
+    padding: 0px;
+  }
+  .number {
+    width: 40px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-left: solid 1px #7B819E;
+    border-right: solid 1px #7B819E;
+    color: #4a4d5d;
+  }
+  .button {
+    width: 40px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 28px;
+    color: #7B819E;
+    cursor: pointer;
+    box-sizing: border-box;
+    padding: 0px;
+    -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+    -khtml-user-select: none; /* Konqueror HTML */
+    -moz-user-select: none; /* Firefox */
+    -ms-user-select: none; /* Internet Explorer/Edge */
+    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
+  }
+  .button:hover {
+    background-color: #4759ba;
+    color: #fff;
+  }
+  .button:active {
+    background-color: #6a7bdd;
+  }
+  .increase {
+    border-radius: 0px 3px 3px 0px;
+  }
+  .decrease {
+    border-radius: 3px 0px 0px 3px;
+  }
+</style>