diff --git a/BlazorCanvas/BlazorCanvas/Data/CanvasService.cs b/BlazorCanvas/BlazorCanvas/Data/CanvasService.cs
new file mode 100644
index 0000000..2629b89
--- /dev/null
+++ b/BlazorCanvas/BlazorCanvas/Data/CanvasService.cs
@@ -0,0 +1,51 @@
+using Blazor.Extensions.Canvas.Canvas2D;
+using Blazor.Extensions;
+using Microsoft.AspNetCore.Components.Web;
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+using Newtonsoft.Json.Linq;
+using Newtonsoft.Json;
+
+namespace BlazorCanvas.Data;
+
+public class CanvasService {
+    public ElementReference divCanvas;
+    public BECanvasComponent myCanvas = new();
+    Canvas2DContext? currentCanvasContext;
+    IJSRuntime _jsRuntime;
+
+    public CanvasService(IJSRuntime jsRuntime) {
+        _jsRuntime = jsRuntime;
+    }
+
+    public string currentcolor { get; set; } = "Black";
+    public int pointsize { get; set; } = 1;
+
+    public async void OnMouseMove(MouseEventArgs eventArgs)
+    {
+        double mouseX = 0, mouseY = 0;
+
+        if (eventArgs.Buttons == 0 || eventArgs.Buttons > 2)
+            return; // Rien faire si aucun bouton est appuyé ou si les deux boutons/ d'autres boutons sont appuyés.
+
+        if (divCanvas.Id?.Length > 0)
+        {
+            string data = await _jsRuntime.InvokeAsync<string>("getDivCanvasOffsets",
+                new object[] { divCanvas });
+            JObject? offsets = (JObject?)JsonConvert.DeserializeObject(data);
+
+            if (offsets is not null && offsets.HasValues)
+            { // Translation entre le canvas et la souris.
+                mouseX = eventArgs.ClientX - offsets.Value<double>("offsetLeft");
+                mouseY = eventArgs.ClientY - offsets.Value<double>("offsetTop");
+            }
+            if (currentCanvasContext is null)
+                currentCanvasContext = await myCanvas.CreateCanvas2DAsync();
+
+            await currentCanvasContext.SetFillStyleAsync(eventArgs.Buttons == 1 ?
+                                                                        currentcolor :
+                                                                        "White"); // Couleur si bouton gauche, blanc si bouton droit
+            await currentCanvasContext.FillRectAsync(mouseX, mouseY, pointsize, pointsize);
+        }
+    }
+}
diff --git a/BlazorCanvas/BlazorCanvas/Pages/Index.razor b/BlazorCanvas/BlazorCanvas/Pages/Index.razor
index b664552..f3128d5 100644
--- a/BlazorCanvas/BlazorCanvas/Pages/Index.razor
+++ b/BlazorCanvas/BlazorCanvas/Pages/Index.razor
@@ -3,80 +3,43 @@
 @using Blazor.Extensions.Canvas
 @using Blazor.Extensions.Canvas.Canvas2D
 @using Blazor.Extensions.Canvas.WebGL
+@using BlazorCanvas.Data
 @using Newtonsoft.Json
 @using Newtonsoft.Json.Linq
-@inject IJSRuntime jsRuntime
+@inject CanvasService canvasService
 
