diff --git a/components/panel-code-highlight.tsx b/components/panel-code-highlight.tsx
new file mode 100644
index 0000000..13aefbc
--- /dev/null
+++ b/components/panel-code-highlight.tsx
@@ -0,0 +1,31 @@
+'use client';
+import IconCode from '@/components/icon/icon-code';
+import React, { useState, ReactNode } from 'react';
+
+interface PanelCodeHighlightProps {
+    children: ReactNode;
+    title?: string;
+    codeHighlight?: string;
+    id?: string;
+    className?: string;
+}
+
+const PanelCodeHighlight = ({ children, title, codeHighlight, id, className = '' }: PanelCodeHighlightProps) => {
+    const [toggleCode, setToggleCode] = useState(false);
+    return (
+        <div className={`panel ${className}`} id={id}>
+            <div className="mb-5 flex items-center justify-between">
+                <h5 className="text-lg font-semibold dark:text-white-light">{title}</h5>
+                <button type="button" className="font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600" onClick={() => setToggleCode(!toggleCode)}>
+                    <span className="flex items-center">
+                        <IconCode className="me-2" />
+                        Code
+                    </span>
+                </button>
+            </div>
+            {children}
+        </div>
+    );
+};
+
+export default PanelCodeHighlight;
diff --git a/components/tables/components-tables-simple.tsx b/components/tables/components-tables-simple.tsx
new file mode 100644
index 0000000..7fa10ca
--- /dev/null
+++ b/components/tables/components-tables-simple.tsx
@@ -0,0 +1,117 @@
+'use client';
+import IconTrashLines from '@/components/icon/icon-trash-lines';
+import PanelCodeHighlight from '@/components/panel-code-highlight';
+import Tippy from '@tippyjs/react';
+import 'tippy.js/dist/tippy.css';
+import React from 'react';
+
+const ComponentsTablesSimple = () => {
+    const tableData = [
+        {
+            id: 1,
+            name: 'John Doe',
+            email: 'johndoe@yahoo.com',
+            date: '10/08/2020',
+            sale: 120,
+            status: 'Complete',
+            register: '5 min ago',
+            progress: '40%',
+            position: 'Developer',
+            office: 'London',
+        },
+        {
+            id: 2,
+            name: 'Shaun Park',
+            email: 'shaunpark@gmail.com',
+            date: '11/08/2020',
+            sale: 400,
+            status: 'Pending',
+            register: '11 min ago',
+            progress: '23%',
+            position: 'Designer',
+            office: 'New York',
+        },
+        {
+            id: 3,
+            name: 'Alma Clarke',
+            email: 'alma@gmail.com',
+            date: '12/02/2020',
+            sale: 310,
+            status: 'In Progress',
+            register: '1 hour ago',
+            progress: '80%',
+            position: 'Accountant',
+            office: 'Amazon',
+        },
+        {
+            id: 4,
+            name: 'Vincent Carpenter',
+            email: 'vincent@gmail.com',
+            date: '13/08/2020',
+            sale: 100,
+            status: 'Canceled',
+            register: '1 day ago',
+            progress: '60%',
+            position: 'Data Scientist',
+            office: 'Canada',
+        },
+    ];
+    return (
+        <PanelCodeHighlight
+            title="Simple Table"
+        >
+            <div className="table-responsive mb-5">
+                <table>
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Date</th>
+                            <th>Sale</th>
+                            <th>Status</th>
+                            <th className="text-center">Action</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {tableData.map((data) => {
+                            return (
+                                <tr key={data.id}>
+                                    <td>
+                                        <div className="whitespace-nowrap">{data.name}</div>
+                                    </td>
+                                    <td>{data.date}</td>
+                                    <td>{data.sale}</td>
+                                    <td>
+                                        <div
+                                            className={`whitespace-nowrap ${
+                                                data.status === 'completed'
+                                                    ? 'text-success'
+                                                    : data.status === 'Pending'
+                                                    ? 'text-secondary'
+                                                    : data.status === 'In Progress'
+                                                    ? 'text-info'
+                                                    : data.status === 'Canceled'
+                                                    ? 'text-danger'
+                                                    : 'text-success'
+                                            }`}
+                                        >
+                                            {data.status}
+                                        </div>
+                                    </td>
+                                    <td className="text-center">
+                                        <Tippy content="Delete">
+                                            <button type="button">
+                                                <IconTrashLines className="m-auto" />
+                                            </button>
+                                        </Tippy>
+                                    </td>
+                                </tr>
+                            );
+                        })}
+                    </tbody>
+                </table>
+            </div>
+        </PanelCodeHighlight>
+    );
+};
+
+export default ComponentsTablesSimple;