diff --git a/src/routes/tools/battery-life-calculator/+page.svelte b/src/routes/tools/battery-life-calculator/+page.svelte
index 99f8312..48a9b13 100644
--- a/src/routes/tools/battery-life-calculator/+page.svelte
+++ b/src/routes/tools/battery-life-calculator/+page.svelte
@@ -1,12 +1,16 @@
-<script>
+<script lang="ts">
     import A4 from "../../zhen/notes/physics/sharedComps/A4.svelte";
-    import { BatteryLifeCalculator } from "./comps/BatteryCalc";
+    import { BatteryLifeCalculator } from "./pageSrc/BatteryCalc";
 
     let mathMachine = new BatteryLifeCalculator();
 
-    let useCustom = false;
-    let selectedText = '';
-    const options = ["Text One", "Text Two", "Text Three"];
+    let useCustom: boolean = false;
+    let selectedText: string = "";
+
+    
+
+
+    const options = ["esp32-s3", "Text Two", "Text Three"];
 </script>
 
 <div class="flex justify-center pt-10">
@@ -28,33 +32,33 @@
             <div class="p-4 bg-base-200 rounded-lg">
                 <h2 class="text-2xl font-bolc">Software</h2>
                 <div class="grid grid-cols-2 gap-4">
-                    <div>
+                    <div class="form-control">
                         <span class="text-sm text-slate-300 text-opacity-60"
                             >Duration of code execution</span
                         >
-                        <div class="flex">
+                        <div class="join">
                             <input
                                 type="number"
-                                class="bg-slate-600 bg-opacity-60 rounded-l-lg appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+                                class="input input-bordered  input-sm join-item appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
                             />
                             <div
-                                class="bg-slate-500 bg-opacity-60 rounded-r-lg"
+                                class="bg-base-content bg-opacity-60 join-item grid place-content-center"
                             >
                                 <span class="text-center pl-1 pr-2">sec</span>
                             </div>
                         </div>
                     </div>
-                    <div>
+                    <div class="form-control">
                         <span class="text-sm text-slate-300 text-opacity-60"
                             >sleep time</span
                         >
-                        <div class="flex">
+                        <div class="join">
                             <input
                                 type="number"
-                                class="bg-slate-600 bg-opacity-60 rounded-l-lg appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+                                class="input input-bordered input-sm join-item appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
                             />
                             <div
-                                class="bg-slate-500 bg-opacity-60 rounded-r-lg"
+                                class="bg-base-content bg-opacity-60 join-item grid place-content-center"
                             >
                                 <span class="text-center pl-1 pr-2">sec</span>
                             </div>
@@ -64,51 +68,72 @@
                     <div class="col-span-full">
                         <h2 class=" text-2xl font-bolc">Hardware</h2>
                         <div class="flex">
