diff --git a/docs/components/table/examples/TableExample.vue b/docs/components/table/examples/TableExample.vue
index 3827ab1..0258b50 100644
--- a/docs/components/table/examples/TableExample.vue
+++ b/docs/components/table/examples/TableExample.vue
@@ -1,44 +1,42 @@
 <template>
-  <div class="vp-raw flex flex-col">
-    <Table>
-      <table-head>
-        <table-head-cell>Product name</table-head-cell>
-        <table-head-cell>Color</table-head-cell>
-        <table-head-cell>Category</table-head-cell>
-        <table-head-cell>Price</table-head-cell>
-        <table-head-cell><span class="sr-only">Edit</span></table-head-cell>
-      </table-head>
-      <table-body>
-        <table-row>
-          <table-cell>Apple MacBook Pro 17"</table-cell>
-          <table-cell>Sliver</table-cell>
-          <table-cell>Laptop</table-cell>
-          <table-cell>$2999</table-cell>
-          <table-cell>
-            <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
-          </table-cell>
-        </table-row>
-        <table-row>
-          <table-cell>Microsoft Surface Pro</table-cell>
-          <table-cell>White</table-cell>
-          <table-cell>Laptop PC</table-cell>
-          <table-cell>$1999</table-cell>
-          <table-cell>
-            <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
-          </table-cell>
-        </table-row>
-        <table-row>
-          <table-cell>Magic Mouse 2</table-cell>
-          <table-cell>Black</table-cell>
-          <table-cell>Accessories</table-cell>
-          <table-cell>$99</table-cell>
-          <table-cell>
-            <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
-          </table-cell>
-        </table-row>
-      </table-body>
-    </Table>
-  </div>
+  <Table>
+    <table-head>
+      <table-head-cell>Product name</table-head-cell>
+      <table-head-cell>Color</table-head-cell>
+      <table-head-cell>Category</table-head-cell>
+      <table-head-cell>Price</table-head-cell>
+      <table-head-cell><span class="sr-only">Edit</span></table-head-cell>
+    </table-head>
+    <table-body>
+      <table-row>
+        <table-cell>Apple MacBook Pro 17"</table-cell>
+        <table-cell>Sliver</table-cell>
+        <table-cell>Laptop</table-cell>
+        <table-cell>$2999</table-cell>
+        <table-cell>
+          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
+        </table-cell>
+      </table-row>
+      <table-row>
+        <table-cell>Microsoft Surface Pro</table-cell>
+        <table-cell>White</table-cell>
+        <table-cell>Laptop PC</table-cell>
+        <table-cell>$1999</table-cell>
+        <table-cell>
+          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
+        </table-cell>
+      </table-row>
+      <table-row>
+        <table-cell>Magic Mouse 2</table-cell>
+        <table-cell>Black</table-cell>
+        <table-cell>Accessories</table-cell>
+        <table-cell>$99</table-cell>
+        <table-cell>
+          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
+        </table-cell>
+      </table-row>
+    </table-body>
+  </Table>
 </template>
 <script setup>
 import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from '../../../../src/index'
