diff --git a/src/components/tools/common.ts b/src/components/tools/common.ts
index a6ae524ea..7b6751bf1 100644
--- a/src/components/tools/common.ts
+++ b/src/components/tools/common.ts
@@ -1,5 +1,6 @@
 import { AnnotationToolStore } from '@/src/store/tools/useAnnotationTool';
 import { Maybe } from '@/src/types';
+import { AnnotationTool } from '@/src/types/annotation-tool';
 import { vtkAnnotationToolWidget } from '@/src/vtk/ToolWidgetUtils/utils';
 import vtkAbstractWidgetFactory from '@kitware/vtk.js/Widgets/Core/AbstractWidgetFactory';
 import vtkWidgetState from '@kitware/vtk.js/Widgets/Core/WidgetState';
@@ -59,10 +60,16 @@ export interface WidgetComponentMeta<
 
   /**
    * An optional render function
+   *
+   * @param viewId the view ID
+   * @param syncedState the synced state from the widget
+   * @param labelProps the label props associated with the tool
+   * @param tool an optional tool. Not available for the placing widget.
    */
   render?: (
     viewId: string,
     syncedState: SyncedState,
-    labelProps: Maybe<ToolStore['labels'][string]>
+    labelProps: Maybe<ToolStore['labels'][string]>,
+    tool?: AnnotationTool<ToolID>
   ) => VNode;
 }
diff --git a/src/components/tools/createWidget2DComponent.ts b/src/components/tools/createWidget2DComponent.ts
index c6b36f057..0da6c8559 100644
--- a/src/components/tools/createWidget2DComponent.ts
+++ b/src/components/tools/createWidget2DComponent.ts
@@ -146,7 +146,12 @@ export function createWidget2DComponent<
 
       return () =>
         currentSlice.value === tool.value.slice
-          ? meta.render?.(viewId.value, syncedState, labelProps.value)
+          ? meta.render?.(
+              viewId.value,
+              syncedState,
+              labelProps.value,
+              tool.value
+            )
           : null;
     },
   });
