diff --git a/atomic/_old_structure/ts/components/Activity/ActivityDashboard.vue b/atomic/_old_structure/ts/components/Activity/ActivityDashboard.vue
index 7062172..f86a688 100644
--- a/atomic/_old_structure/ts/components/Activity/ActivityDashboard.vue
+++ b/atomic/_old_structure/ts/components/Activity/ActivityDashboard.vue
@@ -11,7 +11,7 @@
             :loading="loading"
         />
         <card-data-table
-            :data="results"
+            :value="results"
             :loading="loading"
             :open-dialog="openDialog"
             :styles="activityStyle"
diff --git a/atomic/_old_structure/ts/components/Admin/AdminPanel.vue b/atomic/_old_structure/ts/components/Admin/AdminPanel.vue
index d0f5f6b..b50b25b 100644
--- a/atomic/_old_structure/ts/components/Admin/AdminPanel.vue
+++ b/atomic/_old_structure/ts/components/Admin/AdminPanel.vue
@@ -6,51 +6,55 @@
                 <anchor-molecule href="#articles" class="grid-item">
                     <div class="adminBricksCircle" :style="articleCircleStyle">
                         <div>
-                            <p class="adminBricksCircleNumber">
-                                {{ articles?.length }}
-                            </p>
+                            <paragraph-atom
+                                class="adminBricksCircleNumber"
+                                :text="articles?.length"
+                            />
                             <i class="pi pi-comment adminBricksIcon" />
                         </div>
                     </div>
-                    <p
+                    <paragraph-atom
                         class="articlesBricksText"
                         :style="articleBricksTextStyle"
-                    >
-                        Articles
-                    </p>
+                        text="Articles"
+                    />
                 </anchor-molecule>
             </div>
             <div class="grid-item-container col-6 lg:col-4">
                 <anchor-molecule href="#contacts" class="grid-item">
                     <div class="adminBricksCircle" :style="contactCircleStyle">
                         <div>
-                            <p class="adminBricksCircleNumber">
-                                {{ contacts?.length }}
-                            </p>
+                            <paragraph-atom
+                                class="adminBricksCircleNumber"
+                                :text="contacts?.length"
+                            />
                             <i class="pi pi-users adminBricksIcon" />
                         </div>
                     </div>
-                    <p
+                    <paragraph-atom
                         class="contactsBricksText"
                         :style="contactBricksTextStyle"
-                    >
-                        Contacts
-                    </p>
+                        text="Contacts"
+                    />
                 </anchor-molecule>
             </div>
             <div class="grid-item-container col-6 lg:col-4">
                 <anchor-molecule href="#users" class="grid-item">
                     <div class="adminBricksCircle" :style="userCircleStyle">
                         <div>
-                            <p class="adminBricksCircleNumber">
-                                {{ users?.length }}
-                            </p>
+                            <paragraph-atom
+                                class="adminBricksCircleNumber"
+                                :text="users?.length"
+                            />
+
                             <i class="pi pi-users adminBricksIcon" />
                         </div>
                     </div>
-                    <p class="usersBricksText" :style="userBricksTextStyle">
-                        Users
-                    </p>
+                    <paragraph-atom
+                        class="usersBricksText"
+                        :style="userBricksTextStyle"
+                        text="Users"
+                    />
                 </anchor-molecule>
             </div>
 
@@ -84,17 +88,17 @@
         <article-dashboard
             :data="articles"
             :getData="getAllArticles"
-            :loading="articlesLoading"
+            :loading="!allLoaded"
         />
         <contact-dashboard
             :data="contacts"
             :getData="getAllContacts"
-            :loading="contactsLoading"
+            :loading="!allLoaded"
         />
         <user-dashboard
             :data="users"
             :getData="getAllUsers"
-            :loading="usersLoading"
+            :loading="!allLoaded"
         />
     </div>
 </template>
diff --git a/atomic/_old_structure/ts/components/Admin/ArticleDashboard.vue b/atomic/_old_structure/ts/components/Admin/ArticleDashboard.vue
index 4189cfc..9c0cd25 100644
--- a/atomic/_old_structure/ts/components/Admin/ArticleDashboard.vue
+++ b/atomic/_old_structure/ts/components/Admin/ArticleDashboard.vue
@@ -1,7 +1,7 @@
 <template>
     <section id="articles">
         <card-data-table
