diff --git a/frontend/src/components/Settings/DeviceCard.svelte b/frontend/src/components/Settings/DeviceCard.svelte
index 408fa2c..cd705f1 100644
--- a/frontend/src/components/Settings/DeviceCard.svelte
+++ b/frontend/src/components/Settings/DeviceCard.svelte
@@ -15,6 +15,7 @@
     export let signalizable = false;
     export let signalized = false;
     export let disconnected = false;
+    export let selected = false;
 
     // Emit a delete event when the device is being removed
     const dispatch = createEventDispatcher();
@@ -36,7 +37,7 @@
 </script>
 
 <div class="card" on:dblclick={dblclick}>
-    <div class="profile" on:mousedown={click} style="color: {disconnected ? $colors.first : $colors.white};">
+    <div class="profile" on:mousedown={click} style="color: {disconnected ? $colors.first : $colors.white}; border: {selected ? "solid " + $colors.first : "none"};">
         <div>
             <p>{#if disconnected}<i class='bx bx-no-signal' style="font-size:100%; color: var(--nok-color);"></i> {/if}{title}</p>
             <h6 class="subtitle">{type} {location != '' ? "- " : ""}<i>{location}</i></h6>
diff --git a/frontend/src/components/Settings/InputsOutputsContent.svelte b/frontend/src/components/Settings/InputsOutputsContent.svelte
index 2b12d8e..d56dbab 100644
--- a/frontend/src/components/Settings/InputsOutputsContent.svelte
+++ b/frontend/src/components/Settings/InputsOutputsContent.svelte
@@ -1,10 +1,11 @@
 <script lang=ts>
     import DeviceCard from "./DeviceCard.svelte";
     import Tab from "../General/Tab.svelte";
-    import { _ } from 'svelte-i18n'
+    import Input from "../General/Input.svelte";
+    import { t, _ } from 'svelte-i18n'
     import { generateToast, needProjectSave, peripherals } from "../../stores";
     import { get } from "svelte/store"
-    import { AddOS2LPeripheral, RemovePeripheral, ConnectFTDI, ActivateFTDI, DeactivateFTDI, DisconnectFTDI, SetDeviceFTDI, AddPeripheral } from "../../../wailsjs/go/main/App";
+    import { GetPeripheralSettings, AddOS2LPeripheral, RemovePeripheral, ConnectFTDI, ActivateFTDI, DeactivateFTDI, DisconnectFTDI, SetDeviceFTDI, AddPeripheral } from "../../../wailsjs/go/main/App";
     import RoundedButton from "../General/RoundedButton.svelte";
 
     function ftdiConnect(){
@@ -84,6 +85,11 @@
                 return { ...storedPeripherals };
             })
             $needProjectSave = true
+            // If the peripheral is currently selected, unselect it
+            if (selectedPeripheralSN == peripheral.SerialNumber) {
+                selectedPeripheralSN = null
+                selectedPeripheralSettings = {}
+            }
         }).catch((error) => {
             console.log("Unable to remove the peripheral from the project: " + error)
             generateToast('danger', 'bx-error', $_("removePeripheralErrorToast"))
@@ -107,15 +113,28 @@
         })
     }
 
+    // Select the peripheral to edit its settings
+    let selectedPeripheralSN = null
+    let selectedPeripheralSettings = {}
+    function selectPeripheral(peripheral){
+        // Load the settings array
+        GetPeripheralSettings(peripheral.ProtocolName, peripheral.SerialNumber).then((peripheralSettings) => {
+            selectedPeripheralSettings = peripheralSettings
+        }).catch((error) => {
+            generateToast('error', 'bx-error', $_("getPeripheralSettingsErrorToast"))
+        })
+        // Select the current peripheral
+        selectedPeripheralSN = peripheral.SerialNumber
+    }
     // Get the number of saved peripherals
     $: savedPeripheralNumber = Object.values($peripherals).filter(peripheral => peripheral.isSaved).length;
 </script>
 
 <div class="hardware">
     <div style="padding: 0.5em;">
-        <p style="margin-bottom: 1em;">Available peripherals</p>
+        <p style="margin-bottom: 1em;">{$_("projectHardwareAvailableLabel")}</p>
         <div class="availableHardware">
