diff --git a/app/src/routes/peripherals/i2c/+page.svelte b/app/src/routes/peripherals/i2c/+page.svelte
index 2ae28b5..f70c364 100644
--- a/app/src/routes/peripherals/i2c/+page.svelte
+++ b/app/src/routes/peripherals/i2c/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import I2C from './i2c.svelte';
+  import I2C from './i2c.svelte'
 </script>
 
 <div class="mx-0 my-1 flex flex-col space-y-4 sm:mx-8 sm:my-8">
-	<I2C />
+  <I2C />
 </div>
diff --git a/app/src/routes/peripherals/i2c/+page.ts b/app/src/routes/peripherals/i2c/+page.ts
index 76094a2..643baf9 100644
--- a/app/src/routes/peripherals/i2c/+page.ts
+++ b/app/src/routes/peripherals/i2c/+page.ts
@@ -1,7 +1,7 @@
-import type { PageLoad } from './$types';
+import type { PageLoad } from './$types'
 
 export const load = (async () => {
-	return {
-		title: 'I2C'
-	};
-}) satisfies PageLoad;
+  return {
+    title: 'I2C'
+  }
+}) satisfies PageLoad
diff --git a/app/src/routes/peripherals/i2c/i2c.svelte b/app/src/routes/peripherals/i2c/i2c.svelte
index 8187dc5..467e70b 100644
--- a/app/src/routes/peripherals/i2c/i2c.svelte
+++ b/app/src/routes/peripherals/i2c/i2c.svelte
@@ -1,57 +1,81 @@
 <script lang="ts">
-    import SettingsCard from '$lib/components/SettingsCard.svelte';
-    import { onMount } from 'svelte';
-    import { socket } from '$lib/stores';
-    import type { I2CDevice } from '$lib/types/models';
-    import { Connection } from '$lib/components/icons';
+  import SettingsCard from '$lib/components/SettingsCard.svelte'
+  import { onMount } from 'svelte'
+  import { socket } from '$lib/stores'
+  import type { I2CDevice, PeripheralsConfiguration } from '$lib/types/models'
+  import { Cancel, Connection, Edit, Power, Router } from '$lib/components/icons'
+  import { modals } from 'svelte-modals'
+  import ConfirmDialog from '$lib/components/ConfirmDialog.svelte'
+  import Spinner from '$lib/components/Spinner.svelte'
+  import StatusItem from '$lib/components/StatusItem.svelte'
+  import I2CSetting from './i2cSetting.svelte'
 
-    const i2cDevices = [
-        { address: 30, part_number: 'HMC5883', name: '3-Axis Digital Compass/Magnetometer IC' },
-        { address: 64, part_number: 'PCA9685', name: '16-channel PWM driver default address' },
-        { address: 72, part_number: 'ADS1115', name: '4-channel 16-bit ADC' },
-        {
-            address: 104,
-            part_number: 'MPU6050',
-            name: 'Six-Axis (Gyro + Accelerometer) MEMS MotionTracking™ Devices'
-        },
-        { address: 119, part_number: 'BMP085', name: 'Temp/Barometric' }
-    ];
+  const i2cDevices = [
+    { address: 30, part_number: 'HMC5883', name: '3-Axis Digital Compass/Magnetometer IC' },
+    { address: 64, part_number: 'PCA9685', name: '16-channel PWM driver default address' },
+    { address: 72, part_number: 'ADS1115', name: '4-channel 16-bit ADC' },
+    {
+      address: 104,
+      part_number: 'MPU6050',
+      name: 'Six-Axis (Gyro + Accelerometer) MEMS MotionTracking™ Devices'
+    },
+    { address: 119, part_number: 'BMP085', name: 'Temp/Barometric' }
+  ]
 
-    let active_devices: I2CDevice[] = $state([]);
+  let active_devices: I2CDevice[] = $state([])
 
-    onMount(() => {
-        socket.on('i2cScan', handleScan);
-        socket.sendEvent('i2cScan', '');
-        return () => socket.off('i2cScan', handleScan);
-    });
+  let isLoading = $state(false)
 
-    const handleScan = (data: any) => {
-        active_devices = data.addresses.map(
-            (address: number) =>
-                i2cDevices.find(device => device.address === address) || {
-                    address,
-                    part_number: 'Unknown',
-                    name: 'Unknown'
-                }
-        );
-    };
+  onMount(() => {
+    socket.on('i2cScan', handleScan)
+    triggerScan()
+    return () => socket.off('i2cScan', handleScan)
+  })
+
+  const handleScan = (data: any) => {
+    active_devices = data.addresses.map(
+      (address: number) =>
+        i2cDevices.find(device => device.address === address) || {
+          address,
+          part_number: 'Unknown',
+          name: 'Unknown'
+        }
+    )
+    isLoading = false
+  }
+
+  const triggerScan = () => {
+    isLoading = true
+    socket.sendEvent('i2cScan', '')
+  }
 </script>
 
 <SettingsCard collapsible={false}>
