diff --git a/examples/color_patches/color_patches/server.py b/examples/color_patches/app.py
similarity index 71%
rename from examples/color_patches/color_patches/server.py
rename to examples/color_patches/app.py
index 34d0d744..d7c6741b 100644
--- a/examples/color_patches/color_patches/server.py
+++ b/examples/color_patches/app.py
@@ -4,10 +4,11 @@
 """
 
 # import webbrowser
-
-import mesa
-
-from .model import ColorPatches
+from color_patches.model import ColorPatches
+from mesa.visualization import (
+    SolaraViz,
+    make_space_component,
+)
 
 _COLORS = [
     "Aqua",
@@ -50,19 +51,19 @@ def color_patch_draw(cell):
     portrayal = {"Shape": "rect", "w": 1, "h": 1, "Filled": "true", "Layer": 0}
     portrayal["x"] = cell.get_row()
     portrayal["y"] = cell.get_col()
-    portrayal["Color"] = _COLORS[cell.get_state()]
+    portrayal["color"] = _COLORS[cell.state]
     return portrayal
 
 
-canvas_element = mesa.visualization.CanvasGrid(
-    color_patch_draw, grid_rows, grid_cols, canvas_width, canvas_height
+space_component = make_space_component(
+    color_patch_draw,
+    draw_grid=False,
 )
-
-server = mesa.visualization.ModularServer(
-    ColorPatches,
-    [canvas_element],
-    "Color Patches",
-    {"width": grid_rows, "height": grid_cols},
+model = ColorPatches()
+page = SolaraViz(
+    model,
+    components=[space_component],
+    model_params={"width": grid_rows, "height": grid_cols},
+    name="Color Patches",
 )
-
 # webbrowser.open('http://127.0.0.1:8521')  # TODO: make this configurable
diff --git a/examples/color_patches/color_patches/model.py b/examples/color_patches/color_patches/model.py
index cedb058d..45201950 100644
--- a/examples/color_patches/color_patches/model.py
+++ b/examples/color_patches/color_patches/model.py
@@ -5,9 +5,15 @@
 from collections import Counter
 
 import mesa
+from mesa.discrete_space.cell_agent import (
+    CellAgent,
+)
+from mesa.discrete_space.grid import (
+    OrthogonalMooreGrid,
+)
 
 
-class ColorCell(mesa.discrete_space.cell_agent.CellAgent):
+class ColorCell(CellAgent):
     """
     Represents a cell's opinion (visualized by a color)
     """
@@ -66,7 +72,7 @@ def __init__(self, width=20, height=20):
         The agents next state is first determined before updating the grid
         """
         super().__init__()
-        self._grid = mesa.experimental.cell_space.OrthogonalMooreGrid(
+        self._grid = OrthogonalMooreGrid(
             (width, height), torus=False, random=self.random
         )
 
diff --git a/examples/color_patches/requirements.txt b/examples/color_patches/requirements.txt
index ecd07eaf..ee1a5c22 100644
--- a/examples/color_patches/requirements.txt
+++ b/examples/color_patches/requirements.txt
@@ -1 +1,2 @@
-mesa~=2.0
\ No newline at end of file
+mesa[viz]>=3.0
+networkx
diff --git a/examples/color_patches/run.py b/examples/color_patches/run.py
deleted file mode 100644
index 53775321..00000000
--- a/examples/color_patches/run.py
+++ /dev/null
@@ -1,3 +0,0 @@
-from color_patches.server import server
-
-server.launch(open_browser=True)