-            <p style="color: var(--first-color);"><i class='bx bxs-plug'></i> Detected</p>
+            <p style="color: var(--first-color);"><i class='bx bxs-plug'></i> {$_("projectHardwareDetectedLabel")}</p>
                 {#each Object.entries($peripherals) as [serialNumber, peripheral]}
                     {#if peripheral.isDetected}
                         <DeviceCard on:add={() => addPeripheral(peripheral)} on:dblclick={() => {
@@ -125,40 +144,59 @@
                             title={peripheral.Name} type={peripheral.ProtocolName} location={peripheral.Location ? peripheral.Location : ""} line1={"S/N: " + peripheral.SerialNumber} addable={!peripheral.isSaved}/>
                     {/if}
                 {/each}
-            <p style="color: var(--first-color);"><i class='bx bxs-network-chart' ></i> Others</p>
+            <p style="color: var(--first-color);"><i class='bx bxs-network-chart' ></i> {$_("projectHardwareOthersLabel")}</p>
             <RoundedButton on:click={createOS2L} text="Add an OS2L peripheral" icon="bx-plus-circle" tooltip="Configure an OS2L connection"/>
         </div>
     </div>
 
     <div style="padding: 0.5em; flex:2; width:100%;">
-        <p style="margin-bottom: 1em;">Project peripherals</p>
+        <p style="margin-bottom: 1em;">{$_("projectHardwareSavedLabel")}</p>
         <div class="configuredHardware">
             {#if savedPeripheralNumber > 0}    
                 {#each Object.entries($peripherals) as [serialNumber, peripheral]}
                     {#if peripheral.isSaved}
-                        <DeviceCard on:delete={() => removePeripheral(peripheral)} on:dblclick={() => removePeripheral(peripheral)}
-                        disconnected={!peripheral.isDetected} title={peripheral.Name == "" ? "Please wait..." : peripheral.Name} type={peripheral.ProtocolName} location={peripheral.Location ? peripheral.Location : ""} line1={peripheral.SerialNumber ? "S/N: " + peripheral.SerialNumber : ""} removable signalizable/>
+                        <DeviceCard on:delete={() => removePeripheral(peripheral)} on:dblclick={() => removePeripheral(peripheral)} on:click={() => selectPeripheral(peripheral)}
+                        disconnected={!peripheral.isDetected} title={peripheral.Name == "" ? "Please wait..." : peripheral.Name} type={peripheral.ProtocolName} location={peripheral.Location ? peripheral.Location : ""} line1={peripheral.SerialNumber ? "S/N: " + peripheral.SerialNumber : ""} selected={serialNumber == selectedPeripheralSN} removable signalizable/>
                     {/if}
                 {/each}
             {:else}              
-                <i>No hardware saved for this project.</i>
+                <i>{$_("projectHardwareEmptyLabel")}</i>
             {/if}    
         </div>
-        <p style="margin-bottom: 1em;">Peripheral settings</p>
-        <div>
-            <p><i>Select a peripheral to edit its settings</i></p>
-            <button on:click={ftdiConnect}>Connect FTDI 0</button>
+        <p style="margin-bottom: 1em;">{$_("projectHardwareSettingsLabel")} (<b>{selectedPeripheralSN == null ? $_("projectHardwareNoSelection") : selectedPeripheralSN}</b>)</p>
+        <div class='flexSettings'>
+            {#if Object.keys(selectedPeripheralSettings).length > 0}    
+                {#each Object.entries(selectedPeripheralSettings) as [settingName, settingValue]}
+                    <div class="peripheralSetting">
+                        <Input label={$t(settingName)} type="{typeof(settingValue)}" width='100%' value="{settingValue}"/>
+                    </div>
+                {/each}
+            {:else}              
+                <p><i>Select a peripheral to edit its settings</i></p>
+            {/if}   
+
+            <!-- <button on:click={ftdiConnect}>Connect FTDI 0</button>
             <button on:click={ftdiActivate}>Activate FTDI 0</button>
             <div class="slidecontainer">
                 <input type="range" min="0" max="255" class="slider" bind:value={sliderValue} on:input={() => ftdiSetDevice(sliderValue)}>
             </div>
             <button on:click={ftdiDeactivate}>Deactivate FTDI 0</button>
-            <button on:click={ftdiDisconnect}>Disconnect FTDI 0</button>
+            <button on:click={ftdiDisconnect}>Disconnect FTDI 0</button> -->
         </div>
     </div>
 </div>
 
 <style>
+    .peripheralSetting{
+        margin: 0.5em;
+    }
+    .flexSettings{
+        display: flex;
+        flex-wrap: wrap;
+        width: 100%;
+        overflow-y: auto;
+    }
+
     p {
         margin: 0;
     }
diff --git a/frontend/src/lang/en.json b/frontend/src/lang/en.json
index f1c1ee8..4f13e54 100644
--- a/frontend/src/lang/en.json
+++ b/frontend/src/lang/en.json
@@ -15,7 +15,7 @@
   "openProjectTooltip": "Open an existing project",
   "projectPropertiesTab": "Project properties",
   "projectPropertiesTooltip": "The project properties",
-  "projectInputOutputTab": "Inputs & outputs",
+  "projectInputOutputTab": "Hardware",
   "projectInputOutputTooltip": "The input/output hardware definition",
   
   "projectShowNameLabel": "Show name",
@@ -35,6 +35,13 @@
   "projectHardwareOutputsLabel": "OUTPUTS",
   "projectHardwareDeleteTooltip": "Delete this peripheral",
   "projectHardwareAddTooltip": "Add this peripheral to project",
+  "projectHardwareNoSelection": "Empty",
+  "projectHardwareAvailableLabel": "Available peripherals",
+  "projectHardwareSavedLabel": "Project peripherals",
+  "projectHardwareDetectedLabel": "Detected",
+  "projectHardwareOthersLabel": "Others",
+  "projectHardwareEmptyLabel": "No hardware saved for this project",
+  "projectHardwareSettingsLabel": "Peripheral settings",
 
   "peripheralArrivalToast": "Peripheral inserted:",
   "peripheralRemovalToast": "Peripheral removed:",
@@ -44,8 +51,13 @@
   "removePeripheralErrorToast": "Unable to remove this peripheral from project",
   "os2lPeripheralCreatedToast": "Your OS2L peripheral has been created",
   "os2lPeripheralCreateErrorToast": "Unable to create the OS2L peripheral",
+  "getPeripheralSettingsErrorToast": "Unable to get the peripheral settings",
   "projectsLoadErrorToast": "Unable to get the projects list",
   "projectOpenedToast": "The project was opened:",
   "projectOpenErrorToast": "Unable to open the project",
-  "projectCreatedToast": "The project was created"
+  "projectCreatedToast": "The project was created",
+
+  "os2lIpSetting": "IP Address",
+  "os2lPortSetting": "Port"
+
 }
diff --git a/hardware/MIDIPeripheral.go b/hardware/MIDIPeripheral.go
index 7d434e7..49b95ee 100644
--- a/hardware/MIDIPeripheral.go
+++ b/hardware/MIDIPeripheral.go
@@ -8,18 +8,21 @@ import (
 
 // MIDIPeripheral contains the data of a MIDI peripheral
 type MIDIPeripheral struct {
-	name         string // The name of the peripheral
-	location     int    // The location of the peripheral
-	serialNumber string // The S/N of the peripheral
+	name         string                 // The name of the peripheral
+	location     int                    // The location of the peripheral
+	serialNumber string                 // The S/N of the peripheral
+	settings     map[string]interface{} // The settings of the peripheral
 }
 
 // NewMIDIPeripheral creates a new MIDI peripheral
 func NewMIDIPeripheral(name string, location int, serialNumber string) *MIDIPeripheral {
 	log.Trace().Str("file", "MIDIPeripheral").Str("name", name).Str("s/n", serialNumber).Int("location", location).Msg("MIDI peripheral created")
+	settings := make(map[string]interface{})
 	return &MIDIPeripheral{
 		name:         name,
 		location:     location,
 		serialNumber: serialNumber,
+		settings:     settings,
 	}
 }
 
@@ -48,6 +51,11 @@ func (p *MIDIPeripheral) SetDeviceProperty(context.Context, uint32, uint32, byte
 	return nil
 }
 
+// GetSettings gets the peripheral settings
+func (p *MIDIPeripheral) GetSettings() map[string]interface{} {
+	return p.settings
+}
+
 // GetInfo gets the peripheral information
 func (p *MIDIPeripheral) GetInfo() PeripheralInfo {
 	return PeripheralInfo{
diff --git a/hardware/OS2LPeripheral.go b/hardware/OS2LPeripheral.go
index 5cb7eb0..2c83e0d 100644
--- a/hardware/OS2LPeripheral.go
+++ b/hardware/OS2LPeripheral.go
@@ -8,16 +8,21 @@ import (
 
 // OS2LPeripheral contains the data of an OS2L peripheral
 type OS2LPeripheral struct {
-	name         string // The name of the peripheral
-	serialNumber string // The serial number of the peripheral
+	name         string                 // The name of the peripheral
+	serialNumber string                 // The serial number of the peripheral
+	settings     map[string]interface{} // The settings of the peripheral
 }
 
 // NewOS2LPeripheral creates a new OS2L peripheral
 func NewOS2LPeripheral(name string, serialNumber string) *OS2LPeripheral {
 	log.Trace().Str("file", "OS2LPeripheral").Str("name", name).Str("s/n", serialNumber).Msg("OS2L peripheral created")
+	settings := make(map[string]interface{})
+	settings["ip"] = "192.168.1.1"
+	settings["port"] = 9995
 	return &OS2LPeripheral{
 		name:         name,
 		serialNumber: serialNumber,
+		settings:     settings,
 	}
 }
 
@@ -50,6 +55,11 @@ func (p *OS2LPeripheral) SetDeviceProperty(context.Context, uint32, uint32, byte
 	return nil
 }
 
+// GetSettings gets the peripheral settings
+func (p *OS2LPeripheral) GetSettings() map[string]interface{} {
+	return p.settings
+}
+
 // GetInfo gets the peripheral information
 func (p *OS2LPeripheral) GetInfo() PeripheralInfo {
 	return PeripheralInfo{
diff --git a/hardware/interfaces.go b/hardware/interfaces.go
index 4b7eccc..f0f52ac 100644
--- a/hardware/interfaces.go
+++ b/hardware/interfaces.go
@@ -16,10 +16,10 @@ type Peripheral interface {
 
 // PeripheralInfo represents a peripheral information
 type PeripheralInfo struct {
-	Name         string        `yaml:"name"`     // Name of the peripheral
-	SerialNumber string        `yaml:"sn"`       // S/N of the peripheral
-	ProtocolName string        `yaml:"protocol"` // Protocol name of the peripheral
-	Settings     []interface{} `yaml:"settings"` // Number of DMX universes handled by the peripheral
+	Name         string                 `yaml:"name"`     // Name of the peripheral
+	SerialNumber string                 `yaml:"sn"`       // S/N of the peripheral
+	ProtocolName string                 `yaml:"protocol"` // Protocol name of the peripheral
+	Settings     map[string]interface{} `yaml:"settings"` // Number of DMX universes handled by the peripheral
 }
 
 // PeripheralFinder represents how compatible peripheral drivers are implemented
diff --git a/peripherals.go b/peripherals.go
index e7b6af7..407871e 100644
--- a/peripherals.go
+++ b/peripherals.go
@@ -23,6 +23,18 @@ func (a *App) AddPeripheral(protocolName string, peripheralID string) error {
 	return nil
 }
 
+// GetPeripheralSettings gets the peripheral settings
+func (a *App) GetPeripheralSettings(protocolName, peripheralID string) (map[string]interface{}, error) {
+	// Get the device from its finder
+	p, found := a.hardwareManager.GetPeripheral(protocolName, peripheralID)
+	if !found {
+		log.Error().Str("file", "peripheral").Str("protocolName", protocolName).Str("periphID", peripheralID).Msg("unable to found the specified peripheral")
+		return nil, fmt.Errorf("unable to found the peripheral ID '%s'", peripheralID)
+	}
+	// Return the peripheral settings
+	return p.GetSettings(), nil
+}
+
 // RemovePeripheral adds a peripheral to the project
 func (a *App) RemovePeripheral(protocolName string, peripheralID string) error {
 	// TODO: Disconnect the peripheral