diff --git a/src/webapp/app/(authenticated)/annotations/create/page.tsx b/src/webapp/app/(authenticated)/annotations/create/page.tsx
index d8269df9..0c08e4d3 100644
--- a/src/webapp/app/(authenticated)/annotations/create/page.tsx
+++ b/src/webapp/app/(authenticated)/annotations/create/page.tsx
@@ -5,6 +5,7 @@ import { useRouter } from "next/navigation";
 import { useAuth } from "@/hooks/useAuth";
 import { annotationService } from "@/services/api";
 import { formatAnnotationValue } from "@/components/annotations/utils/valueFormatters";
+import { Template, TemplateDetail } from "@/types/api";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -31,9 +32,9 @@ export default function CreateAnnotationPage() {
 
   const [url, setUrl] = useState("");
   const [selectedTemplateId, setSelectedTemplateId] = useState("");
-  const [templates, setTemplates] = useState([]);
-  const [selectedTemplate, setSelectedTemplate] = useState(null);
-  const [formValues, setFormValues] = useState({});
+  const [templates, setTemplates] = useState<Template[]>([]);
+  const [selectedTemplate, setSelectedTemplate] = useState<TemplateDetail | null>(null);
+  const [formValues, setFormValues] = useState<Record<string, string>>({});
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
   const [success, setSuccess] = useState(false);
diff --git a/src/webapp/services/api.ts b/src/webapp/services/api.ts
index 07ff7ac8..6146745f 100644
--- a/src/webapp/services/api.ts
+++ b/src/webapp/services/api.ts
@@ -1,6 +1,14 @@
 /**
  * Client-side API service for making requests to the backend
  */
+import {
+  Template,
+  TemplateDetail,
+  Annotation,
+  AnnotationDetail,
+  CreateTemplateResponse,
+  CreateAnnotationsResponse
+} from "@/types/api";
 
 // Get the base URL for API requests from environment variables
 const getApiBaseUrl = (): string => {
@@ -262,7 +270,7 @@ export const annotationService = {
         required: boolean;
       }>;
     }
-  ): Promise<{ templateId: string }> => {
+  ): Promise<CreateTemplateResponse> => {
     const apiBaseUrl = getApiBaseUrl();
     return authenticatedRequest(
       `${apiBaseUrl}/api/annotations/templates`,
@@ -287,7 +295,7 @@ export const annotationService = {
         note?: string;
       }>;
     }
-  ): Promise<{ annotationIds: string[] }> => {
+  ): Promise<CreateAnnotationsResponse> => {
     const apiBaseUrl = getApiBaseUrl();
     return authenticatedRequest(
       `${apiBaseUrl}/api/annotations/from-template`,
@@ -302,15 +310,7 @@ export const annotationService = {
    */
   getTemplates: async (
     accessToken: string
-  ): Promise<
-    Array<{
-      id: string;
-      name: string;
-      description: string;
-      createdAt: string;
-      fieldCount: number;
-    }>
-  > => {
+  ): Promise<Template[]> => {
     const apiBaseUrl = getApiBaseUrl();
     return authenticatedRequest(
       `${apiBaseUrl}/api/annotations/templates`,
@@ -325,21 +325,7 @@ export const annotationService = {
   getTemplateById: async (
     accessToken: string,
     templateId: string
-  ): Promise<{
-    id: string;
-    name: string;
-    description: string;
-    fields: Array<{
-      id: string;
-      name: string;
-      description: string;
-      definitionType: string;
-      definition: any;
-      required: boolean;
-    }>;
-    createdAt: string;
-    curatorId: string;
-  }> => {
+  ): Promise<TemplateDetail> => {
     const apiBaseUrl = getApiBaseUrl();
     return authenticatedRequest(
       `${apiBaseUrl}/api/annotations/templates/${templateId}`,
@@ -353,17 +339,7 @@ export const annotationService = {
    */
   getMyAnnotations: async (
     accessToken: string
-  ): Promise<
-    Array<{
-      id: string;
-      url: string;
-      fieldName: string;
-      valueType: string;
-      valuePreview: string;
-      createdAt: string;
-      templateName?: string;
-    }>
-  > => {
+  ): Promise<Annotation[]> => {
     const apiBaseUrl = getApiBaseUrl();
     return authenticatedRequest(
       `${apiBaseUrl}/api/annotations/my-annotations`,
@@ -378,23 +354,7 @@ export const annotationService = {
   getAnnotationById: async (
     accessToken: string,
     annotationId: string
-  ): Promise<{
-    id: string;
-    url: string;
-    fieldName: string;
-    fieldDescription: string;
-    valueType: string;
-    valueData: any;
-    valuePreview: string;
-    note?: string;
-    createdAt: string;
-    curatorId: string;
-    templateName?: string;
-    publishedRecordId?: {
-      uri: string;
-      cid: string;
-    };
-  }> => {
+  ): Promise<AnnotationDetail> => {
     const apiBaseUrl = getApiBaseUrl();
     return authenticatedRequest(
       `${apiBaseUrl}/api/annotations/${annotationId}`,
diff --git a/src/webapp/types/api.ts b/src/webapp/types/api.ts
new file mode 100644
index 00000000..6ca62afd
--- /dev/null
+++ b/src/webapp/types/api.ts
@@ -0,0 +1,62 @@
+// API response types for reuse across the application
+
+// Template types
+export interface Template {
+  id: string;
+  name: string;
+  description: string;
+  createdAt: string;
+  fieldCount: number;
+}
+
+export interface TemplateField {
+  id: string;
+  name: string;
+  description: string;
+  definitionType: string;
+  definition: any;
+  required: boolean;
+}
+
+export interface TemplateDetail extends Omit<Template, 'fieldCount'> {
+  fields: TemplateField[];
+  curatorId: string;
+}
+
+// Annotation types
+export interface Annotation {
+  id: string;
+  url: string;
+  fieldName: string;
+  valueType: string;
+  valuePreview: string;
+  createdAt: string;
+  templateName?: string;
+}
+
+export interface AnnotationDetail {
+  id: string;
+  url: string;
+  fieldName: string;
+  fieldDescription: string;
+  valueType: string;
+  valueData: any;
+  valuePreview: string;
+  note?: string;
+  createdAt: string;
+  curatorId: string;
+  templateName?: string;
+  publishedRecordId?: {
+    uri: string;
+    cid: string;
+  };
+}
+
+// API response types
+export interface CreateTemplateResponse {
+  templateId: string;
+}
+
+export interface CreateAnnotationsResponse {
+  annotationIds: string[];
+}