-                            <div class="text-sm text-slate-300 text-opacity-60 text">Use custom values</div>
-                            <input bind:checked={useCustom} class="ml-2 checkbox checkbox-xs my-auto" type="checkbox" />
+                            <div
+                                class="text-sm text-slate-300 text-opacity-60 text"
+                            >
+                                Use custom values
+                            </div>
+                            <input
+                                bind:checked={useCustom}
+                                class="ml-2 checkbox checkbox-xs my-auto"
+                                type="checkbox" 
+                            />
                         </div>
                     </div>
 
                     {#if !useCustom}
-                    <select bind:value={selectedText} class="select select-sm select-bordered w-full max-w-xs">
-                        <option disabled value="">Select a text</option>
-                        {#each options as option}
-                          <option value={option}>{option}</option>
-                        {/each}
-                      </select>
-                    
-                      {#if selectedText}
-                        <p class="mt-4 text-lg">You selected: {selectedText}</p>
-                      {/if}
+                        <select
+                            bind:value={selectedText}
+                            class="select select-sm select-bordered w-56 max-w-xs"
+                        >
+                            <option disabled value="">Select a text</option>
+                            {#each options as option}
+                                <option value={option}>{option}</option>
+                            {/each}
+                        </select>
+
+                        {#if selectedText}
+                            <p class="mt-4 text-lg">
+                                You selected: {selectedText}
+                            </p>
+                        {/if}
                     {:else}
-                    <div>
-                        <span class="text-sm text-slate-300 text-opacity-60"
-                            >Duration of code execution</span
-                        >
-                        <div class="flex">
-                            <input
-                                type="number"
-                                class="bg-slate-600 bg-opacity-60 rounded-l-lg appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
-                            />
-                            <div class="bg-slate-500 bg-opacity-60 rounded-r-lg">
-                                <span class="text-center pl-1 pr-2">sec</span>
+                        <div class="form-control">
+                            <span class="text-sm text-slate-300 text-opacity-60"
+                                >Duration of code execution</span
+                            >
+                            <div class="join">
+                                <input
+                                    type="number"
+                                    class="input input-bordered input-sm join-item appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+                                />
+                                <div
+                                    class="bg-base-content bg-opacity-60 join-item grid place-content-center"
+                                >
+                                    <span class="text-center pl-1 pr-2"
+                                        >sec</span
+                                    >
+                                </div>
                             </div>
                         </div>
-                    </div>
-                    <div>
-                        <span class="text-sm text-slate-300 text-opacity-60"
-                            >sleep time</span
-                        >
-                        <div class="flex">
-                            <input
-                                type="number"
-                                class="bg-slate-600 bg-opacity-60 rounded-l-lg appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
-                            />
-                            <div class="bg-slate-500 bg-opacity-60 rounded-r-lg">
-                                <span class="text-center pl-1 pr-2">sec</span>
+                        <div class="form-control">
+                            <span class="text-sm text-slate-300 text-opacity-60"
+                                >sleep time</span
+                            >
+                            <div class="join">
+                                <input
+                                    type="number"
+                                    class="input input-bordered input-sm join-item appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+                                />
+                                <div
+                                    class="bg-base-content bg-opacity-60 join-item grid place-content-center"
+                                >
+                                    <span class="text-center pl-1 pr-2"
+                                        >sec</span
+                                    >
+                                </div>
                             </div>
                         </div>
-                    </div>
                     {/if}
                 </div>
             </div>
@@ -117,12 +142,14 @@
                 Source for the calculations is at this
                 <a
                     class="text-blue-500 underline"
+                    target="_blank"
                     href="https://github.com/simonneutert/batterylife-calculator"
                     >github</a
                 >
                 and the
                 <a
                     class="text-blue-500 underline"
+                    target="_blank  "
                     href="https://www.of-things.de/battery-life-calculator.php"
                     >original website.</a
                 >
diff --git a/src/routes/tools/battery-life-calculator/comps/BatteryCalc.js b/src/routes/tools/battery-life-calculator/pageSrc/BatteryCalc.js
similarity index 100%
rename from src/routes/tools/battery-life-calculator/comps/BatteryCalc.js
rename to src/routes/tools/battery-life-calculator/pageSrc/BatteryCalc.js
diff --git a/src/routes/tools/battery-life-calculator/pageSrc/MCU_defs.ts b/src/routes/tools/battery-life-calculator/pageSrc/MCU_defs.ts
new file mode 100644
index 0000000..ab20115
--- /dev/null
+++ b/src/routes/tools/battery-life-calculator/pageSrc/MCU_defs.ts
@@ -0,0 +1,53 @@
+export interface MCU_Type {
+    name: string;
+    cpu: { [key: string]: Number }; // state: power consumption
+    sleep: { [key: string]: Number };
+    wifi?: { [key: string]: Number };
+    bluetooth?: { [key: string]: Number };
+}
+
+export const MCUs: MCU_Type[] = [
+    {
+        name: "ESP32-S3",
+        cpu: { // mili amps
+            single_core_40MHz: 21.8,
+            dual_core_40MHz: 24.4,
+            single_core_80MHz: 42.6,
+            dual_core_80MHz: 47.3,
+            single_core_160MHz: 54.6,
+            dual_core_160MHz: 54.1,
+            single_core_240MHz: 65.9,
+            dual_core_240MHz: 81.3,
+        },
+        sleep: {
+
+        },
+        wifi: { // 
+            dBm_21: 318.2,
+            sleep: 10     
+        },
+        bluetooth: {
+            active: 100,
+            sleep: 5      
+        }
+    },
+
+    {
+        name: "ESP32-C3",
+        cpu: {
+            active: 130,
+            sleep: 15     
+        },
+        sleep: {
+
+        },
+        wifi: {
+            active: 110,
+            sleep: 9      
+        },
+        bluetooth: {
+            active: 90, 
+            sleep: 4      
+        }
+    }
+];