diff --git a/docs/components/table/examples/TableHoverableExample.vue b/docs/components/table/examples/TableHoverableExample.vue
new file mode 100644
index 0000000..40488b0
--- /dev/null
+++ b/docs/components/table/examples/TableHoverableExample.vue
@@ -0,0 +1,43 @@
+<template>
+  <Table hoverable>
+    <table-head>
+      <table-head-cell>Product name</table-head-cell>
+      <table-head-cell>Color</table-head-cell>
+      <table-head-cell>Category</table-head-cell>
+      <table-head-cell>Price</table-head-cell>
+      <table-head-cell><span class="sr-only">Edit</span></table-head-cell>
+    </table-head>
+    <table-body>
+      <table-row>
+        <table-cell>Apple MacBook Pro 17"</table-cell>
+        <table-cell>Sliver</table-cell>
+        <table-cell>Laptop</table-cell>
+        <table-cell>$2999</table-cell>
+        <table-cell>
+          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
+        </table-cell>
+      </table-row>
+      <table-row>
+        <table-cell>Microsoft Surface Pro</table-cell>
+        <table-cell>White</table-cell>
+        <table-cell>Laptop PC</table-cell>
+        <table-cell>$1999</table-cell>
+        <table-cell>
+          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
+        </table-cell>
+      </table-row>
+      <table-row>
+        <table-cell>Magic Mouse 2</table-cell>
+        <table-cell>Black</table-cell>
+        <table-cell>Accessories</table-cell>
+        <table-cell>$99</table-cell>
+        <table-cell>
+          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
+        </table-cell>
+      </table-row>
+    </table-body>
+  </Table>
+</template>
+<script setup>
+import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from '../../../../src/index'
+</script>
diff --git a/docs/components/table/examples/TableStripedExample.vue b/docs/components/table/examples/TableStripedExample.vue
new file mode 100644
index 0000000..bfbb7d5
--- /dev/null
+++ b/docs/components/table/examples/TableStripedExample.vue
@@ -0,0 +1,43 @@
+<template>
+  <Table striped>
+    <table-head>
+      <table-head-cell>Product name</table-head-cell>
+      <table-head-cell>Color</table-head-cell>
+      <table-head-cell>Category</table-head-cell>
+      <table-head-cell>Price</table-head-cell>
+      <table-head-cell><span class="sr-only">Edit</span></table-head-cell>
+    </table-head>
+    <table-body>
+      <table-row>
+        <table-cell>Apple MacBook Pro 17"</table-cell>
+        <table-cell>Sliver</table-cell>
+        <table-cell>Laptop</table-cell>
+        <table-cell>$2999</table-cell>
+        <table-cell>
+          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
+        </table-cell>
+      </table-row>
+      <table-row>
+        <table-cell>Microsoft Surface Pro</table-cell>
+        <table-cell>White</table-cell>
+        <table-cell>Laptop PC</table-cell>
+        <table-cell>$1999</table-cell>
+        <table-cell>
+          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
+        </table-cell>
+      </table-row>
+      <table-row>
+        <table-cell>Magic Mouse 2</table-cell>
+        <table-cell>Black</table-cell>
+        <table-cell>Accessories</table-cell>
+        <table-cell>$99</table-cell>
+        <table-cell>
+          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
+        </table-cell>
+      </table-row>
+    </table-body>
+  </Table>
+</template>
+<script setup>
+import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from '../../../../src/index'
+</script>
diff --git a/docs/components/table/table.md b/docs/components/table/table.md
index 1ed74e5..e97fe55 100644
--- a/docs/components/table/table.md
+++ b/docs/components/table/table.md
@@ -1,15 +1,167 @@
 <script setup>
-import TableExample from './examples/TableExample.vue'
+import TableExample from './examples/TableExample.vue';
+import TableStripedExample from './examples/TableStripedExample.vue';
+import TableHoverableExample from './examples/TableHoverableExample.vue';
 </script>
 # Vue Table Component - Flowbite
 