-    {#snippet icon()}
-        <Connection  class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
-    {/snippet}
-    {#snippet title()}
-        <span >I<sup>2</sup>C</span>
-    {/snippet}
+  {#snippet icon()}
+    <Connection class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
+  {/snippet}
+  {#snippet title()}
+    <span>I<sup>2</sup>C</span>
+  {/snippet}
+  {#snippet right()}
+    <button class="btn btn-primary" onclick={triggerScan} disabled={isLoading}>
+      {#if isLoading}
+        <span class="loading loading-ring loading-xs"></span>
+      {:else}
+        Scan
+      {/if}
+    </button>
+  {/snippet}
 
-    <div class="grid">
-        {#if active_devices.length === 0}
-            <div>No I2C devices found</div>
-        {:else}
-            {#each active_devices as device}
-                <div>[{device.address.toString(16)}] {device.part_number} - {device.name}</div>
-            {/each}
-        {/if}
-    </div>
+  <I2CSetting />
+
+  <div class="grid">
+    {#if active_devices.length === 0}
+      <div>No I2C devices found</div>
+    {:else}
+      {#each active_devices as device}
+        <div>[{device.address.toString(16)}] {device.part_number} - {device.name}</div>
+      {/each}
+    {/if}
+  </div>
 </SettingsCard>
diff --git a/app/src/routes/peripherals/i2c/i2cSetting.svelte b/app/src/routes/peripherals/i2c/i2cSetting.svelte
new file mode 100644
index 0000000..059facc
--- /dev/null
+++ b/app/src/routes/peripherals/i2c/i2cSetting.svelte
@@ -0,0 +1,99 @@
+<script lang="ts">
+  import { Cancel, Edit, EditOff, Power } from '$lib/components/icons'
+  import { socket } from '$lib/stores'
+  import type { PeripheralsConfiguration } from '$lib/types/models'
+  import { onMount } from 'svelte'
+  import { modals } from 'svelte-modals'
+  import ConfirmDialog from '$lib/components/ConfirmDialog.svelte'
+
+  let settings: PeripheralsConfiguration | null = $state(null)
+  let isEditing = $state(false)
+
+  onMount(() => {
+    socket.on('peripheralSettings', handleSettings)
+    socket.sendEvent('peripheralSettings', '')
+    return () => socket.off('peripheralSettings', handleSettings)
+  })
+
+  const handleSettings = (data: any) => {
+    settings = data
+  }
+
+  const handleSave = () => {
+    modals.open(ConfirmDialog, {
+      title: 'Confirm configuration',
+      message:
+        'Are you sure you want to save this configuration? The operation cannot be undone. Please make sure you have the correct settings.',
+      labels: {
+        cancel: { label: 'Cancel', icon: Cancel },
+        confirm: { label: 'Confirm', icon: Power }
+      },
+      onConfirm: () => {
+        modals.close()
+        socket.sendEvent('peripheralSettings', settings)
+      }
+    })
+  }
+
+  const Icon = $derived(isEditing ? EditOff : Edit)
+</script>
+
+{#if settings}
+  <div class="collapse bg-base-100 border-base-300 border">
+    <input type="checkbox" />
+    <div class="collapse-title font-semibold">Configuration</div>
+    <div class="collapse-content text-sm">
+      <div class="flex flex-col gap-2">
+        <label for="sda" class="input validator">
+          SDA
+
+          <input
+            id="sda"
+            type="number"
+            required
+            placeholder="Type a number between 1 to 48"
+            min="0"
+            max="48"
+            title="SDA pin number (0-48)"
+            disabled={!isEditing}
+            bind:value={settings.sda} />
+        </label>
+        <label for="scl" class="input validator">
+          SCL
+
+          <input
+            id="scl"
+            type="number"
+            required
+            placeholder="Type a number between 1 to 48"
+            min="1"
+            max="48"
+            title="SCL pin number (0-48)"
+            disabled={!isEditing}
+            bind:value={settings.scl} />
+        </label>
+        <label class="input validator" for="frequency">
+          Frequency
+          <input
+            id="frequency"
+            type="number"
+            required
+            placeholder="Type a number between 100000 to 430000"
+            min="100000"
+            max="430000"
+            title="I2C frequency in Hz"
+            disabled={!isEditing}
+            bind:value={settings.frequency} />
+        </label>
+        <div>
+          <button class="btn btn-outline btn-primary" onclick={() => (isEditing = !isEditing)}>
+            <Icon class="h-6 w-6" />
+          </button>
+          {#if isEditing}
+            <button class="btn btn-outline btn-primary" onclick={handleSave}>Save</button>
+          {/if}
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}