diff --git a/src/components/tools/polygon/PlacingPolygonWidget2D.vue b/src/components/tools/polygon/PlacingPolygonWidget2D.vue
deleted file mode 100644
index 60b419442..000000000
--- a/src/components/tools/polygon/PlacingPolygonWidget2D.vue
+++ /dev/null
@@ -1,152 +0,0 @@
-<script lang="ts">
-import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
-import {
-  computed,
-  defineComponent,
-  onMounted,
-  onUnmounted,
-  PropType,
-  toRefs,
-  watch,
-  watchEffect,
-} from 'vue';
-import vtkPlaneManipulator from '@kitware/vtk.js/Widgets/Manipulators/PlaneManipulator';
-import { useCurrentImage } from '@/src/composables/useCurrentImage';
-import { updatePlaneManipulatorFor2DView } from '@/src/utils/manipulators';
-import { LPSAxisDir } from '@/src/types/lps';
-import { onVTKEvent } from '@/src/composables/onVTKEvent';
-import vtkWidgetFactory, {
-  vtkPolygonViewWidget,
-  vtkPolygonWidgetState,
-} from '@/src/vtk/PolygonWidget';
-import createStandaloneState from '@/src/vtk/PolygonWidget/standaloneState';
-import { useViewWidget } from '@/src/composables/useViewWidget';
-import {
-  useSyncedPolygonState,
-  PolygonInitState,
-} from '@/src/components/tools/polygon/common';
-import SVG2DComponent from './PolygonSVG2D.vue';
-
-export default defineComponent({
-  name: 'PlacingPolygonWidget2D',
-  emits: ['placed'],
-  props: {
-    widgetManager: {
-      type: Object as PropType<vtkWidgetManager>,
-      required: true,
-    },
-    viewId: {
-      type: String,
-      required: true,
-    },
-    viewDirection: {
-      type: String as PropType<LPSAxisDir>,
-      required: true,
-    },
-    currentSlice: {
-      type: Number,
-      required: true,
-    },
-    color: String,
-  },
-  components: {
-    SVG2DComponent,
-  },
-  setup(props, { emit }) {
-    const { widgetManager, viewDirection, currentSlice } = toRefs(props);
-    const { currentImageID, currentImageMetadata } = useCurrentImage();
-
-    const widgetState = createStandaloneState() as vtkPolygonWidgetState;
-    const widgetFactory = vtkWidgetFactory.newInstance({
-      widgetState,
-    });
-
-    const syncedState = useSyncedPolygonState(widgetFactory);
-    const widget = useViewWidget<vtkPolygonViewWidget>(
-      widgetFactory,
-      widgetManager
-    );
-
-    onMounted(() => {
-      widgetState.setPlacing(true);
-    });
-
-    onUnmounted(() => {
-      widgetFactory.delete();
-    });
-
-    // --- reset on slice/image changes --- //
-
-    watch([currentSlice, currentImageID, widget], () => {
-      if (widget.value) {
-        widget.value.resetInteractions();
-        widget.value.getWidgetState().clearHandleList();
-      }
-    });
-
-    onVTKEvent(widget, 'onPlacedEvent', () => {
-      const initState: PolygonInitState = {
-        points: syncedState.points,
-      };
-      emit('placed', initState);
-
-      widget.value?.reset();
-      widgetState.setPlacing(true);
-    });
-
-    // --- manipulator --- //
-
-    const manipulator = vtkPlaneManipulator.newInstance();
-
-    onMounted(() => {
-      if (!widget.value) {
-        return;
-      }
-      widget.value.setManipulator(manipulator);
-    });
-
-    watchEffect(() => {
-      updatePlaneManipulatorFor2DView(
-        manipulator,
-        viewDirection.value,
-        currentSlice.value,
-        currentImageMetadata.value
-      );
-    });
-
-    // --- visibility --- //
-
-    onMounted(() => {
-      if (!widget.value) {
-        return;
-      }
-      // hide handle visibility, but not picking visibility
-      widget.value.setHandleVisibility(false);
-      widgetManager.value.renderWidgets();
-    });
-
-    // // when movePoint/mouse changes, get finishable manually as its not in store
-    // const finishable = ref(false);
-    // // const movePoint = computed(() => tool.value?.movePoint);
-    // watch([movePoint], () => {
-    //   finishable.value = !!widget.value?.getWidgetState().getFinishable();
-    // });
-
-    return {
-      state: syncedState,
-      finishable: computed(() => syncedState.finishable),
-    };
-  },
-});
-</script>
-
-<template>
-  <SVG2DComponent
-    :view-id="viewId"
-    :points="state.points"
-    :color="color"
-    :move-point="state.movePoint"
-    placing
-    :finishable="finishable"
-  />
-</template>
diff --git a/src/components/tools/polygon/PolygonTool.vue b/src/components/tools/polygon/PolygonTool.vue
index 3a241fd37..f90b3c906 100644
--- a/src/components/tools/polygon/PolygonTool.vue
+++ b/src/components/tools/polygon/PolygonTool.vue
@@ -1,127 +1,83 @@
-<template>
-  <div class="overlay-no-events">
-    <svg class="overlay-no-events">
-      <polygon-widget-2D
-        v-for="tool in tools"
-        :key="tool.id"
-        :tool-id="tool.id"
-        :current-slice="currentSlice"
-        :view-id="viewId"
-        :view-direction="viewDirection"
-        :widget-manager="widgetManager"
-        @contextmenu="openContextMenu(tool.id, $event)"
-      />
-      <placing-polygon-widget-2D
-        v-if="isToolActive"
-        :current-slice="currentSlice"
-        :color="activeLabelColor"
-        :view-id="viewId"
-        :view-direction="viewDirection"
-        :widget-manager="widgetManager"
-        @placed="onToolPlaced"
-      />
-    </svg>
-    <annotation-context-menu ref="contextMenu" :tool-store="activeToolStore" />
-  </div>
-</template>
-
 <script lang="ts">