-```vue
-<script setup>
-import { Table } from 'flowbite-vue'
-</script>
-<template>
-  <Table></Table>
-</template>
-```
+#### Button groups are a Tailwind CSS powered set of buttons sticked together in a horizontal line
+
+---
+
+:::tip
+Original reference: [https://flowbite.com/docs/components/tables/](https://flowbite.com/docs/components/tables/)
+:::
+
+## Basic example
 
 <TableExample />
+
+```vue
+<template>
+  <Table>
+    <table-head>
+      <table-head-cell>Product name</table-head-cell>
+      <table-head-cell>Color</table-head-cell>
+      <table-head-cell>Category</table-head-cell>
+      <table-head-cell>Price</table-head-cell>
+      <table-head-cell><span class="sr-only">Edit</span></table-head-cell>
+    </table-head>
+    <table-body>
+      <table-row>
+        <table-cell>Apple MacBook Pro 17"</table-cell>
+        <table-cell>Sliver</table-cell>
+        <table-cell>Laptop</table-cell>
+        <table-cell>$2999</table-cell>
+        <table-cell>
+          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
+        </table-cell>
+      </table-row>
+      <table-row>
+        <table-cell>Microsoft Surface Pro</table-cell>
+        <table-cell>White</table-cell>
+        <table-cell>Laptop PC</table-cell>
+        <table-cell>$1999</table-cell>
+        <table-cell>
+          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
+        </table-cell>
+      </table-row>
+      <table-row>
+        <table-cell>Magic Mouse 2</table-cell>
+        <table-cell>Black</table-cell>
+        <table-cell>Accessories</table-cell>
+        <table-cell>$99</table-cell>
+        <table-cell>
+          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
+        </table-cell>
+      </table-row>
+    </table-body>
+  </Table>
+</template>
+<script setup>
+import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from 'flowbite-vue'
+</script>
+
+```
+
+## Striped example
+
+<TableStripedExample />
+
+```vue
+<template>
+  <Table striped>
+    <table-head>
+      <table-head-cell>Product name</table-head-cell>
+      <table-head-cell>Color</table-head-cell>
+      <table-head-cell>Category</table-head-cell>
+      <table-head-cell>Price</table-head-cell>
+      <table-head-cell><span class="sr-only">Edit</span></table-head-cell>
+    </table-head>
+    <table-body>
+      <table-row>
+        <table-cell>Apple MacBook Pro 17"</table-cell>
+        <table-cell>Sliver</table-cell>
+        <table-cell>Laptop</table-cell>
+        <table-cell>$2999</table-cell>
+        <table-cell>
+          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
+        </table-cell>
+      </table-row>
+      <table-row>
+        <table-cell>Microsoft Surface Pro</table-cell>
+        <table-cell>White</table-cell>
+        <table-cell>Laptop PC</table-cell>
+        <table-cell>$1999</table-cell>
+        <table-cell>
+          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
+        </table-cell>
+      </table-row>
+      <table-row>
+        <table-cell>Magic Mouse 2</table-cell>
+        <table-cell>Black</table-cell>
+        <table-cell>Accessories</table-cell>
+        <table-cell>$99</table-cell>
+        <table-cell>
+          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
+        </table-cell>
+      </table-row>
+    </table-body>
+  </Table>
+</template>
+<script setup>
+import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from 'flowbite-vue'
+</script>
+
+```
+
+## Hoverable example
+
+<TableHoverableExample />
+
+```vue
+<template>
+  <Table hoverable>
+    <table-head>
+      <table-head-cell>Product name</table-head-cell>
+      <table-head-cell>Color</table-head-cell>
+      <table-head-cell>Category</table-head-cell>
+      <table-head-cell>Price</table-head-cell>
+      <table-head-cell><span class="sr-only">Edit</span></table-head-cell>
+    </table-head>
+    <table-body>
+      <table-row>
+        <table-cell>Apple MacBook Pro 17"</table-cell>
+        <table-cell>Sliver</table-cell>
+        <table-cell>Laptop</table-cell>
+        <table-cell>$2999</table-cell>
+        <table-cell>
+          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
+        </table-cell>
+      </table-row>
+      <table-row>
+        <table-cell>Microsoft Surface Pro</table-cell>
+        <table-cell>White</table-cell>
+        <table-cell>Laptop PC</table-cell>
+        <table-cell>$1999</table-cell>
+        <table-cell>
+          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
+        </table-cell>
+      </table-row>
+      <table-row>
+        <table-cell>Magic Mouse 2</table-cell>
+        <table-cell>Black</table-cell>
+        <table-cell>Accessories</table-cell>
+        <table-cell>$99</table-cell>
+        <table-cell>
+          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
+        </table-cell>
+      </table-row>
+    </table-body>
+  </Table>
+</template>
+<script setup>
+import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from 'flowbite-vue'
+</script>
+
+```
diff --git a/src/components/Table/Table.vue b/src/components/Table/Table.vue
index a87f9c6..0385e5a 100644
--- a/src/components/Table/Table.vue
+++ b/src/components/Table/Table.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
+  <div class="vp-raw relative overflow-x-auto shadow-md sm:rounded-lg">
     <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
       <slot></slot>
     </table>
diff --git a/src/components/Table/TableRow.vue b/src/components/Table/TableRow.vue
index 74df263..40f4bbe 100644
--- a/src/components/Table/TableRow.vue
+++ b/src/components/Table/TableRow.vue
@@ -4,7 +4,6 @@
   </tr>
 </template>
 <script lang="ts" setup>
-
 import { useTableRowClasses } from '@/components/Table/composables/tableRowClasses'
 
 const { tableRowClasses } = useTableRowClasses()