diff --git a/babel.config.js b/babel.config.js
index 397abca8..3f453d44 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,3 +1,5 @@
 module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"]
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
 };
diff --git a/package-lock.json b/package-lock.json
index bc4eacce..aa0f5c87 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,11 @@
 {
-  "name": "schema-ui",
+  "name": "reproschema-ui",
   "version": "0.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "schema-ui",
+      "name": "reproschema-ui",
       "version": "0.1.0",
       "dependencies": {
         "@adapttive/vue-markdown": "^4.0.2",
diff --git a/src/components/CanvasInput.vue b/src/components/CanvasInput.vue
new file mode 100644
index 00000000..3af8749c
--- /dev/null
+++ b/src/components/CanvasInput.vue
@@ -0,0 +1,183 @@
+<template>
+  <div class="canvas-container">
+    <canvas ref="canvas" :width="width" :height="height" @mousedown="startDrawing" @mousemove="draw" @mouseup="stopDrawing" @mouseleave="stopDrawing"></canvas>
+    <div class="canvas-controls">
+      <button @click="clearCanvas" class="btn btn-secondary">Clear</button>
+      <input type="color" v-model="currentColor" title="Choose color">
+      <input type="range" v-model="lineWidth" min="1" max="20" title="Line width">
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CanvasInput',
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    width: {
+      type: Number,
+      default: 800
+    },
+    height: {
+      type: Number,
+      default: 400
+    },
+    backgroundImage: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      canvas: null,
+      ctx: null,
+      isDrawing: false,
+      currentColor: '#000000',
+      lineWidth: 5,
+      lastX: 0,
+      lastY: 0,
+      image: null
+    }
+  },
+  mounted() {
+    this.canvas = this.$refs.canvas;
+    this.ctx = this.canvas.getContext('2d');
+    this.ctx.lineCap = 'round';
+    this.ctx.lineJoin = 'round';
+    
+    // Load background image if provided
+    if (this.backgroundImage) {
+      this.image = new Image();
+      this.image.onload = () => {
+        // Draw the image maintaining aspect ratio
+        const scale = Math.min(
+          this.width / this.image.width,
+          this.height / this.image.height
+        );
+        const x = (this.width - this.image.width * scale) / 2;
+        const y = (this.height - this.image.height * scale) / 2;
+        this.ctx.drawImage(
+          this.image,
+          x, y,
+          this.image.width * scale,
+          this.image.height * scale
+        );
+      };
+      this.image.src = this.backgroundImage;
+    }
+
+    // Load existing drawing if value exists
+    if (this.value) {
+      const img = new Image();
+      img.onload = () => {
+        this.ctx.drawImage(img, 0, 0);
+      };
+      img.src = this.value;
+    }
+  },
+  methods: {
+    startDrawing(event) {
+      this.isDrawing = true;
+      const rect = this.canvas.getBoundingClientRect();
+      this.lastX = event.clientX - rect.left;
+      this.lastY = event.clientY - rect.top;
+    },
+    draw(event) {
+      if (!this.isDrawing) return;
+      
+      const rect = this.canvas.getBoundingClientRect();
+      const currentX = event.clientX - rect.left;
+      const currentY = event.clientY - rect.top;
+      
+      this.ctx.beginPath();
+      this.ctx.strokeStyle = this.currentColor;
+      this.ctx.lineWidth = this.lineWidth;
+      this.ctx.moveTo(this.lastX, this.lastY);
+      this.ctx.lineTo(currentX, currentY);
+      this.ctx.stroke();
+      
+      this.lastX = currentX;
+      this.lastY = currentY;
+      
+      this.$emit('input', this.canvas.toDataURL());
+    },
+    stopDrawing() {
+      this.isDrawing = false;
+    },
+    clearCanvas() {
+      this.ctx.clearRect(0, 0, this.width, this.height);
+      // Redraw background image if it exists
+      if (this.image) {
+        const scale = Math.min(
+          this.width / this.image.width,
+          this.height / this.image.height
+        );
+        const x = (this.width - this.image.width * scale) / 2;
+        const y = (this.height - this.image.height * scale) / 2;
+        this.ctx.drawImage(
+          this.image,
+          x, y,
+          this.image.width * scale,
+          this.image.height * scale
+        );
+      }
+      this.$emit('input', this.canvas.toDataURL());
+    }
+  }
+}
+</script>
+
+<style scoped>
+.canvas-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  margin: 1rem 0;
+}
+
+canvas {
+  border: 1px solid #ccc;
+  background: white;
+  cursor: crosshair;
+}
+
+.canvas-controls {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
+input[type="color"] {
+  width: 50px;
+  height: 30px;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+input[type="range"] {
+  width: 100px;
+}
+
+.btn {
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.9rem;
+}
+
+.btn-secondary {
+  background-color: #6c757d;
+  color: white;
+}
+
+.btn-secondary:hover {
+  background-color: #5a6268;
+}
+</style> 
\ No newline at end of file
diff --git a/src/components/InputSelector/InputSelector.vue b/src/components/InputSelector/InputSelector.vue
index ced222d0..b4e71338 100644
--- a/src/components/InputSelector/InputSelector.vue
+++ b/src/components/InputSelector/InputSelector.vue
@@ -172,6 +172,16 @@
         :init="init" v-on:valueChanged="sendData"/>
     </div>
 
+    <!-- If type is canvas drawing -->
+    <div v-else-if="inputType === 'canvas'">
+      <CanvasInput
+        :constraints="valueConstraints"
+        :selected_language="selected_language"
+        :init="init"
+        :backgroundImage="ui.backgroundImage"
+        v-on:valueChanged="sendData"/>
+    </div>
+
     <!-- If type is a slider -->
     <div v-else-if="inputType === 'slider'">
       <SliderInput
@@ -255,18 +265,17 @@ import IntegerInput from '../Inputs/WebIntegerInput/';
 import FloatInput from '../Inputs/WebFloatInput/';
 import RangeInput from '../Inputs/RangeInput/';
 import DateInput from '../Inputs/YearInput/';
-import DocumentUpload from '../Inputs/DocumentUpload';
-import MultiTextInput from '../Inputs/MultiTextInput';
-import SliderInput from '../Inputs/SliderInput';
-import TimeRange from '../Inputs/TimeRange';
-import SelectInput from '../Inputs/SelectInput';
-// import AudioCheck from '../Inputs/AudioCheck';
-import StaticReadOnly from '../Inputs/StaticReadOnly';
-import SaveData from '../Inputs/SaveData/SaveData';
-import StudySign from '../StudySign/StudySign';
-// import Static from '../Inputs/Static';
-import EmailInput from '../Inputs/EmailInput';
-import ParticipantId from '../Inputs/ParticipantId/ParticipantId';
+import DocumentUpload from '../Inputs/DocumentUpload/';
+import MultiTextInput from '../Inputs/MultiTextInput/';
+import SliderInput from '../Inputs/SliderInput/';
+import TimeRange from '../Inputs/TimeRange/';
+import SelectInput from '../Inputs/SelectInput/';
+import StaticReadOnly from '../Inputs/StaticReadOnly/';
+import SaveData from '../Inputs/SaveData/';
+import StudySign from '../StudySign/';
+import EmailInput from '../Inputs/EmailInput/';
+import ParticipantId from '../Inputs/ParticipantId/';
+import CanvasInput from '../Inputs/CanvasInput/';
 
 
 export default {
@@ -308,6 +317,11 @@ export default {
     ipAddress: {
       type: String,
     },
+    ui: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    }
   },
   components: {
     ParticipantId,
@@ -328,7 +342,7 @@ export default {
     TimeRange,
     SelectInput,
     StaticReadOnly,
-    // Static,
+    CanvasInput,
   },
   data() {
     return {
diff --git a/src/components/Inputs/CanvasInput/CanvasInput.vue b/src/components/Inputs/CanvasInput/CanvasInput.vue
new file mode 100644
index 00000000..e9073d91
--- /dev/null
+++ b/src/components/Inputs/CanvasInput/CanvasInput.vue
@@ -0,0 +1,203 @@
+<template>
+  <div class="CanvasInput">
+    <b-form ref="form" @submit="onSubmit">
+      <div class="canvas-container">
+        <canvas 
+          ref="drawingCanvas"
+          :width="canvasWidth"
+          :height="canvasHeight"
+          @mousedown="startDrawing"
+          @mousemove="draw"
+          @mouseup="stopDrawing"
+          @mouseleave="stopDrawing"
+          @touchstart="startDrawing"
+          @touchmove="draw"
+          @touchend="stopDrawing"
+        ></canvas>
+        <div class="canvas-controls mt-2">
+          <b-button variant="secondary" @click="clearCanvas" class="mr-2">Clear</b-button>
+          <b-button variant="primary" @click="undo" :disabled="!canUndo">Undo</b-button>
+        </div>
+      </div>
+      <b-button type="submit" class="mt-3">{{ $t('submit-button')}}</b-button>
+    </b-form>
+  </div>
+</template>
+
+<script>
+import config from '@/config';
+
+export default {
+  name: 'CanvasInput',
+  props: ['constraints', 'init', 'selected_language', 'backgroundImage'],
+  data() {
+    return {
+      isDrawing: false,
+      canvasWidth: 800,
+      canvasHeight: 400,
+      lastX: 0,
+      lastY: 0,
+      drawingHistory: [],
+      currentPath: [],
+      canUndo: false,
+      image: null,
+      ctx: null
+    }
+  },
+  mounted() {
+    console.log('CanvasInput mounted with backgroundImage:', this.backgroundImage);
+    this.initializeCanvas()
+    if (this.init) {
+      this.loadInitialDrawing(this.init)
+    }
+    if (this.backgroundImage) {
+      console.log('Loading background image:', this.backgroundImage);
+      this.image = new Image();
+      this.image.crossOrigin = 'anonymous';
+      this.image.onload = () => {
+        console.log('Background image loaded successfully');
+        // Draw the image maintaining aspect ratio
+        const scale = Math.min(
+          this.canvasWidth / this.image.width,
+          this.canvasHeight / this.image.height
+        );
+        const x = (this.canvasWidth - this.image.width * scale) / 2;
+        const y = (this.canvasHeight - this.image.height * scale) / 2;
+        this.ctx.drawImage(
+          this.image,
+          x, y,
+          this.image.width * scale,
+          this.image.height * scale
+        );
+      };
+      this.image.onerror = (error) => {
+        console.error('Error loading background image:', error);
+      };
+      // Use the protocol URL from config
+      const baseUrl = config.githubSrc.split('/DemoProtocol/')[0];
+      const imagePath = this.backgroundImage.startsWith('./') ? this.backgroundImage.slice(2) : this.backgroundImage;
+      this.image.src = `${baseUrl}/activities/VisuospatialExecutive/${imagePath}`;
+    }
+  },
+  methods: {
+    initializeCanvas() {
+      const canvas = this.$refs.drawingCanvas
+      this.ctx = canvas.getContext('2d')
+      this.ctx.strokeStyle = '#000000'
+      this.ctx.lineWidth = 2
+      this.ctx.lineCap = 'round'
+      this.ctx.lineJoin = 'round'
+    },
+    startDrawing(event) {
+      this.isDrawing = true
+      const pos = this.getPosition(event)
+      this.lastX = pos.x
+      this.lastY = pos.y
+      this.currentPath = [{ x: pos.x, y: pos.y }]
+    },
+    draw(event) {
+      if (!this.isDrawing) return
+      
+      const pos = this.getPosition(event)
+      
+      this.ctx.beginPath()
+      this.ctx.moveTo(this.lastX, this.lastY)
+      this.ctx.lineTo(pos.x, pos.y)
+      this.ctx.stroke()
+      
+      this.lastX = pos.x
+      this.lastY = pos.y
+      this.currentPath.push({ x: pos.x, y: pos.y })
+    },
+    stopDrawing() {
+      if (this.isDrawing) {
+        this.isDrawing = false
+        if (this.currentPath.length > 1) {
+          this.drawingHistory.push(this.currentPath)
+          this.canUndo = true
+        }
+      }
+    },
+    getPosition(event) {
+      const canvas = this.$refs.drawingCanvas
+      const rect = canvas.getBoundingClientRect()
+      const x = (event.clientX || event.touches[0].clientX) - rect.left
+      const y = (event.clientY || event.touches[0].clientY) - rect.top
+      return { x, y }
+    },
+    clearCanvas() {
+      this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
+      this.drawingHistory = []
+      this.canUndo = false
+      if (this.image) {
+        // Redraw background image if it exists
+        const scale = Math.min(
+          this.canvasWidth / this.image.width,
+          this.canvasHeight / this.image.height
+        );
+        const x = (this.canvasWidth - this.image.width * scale) / 2;
+        const y = (this.canvasHeight - this.image.height * scale) / 2;
+        this.ctx.drawImage(
+          this.image,
+          x, y,
+          this.image.width * scale,
+          this.image.height * scale
+        );
+      }
+      this.$emit('input', this.$refs.drawingCanvas.toDataURL());
+    },
+    undo() {
+      if (this.drawingHistory.length > 0) {
+        this.drawingHistory.pop()
+        this.redrawCanvas()
+        this.canUndo = this.drawingHistory.length > 0
+      }
+    },
+    redrawCanvas() {
+      this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
+      
+      this.drawingHistory.forEach(path => {
+        if (path.length > 1) {
+          this.ctx.beginPath()
+          this.ctx.moveTo(path[0].x, path[0].y)
+          for (let i = 1; i < path.length; i++) {
+            this.ctx.lineTo(path[i].x, path[i].y)
+          }
+          this.ctx.stroke()
+        }
+      })
+    },
+    loadInitialDrawing(data) {
+      if (data && data.paths) {
+        this.drawingHistory = data.paths
+        this.redrawCanvas()
+        this.canUndo = this.drawingHistory.length > 0
+      }
+    },
+    onSubmit(e) {
+      e.preventDefault()
+      const canvas = this.$refs.drawingCanvas
+      const imageData = canvas.toDataURL('image/png')
+      this.$emit('valueChanged', {
+        imageData,
+        paths: this.drawingHistory
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.canvas-container {
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 10px;
+  background: #fff;
+}
+
+canvas {
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  touch-action: none;
+}
+</style> 
\ No newline at end of file
diff --git a/src/components/Inputs/CanvasInput/index.js b/src/components/Inputs/CanvasInput/index.js
new file mode 100644
index 00000000..c6d3ddd1
--- /dev/null
+++ b/src/components/Inputs/CanvasInput/index.js
@@ -0,0 +1,2 @@
+import CanvasInput from './CanvasInput.vue';
+export default CanvasInput; 
\ No newline at end of file
diff --git a/src/components/StudySign/index.js b/src/components/StudySign/index.js
index e69de29b..85320efd 100644
--- a/src/components/StudySign/index.js
+++ b/src/components/StudySign/index.js
@@ -0,0 +1,2 @@
+import StudySign from './StudySign.vue';
+export default StudySign;
diff --git a/src/components/SurveyItem/SurveyItem.vue b/src/components/SurveyItem/SurveyItem.vue
index c9ab2b8b..c7f53f0a 100644
--- a/src/components/SurveyItem/SurveyItem.vue
+++ b/src/components/SurveyItem/SurveyItem.vue
@@ -18,6 +18,7 @@
                        :ipAddress="clientIp"
                        :showPassOptions="showPassOptions"
                        :showItemPassOptions="itemAllow"
+                       :ui="uiConfig"
                        v-on:skip="sendSkip"
                        v-on:dontKnow="sendDontKnow"
                        v-on:next="sendNext"
@@ -181,6 +182,19 @@
         return 'N/A';
         /* eslint-enable */
       },
+      uiConfig() {
+        const config = {};
+        if (this.data['http://schema.repronim.org/inputType']) {
+          config.inputType = this.data['http://schema.repronim.org/inputType'][0]['@value'];
+        }
+        if (this.data['http://schema.repronim.org/backgroundImage']) {
+          config.backgroundImage = this.data['http://schema.repronim.org/backgroundImage'][0]['@value'];
+        }
+        if (this.data['http://schema.repronim.org/allow']) {
+          config.allow = this.data['http://schema.repronim.org/allow'].map(a => a['@id']);
+        }
+        return config;
+      },
       widgetType() {
         if (this.data['http://schema.org/readonlyValue']) {
           return this.data['http://schema.org/readonlyValue'][0]['@value'];