diff --git a/app.go b/app.go
index eb4cec3..5886487 100644
--- a/app.go
+++ b/app.go
@@ -43,6 +43,9 @@ func NewApp() *App {
 	return &App{
 		hardwareManager: hardwareManager,
 		projectSave:     "",
+		projectInfo: ProjectInfo{
+			PeripheralsInfo: make(map[string]hardware.PeripheralInfo),
+		},
 	}
 }
 
@@ -118,6 +121,7 @@ func (a *App) GetProjectInfo(projectFile string) (ProjectInfo, error) {
 		log.Fatalf("Unable to read the project file: %v", err)
 		return ProjectInfo{}, err
 	}
+	a.projectInfo = ProjectInfo{}
 	err = yaml.Unmarshal(content, &a.projectInfo)
 	if err != nil {
 		log.Fatalf("Unable to get the project information: %v", err)
@@ -167,7 +171,7 @@ func (a *App) AddPeripheral(protocolName string, peripheralID string) error {
 		return fmt.Errorf("Unable to localize the peripheral %s", peripheralID)
 	}
 	// Add the peripheral ID to the project
-	a.projectInfo.PeripheralsInfo = append(a.projectInfo.PeripheralsInfo, p.GetInfo())
+	a.projectInfo.PeripheralsInfo[peripheralID] = p.GetInfo()
 	// TODO: Connect the peripheral
 	return nil
 }