-            :data="data"
+            :value="data"
             :loading="loading"
             :open-dialog="openDialog"
             :styles="articleStyle"
diff --git a/atomic/_old_structure/ts/components/Admin/ContactDashboard.vue b/atomic/_old_structure/ts/components/Admin/ContactDashboard.vue
index 5a20462..760756e 100644
--- a/atomic/_old_structure/ts/components/Admin/ContactDashboard.vue
+++ b/atomic/_old_structure/ts/components/Admin/ContactDashboard.vue
@@ -1,7 +1,7 @@
 <template>
     <section id="contacts">
         <card-data-table
-            :data="data"
+            :value="data"
             :loading="loading"
             :open-dialog="openDialog"
             :styles="contactStyle"
diff --git a/atomic/_old_structure/ts/components/Admin/UserDashboard.vue b/atomic/_old_structure/ts/components/Admin/UserDashboard.vue
index b284419..d1142c1 100644
--- a/atomic/_old_structure/ts/components/Admin/UserDashboard.vue
+++ b/atomic/_old_structure/ts/components/Admin/UserDashboard.vue
@@ -1,7 +1,7 @@
 <template>
     <section id="users">
         <card-data-table
-            :data="data"
+            :value="data"
             :loading="loading"
             :open-dialog="openDialog"
             :styles="userStyle"
diff --git a/atomic/_old_structure/ts/components/Article/ArticleDashboard.vue b/atomic/_old_structure/ts/components/Article/ArticleDashboard.vue
index 1b4b984..6f20db8 100644
--- a/atomic/_old_structure/ts/components/Article/ArticleDashboard.vue
+++ b/atomic/_old_structure/ts/components/Article/ArticleDashboard.vue
@@ -11,7 +11,7 @@
             :loading="loading"
         />
         <card-data-table
-            :data="results"
+            :value="results"
             :loading="loading"
             :open-dialog="openDialog"
             :styles="articleStyle"
diff --git a/atomic/_old_structure/ts/components/Auth/Login.vue b/atomic/_old_structure/ts/components/Auth/Login.vue
index 3f7b9ba..ce2dcf1 100644
--- a/atomic/_old_structure/ts/components/Auth/Login.vue
+++ b/atomic/_old_structure/ts/components/Auth/Login.vue
@@ -8,13 +8,12 @@
                         <image-atom src="logo.svg" width="50" />
                         <heading-atom :tag="1" text="Welcome Back" />
 
-                        <p class="mb-2">
-                            Don't have an account?
+                        <paragraph-atom class="mb-2" text="Don't have an account?">
                             <anchor-molecule
                                 href="/register"
                                 :label="'Create today!'"
                             />
-                        </p>
+                        </paragraph-atom>
                     </div>
                 </div>
             </template>
diff --git a/atomic/_old_structure/ts/components/Auth/Register.vue b/atomic/_old_structure/ts/components/Auth/Register.vue
index c1debfe..92f78bf 100644
--- a/atomic/_old_structure/ts/components/Auth/Register.vue
+++ b/atomic/_old_structure/ts/components/Auth/Register.vue
@@ -7,10 +7,9 @@
                     <div class="authCardHeader">
                         <heading-atom :tag="1" text="Register" />
 
-                        <p class="mb-2">
-                            Already have an account?
+                        <paragraph-atom class="mb-2" text="Already have an account?">
                             <anchor-molecule href="/login" :label="'Log in!'" />
-                        </p>
+                        </paragraph-atom>
                     </div>
                 </div>
             </template>
diff --git a/atomic/_old_structure/ts/components/Contact/ContactDashboard.vue b/atomic/_old_structure/ts/components/Contact/ContactDashboard.vue
index 22813a4..f3b1794 100644
--- a/atomic/_old_structure/ts/components/Contact/ContactDashboard.vue
+++ b/atomic/_old_structure/ts/components/Contact/ContactDashboard.vue
@@ -11,7 +11,7 @@
             :loading="loading"
         />
         <card-data-table
-            :data="results"
+            :value="results"
             :loading="loading"
             :open-dialog="openDialog"
             :styles="contactStyle"
