diff --git a/app/starnet/annotation/page.tsx b/app/starnet/annotation/page.tsx
deleted file mode 100644
index 8d391d2b..00000000
--- a/app/starnet/annotation/page.tsx
+++ /dev/null
@@ -1,152 +0,0 @@
-'use client';
-
-import React, { useState, useRef } from 'react';
-import Canvas from '@/components/Projects/(classifications)/Annotation/Canvas';
-import Toolbar from '@/components/Projects/(classifications)/Annotation/Toolbar';
-import AnnotationList from '@/components/Projects/(classifications)/Annotation/AnnotationList';
-import { Annotation } from '@/types/Annotation';
-import { Upload } from 'lucide-react';
-import dynamic from 'next/dynamic';
-
-function AnnotationCreate() {
-  const [imageUrl, setImageUrl] = useState<string>('');
-  const [currentTool, setCurrentTool] = useState<string>('');
-  const [isDrawing, setIsDrawing] = useState(false);
-  const [annotations, setAnnotations] = useState<Annotation[]>([]);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-
-  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (file) {
-      const url = URL.createObjectURL(file);
-      setImageUrl(url);
-    }
-  };
-
-  const handleAddAnnotation = (annotation: Annotation) => {
-    setAnnotations([...annotations, annotation]);
-  };
-
-  const handleLabelChange = (index: number, newLabel: string) => {
-    const newAnnotations = [...annotations];
-    newAnnotations[index].label = newLabel;
-    setAnnotations(newAnnotations);
-  };
-
-  const handleDownload = () => {
-    if (!canvasRef.current) return;
-    
-    const canvas = canvasRef.current;
-    const ctx = canvas.getContext('2d');
-    if (!ctx) return;
-  
-    // Draw the image onto the canvas
-    const img = new Image();
-    img.src = imageUrl;
-    img.onload = () => {
-      // Clear the canvas before drawing
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-      ctx.drawImage(img, 0, 0);
-  
-      // Now draw the annotations (example, adjust based on how you manage annotations)
-      annotations.forEach((annotation) => {
-        const x = annotation.x ?? 0;
-        const y = annotation.y ?? 0;
-        const width = annotation.width ?? 0;
-        const height = annotation.height ?? 0;
-        
-        ctx.beginPath();
-        ctx.rect(x, y, width, height); // Safe to call now
-        ctx.strokeStyle = 'red';
-        ctx.lineWidth = 2;
-        ctx.stroke();
-        ctx.fillStyle = 'red';
-        ctx.fillText(annotation.label, x, y - 5); // Add label with default x and y        
-      });
-  
-      // Generate the data URL and trigger download
-      const dataUrl = canvas.toDataURL('image/png');
-      const link = document.createElement('a');
-      link.download = 'annotated-image.png';
-      link.href = dataUrl;
-      link.click();
-    };
-  };  
-
-  const handleShare = async () => {
-    if (!canvasRef.current) return;
-
-    const canvas = canvasRef.current;
-    const dataUrl = canvas.toDataURL('image/png');
-    const blob = await (await fetch(dataUrl)).blob();
-    const file = new File([blob], 'annotated-image.png', { type: 'image/png' });
-
-    if (navigator.share) {
-      await navigator.share({
-        files: [file],
-        title: 'Annotated Image',
-      });
-    } else {
-      alert('Web Share API is not supported in your browser');
-    }
-  };
-
-  return (
-    <div className="min-h-screen bg-gray-50 p-8">
-      <div className="max-w-6xl mx-auto">
-        <h1 className="text-3xl font-bold text-gray-900 mb-8">Image Annotator</h1>
-        
-        <div className="flex gap-8">
-          <div className="flex-1">
-            {!imageUrl ? (
-              <label className="flex flex-col items-center justify-center w-full h-[600px] border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50">
-                <div className="flex flex-col items-center justify-center pt-5 pb-6">
-                  <Upload className="w-12 h-12 text-gray-400 mb-4" />
-                  <p className="mb-2 text-sm text-gray-500">
-                    <span className="font-semibold">Click to upload</span> or drag and drop
-                  </p>
-                  <p className="text-xs text-gray-500">PNG, JPG or GIF</p>
-                </div>
-                <input
-                  type="file"
-                  className="hidden"
-                  accept="image/*"
-                  onChange={handleFileUpload}
-                />
-              </label>
-            ) : (
-              <div className="space-y-4">
-                <Toolbar
-                  currentTool={currentTool}
-                  onToolSelect={setCurrentTool}
-                  onDownload={handleDownload}
-                  onShare={handleShare}
-                />
-                <div ref={containerRef}>
-                  {/* <Canvas
-                    imageUrl={imageUrl}
-                    annotations={annotations}
-                    currentTool={currentTool}
-                    isDrawing={isDrawing}
-                    setIsDrawing={setIsDrawing}
-                    onAddAnnotation={handleAddAnnotation}
-                  /> */}
-                </div>
-                {/* Create a hidden canvas to draw the image and annotations */}
-                <canvas ref={canvasRef} style={{ display: 'none' }} width={800} height={600} />
-              </div>
-            )}
-          </div>
-          
-          <AnnotationList
-            annotations={annotations}
-            onLabelChange={handleLabelChange}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default AnnotationCreate;
\ No newline at end of file
diff --git a/app/tests/page.tsx b/app/tests/page.tsx
index 964c3dc5..a0467350 100644
--- a/app/tests/page.tsx
+++ b/app/tests/page.tsx
@@ -1,9 +1,7 @@
 "use client";
 
+import { ImageAnnotator } from "@/components/Projects/(classifications)/Annotating/Annotator";
 import React, { useState } from "react";
-import StarnetLayout from "@/components/Layout/Starnet";
-import FreeformUploadData from "@/components/Projects/(classifications)/FreeForm";
-// import { TopographicMap } from "@/components/topographic-map";
 
 export default function TestPage() {
     return (
@@ -11,7 +9,15 @@ export default function TestPage() {
           <>
               {/* <Greenhouse /> */}
               {/* <MiningComponent /> */}
-              <FreeformUploadData />
+              <main className="container mx-auto py-8">
+      <div className="flex flex-col items-center gap-6">
+        <h1 className="text-3xl font-bold">Image Annotator</h1>
+        <p className="text-muted-foreground text-center max-w-2xl">
+          Upload an image and use the pen tool to draw annotations. When you&apos;re done, download the annotated image.
+        </p>
+        <ImageAnnotator />
+      </div>
+    </main>
           </>
         // {/* </StarnetLayout> */}
     );
diff --git a/components/Projects/(classifications)/Annotating/Annotator.tsx b/components/Projects/(classifications)/Annotating/Annotator.tsx
new file mode 100644
index 00000000..4237f17f
--- /dev/null
+++ b/components/Projects/(classifications)/Annotating/Annotator.tsx
@@ -0,0 +1,152 @@
+"use client";
+
+import { useRef, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Download, Upload } from 'lucide-react';
+import { ImageUploader } from './ImageUploader';
+import { DrawingCanvas } from './DrawingCanvas';
+import { DrawingControls } from './DrawingControls';
+import { downloadAnnotatedImage } from './DrawingUtils';
+import type { Point, Line } from '@/types/Annotation';
+import { useToast } from "@/hooks/toast";
+
+export function ImageAnnotator() {
+  const [imageUrl, setImageUrl] = useState<string | null>(null);
+  const [isDrawing, setIsDrawing] = useState(false);
+  const [currentLine, setCurrentLine] = useState<Line>({ points: [], color: '#ff0000', width: 2 });
+  const [lines, setLines] = useState<Line[]>([]);
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+  const [strokeColor, setStrokeColor] = useState('#ff0000');
+  const [strokeWidth, setStrokeWidth] = useState(2);
+  const [isDownloading, setIsDownloading] = useState(false);
+  
+  const svgRef = useRef<SVGSVGElement>(null);
+  const imageRef = useRef<HTMLImageElement>(null);
+  const { toast } = useToast();
+  
+  const handleImageUpload = (file: File) => {
+    const url = URL.createObjectURL(file);
+    setImageUrl(url);
+    setLines([]);
+    setCurrentLine({ points: [], color: strokeColor, width: strokeWidth });
+  };
+
+  const handleImageLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {
+    const img = e.currentTarget;
+    setDimensions({
+      width: img.naturalWidth,
+      height: img.naturalHeight
+    });
+  };
+
+  const handleMouseDown = (point: Point) => {
+    setIsDrawing(true);
+    setCurrentLine({
+      points: [point],
+      color: strokeColor,
+      width: strokeWidth
+    });
+  };
+
+  const handleMouseMove = (point: Point) => {
+    if (isDrawing) {
+      setCurrentLine(prev => ({
+        ...prev,
+        points: [...prev.points, point]
+      }));
+    }
+  };
+
+  const handleMouseUp = () => {
+    if (isDrawing && currentLine.points.length > 0) {
+      setLines(prev => [...prev, currentLine]);
+      setCurrentLine({ points: [], color: strokeColor, width: strokeWidth });
+    }
+    setIsDrawing(false);
+  };
+
+  const handleDownload = async () => {
+    if (!svgRef.current || !imageRef.current) {
+      toast({
+        title: "Error",
+        description: "Image or drawing canvas not ready",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    setIsDownloading(true);
+    try {
+      await downloadAnnotatedImage(svgRef.current, imageRef.current);
+      toast({
+        title: "Success",
+        description: "Image downloaded successfully",
+      });
+    } catch (error) {
+      toast({
+        title: "Error",
+        description: error instanceof Error ? error.message : "Failed to download image",
+        variant: "destructive",
+      });
+    } finally {
+      setIsDownloading(false);
+    }
+  };
+
+  return (
+    <div className="flex flex-col items-center gap-4 p-4">
+      <div className="flex gap-4">
+        <ImageUploader onImageUpload={handleImageUpload} />
+        {imageUrl && (
+          <Button 
+            variant="outline" 
+            onClick={handleDownload}
+            disabled={isDownloading}
+          >
+            <Download className="mr-2 h-4 w-4" />
+            {isDownloading ? 'Downloading...' : 'Download'}
+          </Button>
+        )}
+      </div>
+
+      {imageUrl && (
+        <>
+          <DrawingControls
+            strokeColor={strokeColor}
+            strokeWidth={strokeWidth}
+            onColorChange={setStrokeColor}
+            onWidthChange={setStrokeWidth}
+          />
+          <div className="relative border rounded-lg overflow-hidden">
+            <img
+              ref={imageRef}
+              src={imageUrl}
+              alt="Upload an image to annotate"
+              className="max-w-full h-auto block"
+              style={{ maxHeight: '70vh' }}
+              onLoad={handleImageLoad}
+            />
+            <DrawingCanvas
+              ref={svgRef}
+              isDrawing={isDrawing}
+              currentLine={currentLine}
+              lines={lines}
+              onMouseDown={handleMouseDown}
+              onMouseMove={handleMouseMove}
+              onMouseUp={handleMouseUp}
+              width={dimensions.width}
+              height={dimensions.height}
+            />
+          </div>
+        </>
+      )}
+
+      {!imageUrl && (
+        <div className="flex flex-col items-center justify-center w-full h-64 border-2 border-dashed rounded-lg bg-gray-50 dark:bg-gray-800">
+          <Upload className="h-12 w-12 text-gray-400" />
+          <p className="mt-2 text-sm text-gray-500">Upload an image to begin annotating</p>
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/components/Projects/(classifications)/Annotating/DrawingCanvas.tsx b/components/Projects/(classifications)/Annotating/DrawingCanvas.tsx
new file mode 100644
index 00000000..eb833dac
--- /dev/null
+++ b/components/Projects/(classifications)/Annotating/DrawingCanvas.tsx
@@ -0,0 +1,79 @@
+"use client";
+
+import { forwardRef } from 'react';
+import type { Point, Line } from '@/types/Annotation';
+import { createLineGenerator, getMousePosition } from './DrawingUtils';
+
+interface DrawingCanvasProps {
+  isDrawing: boolean;
+  currentLine: Line;
+  lines: Line[];
+  onMouseDown: (point: Point) => void;
+  onMouseMove: (point: Point) => void;
+  onMouseUp: () => void;
+  width?: number;
+  height?: number;
+}
+
+export const DrawingCanvas = forwardRef<SVGSVGElement, DrawingCanvasProps>(({
+  isDrawing,
+  currentLine,
+  lines,
+  onMouseDown,
+  onMouseMove,
+  onMouseUp,
+  width,
+  height,
+}, ref) => {
+  const lineGenerator = createLineGenerator();
+
+  const handleMouseDown = (event: React.MouseEvent<SVGSVGElement>) => {
+    const svg = event.currentTarget;
+    const point = getMousePosition(event, svg);
+    onMouseDown(point);
+  };
+
+  const handleMouseMove = (event: React.MouseEvent<SVGSVGElement>) => {
+    if (!isDrawing) return;
+    const svg = event.currentTarget;
+    const point = getMousePosition(event, svg);
+    onMouseMove(point);
+  };
+
+  return (
+    <svg
+      ref={ref}
+      className="absolute top-0 left-0 w-full h-full"
+      width={width}
+      height={height}
+      viewBox={`0 0 ${width || 0} ${height || 0}`}
+      preserveAspectRatio="none"
+      onMouseDown={handleMouseDown}
+      onMouseMove={handleMouseMove}
+      onMouseUp={onMouseUp}
+      onMouseLeave={onMouseUp}
+    >
+      {lines.map((line, i) => (
+        <path
+          key={i}
+          d={lineGenerator(line.points) || ''}
+          fill="none"
+          stroke={line.color}
+          strokeWidth={line.width}
+          vectorEffect="non-scaling-stroke"
+        />
+      ))}
+      {currentLine.points.length > 0 && (
+        <path
+          d={lineGenerator(currentLine.points) || ''}
+          fill="none"
+          stroke={currentLine.color}
+          strokeWidth={currentLine.width}
+          vectorEffect="non-scaling-stroke"
+        />
+      )}
+    </svg>
+  );
+});
+
+DrawingCanvas.displayName = 'DrawingCanvas';
\ No newline at end of file
diff --git a/components/Projects/(classifications)/Annotating/DrawingControls.tsx b/components/Projects/(classifications)/Annotating/DrawingControls.tsx
new file mode 100644
index 00000000..c83e15c8
--- /dev/null
+++ b/components/Projects/(classifications)/Annotating/DrawingControls.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import type { DrawingControls } from '@/types/Annotation';
+
+export function DrawingControls({ 
+  strokeColor, 
+  strokeWidth, 
+  onColorChange, 
+  onWidthChange 
+}: DrawingControls) {
+  return (
+    <div className="flex items-center gap-4 p-4 bg-white rounded-lg shadow-sm">
+      <div className="flex items-center gap-2">
+        <Label htmlFor="stroke-color">Color:</Label>
+        <Input
+          id="stroke-color"
+          type="color"
+          value={strokeColor}
+          onChange={(e) => onColorChange(e.target.value)}
+          className="w-16 h-8 p-0"
+        />
+      </div>
+      <div className="flex items-center gap-2">
+        <Label htmlFor="stroke-width">Width:</Label>
+        <Input
+          id="stroke-width"
+          type="range"
+          min="1"
+          max="20"
+          value={strokeWidth}
+          onChange={(e) => onWidthChange(Number(e.target.value))}
+          className="w-32"
+        />
+        <span className="text-sm text-gray-500">{strokeWidth}px</span>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/components/Projects/(classifications)/Annotating/DrawingUtils.tsx b/components/Projects/(classifications)/Annotating/DrawingUtils.tsx
new file mode 100644
index 00000000..9703cd70
--- /dev/null
+++ b/components/Projects/(classifications)/Annotating/DrawingUtils.tsx
@@ -0,0 +1,111 @@
+import type { Point } from '@/types/Annotation';
+
+// Simple curve generator that creates a smooth path through points
+export const createLineGenerator = () => {
+  return (points: Point[]): string => {
+    if (points.length < 2) return '';
+
+    // Move to the first point
+    let path = `M ${points[0].x},${points[0].y}`;
+
+    // Create smooth curves between points
+    for (let i = 1; i < points.length - 2; i++) {
+      const current = points[i];
+      const next = points[i + 1];
+      
+      // Calculate control point as the midpoint between current and next
+      const controlX = (current.x + next.x) / 2;
+      const controlY = (current.y + next.y) / 2;
+      
+      path += ` Q ${current.x},${current.y} ${controlX},${controlY}`;
+    }
+
+    // For the last two points
+    if (points.length >= 2) {
+      const last = points[points.length - 1];
+      const secondLast = points[points.length - 2];
+      path += ` L ${last.x},${last.y}`;
+    }
+
+    return path;
+  };
+};
+
+export const getMousePosition = (
+  event: React.MouseEvent<SVGSVGElement>,
+  svg: SVGSVGElement
+): Point => {
+  const CTM = svg.getScreenCTM();
+  if (!CTM) return { x: 0, y: 0 };
+
+  const point = svg.createSVGPoint();
+  point.x = event.clientX;
+  point.y = event.clientY;
+  
+  const transformedPoint = point.matrixTransform(CTM.inverse());
+  return {
+    x: transformedPoint.x,
+    y: transformedPoint.y
+  };
+};
+
+export const downloadAnnotatedImage = async (
+  svgElement: SVGSVGElement,
+  imageElement: HTMLImageElement
+): Promise<void> => {
+  // Create canvas with the correct dimensions
+  const canvas = document.createElement('canvas');
+  const width = imageElement.naturalWidth;
+  const height = imageElement.naturalHeight;
+  canvas.width = width;
+  canvas.height = height;
+
+  const ctx = canvas.getContext('2d');
+  if (!ctx) {
+    throw new Error('Could not get canvas context');
+  }
+
+  // Draw the original image
+  ctx.drawImage(imageElement, 0, 0);
+
+  // Convert SVG to data URL
+  const svgData = new XMLSerializer().serializeToString(svgElement);
+  const svgBlob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
+  const svgUrl = URL.createObjectURL(svgBlob);
+
+  // Create and load SVG image
+  const svgImg = new Image();
+  
+  try {
+    await new Promise((resolve, reject) => {
+      svgImg.onload = resolve;
+      svgImg.onerror = () => reject(new Error('Failed to load SVG image'));
+      svgImg.src = svgUrl;
+    });
+
+    // Draw SVG on top of the original image
+    ctx.drawImage(svgImg, 0, 0, width, height);
+
+    // Convert to blob and download
+    const blob = await new Promise<Blob | null>((resolve) => {
+      canvas.toBlob(resolve, 'image/png');
+    });
+
+    if (!blob) {
+      throw new Error('Failed to create image blob');
+    }
+
+    // Create download link
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.download = 'annotated-image.png';
+    link.href = url;
+    link.click();
+
+    // Cleanup
+    URL.revokeObjectURL(url);
+    URL.revokeObjectURL(svgUrl);
+  } catch (error) {
+    throw new Error(`Failed to process image: ${error instanceof Error ? error.message : 'Unknown error'}`);
+  }
+};
\ No newline at end of file
diff --git a/components/Projects/(classifications)/Annotating/ImageUploader.tsx b/components/Projects/(classifications)/Annotating/ImageUploader.tsx
new file mode 100644
index 00000000..7afb3ff1
--- /dev/null
+++ b/components/Projects/(classifications)/Annotating/ImageUploader.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import { Button } from '@/components/ui/button';
+import { Upload } from 'lucide-react';
+
+interface ImageUploaderProps {
+  onImageUpload: (file: File) => void;
+}
+
+export function ImageUploader({ onImageUpload }: ImageUploaderProps) {
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      onImageUpload(file);
+    }
+  };
+
+  return (
+    <>
+      <Button
+        variant="outline"
+        onClick={() => document.getElementById('imageInput')?.click()}
+      >
+        <Upload className="mr-2 h-4 w-4" />
+        Upload Image
+      </Button>
+      <input
+        id="imageInput"
+        type="file"
+        accept="image/*"
+        onChange={handleChange}
+        className="hidden"
+      />
+    </>
+  );
+};
\ No newline at end of file
diff --git a/components/Projects/(classifications)/Annotation.tsx b/components/Projects/(classifications)/Annotation.tsx
deleted file mode 100644
index e0136744..00000000
--- a/components/Projects/(classifications)/Annotation.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { useRef, useEffect, useState } from "react";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
-import * as markerjs2 from "markerjs2";
-
-interface ImageProps {
-    src: string;
-    onUpload: (dataUrl: string) => Promise<void>;
-}
-
-export default function ImageAnnotation({ src, onUpload }: ImageProps) {
-    const imageRef = useRef<HTMLImageElement>(null);
-    const [markerArea, setMarkerArea] = useState<markerjs2.MarkerArea | null>(null);
-    const [annotationState, setAnnotationState] = useState<string | null>(null);
-
-    useEffect(() => {
-        if (imageRef.current) {
-            const ma = new markerjs2.MarkerArea(imageRef.current);
-            setMarkerArea(ma);
-
-            ma.addEventListener("render", (event) => {
-                if (imageRef.current) {
-                    setAnnotationState(JSON.stringify(ma.getState()));
-                    imageRef.current.src = event.dataUrl;
-                }
-            });
-
-            ma.addEventListener("close", () => {
-                setAnnotationState(JSON.stringify(ma.getState()));
-            });
-
-            ma.show(); // Automatically show the marker area when initialized
-        }
-    }, []);
-
-    const showMarkerArea = () => {
-        if (markerArea) {
-            if (annotationState) {
-                markerArea.restoreState(JSON.parse(annotationState));
-            }
-            markerArea.show();
-        }
-    };
-
-    const downloadImage = async () => {
-        if (imageRef.current) {
-            const dataUrl = imageRef.current.src; // Get the annotated image data URL
-            await onUpload(dataUrl);
-        }
-    };
-
-    return (
-        <Card>
-            <CardHeader>
-                <CardTitle>Annotate Image</CardTitle>
-                <CardDescription>Click the button to start annotating the image.</CardDescription>
-            </CardHeader>
-            <CardContent>
-                <div className="flex flex-col items-center">
-                    <img
-                        src={src}
-                        alt="Annotated Image"
-                        ref={imageRef}
-                        className="w-full h-auto max-w-md rounded-md"
-                    />
-                    <Button className="mt-4" onClick={showMarkerArea}>Annotate</Button>
-                    <Button className="mt-2" onClick={downloadImage}>Upload Annotation</Button>
-                </div>
-            </CardContent>
-        </Card>
-    );
-}
\ No newline at end of file
diff --git a/components/Projects/(classifications)/Annotation/AnnotationList.tsx b/components/Projects/(classifications)/Annotation/AnnotationList.tsx
deleted file mode 100644
index fca011e7..00000000
--- a/components/Projects/(classifications)/Annotation/AnnotationList.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react';
-
-interface AnnotationListProps {
-  annotations: Array<{
-    type: string;
-    label: string;
-  }>;
-  onLabelChange: (index: number, newLabel: string) => void;
-};
-
-export default function AnnotationList({ annotations, onLabelChange }: AnnotationListProps) {
-  return (
-    <div className="w-64 bg-white p-4 rounded-lg shadow-md">
-      <h2 className="text-lg font-semibold mb-4">Annotations</h2>
-      {annotations.length === 0 ? (
-        <p className="text-gray-500 text-sm">No annotations yet</p>
-      ) : (
-        <ul className="space-y-2">
-          {annotations.map((annotation, index) => (
-            <li key={index} className="flex items-center gap-2">
-              <span className={`w-3 h-3 rounded-full ${
-                annotation.type === 'rectangle' ? 'bg-green-500' : 'bg-red-500'
-              }`} />
-              <input
-                type="text"
-                value={annotation.label}
-                onChange={(e) => onLabelChange(index, e.target.value)}
-                className="flex-1 px-2 py-1 text-sm border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
-              />
-            </li>
-          ))}
-        </ul>
-      )}
-    </div>
-  );
-};
\ No newline at end of file
diff --git a/components/Projects/(classifications)/Annotation/Canvas.tsx b/components/Projects/(classifications)/Annotation/Canvas.tsx
deleted file mode 100644
index cb45daf3..00000000
--- a/components/Projects/(classifications)/Annotation/Canvas.tsx
+++ /dev/null
@@ -1,161 +0,0 @@
-import React, { useState, useRef } from 'react';
-// import { Stage, Layer, Image, Rect, Text, Line } from 'react-konva';
-import useImage from 'use-image';
-import { Annotation } from '@/types/Annotation';
-
-
-interface CanvasProps {
-  imageUrl: string;
-  annotations: Annotation[];
-  currentTool: string;
-  isDrawing: boolean;
-  setIsDrawing: (drawing: boolean) => void;
-  onAddAnnotation: (annotation: Annotation) => void;
-}
-
-export default function Canvas() {
-    return (
-        <></>
-    )
-}
-
-// export default function Canvas({ 
-//   imageUrl, 
-//   annotations, 
-//   currentTool, 
-//   isDrawing,
-//   setIsDrawing,
-//   onAddAnnotation 
-// }: CanvasProps) {
-//   const [image] = useImage(imageUrl);
-//   const [points, setPoints] = useState<number[]>([]);
-//   const [position, setPosition] = useState({ x: 0, y: 0 });
-//   const stageRef = useRef(null);
-
-//   const handleMouseDown = (e: any) => {
-//     if (!currentTool) return;
-
-//     const pos = e.target.getStage().getPointerPosition();
-//     setPosition({ x: pos.x, y: pos.y });
-    
-//     if (currentTool === 'pen') {
-//       setIsDrawing(true);
-//       setPoints([pos.x, pos.y]);
-//     }
-//   };
-
-//   const handleMouseMove = (e: any) => {
-//     if (!isDrawing || currentTool !== 'pen') return;
-
-//     const pos = e.target.getStage().getPointerPosition();
-//     setPoints([...points, pos.x, pos.y]);
-//   };
-
-//   const handleMouseUp = (e: any) => {
-//     if (!currentTool) return;
-
-//     const pos = e.target.getStage().getPointerPosition();
-    
-//     if (currentTool === 'pen') {
-//       setIsDrawing(false);
-//       onAddAnnotation({
-//         type: 'pen',
-//         points: points,
-//         label: 'Drawing'
-//       });
-//       setPoints([]);
-//     } else if (currentTool === 'rectangle') {
-//       const width = pos.x - position.x;
-//       const height = pos.y - position.y;
-      
-//       onAddAnnotation({
-//         type: 'rectangle',
-//         x: position.x,
-//         y: position.y,
-//         width,
-//         height,
-//         label: 'Rectangle'
-//       });
-//     }
-//   };
-
-//   return (
-//     <Stage
-//       ref={stageRef}
-//       width={800}
-//       height={600}
-//       onMouseDown={handleMouseDown}
-//       onMouseMove={handleMouseMove}
-//       onMouseUp={handleMouseUp}
-//       className="border border-gray-300 rounded-lg"
-//     >
-//       <Layer>
-//         {image && (
-//           <Image
-//             image={image}
-//             width={800}
-//             height={600}
-//             alt="Uploaded image"
-//           />
-//         )}
-        
-//         {annotations.map((annotation, i) => {
-//   if (annotation.type === 'rectangle') {
-//     return (
-//       <React.Fragment key={i}>
-//         <Rect
-//           x={annotation.x ?? 0} 
-//           y={annotation.y ?? 0}
-//           width={annotation.width ?? 0} 
-//           height={annotation.height ?? 0} 
-//           stroke="#00ff00"
-//           strokeWidth={2}
-//         />
-//         <Text
-//           x={annotation.x ?? 0}
-//           y={(annotation.y ?? 0) - 20}
-//           text={annotation.label || 'Label'}
-//           fontSize={16}
-//           fill="#00ff00"
-//         />
-//       </React.Fragment>
-//     );
-//   } else if (annotation.type === 'pen') {
-//     return (
-//       <React.Fragment key={i}>
-//         <Line
-//           points={annotation.points ?? []} // Default to empty array if undefined
-//           stroke="#ff0000"
-//           strokeWidth={2}
-//           tension={0.5}
-//           lineCap="round"
-//         />
-//         {annotation.points?.[0] !== undefined && annotation.points?.[1] !== undefined && (
-//           <Text
-//             x={annotation.points[0]}
-//             y={annotation.points[1] - 20}
-//             text={annotation.label || 'Label'}
-//             fontSize={16}
-//             fill="#ff0000"
-//           />
-//         )}
-//       </React.Fragment>
-//     );
-//   }
-//   return null;
-// })}
-
-        
-//         {isDrawing && (
-//           <Line
-//             points={points}
-//             stroke="#ff0000"
-//             strokeWidth={2}
-//             tension={0.5}
-//             lineCap="round"
-//           />
-//         )}
-//       </Layer>
-//     </Stage>
-//   );
-// };
\ No newline at end of file
diff --git a/components/Projects/(classifications)/Annotation/Toolbar.tsx b/components/Projects/(classifications)/Annotation/Toolbar.tsx
deleted file mode 100644
index 4484d1f9..00000000
--- a/components/Projects/(classifications)/Annotation/Toolbar.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react';
-import { Square, Pencil, Download, Share2 } from 'lucide-react';
-
-interface ToolbarProps {
-  currentTool: string;
-  onToolSelect: (tool: string) => void;
-  onDownload: () => void;
-  onShare: () => void;
-};
-
-export default function Toolbar({ currentTool, onToolSelect, onDownload, onShare }: ToolbarProps) {
-  return (
-    <div className="flex items-center gap-4 p-4 bg-white rounded-lg shadow-md">
-      <button
-        onClick={() => onToolSelect('rectangle')}
-        className={`p-2 rounded-lg transition-colors ${
-          currentTool === 'rectangle' ? 'bg-blue-100 text-blue-600' : 'hover:bg-gray-100'
-        }`}
-      >
-        <Square className="w-6 h-6" />
-      </button>
-      <button
-        onClick={() => onToolSelect('pen')}
-        className={`p-2 rounded-lg transition-colors ${
-          currentTool === 'pen' ? 'bg-blue-100 text-blue-600' : 'hover:bg-gray-100'
-        }`}
-      >
-        <Pencil className="w-6 h-6" />
-      </button>
-      <div className="w-px h-8 bg-gray-200" />
-      <button
-        onClick={onDownload}
-        className="p-2 rounded-lg hover:bg-gray-100 transition-colors"
-      >
-        <Download className="w-6 h-6" />
-      </button>
-      <button
-        onClick={onShare}
-        className="p-2 rounded-lg hover:bg-gray-100 transition-colors"
-      >
-        <Share2 className="w-6 h-6" />
-      </button>
-    </div>
-  );
-};
\ No newline at end of file
diff --git a/components/Projects/Satellite/PlanetFour.tsx b/components/Projects/Satellite/PlanetFour.tsx
index 7b44cd67..541acc58 100644
--- a/components/Projects/Satellite/PlanetFour.tsx
+++ b/components/Projects/Satellite/PlanetFour.tsx
@@ -6,7 +6,7 @@ import { useActivePlanet } from "@/context/ActivePlanet";
 import ClassificationForm from "../(classifications)/PostForm";
 
 import { Anomaly } from "../Zoodex/ClassifyOthersAnimals";
-import ImageAnnotation from "../(classifications)/Annotation";
+// import ImageAnnotation from "../(classifications)/Annotation";
 import * as markerjs2 from "markerjs2";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
diff --git a/components/Projects/Telescopes/DailyMinorPlanet.tsx b/components/Projects/Telescopes/DailyMinorPlanet.tsx
index 14375966..db4d0b78 100644
--- a/components/Projects/Telescopes/DailyMinorPlanet.tsx
+++ b/components/Projects/Telescopes/DailyMinorPlanet.tsx
@@ -6,7 +6,6 @@ import ClassificationForm from "../(classifications)/PostForm";
 
 import { Anomaly } from "../Zoodex/ClassifyOthersAnimals";
 import { Button } from "@/components/ui/button";
-import ImageAnnotation from "../(classifications)/Annotation";
 interface Props {
     anomalyid: number | bigint; 
 };
diff --git a/package.json b/package.json
index ed04217e..121f897a 100644
--- a/package.json
+++ b/package.json
@@ -105,4 +105,4 @@
     "tailwindcss": "^3.4.1",
     "typescript": "^5.6.3"
   }
-}
+}
\ No newline at end of file
diff --git a/types/Annotation.tsx b/types/Annotation.tsx
index f796234a..9e674a58 100644
--- a/types/Annotation.tsx
+++ b/types/Annotation.tsx
@@ -1,9 +1,23 @@
-export interface Annotation {
-    type: 'rectangle' | 'pen';
-    label: string;
-    x?: number;
-    y?: number;
-    width?: number;
-    height?: number;
-    points?: number[];
-  }
\ No newline at end of file
+export interface Point {
+  x: number;
+  y: number;
+};
+
+export interface Line {
+  points: Point[];
+  color: string;
+  width: number;
+};
+
+export interface DrawingState {
+  isDrawing: boolean;
+  currentLine: Line;
+  lines: Line[];
+};
+
+export interface DrawingControls {
+  strokeColor: string;
+  strokeWidth: number;
+  onColorChange: (color: string) => void;
+  onWidthChange: (width: number) => void;
+};
\ No newline at end of file