@@ -176,7 +180,7 @@ func (a *App) AddPeripheral(protocolName string, peripheralID string) error {
 func (a *App) RemovePeripheral(protocolName string, peripheralID string) error {
 	// TODO: Disconnect the peripheral
 	// Remove the peripheral ID from the project
-	a.projectInfo.PeripheralsInfo = removePeripheralFromList(a.projectInfo.PeripheralsInfo, peripheralID)
+	delete(a.projectInfo.PeripheralsInfo, peripheralID)
 	return nil
 }
 
@@ -220,18 +224,8 @@ type ProjectMetaData struct {
 
 // ProjectInfo defines all the information for a lighting project
 type ProjectInfo struct {
-	ShowInfo        ShowInfo                  `yaml:"show"`        // Show information
-	PeripheralsInfo []hardware.PeripheralInfo `yaml:"peripherals"` // Peripherals information
-}
-
-func removePeripheralFromList(slice []hardware.PeripheralInfo, idToRemove string) []hardware.PeripheralInfo {
-	result := []hardware.PeripheralInfo{}
-	for _, peripheral := range slice {
-		if peripheral.SerialNumber != idToRemove {
-			result = append(result, peripheral)
-		}
-	}
-	return result
+	ShowInfo        ShowInfo                           `yaml:"show"`        // Show information
+	PeripheralsInfo map[string]hardware.PeripheralInfo `yaml:"peripherals"` // Peripherals information
 }
 
 func formatString(input string) string {
diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index c6a5d5e..4c2939e 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -9,23 +9,46 @@
   import Show from './components/Show/Show.svelte';
   import GeneralConsole from './components/Console/GeneralConsole.svelte';
   import RoundIconButton from './components/General/RoundIconButton.svelte';
-  import { showInformation, needProjectSave, availablePeripherals, savedPeripherals } from './stores';
+  import { showInformation, needProjectSave, peripherals } from './stores';
   import { SaveProject } from '../wailsjs/go/main/App.js';
   import { construct_svelte_component } from 'svelte/internal';
   import { EventsOn } from '../wailsjs/runtime'
   import { CreateProject, GetPeripherals } from "../wailsjs/go/main/App";
   import { WindowSetTitle } from "../wailsjs/runtime/runtime"
+  import { get } from "svelte/store"
 
   // Handle the event when a new peripheral is detected
   EventsOn('PERIPHERAL_ARRIVAL', function(peripheralInfo){
         console.log("Hardware has been added to the system");
-        $availablePeripherals = [...$availablePeripherals, peripheralInfo];
+        // When a new peripheral is detected, add it to the map and:
+        // - Pass the isDetected key to true
+        // - Set the isSaved key to the last value
+        let peripheralsList = get(peripherals)
+        let lastSavedProperty = peripheralsList[peripheralInfo.SerialNumber]?.isSaved
+        peripheralInfo.isDetected = true
+        peripheralInfo.isSaved = (lastSavedProperty === true) ? true : false
+        peripherals.update((peripherals) => {
+          peripherals[peripheralInfo.SerialNumber] = peripheralInfo
+          return {...peripherals}
+        })
   })
 
   // Handle the event when a peripheral is removed from the system
   EventsOn('PERIPHERAL_REMOVAL', function(peripheralInfo){
-        console.log("Hardware has been removed from the system");
-        $availablePeripherals = $availablePeripherals.filter(item => JSON.stringify(item) !== JSON.stringify(peripheralInfo))
+      console.log("Hardware has been removed from the system");
+      // When a peripheral is disconnected, pass its isDetected key to false
+      // If the isSaved key is set to false, we can completely remove the peripheral from the list
+      let peripheralsList = get(peripherals)
+      let lastSavedProperty = peripheralsList[peripheralInfo.SerialNumber]?.isSaved
+      let needToDelete = (lastSavedProperty !== true) ? true : false
+      peripherals.update((storedPeripherals) => {
+        if (needToDelete){
+          delete storedPeripherals[peripheralInfo.SerialNumber];
+          return { ...storedPeripherals };
+        }
+        storedPeripherals[peripheralInfo.SerialNumber].isDetected = false
+        return {...storedPeripherals}
+      })
   })
 
   // Set the window title
diff --git a/frontend/src/components/Settings/InputsOutputsContent.svelte b/frontend/src/components/Settings/InputsOutputsContent.svelte
index 8b3089f..e1c73e9 100644
--- a/frontend/src/components/Settings/InputsOutputsContent.svelte
+++ b/frontend/src/components/Settings/InputsOutputsContent.svelte
@@ -2,7 +2,8 @@
     import DeviceCard from "./DeviceCard.svelte";
     import Tab from "../General/Tab.svelte";
     import { _ } from 'svelte-i18n'
-    import { availablePeripherals, needProjectSave, savedPeripherals } from "../../stores";
+    import { needProjectSave, peripherals } from "../../stores";
+    import { get } from "svelte/store"
     import { RemovePeripheral, ConnectFTDI, ActivateFTDI, DeactivateFTDI, DisconnectFTDI, SetDeviceFTDI, AddPeripheral } from "../../../wailsjs/go/main/App";
 
     function ftdiConnect(){
@@ -51,8 +52,13 @@
     function addPeripheral(peripheral){
         // Add the peripheral to the project (backend)
         AddPeripheral(peripheral.ProtocolName, peripheral.SerialNumber).then(() => {
+            peripherals.update((value) => {
+                if (value[peripheral.SerialNumber]) {
+                    value[peripheral.SerialNumber].isSaved = true;
+                }
+                return {...value}
+            })
             $needProjectSave = true
-            $savedPeripherals = [...$savedPeripherals, peripheral];
         }).catch((error) => {
             console.log("Unable to add the peripheral to the project: " + error)
         })
@@ -62,13 +68,24 @@
     function removePeripheral(peripheral) {
         // Delete the peripheral from the project (backend)
         RemovePeripheral(peripheral.ProtocolName, peripheral.SerialNumber).then(() => {
+            // If the peripheral is not detected, we can delete it form the store
+            // If not, we only pass the isSaved key to false
+            let peripheralsList = get(peripherals)
+            let lastDetectedProperty = peripheralsList[peripheral.SerialNumber]?.isDetected
+            let needToDelete = (lastDetectedProperty !== true) ? true : false
+            peripherals.update((storedPeripherals) => {
+                if (needToDelete){
+                    delete storedPeripherals[peripheral.SerialNumber];
+                    return { ...storedPeripherals };
+                }
+                storedPeripherals[peripheral.SerialNumber].isSaved = false
+                return { ...storedPeripherals };
+            })
             $needProjectSave = true
-            $savedPeripherals = $savedPeripherals.filter(item => JSON.stringify(item) !== JSON.stringify(peripheral))
         }).catch((error) => {
             console.log("Unable to remove the peripheral from the project: " + error)
         })
     }
-
 </script>
 
 <div class="hardware">
@@ -76,9 +93,14 @@
         <p style="margin-bottom: 1em;">Available peripherals</p>
         <div class="availableHardware">
             <p style="color: var(--first-color);"><i class='bx bxs-plug'></i> Detected</p>
-            {#each $availablePeripherals as peripheral}
-                <DeviceCard on:add={() => addPeripheral(peripheral)} on:dblclick={() => addPeripheral(peripheral)}
-                    title={peripheral.Name == "" ? "Please wait..." : peripheral.Name} type={peripheral.ProtocolName} location={peripheral.Location ? peripheral.Location : ""} line1={peripheral.SerialNumber ? "S/N: " + peripheral.SerialNumber : ""} addable={!peripheral.isAdded}/>
+            {#each Object.entries($peripherals) as [serialNumber, peripheral]}
+                {#if peripheral.isDetected}
+                    <DeviceCard on:add={() => addPeripheral(peripheral)} on:dblclick={() => {
+                        if(!peripheral.isSaved) 
+                            addPeripheral(peripheral) 
+                        }}
+                        title={peripheral.Name} type={peripheral.ProtocolName} location={peripheral.Location ? peripheral.Location : ""} line1={peripheral.SerialNumber ? "S/N: " + peripheral.SerialNumber : ""} addable={!peripheral.isSaved}/>
+                {/if}
             {/each}
             <p style="color: var(--first-color);"><i class='bx bxs-network-chart' ></i> Others</p>
             <DeviceCard disconnected on:click={() => console.log("Edit the OS2L hardware")} title="OS2L device" type="OS2L" line1="Add to configure" addable on:add={() => console.log("Add an OS2L device")}/>
@@ -90,12 +112,11 @@
     <div style="padding: 0.5em; flex:2; width:100%;">
         <p style="margin-bottom: 1em;">Project peripherals</p>
         <div class="configuredHardware">
-            {#if $savedPeripherals.length == 0}
-                <i>Add peripherals from the left panel</i>
-            {/if}
-            {#each $savedPeripherals as peripheral}
-                <DeviceCard on:delete={() => removePeripheral(peripheral)} on:dblclick={() => removePeripheral(peripheral)}
-                title={peripheral.Name == "" ? "Please wait..." : peripheral.Name} type={peripheral.ProtocolName} location={peripheral.Location ? peripheral.Location : ""} line1={peripheral.SerialNumber ? "S/N: " + peripheral.SerialNumber : ""} removable signalizable/>
+            {#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/>
+                {/if}
             {/each}    
         </div>
         <p style="margin-bottom: 1em;">Peripheral settings</p>
diff --git a/frontend/src/components/Settings/Settings.svelte b/frontend/src/components/Settings/Settings.svelte
index e11bc46..b6f7b86 100644
--- a/frontend/src/components/Settings/Settings.svelte
+++ b/frontend/src/components/Settings/Settings.svelte
@@ -1,5 +1,5 @@
 <script lang=ts>
-    import { projectsList, showInformation, needProjectSave, savedPeripherals } from '../../stores.js';
+    import { projectsList, showInformation, needProjectSave, peripherals } from '../../stores.js';
     import RoundedButton from "../General/RoundedButton.svelte";
     import ProjectPropertiesContent from "./ProjectPropertiesContent.svelte";
     import DropdownList from "../General/DropdownList.svelte";
@@ -8,6 +8,7 @@
     import { CreateProject, GetProjects, GetProjectInfo } from "../../../wailsjs/go/main/App";
     import { _ } from 'svelte-i18n'
     import {colors} from '../../stores.js';
+    import { get } from "svelte/store"
 
     const tabs = [
         { title: $_("projectPropertiesTab"), icon: 'bxs-info-circle', tooltip: $_("projectPropertiesTooltip"), component: ProjectPropertiesContent },
@@ -29,10 +30,26 @@
         let selectedOption = event.detail.key
         // Open the selected project
         GetProjectInfo(selectedOption).then((projectInfo) => {
-            console.log(projectInfo)
-            console.log("Project opened")
             $showInformation = projectInfo.ShowInfo
-            $savedPeripherals = projectInfo.PeripheralsInfo
+            peripherals.update((storedPeripherals) => {
+                // Set all the isSaved keys to false and delete the disconnected peripherals
+                for (let peripheralID in storedPeripherals) {
+                    storedPeripherals[peripheralID].isSaved = false
+                    if (!storedPeripherals[peripheralID].isDetected) {
+                        delete storedPeripherals[peripheralID]
+                    }
+                }
+                // Add the saved peripherals of the project
+                // If already exists pass the isSaved key to true, if not create the peripheral and set it to disconnected
+                for (let peripheralID in projectInfo.PeripheralsInfo){
+                    // Add the peripheral to the list of peripherals, with the last isDetected key and the isSaved key to true
+                    let lastDetectedKey = storedPeripherals[peripheralID]?.isDetected
+                    storedPeripherals[peripheralID] = projectInfo.PeripheralsInfo[peripheralID]
+                    storedPeripherals[peripheralID].isDetected = (lastDetectedKey === true) ? true : false 
+                    storedPeripherals[peripheralID].isSaved = true
+                }
+                return {...storedPeripherals}
+            })
             needProjectSave.set(false)
         }).catch((error) => {
             console.error(`Unable to open the project: ${error}`)
@@ -43,7 +60,6 @@
         // Instanciate a new project
         CreateProject().then((showInfo) => {
             $showInformation = showInfo
-            $savedPeripherals = []
             $needProjectSave = true
         })
     }
diff --git a/frontend/src/stores.js b/frontend/src/stores.js
index c478017..6afbf68 100644
--- a/frontend/src/stores.js
+++ b/frontend/src/stores.js
@@ -25,5 +25,4 @@ export const secondSize = writable("14px")
 export const thirdSize = writable("20px")
 
 // List of current hardware
-export let availablePeripherals = writable([])
-export let savedPeripherals = writable([])
\ No newline at end of file
+export let peripherals = writable({})
\ No newline at end of file