diff --git a/src/App.tsx b/src/App.tsx
index ea6807db..1ff8bf7e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -16,7 +16,7 @@ import { useLocation } from 'react-router-dom';
 import ReactGA from "react-ga4";
 import { CreatorViewMode } from './components/creator/Editor/CreatorViewMode';
 import { useThemeContext } from './theme/ThemeContext';
-import { BlocklyPrueba } from './components/BlocklyPrueba';
+import { ToolboxPreview } from './components/creator/Editor/ChallengeDetailsEdition/ToolboxPreview';
 
 const AnalyticsComponent = () => {
   const location = useLocation();
@@ -84,7 +84,7 @@ const router = createHashRouter([{
   },
   {
     path: "/blocklyPrueba",
-    element: <BlocklyPrueba/>
+    element: <ToolboxPreview/>
   }
 ]}]);
 
diff --git a/src/blockly.ts b/src/blockly.ts
new file mode 100644
index 00000000..124253f6
--- /dev/null
+++ b/src/blockly.ts
@@ -0,0 +1,73 @@
+import Blockly from "blockly"
+import { BlockType } from "./components/blocks"
+
+type BlocklyBlockDefinition = {
+    message0: string
+    args0: any[]
+    colour: string
+    previousStatement?: boolean
+    nextStatement?: boolean
+}
+  
+type Toolbox = { kind: "categoryToolbox" | "flyoutToolbox", contents: ToolboxItem[]}
+
+
+type ToolboxItem = ToolboxBlock | ToolBoxCategory
+type ToolboxBlock = {kind: "block", type: string}
+type ToolBoxCategory = {kind: "category", name: string, contents: ToolboxItem[]}
+
+const blockTypeToToolboxBlock = (block: BlockType): ToolboxBlock => ({kind: "block", type: block.id})
+
+const createPrimitiveBlock = (id: string, message: string, icon?: string) => {
+    const colour = '#4a6cd4'
+  
+    const jsonInit: BlocklyBlockDefinition = {
+      message0: message,
+      colour,
+      args0: [],
+      previousStatement: true,
+      nextStatement: true
+    }
+  
+    if(icon) {
+      jsonInit.message0 = `%1 ${message}`
+      jsonInit.args0.push({
+        "type": "field_image",
+        "src": `imagenes/iconos/${icon}`,
+        "width": 16,
+        "height": 16,
+        "alt": "*"
+      })
+    }
+  
+    Blockly.Blocks[id] = {
+      init: function () {
+        this.jsonInit(jsonInit)
+      }}
+  }
+  
+  
+export const categoryToolboxFromBlocks = (blocks: BlockType[]): Toolbox => ({
+    kind: "categoryToolbox",
+    contents: [
+      {
+        kind: "category",
+        name: "Primitivas",
+        contents: blocks.filter(block => block.categoryId === "primitives").map(blockTypeToToolboxBlock)
+      }
+    ]
+})
+  
+export const uncategorizedToolboxFromBlocks = (blocks: BlockType[]): Toolbox => ({
+    kind: "flyoutToolbox",
+    contents: blocks.map(blockTypeToToolboxBlock)
+})
+
+export const setupBlocklyBlocks = (t: (key: string) => string) => {
+
+    createPrimitiveBlock("MoverACasillaArriba", t("blocks.blocks.moveUp"), "icono.arriba.png")
+    createPrimitiveBlock("MoverACasillaAbajo", t("blocks.blocks.moveDown"), "icono.abajo.png")
+    createPrimitiveBlock("MoverACasillaIzquierda", t("blocks.blocks.moveLeft"), "icono.izquierda.png")
+    createPrimitiveBlock("MoverACasillaDerecha", t("blocks.blocks.moveRight"), "icono.derecha.png")
+
+}
\ No newline at end of file
diff --git a/src/components/BlocklyPrueba.tsx b/src/components/BlocklyPrueba.tsx
deleted file mode 100644
index 6e4ba2ab..00000000
--- a/src/components/BlocklyPrueba.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import "./prueba.css";
-import { BlocklyWorkspace } from "react-blockly";
-import Blockly from "blockly";
-import { useTranslation } from "react-i18next";
-import { BlockType } from "./blocks";
-
-type BlocklyBlockDefinition = {
-  message0: string
-  args0: any[]
-  colour: string
-  previousStatement?: boolean
-  nextStatement?: boolean
-}
-
-type Toolbox = { kind: "categoryToolbox" | "flyoutToolbox", contents: ToolboxItem[]}
-
-type ToolboxItem = ToolboxBlock | ToolBoxCategory
-
-type ToolboxBlock = {kind: "block", type: string}
-type ToolBoxCategory = {kind: "category", name: string, contents: ToolboxItem[]}
-
-
-const createPrimitiveBlock = (id: string, message: string, icon?: string) => {
-  const colour = '#4a6cd4'
-
-  const jsonInit: BlocklyBlockDefinition = {
-    message0: message,
-    colour,
-    args0: [],
-    previousStatement: true,
-    nextStatement: true
-  }
-
-  if(icon) {
-    jsonInit.message0 = `%1 ${message}`
-    jsonInit.args0.push({
-      "type": "field_image",
-      "src": `imagenes/iconos/${icon}`,
-      "width": 16,
-      "height": 16,
-      "alt": "*"
-    })
-  }
-
-  Blockly.Blocks[id] = {
-    init: function () {
-      this.jsonInit(jsonInit)
-    }}
-}
-
-
-const categoryToolboxFromBlocks = (blocks: BlockType[]): Toolbox => ({
-  kind: "categoryToolbox",
-  contents: [
-    {
-      kind: "category",
-      name: "Primitivas",
-      contents: blocks.filter(block => block.categoryId === "primitives").map(blockTypeToToolboxBlock)
-    }
-  ]
-})
-
-const uncategorizedToolboxFromBlocks = (blocks: BlockType[]): Toolbox => ({
-  kind: "flyoutToolbox",
-  contents: blocks.map(blockTypeToToolboxBlock)
-})
-
-const blockTypeToToolboxBlock = (block: BlockType): ToolboxBlock => ({kind: "block", type: block.id})
-
-export const BlocklyPrueba = () => {
-  const {t} = useTranslation("blocks")
-
-  createPrimitiveBlock("MoverACasillaArriba", t("blocks.moveUp"), "icono.arriba.png")
-  createPrimitiveBlock("MoverACasillaAbajo", t("blocks.moveDown"), "icono.abajo.png")
-  createPrimitiveBlock("MoverACasillaIzquierda", t("blocks.moveLeft"), "icono.izquierda.png")
-  createPrimitiveBlock("MoverACasillaDerecha", t("blocks.moveRight"), "icono.derecha.png")
-
-  const toolboxBlocks: BlockType[] = [
-    {
-      id: 'MoverACasillaDerecha',
-      intlId: 'moveRight',
-      categoryId: 'primitives'
-  },
-  {
-      id: 'MoverACasillaIzquierda',
-      intlId: 'moveLeft',
-      categoryId: 'primitives'
-  },
-  {
-      id: 'MoverACasillaArriba',
-      intlId: 'moveUp',
-      categoryId: 'primitives'
-  },
-  {
-      id: 'MoverACasillaAbajo',
-      intlId: 'moveDown',
-      categoryId: 'primitives'
-  },
-  ]
-
-  return (
-      <>
-      <div style={{ height: "600px", width: "800px"}}>
-          <BlocklyWorkspace
-          toolboxConfiguration={categoryToolboxFromBlocks(toolboxBlocks)}
-          className="fill-height"
-          workspaceConfiguration={{trashcan:false, scrollbars: false}}
-          onWorkspaceChange={() => {Blockly.getMainWorkspace().clear()}}
-          />
-      </div>
-      </>
-  );
-};
diff --git a/src/components/creator/Editor/ChallengeDetailsEdition/ToolboxPreview.tsx b/src/components/creator/Editor/ChallengeDetailsEdition/ToolboxPreview.tsx
new file mode 100644
index 00000000..b3edb954
--- /dev/null
+++ b/src/components/creator/Editor/ChallengeDetailsEdition/ToolboxPreview.tsx
@@ -0,0 +1,49 @@
+import "./prueba.css";
+import { BlocklyWorkspace } from "react-blockly";
+import Blockly from "blockly";
+import { useTranslation } from "react-i18next";
+import { BlockType } from "../../../blocks";
+import { categoryToolboxFromBlocks, setupBlocklyBlocks } from "../../../../blockly";
+
+
+export const ToolboxPreview = () => {
+  const {t} = useTranslation()
+
+  setupBlocklyBlocks(t)
+
+  const toolboxBlocks: BlockType[] = [
+    {
+      id: 'MoverACasillaDerecha',
+      intlId: 'moveRight',
+      categoryId: 'primitives'
+  },
+  {
+      id: 'MoverACasillaIzquierda',
+      intlId: 'moveLeft',
+      categoryId: 'primitives'
+  },
+  {
+      id: 'MoverACasillaArriba',
+      intlId: 'moveUp',
+      categoryId: 'primitives'
+  },
+  {
+      id: 'MoverACasillaAbajo',
+      intlId: 'moveDown',
+      categoryId: 'primitives'
+  },
+  ]
+
+  return (
+      <>
+      <div style={{ height: "600px", width: "800px"}}>
+          <BlocklyWorkspace
+          toolboxConfiguration={categoryToolboxFromBlocks(toolboxBlocks)}
+          className="fill-height"
+          workspaceConfiguration={{trashcan:false, scrollbars: false}}
+          onWorkspaceChange={() => {Blockly.getMainWorkspace().clear()}}
+          />
+      </div>
+      </>
+  );
+};
diff --git a/src/components/prueba.css b/src/components/creator/Editor/ChallengeDetailsEdition/prueba.css
similarity index 100%
rename from src/components/prueba.css
rename to src/components/creator/Editor/ChallengeDetailsEdition/prueba.css