diff --git a/atomic/_old_structure/ts/components/Home/Features/Access.vue b/atomic/_old_structure/ts/components/Home/Features/Access.vue
index 99a3b6f..afededb 100644
--- a/atomic/_old_structure/ts/components/Home/Features/Access.vue
+++ b/atomic/_old_structure/ts/components/Home/Features/Access.vue
@@ -28,11 +28,12 @@
                         />
                     </div>
                     <div class="flip-card-back">
-                        <p class="mt-2">
-                            Responsive web design was coined in 2010 by Ethan
+                        <paragraph-atom
+                            class="mt-2"
+                            text="Responsive web design was coined in 2010 by Ethan
                             Marcotte, optimizing layouts for desktops with
-                            flexible grids and layouts.
-                        </p>
+                            flexible grids and layouts."
+                        />
                     </div>
                 </div>
             </div>
@@ -51,11 +52,11 @@
                         />
                     </div>
                     <div class="flip-card-back">
-                        <p>
-                            Over 53% of internet users worldwide access the web
+                        <paragraph-atom
+                            text="Over 53% of internet users worldwide access the web
                             through mobile devices, highlighting the significant
-                            shift towards mobile browsing in recent years.
-                        </p>
+                            shift towards mobile browsing in recent years."
+                        />
                     </div>
                 </div>
             </div>
@@ -74,12 +75,12 @@
                         />
                     </div>
                     <div class="flip-card-back">
-                        <p class="flip-card-back-text">
-                            Google's implementation of mobile-first indexing in
-                            2018 underscored the importance of mobile-responsive
-                            design, prioritizing mobile versions for indexing
-                            and ranking.
-                        </p>
+                        <paragraph-atom
+                            class="flip-card-back-text"
+                            text="Google's implementation of mobile-first indexing in
+                            2018 underscored the importance of mobile-responsive design,
+                            prioritizing mobile versions for indexing and ranking."
+                        />
                     </div>
                 </div>
             </div>
diff --git a/atomic/_old_structure/ts/components/Home/WhyUs.vue b/atomic/_old_structure/ts/components/Home/WhyUs.vue
index 8bb62a9..5487397 100644
--- a/atomic/_old_structure/ts/components/Home/WhyUs.vue
+++ b/atomic/_old_structure/ts/components/Home/WhyUs.vue
@@ -38,7 +38,10 @@
             </div>
         </template>
         <template #default>
-            <p class="m-0 text-sm">{{ dialogData.description }}</p>
+            <paragraph-atom
+                class="m-0 text-sm"
+                :text="dialogData.description"
+            />
         </template>
     </Dialog>
 </template>
diff --git a/atomic/atoms/Paragraph.vue b/atomic/atoms/Paragraph.vue
new file mode 100644
index 0000000..c99f612
--- /dev/null
+++ b/atomic/atoms/Paragraph.vue
@@ -0,0 +1,12 @@
+<template>
+    <p>
+        {{ text }}
+        <slot />
+    </p>
+</template>
+
+<script setup lang="ts">
+import { ParagraphInterface } from 'atomic/bosons/types'
+
+defineProps<ParagraphInterface>()
+</script>
diff --git a/atomic/atoms/Skeleton.vue b/atomic/atoms/Skeleton.vue
new file mode 100644
index 0000000..9b2ae2a
--- /dev/null
+++ b/atomic/atoms/Skeleton.vue
@@ -0,0 +1,17 @@
+<template>
+    <Skeleton
+        :shape="shape"
+        :size="size"
+        :width="width"
+        :height="height"
+        :border-radius="borderRadius"
+        :animation="animation"
+        :unstyled="unstyled"
+    />
+</template>
+
+<script setup lang="ts">
+import { SkeletonInterface } from 'atomic/bosons/types'
+
+defineProps<SkeletonInterface>()
+</script>
diff --git a/atomic/atoms/atoms.ts b/atomic/atoms/atoms.ts
index 661aaf8..263e66d 100644
--- a/atomic/atoms/atoms.ts
+++ b/atomic/atoms/atoms.ts
@@ -9,9 +9,11 @@ import {
     InputText,
     Item,
     Label,
+    Paragraph,
     ProgressBar,
     ProgressSpinner,
     RadioButton,
+    Skeleton,
     Toast,
 } from './'
 