-import { computed, defineComponent, PropType, toRefs } from 'vue';
-import { storeToRefs } from 'pinia';
-import { useCurrentImage } from '@/src/composables/useCurrentImage';
-import { useToolStore } from '@/src/store/tools';
-import { Tools } from '@/src/store/tools/types';
-import { getLPSAxisFromDir } from '@/src/utils/lps';
-import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
-import { LPSAxisDir } from '@/src/types/lps';
+import { createAnnotationToolComponent } from '@/src/components/tools/createAnnotationToolComponent';
+import { createPlacingWidget2DComponent } from '@/src/components/tools/createPlacingWidget2DComponent';
+import { createWidget2DComponent } from '@/src/components/tools/createWidget2DComponent';
 import { usePolygonStore } from '@/src/store/tools/polygons';
+import { Tools } from '@/src/store/tools/types';
+import type { PolygonStore } from '@/src/store/tools/polygons';
+import vtkPolygonWidget, {
+  vtkPolygonViewWidget,
+  vtkPolygonWidgetState,
+} from '@/src/vtk/PolygonWidget';
 import {
-  useContextMenu,
-  useCurrentTools,
-} from '@/src/composables/annotationTool';
-import { useCurrentFrameOfReference } from '@/src/composables/useCurrentFrameOfReference';
-import AnnotationContextMenu from '@/src/components/tools/AnnotationContextMenu.vue';
-import PlacingPolygonWidget2D from '@/src/components/tools/polygon/PlacingPolygonWidget2D.vue';
-import { PolygonInitState } from '@/src/components/tools/polygon/common';
-import PolygonWidget2D from './PolygonWidget2D.vue';
+  PolygonInitState,
+  PolygonSyncedState,
+  useSyncedPolygonState,
+} from '@/src/components/tools/polygon/common';
+import { WidgetComponentMeta } from '@/src/components/tools/common';
+import PolygonSVG2D from '@/src/components/tools/polygon/PolygonSVG2D.vue';
+import createStandaloneState from '@/src/vtk/PolygonWidget/standaloneState';
+import createPolygonWidgetState from '@/src/vtk/PolygonWidget/storeState';
+import { PolygonID } from '@/src/types/polygon';
+import { AnnotationToolStore } from '@/src/store/tools/useAnnotationTool';
+import { h } from 'vue';
 
