diff --git a/ui/src/components/ui/README.md b/ui/src/components/ui/README.md
new file mode 100644
index 0000000..64c2603
--- /dev/null
+++ b/ui/src/components/ui/README.md
@@ -0,0 +1,96 @@
+# UI Components
+
+This directory contains general-purpose UI components used throughout the application.
+
+## NucleoDataCard.vue
+
+A flexible and centralized card component for displaying data entities.
+
+### Purpose
+
+The `NucleoDataCard` component provides a standardized way to display information in a card format. It's designed to be adaptable to various data types and styling requirements through props and slots. It supports a header (with optional avatar, title, and status), a body for displaying data fields and an optional observation section, and a footer with action buttons.
+
+### Props
+
+| Prop                | Type    | Default     | Description                                                                 |
+|---------------------|---------|-------------|-----------------------------------------------------------------------------|
+| `title`             | String  | _Required_  | The main title of the card, typically displayed in the header.              |
+| `status`            | String  | `''`        | A status string to be displayed as a badge in the header.                   |
+| `fields`            | Array   | `[]`        | An array of objects (`{ label: String, value: String }`) for data rows. Each object represents a piece of data to be displayed with a label and its value. |
+| `accentColor`       | String  | `'#808080'` | Hex color code for the card's top border.                                   |
+| `backgroundColor`   | String  | `'#FFFFFF'` | Hex color code for the card's background.                                   |
+| `avatarUrl`         | String  | `''`        | URL for an avatar image to be displayed in the header.                      |
+| `observation`       | String  | `''`        | A text string for an observation section displayed below the fields.        |
+| `showEditButton`    | Boolean | `true`      | Whether to display the default Edit button in the footer.                   |
+| `showDeleteButton`  | Boolean | `true`      | Whether to display the default Delete button in the footer.                 |
+
+*Note: `accentColor` and `backgroundColor` are applied using inline styles. The default status badge styling in the header slot might not work as expected with hex `accentColor` values for its default Tailwind classes; use the `header` slot for custom status styling if needed.*
+
+### Slots
+
+-   **`header`**: Allows custom content or layout for the card header. If used, it overrides the default header structure which includes the avatar, title, and status badge.
+-   **`body`**: Allows complete customization of the main card content area. If used, you are responsible for rendering the content that would normally go here, such as iterating through the `fields` prop and displaying the `observation` prop. The default content of this slot handles the rendering of `fields` and `observation`.
+-   **`footer`**: Allows custom content to be injected at the beginning of the card footer, before the `actions` slot and default Edit/Delete buttons.
+-   **`actions`**: Allows adding custom buttons or other interactive elements to the footer. These are rendered before the default Edit and Delete buttons if they are visible.
+
+### Events
+
+-   **`edit`**: Emitted with no payload when the default Edit button (if shown) is clicked.
+-   **`delete`**: Emitted with no payload when the default Delete button (if shown) is clicked.
+
+### Example Usage
+
+```vue
+<template>
+  <NucleoDataCard
+    title="John Doe"
+    status="Active"
+    :fields="userDetails"
+    accentColor="#3498db"
+    backgroundColor="#f9f9f9"
+    avatarUrl="path/to/avatar.jpg"
+    observation="This user has been active for 3 years."
+    :showEditButton="true"
+    :showDeleteButton="true"
+    @edit="onEditUser"
+    @delete="onDeleteUser"
+  >
+    <template #actions>
+      <button @click="viewMoreDetails" class="px-3 py-1 text-sm text-white bg-blue-500 rounded hover:bg-blue-600">
+        View More
+      </button>
+    </template>
+  </NucleoDataCard>
+</template>
+
+<script setup>
+import NucleoDataCard from './NucleoDataCard.vue'; // Adjust path as needed
+import { ref } from 'vue';
+
+const userDetails = ref([
+  { label: 'Email', value: 'john.doe@example.com' },
+  { label: 'Department', value: 'Engineering' },
+  { label: 'Role', value: 'Software Developer' },
+]);
+
+const onEditUser = () => {
+  console.log('Edit user event triggered');
+  // Add logic to handle user editing
+};
+
+const onDeleteUser = () => {
+  console.log('Delete user event triggered');
+  // Add logic to handle user deletion
+};
+
+const viewMoreDetails = () => {
+  console.log('View more details action triggered');
+  // Add logic for custom action
+};
+</script>
+
+<style scoped>
+/* Example of additional styling if needed for custom elements via slots */
+/* Tailwind CSS classes are generally preferred */
+</style>
+```