diff --git a/src/renderer/components/datatypes/datatype-list.tsx b/src/renderer/components/datatypes/datatype-list.tsx
new file mode 100644
index 000000000..a37780ccc
--- /dev/null
+++ b/src/renderer/components/datatypes/datatype-list.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Datatype } from '../../../types/datatype';
+import { DatatypeItem } from './datatype-item';
+
+interface DatatypeListProps {
+  datatypes: Datatype[];
+  onDelete: (id: string) => void;
+  onEdit: (datatype: Datatype) => void;
+}
+
+export const DatatypeList: React.FC<DatatypeListProps> = ({ datatypes, onDelete, onEdit }) => {
+  return (
+    <div className="datatype-list">
+      {datatypes.map((datatype) => (
+        <DatatypeItem
+          key={datatype.id}
+          datatype={datatype}
+          onDelete={() => onDelete(datatype.id)}
+          onEdit={() => onEdit(datatype)}
+        />
+      ))}
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/renderer/components/datatypes/datatype-manager.tsx b/src/renderer/components/datatypes/datatype-manager.tsx
new file mode 100644
index 000000000..5647d121c
--- /dev/null
+++ b/src/renderer/components/datatypes/datatype-manager.tsx
@@ -0,0 +1,66 @@
+import React, { useState, useEffect } from 'react';
+import { Datatype } from '../../../types/datatype';
+import { DatatypeList } from './datatype-list';
+import { DatatypeEditor } from './datatype-editor';
+import { deleteDatatype as deleteDatatypeAPI } from '../../../services/datatype-service';
+
+interface DatatypeManagerProps {
+  projectId: string;
+}
+
+export const DatatypeManager: React.FC<DatatypeManagerProps> = ({ projectId }) => {
+  const [datatypes, setDatatypes] = useState<Datatype[]>([]);
+  const [selectedDatatypeId, setSelectedDatatypeId] = useState<string | null>(null);
+  const [editingDatatype, setEditingDatatype] = useState<Datatype | null>(null);
+
+  useEffect(() => {
+    // Load datatypes logic would go here
+  }, [projectId]);
+
+  const handleSelectDatatype = (datatypeId: string) => {
+    setSelectedDatatypeId(datatypeId);
+    const datatype = datatypes.find(d => d.id === datatypeId) || null;
+    setEditingDatatype(datatype);
+  };
+
+  const handleDeleteDatatype = async (datatypeId: string) => {
+    try {
+      await deleteDatatypeAPI(datatypeId);
+      setDatatypes(datatypes.filter(d => d.id !== datatypeId));
+      
+      if (selectedDatatypeId === datatypeId) {
+        setSelectedDatatypeId(null);
+        setEditingDatatype(null);
+      }
+    } catch (error) {
+      console.error('Failed to delete datatype:', error);
+    }
+  };
+
+  const handleCreateDatatype = () => {
+    // Create new datatype logic
+  };
+
+  const handleUpdateDatatype = (updatedDatatype: Datatype) => {
+    setDatatypes(datatypes.map(d => d.id === updatedDatatype.id ? updatedDatatype : d));
+    setEditingDatatype(updatedDatatype);
+  };
+
+  return (
+    <div className="datatype-manager">
+      <DatatypeList 
+        datatypes={datatypes}
+        selectedDatatypeId={selectedDatatypeId}
+        onSelectDatatype={handleSelectDatatype}
+        onDeleteDatatype={handleDeleteDatatype}
+        onCreateDatatype={handleCreateDatatype}
+      />
+      {editingDatatype && (
+        <DatatypeEditor 
+          datatype={editingDatatype}
+          onUpdateDatatype={handleUpdateDatatype}
+        />
+      )}
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/renderer/store/datatypes/actions.ts b/src/renderer/store/datatypes/actions.ts
new file mode 100644
index 000000000..8bc130d5d
--- /dev/null
+++ b/src/renderer/store/datatypes/actions.ts
@@ -0,0 +1,17 @@
+import { Datatype } from '../../models/datatype';
+import { createAction, createAsyncThunk } from '@reduxjs/toolkit';
+import { RootState } from '../..';
+
+export const addDatatype = createAction<Datatype>('datatypes/add');
+
+export const updateDatatype = createAction<Partial<Datatype> & { id: string }>('datatypes/update');
+
+export const deleteDatatype = createAction<string>('datatypes/delete');
+
+export const loadDatatypes = createAsyncThunk(
+  'datatypes/load',
+  async () => {
+    // Implementation would go here
+    return [] as Datatype[];
+  }
+);