diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 5c760a474..c35190b73 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -16,7 +16,8 @@ const preview: Preview = {
             "Introduction",
             "Cards",
             ["Container"],
-            "Input",
+            "Inputs",
+            "Tables",
             "Loading",
             "Button",
             "Cards",
diff --git a/components/elements/DataTable.tsx b/components/elements/DataTable.tsx
index 2d715e416..3021633e1 100644
--- a/components/elements/DataTable.tsx
+++ b/components/elements/DataTable.tsx
@@ -28,8 +28,6 @@ import { Skeleton } from "./Skeleton";
 import { Button } from "./Button";
 import { cn } from "../util";
 
-
-
 type DataTableProps<DataProps = {}> = {
   direction?: "rtl" | "ltr";
   columns: ColumnDef<DataProps>[];
@@ -168,6 +166,7 @@ export const DataTable = <DataProps extends {}>({
                         let isSortable = header.column.columnDef.meta?.sortable;
                         return (
                           <TableHead
+                            dir={props.direction}
                             condensed={props.condensed}
                             clickable={isSortable}
                             key={header.id}
@@ -193,7 +192,11 @@ export const DataTable = <DataProps extends {}>({
                       data-state={row.getIsSelected() && "selected"}
                     >
                       {row.getVisibleCells().map((cell) => (
-                        <TableCell condensed={props.condensed} key={cell.id}>
+                        <TableCell
+                          dir={props.direction}
+                          condensed={props.condensed}
+                          key={cell.id}
+                        >
                           {flexRender(
                             cell.column.columnDef.cell,
                             cell.getContext()
diff --git a/package.json b/package.json
index b88e9fcae..6e2e079f4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.7.10",
+  "version": "0.7.11",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
diff --git a/stories/ElementsStories/DataTable.stories.tsx b/stories/ElementsStories/DataTable.stories.tsx
index 24ef90369..3b4e37181 100644
--- a/stories/ElementsStories/DataTable.stories.tsx
+++ b/stories/ElementsStories/DataTable.stories.tsx
@@ -10,7 +10,7 @@ import { setLocale, t } from "../translations/i18n";
 import { ColumnDef } from "@tanstack/react-table";
 import { useEffect, useState } from "react";
 const meta = {
-  title: "Elements/DataTable",
+  title: "Elements/Tables/Data Table",
   component: DataTable,
   parameters: {
     // layout: "centered",
@@ -426,6 +426,7 @@ const Template = (args: any, globals: any) => {
         defaultSort="share_price"
         columns={companiesColumns}
         // data={[]}
+        
         data={companiesData}
         condensed
         direction={locale === "ar" ? "rtl" : "ltr"}
diff --git a/stories/ElementsStories/Table.stories.tsx b/stories/ElementsStories/Table.stories.tsx
index 50f4c5c2a..72c93fee7 100644
--- a/stories/ElementsStories/Table.stories.tsx
+++ b/stories/ElementsStories/Table.stories.tsx
@@ -4,7 +4,8 @@ import { ArgsTable, Story, Title } from "@storybook/blocks";
 import { setLocale, t } from "../translations/i18n";
 
 const meta = {
-  title: "Elements/Table",
+  title: "Elements/Tables/Simple Table",
+
   component: Table,
   parameters: {
     // layout: "centered",
@@ -38,7 +39,9 @@ const Template = (args: any, globals: any) => {
         columns={[
           { header: "Project", accessorKey: "project" },
           { header: "Version", accessorKey: "version" },
-          // { header: "Version", accessorKey: "version" },
+          { header: "Version", accessorKey: "version" },
+          { header: "Version", accessorKey: "version" },
+          { header: "Version", accessorKey: "version" },
         ]}
         data={[
           { project: "Hawa", version: "0.4.8" },