@@ -24,8 +26,10 @@ export default function registerAtoms(app: App<Element>): void {
         .component('input-text-atom', InputText)
         .component('item-atom', Item)
         .component('label-atom', Label)
+        .component('paragraph-atom', Paragraph)
         .component('progress-bar-atom', ProgressBar)
         .component('progress-spinner-atom', ProgressSpinner)
         .component('radio-button-atom', RadioButton)
+        .component('skeleton-atom', Skeleton)
         .component('toast-atom', Toast)
 }
diff --git a/atomic/atoms/index.ts b/atomic/atoms/index.ts
index c02f554..1704eae 100644
--- a/atomic/atoms/index.ts
+++ b/atomic/atoms/index.ts
@@ -8,7 +8,9 @@ export { default as Image } from './Image.vue'
 export { default as InputText } from './InputText.vue'
 export { default as Item } from './Item.vue'
 export { default as Label } from './Label.vue'
+export { default as Paragraph } from './Paragraph.vue'
 export { default as ProgressBar } from './ProgressBar.vue'
 export { default as ProgressSpinner } from './ProgressSpinner.vue'
 export { default as RadioButton } from './RadioButton.vue'
+export { default as Skeleton } from './Skeleton.vue'
 export { default as Toast } from './Toast.vue'
diff --git a/atomic/bosons/constants/organisms/DataTable/columns.ts b/atomic/bosons/constants/organisms/DataTable/columns.ts
index f7fc813..37706bb 100644
--- a/atomic/bosons/constants/organisms/DataTable/columns.ts
+++ b/atomic/bosons/constants/organisms/DataTable/columns.ts
@@ -1,43 +1,104 @@
-export const columns = {
+import { ColumnsInterface } from 'atomic/bosons/types'
+
+export const columns: ColumnsInterface = {
     activity: [
-        { field: 'id', header: 'ID', class: 'idActivityColumn' },
+        {
+            field: 'id',
+            header: 'ID',
+            class: 'idActivityColumn',
+            sortable: true,
+        },
         {
             field: 'description',
             header: 'Description',
             class: 'descriptionColumn',
+            sortable: true,
         },
         {
             field: 'created_at',
             header: 'Created At',
             class: 'createdAtActivityColumn',
+            sortable: true,
         },
     ],
     article: [
-        { field: 'title', header: 'Title', class: 'titleColumn' },
+        {
+            field: 'title',
+            header: 'Title',
+            class: 'titleColumn',
+            sortable: true,
+        },
         {
             field: 'category',
             header: 'Category',
             class: 'categoryColumn desktopColumn',
+            sortable: true,
+        },
+        {
+            field: 'created_at',
+            header: 'Created At',
+            class: 'createdAtColumn',
+            sortable: true,
+        },
+        {
+            field: 'updated_at',
+            header: 'Updated At',
+            class: 'updatedAtColumn',
+            sortable: true,
         },
-        { field: 'created_at', header: 'Created At', class: 'createdAtColumn' },
-        { field: 'updated_at', header: 'Updated At', class: 'updatedAtColumn' },
     ],
     contact: [
-        { field: 'full_name', header: 'Full name', class: 'fullNameColumn' },
-        { field: 'email', header: 'Email', class: 'emailColumn tabletColumn' },
+        {
+            field: 'full_name',
+            header: 'Full name',
+            class: 'fullNameColumn',
+            sortable: true,
+        },
+        {
+            field: 'email',
+            header: 'Email',
+            class: 'emailColumn tabletColumn',
+            sortable: true,
+        },
         {
             field: 'birthday',
             header: 'Birthday',
             class: 'birthdayColumn desktopColumn',
+            sortable: true,
+        },
+        {
+            field: 'created_at',
+            header: 'Created At',
+            class: 'createdAtColumn',
+            sortable: true,
+        },
+        {
+            field: 'updated_at',
+            header: 'Updated At',
+            class: 'updatedAtColumn',
+            sortable: true,
         },
-        { field: 'created_at', header: 'Created At', class: 'createdAtColumn' },
-        { field: 'updated_at', header: 'Updated At', class: 'updatedAtColumn' },
     ],
     user: [
-        { field: 'name', header: 'Name', class: 'nameColumn' },
-        { field: 'email', header: 'Email', class: 'emailColumn' },
-        { field: 'role', header: 'Role', class: 'roleColumn' },
-        { field: 'created_at', header: 'Created At', class: 'createdAtColumn' },
-        { field: 'updated_at', header: 'Updated At', class: 'updatedAtColumn' },
+        { field: 'name', header: 'Name', class: 'nameColumn', sortable: true },
+        {
+            field: 'email',
+            header: 'Email',
+            class: 'emailColumn',
+            sortable: true,
+        },
+        { field: 'role', header: 'Role', class: 'roleColumn', sortable: true },
+        {
+            field: 'created_at',
+            header: 'Created At',
+            class: 'createdAtColumn',
+            sortable: true,
+        },
+        {
+            field: 'updated_at',
+            header: 'Updated At',
+            class: 'updatedAtColumn',
+            sortable: true,
+        },
     ],
 }
diff --git a/atomic/bosons/styles/organisms/_index.scss b/atomic/bosons/styles/organisms/_index.scss
index 5864595..66d96ed 100644
--- a/atomic/bosons/styles/organisms/_index.scss
+++ b/atomic/bosons/styles/organisms/_index.scss
@@ -1 +1,2 @@
+@use 'datatable';
 @use 'dialog';
diff --git a/atomic/bosons/styles/organisms/datatable/_index.scss b/atomic/bosons/styles/organisms/datatable/_index.scss
new file mode 100644
index 0000000..b361981
--- /dev/null
+++ b/atomic/bosons/styles/organisms/datatable/_index.scss
@@ -0,0 +1 @@
+@use 'skeleton';
diff --git a/atomic/bosons/styles/organisms/datatable/skeleton/_index.scss b/atomic/bosons/styles/organisms/datatable/skeleton/_index.scss
new file mode 100644
index 0000000..a5a03a8
--- /dev/null
+++ b/atomic/bosons/styles/organisms/datatable/skeleton/_index.scss
@@ -0,0 +1,10 @@
+.skeletonDataTable {
+    td {
+        height: 49px;
+        padding: 5px 9px;
+
+        .p-skeleton {
+            height: 30px !important;
+        }
+    }
+}
diff --git a/atomic/bosons/types/atoms/Paragraph/index.ts b/atomic/bosons/types/atoms/Paragraph/index.ts
new file mode 100644
index 0000000..f1444d3
--- /dev/null
+++ b/atomic/bosons/types/atoms/Paragraph/index.ts
@@ -0,0 +1 @@
+export * from './interfaces'
diff --git a/atomic/bosons/types/atoms/Paragraph/interfaces.ts b/atomic/bosons/types/atoms/Paragraph/interfaces.ts
new file mode 100644
index 0000000..3fd49dc
--- /dev/null
+++ b/atomic/bosons/types/atoms/Paragraph/interfaces.ts
@@ -0,0 +1,3 @@
+export interface ParagraphInterface {
+    text?: string | number
+}
diff --git a/atomic/bosons/types/atoms/Skeleton/index.ts b/atomic/bosons/types/atoms/Skeleton/index.ts
new file mode 100644
index 0000000..f1444d3
--- /dev/null
+++ b/atomic/bosons/types/atoms/Skeleton/index.ts
@@ -0,0 +1 @@
+export * from './interfaces'
diff --git a/atomic/bosons/types/atoms/Skeleton/interfaces.ts b/atomic/bosons/types/atoms/Skeleton/interfaces.ts
new file mode 100644
index 0000000..62eb03f
--- /dev/null
+++ b/atomic/bosons/types/atoms/Skeleton/interfaces.ts
@@ -0,0 +1,9 @@
+export interface SkeletonInterface {
+    shape?: 'circle' | 'rectangle'
+    size?: string
+    width?: string
+    height?: string
+    borderRadius?: string
+    animation?: 'none' | 'wave'
+    unstyled?: boolean
+}
diff --git a/atomic/bosons/types/atoms/index.ts b/atomic/bosons/types/atoms/index.ts
index 52354de..97e1f56 100644
--- a/atomic/bosons/types/atoms/index.ts
+++ b/atomic/bosons/types/atoms/index.ts
@@ -5,7 +5,9 @@ export * from './Heading'
 export * from './Image'
 export * from './InputText'
 export * from './Label'
+export * from './Paragraph'
 export * from './ProgressBar'
 export * from './ProgressSpinner'
 export * from './RadioButton'
+export * from './Skeleton'
 export * from './Toast'
diff --git a/atomic/_old_structure/ts/types/bootstrap.d.ts b/atomic/bosons/types/bootstrap.d.ts
similarity index 100%
rename from atomic/_old_structure/ts/types/bootstrap.d.ts
rename to atomic/bosons/types/bootstrap.d.ts
diff --git a/atomic/bosons/types/organisms/DataTable/interfaces.ts b/atomic/bosons/types/organisms/DataTable/interfaces.ts
index 3669f2b..1145f8c 100644
--- a/atomic/bosons/types/organisms/DataTable/interfaces.ts
+++ b/atomic/bosons/types/organisms/DataTable/interfaces.ts
@@ -9,11 +9,32 @@ import {
 import { SelectedObjectType } from '@/types'
 
 export interface DataTableInterface {
-    data: any[] // eslint-disable-line @typescript-eslint/no-explicit-any
-    type: ObjectNameType
+    value: any[] // eslint-disable-line @typescript-eslint/no-explicit-any
+    rows?: number
+    type?: ObjectNameType
     loading: LoadingType
     actions?: ActionInterface
-    styles: ColorItemStyleInterface
+    styles?: ColorItemStyleInterface
     openDialog: OpenDialogFunctionType
     selectedObject?: SelectedObjectType
 }
+
+export interface DataTableSkeletonInterface {
+    rows: []
+    loading: LoadingType
+    specificColumns: ColumnInterface[]
+}
+
+export interface ColumnInterface {
+    field?: string
+    header?: string
+    class?: string
+    sortable?: boolean
+}
+
+export interface ColumnsInterface {
+    activity: ColumnInterface[]
+    article: ColumnInterface[]
+    contact: ColumnInterface[]
+    user: ColumnInterface[]
+}
diff --git a/atomic/organisms/DataTable.vue b/atomic/organisms/DataTable/DataTable.vue
similarity index 90%
rename from atomic/organisms/DataTable.vue
rename to atomic/organisms/DataTable/DataTable.vue
index d1fe84b..f7affe3 100644
--- a/atomic/organisms/DataTable.vue
+++ b/atomic/organisms/DataTable/DataTable.vue
@@ -1,26 +1,24 @@
 <template>
     <DataTable
-        :value="data"
+        v-if="value && !loading"
+        :value="value"
         :loading="loading"
+        :rows="rows"
         :size="'small'"
-        :rows="10"
         :row-hover="true"
-        v-if="data"
         paginator
         stripedRows
         @row-click="openDialog('show', $event.data)"
         paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
         currentPageReportTemplate="{first} to {last} of {totalRecords}"
     >
-        <template #loading><progress-spinner-atom /></template>
-
         <Column
             v-for="col in specificColumns"
             :key="col.field"
-            :type="type"
             :field="col.field"
             :header="col.header"
             :class="col.class"
+            :sortable="col.sortable"
         />
 
         <Column class="actionColumn">
@@ -57,6 +55,11 @@
             </template>
         </Column>
     </DataTable>
+    <data-table-skeleton
+        :rows="skeleton"
+        :loading="loading"
+        :specific-columns="specificColumns"
+    />
 </template>
 
 <script setup lang="ts">
@@ -77,4 +80,5 @@ const { openMenu, selectedObject } = useMenuAndModal()
 const { dropdownItems } = handleDropdownItems(selectedObject, props.openDialog)
 
 const specificColumns = columns[props.type]
+const skeleton = ref(new Array(props.rows))
 </script>
diff --git a/atomic/organisms/DataTable/Skeleton.vue b/atomic/organisms/DataTable/Skeleton.vue
new file mode 100644
index 0000000..d2a82a5
--- /dev/null
+++ b/atomic/organisms/DataTable/Skeleton.vue
@@ -0,0 +1,30 @@
+<template>
+    <DataTable
+        class="skeletonDataTable"
+        :value="rows"
+        v-if="loading"
+        :size="'small'"
+    >
+        <Column
+            v-for="(col, index) in specificColumns"
+            :key="index"
+            :header="col.header"
+            :class="col.class"
+        >
+            <template #body>
+                <skeleton-atom />
+            </template>
+        </Column>
+        <Column class="actionColumn">
+            <template #body>
+                <skeleton-atom />
+            </template>
+        </Column>
+    </DataTable>
+</template>
+
+<script setup lang="ts">
+import { DataTableSkeletonInterface } from 'atomic/bosons/types'
+
+defineProps<DataTableSkeletonInterface>()
+</script>
diff --git a/atomic/organisms/DataTable/index.ts b/atomic/organisms/DataTable/index.ts
new file mode 100644
index 0000000..fe75e02
--- /dev/null
+++ b/atomic/organisms/DataTable/index.ts
@@ -0,0 +1,2 @@
+export { default as DataTable } from './DataTable.vue'
+export { default as DataTableSkeleton } from './Skeleton.vue'
diff --git a/atomic/organisms/index.ts b/atomic/organisms/index.ts
index 6d63578..8379b4c 100644
--- a/atomic/organisms/index.ts
+++ b/atomic/organisms/index.ts
@@ -1,6 +1,7 @@
 export { default as registerOrganisms } from './organisms'
 
+export * from './DataTable'
+
 export { default as Chart } from './Chart.vue'
-export { default as DataTable } from './DataTable.vue'
 export { default as Dialog } from './Dialog.vue'
 export { default as Dock } from './Dock.vue'
diff --git a/atomic/organisms/organisms.ts b/atomic/organisms/organisms.ts
index 81342c8..d0f4e85 100644
--- a/atomic/organisms/organisms.ts
+++ b/atomic/organisms/organisms.ts
@@ -1,10 +1,27 @@
 import { App } from 'vue'
 
-import { Chart, DataTable, Dialog, Dock } from './'
+import { Chart, DataTable, DataTableSkeleton, Dialog, Dock } from './'
 
 export default function registerOrganisms(app: App<Element>): void {
-    app.component('chart-organism', Chart)
+    app
+        /**
+         *  Chart
+         */
+        .component('chart-organism', Chart)
+
+        /**
+         *  DataTable
+         */
         .component('data-table-organism', DataTable)
+        .component('data-table-skeleton', DataTableSkeleton)
+
+        /**
+         *  Dialog
+         */
         .component('dialog-organism', Dialog)
+
+        /**
+         *  Dock
+         */
         .component('dock-organism', Dock)
 }
diff --git a/atomic/primevue.ts b/atomic/primevue.ts
index 2b29d79..620100c 100644
--- a/atomic/primevue.ts
+++ b/atomic/primevue.ts
@@ -22,6 +22,7 @@ import Menu from 'primevue/menu'
 import ProgressBar from 'primevue/progressbar'
 import ProgressSpinner from 'primevue/progressspinner'
 import RadioButton from 'primevue/radiobutton'
+import Skeleton from 'primevue/skeleton'
 import Textarea from 'primevue/textarea'
 import Toast from 'primevue/toast'
 
@@ -60,6 +61,7 @@ export default function registerPrimeVue(app: App<Element>): void {
         .component('ProgressBar', ProgressBar)
         .component('ProgressSpinner', ProgressSpinner)
         .component('RadioButton', RadioButton)
+        .component('Skeleton', Skeleton)
         .component('Textarea', Textarea)
         .component('Toast', Toast)
 
diff --git a/atomic/templates/Card/DataTable.vue b/atomic/templates/Card/DataTable.vue
index 817a8ad..c9f2d88 100644
--- a/atomic/templates/Card/DataTable.vue
+++ b/atomic/templates/Card/DataTable.vue
@@ -22,14 +22,14 @@
         </template>
         <template #content>
             <data-table-organism
-                v-if="data"
-                :data="data"
+                v-if="value"
+                :value="value"
+                :rows="10"
                 :open-dialog="openDialog"
                 :styles="styles"
                 :type="type"
                 :loading="loading"
             />
-            <div v-else>Loading data or no data available...</div>
         </template>
     </Card>
 </template>