-const useActiveToolStore = usePolygonStore;
-const toolType = Tools.Polygon;
-
-export default defineComponent({
-  name: 'PolygonTool',
-  props: {
-    viewId: {
-      type: String,
-      required: true,
-    },
-    currentSlice: {
-      type: Number,
-      required: true,
-    },
-    viewDirection: {
-      type: String as PropType<LPSAxisDir>,
-      required: true,
-    },
-    widgetManager: {
-      type: Object as PropType<vtkWidgetManager>,
-      required: true,
-    },
+const componentMeta: WidgetComponentMeta<
+  PolygonID,
+  PolygonStore,
+  vtkPolygonWidgetState,
+  vtkPolygonWidget,
+  vtkPolygonViewWidget,
+  PolygonSyncedState,
+  PolygonInitState
+> = {
+  name: 'PolygonWidget',
+  useToolStore: usePolygonStore,
+  createStandaloneState: () => createStandaloneState() as vtkPolygonWidgetState,
+  createStoreBackedState: (toolId: string, store: PolygonStore) =>
+    createPolygonWidgetState({ id: toolId, store }),
+  createWidgetFactory: (widgetState) =>
+    vtkPolygonWidget.newInstance({ widgetState }),
+  useSyncedState: useSyncedPolygonState,
+  resetPlacingWidget: (widget) => {
+    widget.reset();
+    widget.getWidgetState().setPlacing(true);
   },
-  components: {
-    PolygonWidget2D,
-    PlacingPolygonWidget2D,
-    AnnotationContextMenu,
-  },
-  setup(props) {
-    const { viewDirection, currentSlice } = toRefs(props);
-    const toolStore = useToolStore();
-    const activeToolStore = useActiveToolStore();
-    const { activeLabel } = storeToRefs(activeToolStore);
-
-    const { currentImageID } = useCurrentImage();
-    const isToolActive = computed(() => toolStore.currentTool === toolType);
-    const viewAxis = computed(() => getLPSAxisFromDir(viewDirection.value));
-
-    const currentFrameOfReference = useCurrentFrameOfReference(
-      viewDirection,
-      currentSlice
-    );
-
-    const onToolPlaced = (initState: PolygonInitState) => {
-      if (!currentImageID.value) return;
-      activeToolStore.addTool({
-        imageID: currentImageID.value,
-        frameOfReference: currentFrameOfReference.value,
-        slice: currentSlice.value,
-        label: activeLabel.value,
-        color: activeLabel.value
-          ? activeToolStore.labels[activeLabel.value].color
-          : undefined,
-        points: initState.points,
-      });
+  constructInitState: (syncedState) => {
+    return {
+      points: syncedState.points,
     };
+  },
+  render: (viewId, syncedState, labelProps, tool) => {
+    return h(PolygonSVG2D, {
+      viewId,
+      points: syncedState.points,
+      color: labelProps?.color,
+      movePoint: syncedState.movePoint,
+      placing: !tool,
+    });
+  },
+};
 
-    // --- right-click menu --- //
-
-    const { contextMenu, openContextMenu } = useContextMenu();
+const Widget2DComponent = createWidget2DComponent({
+  ...componentMeta,
+  name: 'PolygonWidget2D',
+});
 
-    const currentTools = useCurrentTools(activeToolStore, viewAxis);
+const PlacingWidget2DComponent = createPlacingWidget2DComponent({
+  ...componentMeta,
+  name: 'PlacingPolygonWidget2D',
+});
 
-    return {
-      tools: currentTools,
-      isToolActive,
-      activeLabelColor: computed(() => {
-        return (
-          activeLabel.value && activeToolStore.labels[activeLabel.value].color
-        );
-      }),
-      onToolPlaced,
-      contextMenu,
-      openContextMenu,
-      activeToolStore,
-    };
-  },
+export default createAnnotationToolComponent<
+  PolygonID,
+  AnnotationToolStore<PolygonID>
+>({
+  name: 'PolygonTool',
+  type: Tools.Polygon,
+  useToolStore: usePolygonStore,
+  Widget2DComponent,
+  PlacingWidget2DComponent,
 });
 </script>
 
diff --git a/src/components/tools/polygon/PolygonWidget2D.vue b/src/components/tools/polygon/PolygonWidget2D.vue
deleted file mode 100644
index c1168d452..000000000
--- a/src/components/tools/polygon/PolygonWidget2D.vue
+++ /dev/null
@@ -1,153 +0,0 @@
-<script lang="ts">
-import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
-import {
-  computed,
-  defineComponent,
-  onMounted,
-  onUnmounted,
-  PropType,
-  toRefs,
-  watch,
-  watchEffect,
-} from 'vue';
-import vtkPlaneManipulator from '@kitware/vtk.js/Widgets/Manipulators/PlaneManipulator';
-import { useCurrentImage } from '@/src/composables/useCurrentImage';
-import { updatePlaneManipulatorFor2DView } from '@/src/utils/manipulators';
-import { LPSAxisDir } from '@/src/types/lps';
-import { useRightClickContextMenu } from '@/src/composables/annotationTool';
-import { usePolygonStore as useStore } from '@/src/store/tools/polygons';
-import { PolygonID as ToolID } from '@/src/types/polygon';
-import vtkWidgetFactory, {
-  vtkPolygonViewWidget,
-  vtkPolygonWidgetState,
-} from '@/src/vtk/PolygonWidget';
-import { useViewStore } from '@/src/store/views';
-import createPolygonWidgetState from '@/src/vtk/PolygonWidget/storeState';
-import { useSyncedPolygonState } from '@/src/components/tools/polygon/common';
-import { useViewWidget } from '@/src/composables/useViewWidget';
-import SVG2DComponent from './PolygonSVG2D.vue';
-
-export default defineComponent({
-  name: 'PolygonWidget2D',
-  emits: ['contextmenu'],
-  props: {
-    toolId: {
-      type: String as unknown as PropType<ToolID>,
-      required: true,
-    },
-    widgetManager: {
-      type: Object as PropType<vtkWidgetManager>,
-      required: true,
-    },
-    viewId: {
-      type: String,
-      required: true,
-    },
-    viewDirection: {
-      type: String as PropType<LPSAxisDir>,
-      required: true,
-    },
-    currentSlice: {
-      type: Number,
-      required: true,
-    },
-  },
-  components: {
-    SVG2DComponent,
-  },
-  setup(props, { emit }) {
-    const { toolId, widgetManager, viewDirection, currentSlice, viewId } =
-      toRefs(props);
-
-    const toolStore = useStore();
-    const tool = computed(() => toolStore.toolByID[toolId.value]);
-    const viewProxy = computed(() => useViewStore().getViewProxy(viewId.value));
-
-    const widgetState = createPolygonWidgetState({
-      id: toolId.value,
-      store: toolStore,
-    }) as vtkPolygonWidgetState;
-    const widgetFactory = vtkWidgetFactory.newInstance({
-      widgetState,
-    });
-
-    const syncedState = useSyncedPolygonState(widgetFactory);
-    const widget = useViewWidget<vtkPolygonViewWidget>(
-      widgetFactory,
-      widgetManager
-    );
-
-    onMounted(() => {
-      viewProxy.value?.renderLater();
-    });
-
-    onUnmounted(() => {
-      widgetFactory.delete();
-    });
-
-    // --- right click handling --- //
-
-    useRightClickContextMenu(emit, widget);
-
-    // --- manipulator --- //
-
-    const manipulator = vtkPlaneManipulator.newInstance();
-
-    onMounted(() => {
-      if (!widget.value) {
-        return;
-      }
-      widget.value.setManipulator(manipulator);
-    });
-
-    const { currentImageMetadata } = useCurrentImage();
-
-    watchEffect(() => {
-      updatePlaneManipulatorFor2DView(
-        manipulator,
-        viewDirection.value,
-        tool.value?.slice ?? currentSlice.value,
-        currentImageMetadata.value
-      );
-    });
-
-    // --- visibility --- //
-
-    // toggles the pickability of the tool handles,
-    // since the 3D tool parts are visually hidden.
-    watch(
-      () => !!widget.value && tool.value?.slice === currentSlice.value,
-      (visible) => {
-        widget.value?.setVisibility(visible);
-      },
-      { immediate: true }
-    );
-
-    onMounted(() => {
-      if (!widget.value) {
-        return;
-      }
-      // hide handle visibility, but not picking visibility
-      widget.value.setHandleVisibility(false);
-      widgetManager.value.renderWidgets();
-    });
-
-    return {
-      tool,
-      state: syncedState,
-    };
-  },
-});
-</script>
-
-<template>
-  <SVG2DComponent
-    v-show="currentSlice === tool.slice"
-    :view-id="viewId"
-    :points="tool.points"
-    :color="tool.color"
-    :move-point="tool.movePoint"
-    :placing="tool.placing"
-    :finishable="state.finishable"
-  />
-</template>
diff --git a/src/components/tools/polygon/common.ts b/src/components/tools/polygon/common.ts
index 548dcf557..7c53a9802 100644
--- a/src/components/tools/polygon/common.ts
+++ b/src/components/tools/polygon/common.ts
@@ -10,10 +10,18 @@ export interface PolygonInitState {
   points: Vector3[];
 }
 
-export function useSyncedPolygonState(widgetFactory: vtkPolygonWidget) {
-  const syncedState = shallowReactive({
-    points: [] as Vector3[],
-    movePoint: null as Maybe<Vector3>,
+export interface PolygonSyncedState {
+  points: Vector3[];
+  movePoint: Maybe<Vector3>;
+  finishable: boolean;
+}
+
+export function useSyncedPolygonState(
+  widgetFactory: vtkPolygonWidget
+): PolygonSyncedState {
+  const syncedState = shallowReactive<PolygonSyncedState>({
+    points: [],
+    movePoint: null,
     finishable: false,
   });
 
diff --git a/src/store/tools/polygons.ts b/src/store/tools/polygons.ts
index 69f91d381..4710c04b0 100644
--- a/src/store/tools/polygons.ts
+++ b/src/store/tools/polygons.ts
@@ -50,3 +50,5 @@ export const usePolygonStore = defineStore('polygon', () => {
     deserialize,
   };
 });
+
+export type PolygonStore = ReturnType<typeof usePolygonStore>;