diff --git a/src/views/trials/trials-panel/reading/dicoms3D/components/ContourViewport.vue b/src/views/trials/trials-panel/reading/dicoms3D/components/ContourViewport.vue
new file mode 100644
index 00000000..c62aa6c0
--- /dev/null
+++ b/src/views/trials/trials-panel/reading/dicoms3D/components/ContourViewport.vue
@@ -0,0 +1,116 @@
+<template>
+    <div class="ContourViewport" ref="ContourViewport" id="ContourViewport"></div>
+</template>
+<script>
+import {
+    getRenderingEngine,
+    CONSTANTS,
+    setVolumesForViewports,
+    eventTarget,
+    Enums,
+    utilities,
+} from '@cornerstonejs/core'
+import * as cornerstoneTools from '@cornerstonejs/tools'
+import setCtTransferFunctionForVolumeActor from '@/views/trials/trials-panel/reading/dicoms/components/Fusion/js/setCtTransferFunctionForVolumeActor'
+import DicomEvent from '@/views/trials/trials-panel/reading/dicoms/components/DicomEvent'
+const {
+    Enums: csToolsEnums,
+    segmentation,
+    TrackballRotateTool,
+    ToolGroupManager
+} = cornerstoneTools
+const { MouseBindings, Events: toolsEvents } = csToolsEnums
+export default {
+    name: "ContourViewport",
+    props: {
+        renderingEngineId: {
+            type: String,
+            required: true
+        },
+        viewportId: {
+            type: String,
+            required: true
+        },
+        visitInfo: {
+            type: Object,
+            default: () => {
+                return {}
+            }
+        },
+        // visible: {
+        //     type: Boolean,
+        //     default: false
+        // },
+    },
+    data() {
+        return {
+            volumeId: null,
+        }
+    },
+    mounted() {
+        eventTarget.addEventListener(Enums.Events.WEB_WORKER_PROGRESS, (evt) => {
+            const { progress } = evt.detail;
+            console.log(progress, 'countour_progress')
+
+        });
+    },
+    methods: {
+        async setSeriesInfo(obj) {
+            try {
+                const renderingEngine = getRenderingEngine(this.renderingEngineId)
+                const viewport = renderingEngine.getViewport(this.viewportId)
+                let { volumeId, segmentationId } = obj
+                this.volumeId = volumeId
+                await setVolumesForViewports(
+                    renderingEngine,
+                    [{ volumeId, callback: setCtTransferFunctionForVolumeActor }],
+                    [this.viewportId]
+                );
+                // const volumeActor = viewport.getDefaultActor()
+                //     .actor;
+                // utilities.applyPreset(
+                //     volumeActor,
+                //     CONSTANTS.VIEWPORT_PRESETS.find((preset) => preset.name === 'CT-Bone')
+                // );
+                // volumeActor.setVisibility(false);
+                viewport.render();
+                const toolGroup = ToolGroupManager.getToolGroup(this.viewportId)
+                toolGroup.setToolActive(TrackballRotateTool.toolName, {
+                    bindings: [
+                        {
+                            mouseButton: MouseBindings.Primary,
+                        },
+                    ],
+                });
+                let s = segmentation.getActiveSegmentation(this.viewportId)
+                if (s) {
+                    await segmentation.removeSegmentationRepresentation(this.viewportId, {
+                        segmentationId: s.segmentationId,
+                        type: csToolsEnums.SegmentationRepresentations.Surface,
+                    })
+                }
+                console.log("ContourLoading...")
+                await segmentation.addSegmentationRepresentations(this.viewportId, [
+                    {
+                        segmentationId,
+                        type: csToolsEnums.SegmentationRepresentations.Contour,
+                    },
+                ]);
+            } catch (e) {
+                console.log(e)
+            }
+
+        },
+    }
+}
+</script>
+<style lang="scss" scoped>
+#ContourViewport {
+    width: 450px;
+    height: 300px;
+    position: fixed;
+    top: 100px;
+    z-index: -9999;
+    left: 100px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/trials/trials-panel/reading/dicoms3D/components/SurfaceViewport.vue b/src/views/trials/trials-panel/reading/dicoms3D/components/SurfaceViewport.vue
new file mode 100644
index 00000000..a0d2a1e8
--- /dev/null
+++ b/src/views/trials/trials-panel/reading/dicoms3D/components/SurfaceViewport.vue
@@ -0,0 +1,144 @@
+<template>
+    <div class="SurfaceViewport" ref="SurfaceViewport" v-show="visible" id="SurfaceViewport"></div>
+</template>
+<script>
+import {
+    getRenderingEngine,
+    CONSTANTS,
+    setVolumesForViewports,
+    eventTarget,
+    Enums,
+    utilities,
+} from '@cornerstonejs/core'
+import * as cornerstoneTools from '@cornerstonejs/tools'
+import setCtTransferFunctionForVolumeActor from '@/views/trials/trials-panel/reading/dicoms/components/Fusion/js/setCtTransferFunctionForVolumeActor'
+const {
+    Enums: csToolsEnums,
+    segmentation,
+    TrackballRotateTool,
+    ToolGroupManager
+} = cornerstoneTools
+const { MouseBindings, Events: toolsEvents } = csToolsEnums
+export default {
+    name: "SurfaceViewport",
+    props: {
+        renderingEngineId: {
+            type: String,
+            required: true
+        },
+        viewportId: {
+            type: String,
+            required: true
+        },
+        visitInfo: {
+            type: Object,
+            default: () => {
+                return {}
+            }
+        },
+        visible: {
+            type: Boolean,
+            default: false
+        },
+    },
+    data() {
+        return {
+            volumeId: null,
+            info: null
+        }
+    },
+    mounted() {
+        eventTarget.addEventListener(Enums.Events.WEB_WORKER_PROGRESS, (evt) => {
+            const { progress } = evt.detail;
+            console.log(progress, 'progress')
+        });
+    },
+    methods: {
+        async setSeriesInfo(obj) {
+            try {
+                const renderingEngine = getRenderingEngine(this.renderingEngineId)
+                const viewport = renderingEngine.getViewport(this.viewportId)
+                let { volumeId } = obj
+                this.info = obj
+                this.volumeId = volumeId
+                await setVolumesForViewports(
+                    renderingEngine,
+                    [{ volumeId, callback: setCtTransferFunctionForVolumeActor }],
+                    [this.viewportId]
+                );
+                const volumeActor = viewport.getDefaultActor()
+                    .actor;
+                utilities.applyPreset(
+                    volumeActor,
+                    CONSTANTS.VIEWPORT_PRESETS.find((preset) => preset.name === 'CT-Bone')
+                );
+                volumeActor.setVisibility(false);
+                viewport.render();
+
+            } catch (e) {
+                console.log(e)
+            }
+
+        },
+        async setSurface() {
+            let { segmentationId, segmentations } = this.info
+            const toolGroup = ToolGroupManager.getToolGroup(this.viewportId)
+            toolGroup.setToolActive(TrackballRotateTool.toolName, {
+                bindings: [
+                    {
+                        mouseButton: MouseBindings.Primary,
+                    },
+                ],
+            });
+            let s = segmentation.getActiveSegmentation(this.viewportId)
+            console.log(s)
+            if (s) {
+                await segmentation.removeSegmentationRepresentation(this.viewportId, {
+                    segmentationId: s.segmentationId,
+                    type: csToolsEnums.SegmentationRepresentations.Surface,
+                })
+            }
+            await segmentation.addSegmentationRepresentations(this.viewportId, [
+                {
+                    segmentationId,
+                    type: csToolsEnums.SegmentationRepresentations.Contour,
+                },
+            ]);
+            console.log("loading...")
+            this.$nextTick(async () => {
+                await segmentation.addSegmentationRepresentations(this.viewportId, [
+                    {
+                        segmentationId,
+                        type: csToolsEnums.SegmentationRepresentations.Surface,
+                    },
+                ]);
+                segmentations.segments.forEach(item => {
+                    segmentation.config.color.setSegmentIndexColor(this.viewportId, item.segmentationId, item.segmentIndex, this.hex2Rgb(item.color))
+                })
+            })
+        },
+        hex2Rgb(hexValue, alpha = 1) {
+            const rgx = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+            const hex = hexValue.replace(rgx, (m, r, g, b) => r + r + g + g + b + b);
+            const rgb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+            if (!rgb) {
+                return hexValue;
+            }
+            const r = parseInt(rgb[1], 16),
+                g = parseInt(rgb[2], 16),
+                b = parseInt(rgb[3], 16);
+            return [r, g, b, alpha * 255];
+        },
+    }
+}
+</script>
+<style lang="scss" scoped>
+#SurfaceViewport {
+    width: 450px;
+    height: 300px;
+    position: fixed;
+    top: 100px;
+    z-index: 9999;
+    left: 100px;
+}
+</style>
\ No newline at end of file