diff --git a/src/App.tsx b/src/App.tsx
index 112cdea..5bf8093 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,5 @@
-import { BubbleSortStarter } from "./visualizers/bubble-sort/start";
-import { BubbleSortRender } from "./visualizers/bubble-sort/render";
+import { Convolution2DStarter } from "./visualizers/convolution2d/start";
+import { Convolution2DRender } from "./visualizers/convolution2d/render";
 import { useVisualizer } from "./lib/hooks";
 import { useEffect, useState } from "react";
 
@@ -48,8 +48,8 @@ const App = () => {
     <button onClick={() => setEventOverride(0)}>Beginning</button>
     <button onClick={() => setEventOverride(events.length - 1)}>End</button>
     <small>Use arrow keys to navigate</small>
-    <BubbleSortStarter doStart={start}/>
-    <BubbleSortRender curState={curStateOverride} curEvent={curEventOverride}/>
+    <Convolution2DStarter doStart={start}/>
+    <Convolution2DRender curState={curStateOverride} curEvent={curEventOverride}/>
     <div>
       {events && events.map((x, i) => {
         return <div key={i}>
diff --git a/src/lib/hooks.tsx b/src/lib/hooks.tsx
index 8810f14..306955d 100644
--- a/src/lib/hooks.tsx
+++ b/src/lib/hooks.tsx
@@ -1,5 +1,5 @@
 import { useSyncExternalStore } from "react";
-import { globalStore } from "../visualizers/bubble-sort";
+import { globalStore } from "../visualizers/convolution2d";
 
 export const useVisualizer = () => {
     return useSyncExternalStore(globalStore.subscribe, globalStore.getCurSnapshot);
diff --git a/src/visualizers/convolution2d/matrix.tsx b/src/visualizers/convolution2d/matrix.tsx
index 0427edc..ab36d76 100644
--- a/src/visualizers/convolution2d/matrix.tsx
+++ b/src/visualizers/convolution2d/matrix.tsx
@@ -8,8 +8,8 @@ export interface Matrix {
     get: (row: number, column: number) => number;
 }
 
-export const enum PaddingType {
-    Reflect, Wrap, Edge, Zero 
+export enum PaddingType {
+    Reflect="reflect", Wrap="wrap", Edge="edge", Zero="zero"
 }
 
 export class ArrayMatrix implements Matrix {
@@ -75,6 +75,8 @@ const recalculateIndex = (
             return edgeIndex(correctedIndex, length);
         case PaddingType.Zero:
             return 0;
+        default:
+            throw Error("Unknown type: " + paddingType)
     }
 }
 
diff --git a/src/visualizers/convolution2d/start.tsx b/src/visualizers/convolution2d/start.tsx
index 392495e..854af5d 100644
--- a/src/visualizers/convolution2d/start.tsx
+++ b/src/visualizers/convolution2d/start.tsx
@@ -1,3 +1,4 @@
+import { useState } from "react"
 import { Convolution2DArguments } from "./convolution2d"
 import { PaddingType, ArrayMatrix } from "./matrix"
 
@@ -5,26 +6,36 @@ type Props = {
     doStart: (args: Convolution2DArguments, noStop: boolean) => void
 }
 
-const args: Convolution2DArguments = [
-    new ArrayMatrix([
-        [5, 4, 3, 2, 1],
-        [4, 3, 2, 1, 0],
-        [3, 2, 1, 0, 1],
-        [2, 1, 0, 1, 2],
-        [1, 0, 1, 2, 3],
-    ]),
-    new ArrayMatrix([
-        [0, 1, 0],
-        [1, 1, 1],
-        [0, 1, 0],
-    ]),
-    2,
-    3,
-    PaddingType.Edge,
-]
-
-export const Convolution2DStarter = ({ doStart}: Props) => {
+export const Convolution2DStarter = ({ doStart }: Props) => {
+    const options = Object.values(PaddingType);
+    const [selectedType, setSelectedType] = useState(PaddingType.Edge);
+    const args: Convolution2DArguments = [
+        new ArrayMatrix([
+            [5, 4, 3, 2, 1],
+            [4, 3, 2, 1, 0],
+            [3, 2, 1, 0, 1],
+            [2, 1, 0, 1, 2],
+            [1, 0, 1, 2, 3],
+        ]),
+        new ArrayMatrix([
+            [0, 1, 0],
+            [1, 1, 1],
+            [0, 1, 0],
+        ]),
+        2,
+        3,
+        selectedType,
+    ]
+    console.log(args[4]);
     return <div>
+        <select 
+            value={selectedType}
+            onChange={(op) => setSelectedType(op.target.value as PaddingType)}
+        >
+            {options.map((op) => <option value={op} key={op}>
+                {op}
+            </option>)}
+        </select>
         <button onClick={() => doStart(args, false)}>Start</button>
         <button onClick={() => doStart(args, true)}>Run Full</button>
     </div>;