-<header>
-    <div style="padding: 5px; background-color: darkgray;">
-        <h3>Canvas Communautaire!</h3>
-        <label>Couleur: </label>
-        <select @bind="@currentcolor">
-            <option value="Black" selected>Noir</option>
-            <option value="Red">Rouge</option>
-            <option value="Blue">Bleu</option>
-            <option value="Green">Vert</option>
-            <option value="Yellow">Jaune</option>
-            <option value="DarkRed">Bourgogne</option>
-            <option value="DarkBlue">Bleu nuit</option>
-            <option value="DarkGreen">Vert forêt</option>
-            <option value="LightBlue">Cyan</option>
-            <option value="LightGreen">Jade</option>
-            <option value="LightYellow">Jaune pâle</option>
-            <option value="Gray">Gris</option>
-            <option value="White">Blanc</option>
-        </select>
-        <label>Grosseur du trait: </label>
-        <select @bind="@pointsize">
-            <option value="1" selected>1</option>
-            <option value="2">2</option>
-            <option value="3">3</option>
-            <option value="4">4</option>
-            <option value="8">8</option>
-            <option value="16">16</option>
-            <option value="32">32</option>
-        </select>
-    </div>
+<header style="padding: 5px;">
+    <h3>Canvas Communautaire!</h3>
+    <label>Couleur: </label>
+    <select @bind="@canvasService.currentcolor">
+        <option value="Black" selected>Noir</option>
+        <option value="Red">Rouge</option>
+        <option value="Blue">Bleu</option>
+        <option value="Green">Vert</option>
+        <option value="Yellow">Jaune</option>
+        <option value="DarkRed">Bourgogne</option>
+        <option value="DarkBlue">Bleu nuit</option>
+        <option value="DarkGreen">Vert forêt</option>
+        <option value="LightBlue">Cyan</option>
+        <option value="LightGreen">Jade</option>
+        <option value="LightYellow">Jaune pâle</option>
+        <option value="Gray">Gris</option>
+        <option value="White">Blanc</option>
+    </select>
+    <label>Grosseur du trait: </label>
+    <select @bind="@canvasService.pointsize">
+        <option value="1" selected>1</option>
+        <option value="2">2</option>
+        <option value="3">3</option>
+        <option value="4">4</option>
+        <option value="8">8</option>
+        <option value="16">16</option>
+        <option value="32">32</option>
+    </select>
 </header>
-<div @ref="divCanvas" @onmousemove="OnMouseMove" style="border:1px dotted #000000;">
-    <BECanvas @ref="myCanvas" Height="1080" Width="1920"></BECanvas>
+<div @ref="canvasService.divCanvas" @onmousemove="canvasService.OnMouseMove" style="border:1px dotted #000000;">
+    <BECanvas @ref="canvasService.myCanvas" Height="1080" Width="1920"></BECanvas>
 </div>
 <footer>
-</footer>
-
-@code {
-    ElementReference divCanvas;
-    BECanvasComponent myCanvas = new();
-    Canvas2DContext? currentCanvasContext;
-
-    private string currentcolor { get; set; } = "Black";
-    private int pointsize { get; set; } = 1;
-
-    async void OnMouseMove(MouseEventArgs eventArgs)
-    {
-        double mouseX = 0, mouseY = 0;
-
-        if (eventArgs.Buttons == 0 || eventArgs.Buttons > 2)
-            return; // Rien faire si aucun bouton est appuyé ou si les deux boutons/ d'autres boutons sont appuyés.
-
-        if (divCanvas.Id?.Length > 0)
-        {
-            string data = await jsRuntime.InvokeAsync<string>("getDivCanvasOffsets",
-                new object[] { divCanvas });
-            JObject? offsets = (JObject?)JsonConvert.DeserializeObject(data);
-
-            if (offsets is not null && offsets.HasValues)
-            { // Translation entre le canvas et la souris.
-                mouseX = eventArgs.ClientX - offsets.Value<double>("offsetLeft");
-                mouseY = eventArgs.ClientY - offsets.Value<double>("offsetTop");
-            }
-            if (currentCanvasContext is null)
-                currentCanvasContext = await myCanvas.CreateCanvas2DAsync();
-
-            await currentCanvasContext.SetFillStyleAsync(eventArgs.Buttons == 1 ?
-                                                                        currentcolor :
-                                                                        "White"); // Couleur si bouton gauche, blanc si bouton droit
-            await currentCanvasContext.FillRectAsync(mouseX, mouseY, pointsize, pointsize);
-        }
-    }
-}
\ No newline at end of file
+    (c) Cowboy Kim
+</footer>
\ No newline at end of file
diff --git a/BlazorCanvas/BlazorCanvas/Program.cs b/BlazorCanvas/BlazorCanvas/Program.cs
index a7052e2..4d2f05c 100644
--- a/BlazorCanvas/BlazorCanvas/Program.cs
+++ b/BlazorCanvas/BlazorCanvas/Program.cs
@@ -7,6 +7,7 @@ var builder = WebApplication.CreateBuilder(args);
 // Add services to the container.
 builder.Services.AddRazorPages();
 builder.Services.AddServerSideBlazor();
+builder.Services.AddScoped<CanvasService>();
 builder.Services.AddSingleton<WeatherForecastService>();
 
 var app = builder.Build();