diff --git a/apps/dyn_dt/routes.py b/apps/dyn_dt/routes.py
index b441ab4a..de1651d7 100644
--- a/apps/dyn_dt/routes.py
+++ b/apps/dyn_dt/routes.py
@@ -13,7 +13,8 @@
 def dynamic_dt():
     context = {
         'routes': config.Config.DYNAMIC_DATATB.keys(),
-        'segment': 'dynamic_dt'
+        'segment': 'dynamic_dt',
+        'parent': 'dashboard',
     }
     return render_template('dyn_dt/index.html', **context)
 
@@ -167,6 +168,7 @@ def model_dt(aPath):
         'fk_fields_keys': fk_fields.keys(),
         'fk_fields': fk_fields,
         'segment': 'dynamic_dt',
+        'parent': 'dashboard',
         'choices_dict': choices_dict,
         'exclude_auto_gen_fields': exclude_auto_gen_fields(aModelClass)
     }
diff --git a/apps/home/routes.py b/apps/home/routes.py
index 399f7a98..faef3820 100644
--- a/apps/home/routes.py
+++ b/apps/home/routes.py
@@ -12,7 +12,7 @@
 @blueprint.route('/')
 @blueprint.route('/index')
 def index():
-    return render_template('pages/index.html', segment='dashboard')
+    return render_template('pages/index.html', segment='dashboard', parent="dashboard")
 
 @blueprint.route('/billing')
 def billing():
diff --git a/apps/static/assets/img/csv.png b/apps/static/assets/img/csv.png
new file mode 100644
index 00000000..330065b7
Binary files /dev/null and b/apps/static/assets/img/csv.png differ
diff --git a/apps/static/assets/img/export.png b/apps/static/assets/img/export.png
new file mode 100644
index 00000000..25cac3cd
Binary files /dev/null and b/apps/static/assets/img/export.png differ
diff --git a/apps/templates/dyn_dt/index.html b/apps/templates/dyn_dt/index.html
index 3319b906..1178dfb1 100644
--- a/apps/templates/dyn_dt/index.html
+++ b/apps/templates/dyn_dt/index.html
@@ -7,45 +7,23 @@
 
 {% block content %}
 
-<div class="pc-container">
-    <div class="pc-content">
-        <!-- [ breadcrumb ] start -->
-        <div class="page-header">
-            <div class="page-block">
-            <div class="row align-items-center">
-                <div class="col-md-12">
-                <div class="page-header-title">
-                    <h5 class="mb-0">Profile</h5>
-                </div>
-                </div>
-                <div class="col-md-12">
-                <ul class="breadcrumb mb-0">
-                    <li class="breadcrumb-item"><a href="{{ url_for('home_blueprint.index') }}">Home</a></li>
-                    <li class="breadcrumb-item"><a href="javascript: void(0)">Basic UI</a></li>
-                    <li class="breadcrumb-item" aria-current="page">Profile</li>
-                </ul>
-                </div>
-            </div>
-            </div>
-        </div>
-        <!-- [ breadcrumb ] end -->
 
-        <div class="row">
-            <div class="col-sm-12">
-                <div class="card">
-                    <div class="card-header">
-                        <h5>Available Routes (defined in config.DYNAMIC_DATATB)</h5>
-                    </div>
-                    <div class="card-block px-4">
-                        <ul class="pc-submenu mt-3">
-                            {% for link in routes %}
-                                <li class="pc-item">
-                                    <a class="pc-link" href="{{ url_for('table_blueprint.model_dt', aPath=link) }}">{{ link }}</a>
-                                </li>
-                            {% endfor %}
-                        </ul>
-                        
-                    </div>
+<div class="container-fluid py-4">
+    <div class="row">
+        <div class="col-sm-12">
+            <div class="card">
+                <div class="card-header p-2 ps-3">
+                    <h4 class="mb-0">Available Routes (defined in config.DYNAMIC_DATATB)</h4>
+                </div>
+                <div class="card-body">
+                    <ul class="">
+                        {% for link in routes %}
+                            <li class="">
+                                <a class="" href="{{ url_for('table_blueprint.model_dt', aPath=link) }}">{{ link }}</a>
+                            </li>
+                        {% endfor %}
+                    </ul>
+                    
                 </div>
             </div>
         </div>
diff --git a/apps/templates/dyn_dt/model.html b/apps/templates/dyn_dt/model.html
index 25eec1af..7c7a4776 100644
--- a/apps/templates/dyn_dt/model.html
+++ b/apps/templates/dyn_dt/model.html
@@ -29,7 +29,6 @@
         position: absolute;
         left: 50%;
         right: 50%;
-        bottom: -10px;
     }
     .table-row:hover .data-td {
         opacity: 0.1;
@@ -37,6 +36,7 @@
     .table-row:hover .action-td {
         display: flex !important;
         gap:3px !important;
+        width: 100%;
         
     }
 </style>
@@ -44,444 +44,423 @@
 {% endblock extrastyle %}
 
 {% block content %}
-<!-- [ Main Content ] start -->
-<div class="pc-container">
-    <div class="pc-content">
-        <!-- [ breadcrumb ] start -->
-        <div class="page-header">
-            <div class="page-block">
-                <div class="row align-items-center">
-                    <div class="col-md-12">
-                        <div class="page-header-title">
-                            <h5 class="m-b-10">
-                                <a href="/">Home</a>
-                            </h5>
-                        </div>
-                        <ul class="breadcrumb">
-                            <li class="breadcrumb-item">
-                                <a href="{{ url_for('table_blueprint.dynamic_dt') }}">Dynamic DT</a>
-                            </li>
-                            <li class="breadcrumb-item"></li>
-                                <a href="{{ url_for('table_blueprint.model_dt', aPath=link) }}">{{ link|upper }}</a>
-                            </li>                            
-                        </ul>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <!-- [ breadcrumb ] end -->
 
-        <div class="row">
-            <!-- [ Typography ] start -->
-            <div class="col-sm-12">
-                <div class="card">
-                    <div class="card-body">
-
-
-                        <div class="d-flex justify-content-between my-4">
-                            <form class="search">
-                                <div class="d-flex gap-2 align-items-center">
-                                    <div class="mr-3">
-                                        <input type="text" placeholder="Search for items" name="search" id="" class="form-control">
-                                    </div>
-                                    <button type="submit" class="btn btn-primary">
-                                        <i class="ti ti-search"></i>
+<div class="container-fluid py-4">
+    <div class="row">
+        <!-- [ Typography ] start -->
+        <div class="col-sm-12">
+            <div class="card">
+                <div class="card-body">
+                    <div class="d-flex justify-content-between my-4">
+                        <form class="search">
+                            <div class="d-flex gap-2 align-items-center align-self-stretch">
+                                <div class="">
+                                    <input type="text" placeholder="Search for items" name="search" id="" class="form-control border px-2">
+                                </div>
+                                <div>
+                                    <button type="submit" class="btn mb-0 bg-gradient-dark">
+                                        <i class="fas fa-search" aria-hidden="true"></i>
                                     </button>
                                 </div>
-                            </form>
-                            <div class="">
-                                <form method="post">
-                                    <div class="dropdown">
-                                        <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                            Hide / Show Column
-                                        </button>
-                                        <div id="dropdownDefaultCheckbox">
-                                            <ul class="dropdown-menu hide-show-dropdown px-3">
-                                                {% for field_name in field_names %}
-                                                    <div class="form-check mb-2">
-                                                        <input class="form-check-input" {% if field_name.value %} checked {% endif %} type="checkbox" data-bs-target="{{ field_name.key }}" value="" id="checkbox-item-{{ field_name.id }}">
-                                                        <label class="form-check-label" for="checkbox-item-{{ field_name.id }}">
-                                                            {{ field_name.key }}
-                                                        </label>
-                                                    </div>
-                                                {% endfor %}
-                                            </ul>
-                                        </div>
-                                    </div>
-                                </form>
                             </div>
-                            <div class="page-size form-group">
-                                <div class="d-flex gap-2">
-                                    <form method="post" class="">
-                                        <select onchange="getPageItems(this)" name="" id="" class="form-select">
-                                            <option {% if page_items == 5 %} selected {% endif %} value="5">5 Items</option>
-                                            <option {% if page_items == 10 %} selected {% endif %} value="10">10 Items</option>
-                                            <option {% if page_items == 15 %} selected {% endif %} value="15">15 Items</option>
-                                            <option {% if page_items == 25 %} selected {% endif %} value="25">25 Items</option>
-                                            <option {% if page_items == 50 %} selected {% endif %} value="50">50 Items</option>
-                                            <option {% if page_items == 100 %} selected {% endif %} value="100">100 Items</option>
-                                        </select>
-                                    </form>
-                                    <div class="d-flex ">
-                                        <a data-bs-toggle="modal" data-bs-target="#exportCSV">
-                                            <img class="export-csv-img" style="width: 40px" src="{{ url_for('static', filename="assets/img/csv.png") }}" alt="img">
-                                        </a>
-                                    </div>
-                                    {% if current_user.is_authenticated %}
-                                    <div>
-                                        <button data-bs-toggle="modal" data-bs-target="#addSales" type="button" class="btn btn-primary p-0 px-3 py-2 ">
-                                            Add
-                                        </button>
+                        </form>
+                        <div class="">
+                            <form method="post">
+                                <div class="dropdown">
+                                    <button class="btn mb-0 bg-gradient-dark dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+                                        Hide / Show Column
+                                    </button>
+                                    <div id="dropdownDefaultCheckbox">
+                                        <ul class="dropdown-menu hide-show-dropdown p-2">
+                                            {% for field_name in field_names %}
+                                                <div class="form-check">
+                                                    <input class="form-check-input" {% if field_name.value %} checked {% endif %} type="checkbox" data-bs-target="{{ field_name.key }}" value="" id="checkbox-item-{{ field_name.id }}">
+                                                    <label class="form-check-label" for="checkbox-item-{{ field_name.id }}">
+                                                        {{ field_name.key }}
+                                                    </label>
+                                                </div>
+                                            {% endfor %}
+                                        </ul>
                                     </div>
-                                    {% endif %}
                                 </div>
+                            </form>
+                        </div>
+                        <div class="page-size form-group">
+                            <div class="d-flex gap-2">
+                                <form method="post" class="">
+                                    <select onchange="getPageItems(this)" name="" id="" class="form-select border px-2">
+                                        <option {% if page_items == 5 %} selected {% endif %} value="5">5 Items</option>
+                                        <option {% if page_items == 10 %} selected {% endif %} value="10">10 Items</option>
+                                        <option {% if page_items == 15 %} selected {% endif %} value="15">15 Items</option>
+                                        <option {% if page_items == 25 %} selected {% endif %} value="25">25 Items</option>
+                                        <option {% if page_items == 50 %} selected {% endif %} value="50">50 Items</option>
+                                        <option {% if page_items == 100 %} selected {% endif %} value="100">100 Items</option>
+                                    </select>
+                                </form>
+                                <div class="d-flex ">
+                                    <a data-bs-toggle="modal" data-bs-target="#exportCSV">
+                                        <img class="export-csv-img" style="width: 40px" src="{{ url_for('static', filename="assets/img/csv.png") }}" alt="img">
+                                    </a>
+                                </div>
+                                {% if current_user.is_authenticated %}
+                                <div>
+                                    <button data-bs-toggle="modal" data-bs-target="#addSales" type="button" class="btn mb-0 bg-gradient-dark p-0 px-3 py-2 ">
+                                        Add
+                                    </button>
+                                </div>
+                                {% endif %}
                             </div>
                         </div>
+                    </div>
 
-                        <div>
-                            <form action="{{ url_for('table_blueprint.create_filter', model_name=link) }}" method="post">
-                    
-                                <div class="d-flex align-items-center gap-3 mb-3">
-                                    <h3 class="">Filters</h3>
-                                    <button id="addButton" type="button" class="btn btn-primary">Add</button>
-                                </div>
+                    <div>
+                        <form action="{{ url_for('table_blueprint.create_filter', model_name=link) }}" method="post">
+                
+                            <div class="d-flex align-items-center gap-3 mb-3">
+                                <h3 class="">Filters</h3>
+                                <button id="addButton" type="button" class="btn mb-0 bg-gradient-dark">Add</button>
+                            </div>
 
-                                <div class="mb-3" id="inputContainer">
-                                    {% if filter_instance %}
-                                        {% for filter_data in filter_instance %}
-                                        <div class="d-flex gap-3 mb-3">
-                                            <div class="d-flex gap-2">
-                                                <select name="key" id="" class="form-select w-50">
-
-                                                    {% for field in db_field_names %}
-                                                        <option {% if filter_data.key == field %}selected{% endif %} value="{{ field }}">{{ field }}</option>
-                                                    {% endfor %}
-                                                </select>
-                                                <input type="text" value="{{ filter_data.value }}" placeholder="Enter value" name="value" id="" class="form-control">
-                                            </div>
-                                            <a href="{{ url_for('table_blueprint.delete_filter', model_name=link, id=filter_data.id) }}" class="remove-button btn btn-danger">X</a>
+                            <div class="mb-3" id="inputContainer">
+                                {% if filter_instance %}
+                                    {% for filter_data in filter_instance %}
+                                    <div class="input-container d-flex align-items-center gap-3 mb-3">
+                                        <div class="d-flex gap-2">
+                                            <select name="key" class="form-select border px-2 w-50">
+                                                {% for field in db_field_names %}
+                                                    <option {% if filter_data.key == field %}selected{% endif %} value="{{ field }}">{{ field }}</option>
+                                                {% endfor %}
+                                            </select>
+                                            <input name="value" value="{{ filter_data.value }}" class="form-control border px-2" type="text" placeholder="Enter value">
                                         </div>
-                                        {% endfor %}
-                                    {% endif %}
-                                </div>
-                                <button id="submitButton" type="submit" {% if not filter_instance %} style="display: none;" {% endif %} class="btn btn-success">Submit</button>
-                            </form>
+                                        <a href="{{ url_for('table_blueprint.delete_filter', model_name=link, id=filter_data.id) }}" class="remove-button btn btn-danger mb-0">X</a>
+                                    </div>
+                                    {% endfor %}
+                                {% endif %}
+                            </div>
+                            <button id="submitButton" type="submit" {% if not filter_instance %} style="display: none;" {% endif %} class="btn mb-0 btn-success">Submit</button>
+                        </form>
 
 
 
-                            <div class="card-body">
-                                <div class="dt-responsive table-responsive">
-                                    <table class="table">
-                                        <thead>
-                                        <tr>
-                                            {% for field in db_field_names %}
-                                                <th id="th_{{ field }}" scope="col">{{ field }}</th>
-                                            {% endfor %}
-                                        </tr>
-                                        </thead>
-                                        <tbody>
-                                            {% for item in items %}
-                                            <tr class="align-middle table-row">
-                                                {% for field_name in db_field_names %}
-                                                    {% if field_name in choices_dict %}
-                                                    <td class="td_{{ field_name }} data-td">{{ item|getenumattribute(field_name) }}</td>
-                                                    {% else %}
-                                                    <td class="td_{{ field_name }} data-td">{{ item|getattribute(field_name) }}</td>
-                                                    {% endif %}
-                                                {% endfor %}
-                    
-                                                {% if current_user.is_authenticated %}
-                                                <td class="d-none action-td" >
-                                                    <a data-bs-toggle="modal" data-bs-target="#editSales-{{item.id}}" class="btn btn-primary btn-sm p-0 px-3 py-2 " href="#"><i class="ti ti-edit"></i></a>
-                                                    <a data-bs-toggle="modal" data-bs-target="#deleteSales-{{item.id}}" class="btn btn-danger btn-sm p-0 px-3 py-2 " href="#"><i class="ti ti-trash"></i></a>
-                                                </td>
+                        <div class="card-body">
+                            <div class="dt-responsive table-responsive">
+                                <table class="table">
+                                    <thead>
+                                    <tr>
+                                        {% for field in db_field_names %}
+                                            <th id="th_{{ field }}" class="px-0" scope="col">{{ field }}</th>
+                                        {% endfor %}
+                                    </tr>
+                                    </thead>
+                                    <tbody>
+                                        {% for item in items %}
+                                        <tr class="align-middle table-row">
+                                            {% for field_name in db_field_names %}
+                                                {% if field_name in choices_dict %}
+                                                <td class="td_{{ field_name }} data-td px-0">{{ item|getenumattribute(field_name) }}</td>
                                                 {% else %}
-                                                <td class="d-none action-td">
-                                                    <a data-bs-toggle="modal" data-bs-target="#viewSales-{{item.id}}" class="btn btn-primary btn-sm p-0 px-3 py-2 " href="#"><i class="ti ti-eye"></i></a>
-                                                </td>
+                                                <td class="td_{{ field_name }} data-td px-0">{{ item|getattribute(field_name) }}</td>
                                                 {% endif %}
-                                            </tr>
-                    
-                                            <!-- Edit Sales -->
-                                            <div class="modal fade" id="editSales-{{item.id}}" tabindex="-1" aria-labelledby="editSalesLabel" aria-hidden="true">
-                                                <div class="modal-dialog modal-dialog-centered modal-xl">
-                                                    <div class="modal-content">
-                                                        <div class="modal-header">
-                                                            <div class="d-flex justify-content-between">
-                                                                <div>
-                                                                    <h1 class="modal-title fs-5" id="editSalesLabel">Edit {{ link }}</h1>
-                                                                </div>
-                                                                <div>
-                                                                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
-                                                                        <span aria-hidden="true">&times;</span>
-                                                                    </button>
-                                                                </div>
+                                            {% endfor %}
+                
+                                            {% if current_user.is_authenticated %}
+                                            <td class="d-none action-td" >
+                                                <a data-bs-toggle="modal" data-bs-target="#editSales-{{item.id}}" class="btn mb-1 bg-gradient-dark" href="#">
+                                                    <i class="fa fa-edit">edit</i>
+                                                </a>
+                                                <a data-bs-toggle="modal" data-bs-target="#deleteSales-{{item.id}}" class="btn mb-1 btn-danger" href="#">
+                                                    <i class="fa fa-trash">delete</i>
+                                                </a>
+                                            </td>
+                                            {% else %}
+                                            <td class="d-none action-td">
+                                                <a data-bs-toggle="modal" data-bs-target="#viewSales-{{item.id}}" class="btn mb-1 bg-gradient-dark" href="#">
+                                                    <i class="fa fa-eye">visibility</i>
+                                                </a>
+                                            </td>
+                                            {% endif %}
+                                        </tr>
+                
+                                        <!-- Edit Sales -->
+                                        <div class="modal fade" id="editSales-{{item.id}}" tabindex="-1" aria-labelledby="editSalesLabel" aria-hidden="true">
+                                            <div class="modal-dialog modal-dialog-centered modal-lg">
+                                                <div class="modal-content">
+                                                    <div class="modal-header">
+                                                        <div class="d-flex justify-content-between">
+                                                            <div>
+                                                                <h1 class="modal-title fs-5" id="editSalesLabel">Edit {{ link }}</h1>
+                                                            </div>
+                                                            <div>
+                                                                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
+                                                                    <span aria-hidden="true">&times;</span>
+                                                                </button>
                                                             </div>
                                                         </div>
-                                                        <div class="modal-body">
-                                                            <form action="{{ url_for('table_blueprint.update', aPath=link, id=item.id ) }}" method="post" class="">
-                                                                
-                                                                <div class="row">
-                                                                    <!-- FKs -->
-                                                                    {% for key, values in fk_fields.items() %}
-                                                                    <div class="col-md-6">
-                                                                        <div class="form-group">
-                                                                            <label for="id_{{ key }}" class="form-label">{{ key }}</label>
-                                                                            <select class="form-control" name="{{ key }}" id="id_{{ key }}">
-                                                                                {% for i in values %}
-                                                                                    <option value="{{ i.id }}">{{ i }}</option>
-                                                                                {% endfor %}
-                                                                            </select>                                                    
-                                                                        </div>
+                                                    </div>
+                                                    <div class="modal-body">
+                                                        <form action="{{ url_for('table_blueprint.update', aPath=link, id=item.id ) }}" method="post" class="">
+                                                            
+                                                            <div class="row">
+                                                                <!-- FKs -->
+                                                                {% for key, values in fk_fields.items() %}
+                                                                <div class="col-md-6">
+                                                                    <div class="form-group">
+                                                                        <label for="id_{{ key }}" class="form-label">{{ key }}</label>
+                                                                        <select class="form-select border px-2" name="{{ key }}" id="id_{{ key }}">
+                                                                            {% for i in values %}
+                                                                                <option value="{{ i.id }}">{{ i }}</option>
+                                                                            {% endfor %}
+                                                                        </select>                                                    
                                                                     </div>
-                                                                    {% endfor %}
-    
-                                                                    {% for field_name in db_field_names %}
-                                                                        {% if field_name not in read_only_fields and field_name not in fk_fields_keys and field_name not in exclude_auto_gen_fields %}
-                                                                        <div class="col-md-6">
-                                                                            <div class="form-group">                                                                    
-                                                                                <label for="id_{{ field_name }}" class="form-label">{{ field_name|title }}</label>
-                                                                                {% if field_name in choices_dict %}
-                                                                                    <select name="{{ field_name }}" id="id_{{ field_name }}" class="form-select">
-                                                                                        <option value="">Select {{ field_name }}</option>
-                                                                                        {% for key, value in choices_dict|get(field_name) %}
-                                                                                            <option {% if item|getenumattribute(field_name) == value %}selected{% endif %} value="{{ value }}">{{ key }}</option>
-                                                                                        {% endfor %}
-                                                                                    </select>
+                                                                </div>
+                                                                {% endfor %}
+
+                                                                {% for field_name in db_field_names %}
+                                                                    {% if field_name not in read_only_fields and field_name not in fk_fields_keys and field_name not in exclude_auto_gen_fields %}
+                                                                    <div class="col-md-6">
+                                                                        <div class="form-group mb-3">                                                                    
+                                                                            <label for="id_{{ field_name }}" class="form-label">{{ field_name|title }}</label>
+                                                                            {% if field_name in choices_dict %}
+                                                                                <select name="{{ field_name }}" id="id_{{ field_name }}" class="form-select border px-2">
+                                                                                    <option value="">Select {{ field_name }}</option>
+                                                                                    {% for key, value in choices_dict|get(field_name) %}
+                                                                                        <option {% if item|getenumattribute(field_name) == value %}selected{% endif %} value="{{ value }}">{{ key }}</option>
+                                                                                    {% endfor %}
+                                                                                </select>
+                                                                            {% else %}
+                                                                                {% if field_name in integer_fields %}
+                                                                                <input type="number" name="{{ field_name }}" value="{{ item|getattribute(field_name) }}" class="form-control border px-2" placeholder="{{ field_name }}" id="id_{{ field_name }}">
+                                                                                {% elif field_name in date_time_fields %}
+                                                                                <input type="datetime-local" name="{{ field_name }}" value="{{ item|getattribute(field_name) }}" class="form-control border px-2" placeholder="{{ field_name }}" id="id_{{ field_name }}">
+                                                                                {% elif field_name in email_fields %}
+                                                                                <input type="email" name="{{ field_name }}" value="{{ item|getattribute(field_name) }}" class="form-control border px-2" placeholder="{{ field_name }}" id="id_{{ field_name }}">
+                                                                                {% elif field_name in text_fields %}
+                                                                                <input type="text" name="{{ field_name }}" value="{{ item|getattribute(field_name) }}" class="form-control border px-2" placeholder="{{ field_name }}" id="id_{{ field_name }}">
                                                                                 {% else %}
-                                                                                    {% if field_name in integer_fields %}
-                                                                                    <input type="number" name="{{ field_name }}" value="{{ item|getattribute(field_name) }}" class="form-control" placeholder="{{ field_name }}" id="id_{{ field_name }}">
-                                                                                    {% elif field_name in date_time_fields %}
-                                                                                    <input type="datetime-local" name="{{ field_name }}" value="{{ item|getattribute(field_name) }}" class="form-control" placeholder="{{ field_name }}" id="id_{{ field_name }}">
-                                                                                    {% elif field_name in email_fields %}
-                                                                                    <input type="email" name="{{ field_name }}" value="{{ item|getattribute(field_name) }}" class="form-control" placeholder="{{ field_name }}" id="id_{{ field_name }}">
-                                                                                    {% elif field_name in text_fields %}
-                                                                                    <input type="text" name="{{ field_name }}" value="{{ item|getattribute(field_name) }}" class="form-control" placeholder="{{ field_name }}" id="id_{{ field_name }}">
-                                                                                    {% else %}
-                                                                                    <input type="text" name="{{ field_name }}" value="{{ item|getattribute(field_name) }}" class="form-control" placeholder="{{ field_name }}" id="id_{{ field_name }}">
-                                                                                    {% endif %}
+                                                                                <input type="text" name="{{ field_name }}" value="{{ item|getattribute(field_name) }}" class="form-control border px-2" placeholder="{{ field_name }}" id="id_{{ field_name }}">
                                                                                 {% endif %}
-                                                                            </div>
+                                                                            {% endif %}
                                                                         </div>
-                                                                        {% endif %}
-                                                                    {% endfor %}
-                                                                </div>
+                                                                    </div>
+                                                                    {% endif %}
+                                                                {% endfor %}
+                                                            </div>
 
-                                                                <div>
-                                                                    <button type="submit" class="btn btn-primary">Save</button>
-                                                                </div>
-                                                            </form>
-                                                        </div>
+                                                            <div>
+                                                                <button type="submit" class="btn mb-0 bg-gradient-dark">Save</button>
+                                                            </div>
+                                                        </form>
                                                     </div>
                                                 </div>
                                             </div>
-                    
-                                            <!-- Delete Sales -->
-                                            <div class="modal fade" id="deleteSales-{{item.id}}" tabindex="-1" aria-labelledby="deleteSalesLabel" aria-hidden="true">
-                                                <div class="modal-dialog">
-                                                <div class="modal-content">
-                                                    <div class="modal-header">
-                                                    <div class="d-flex justify-content-between">
-                                                        <div>
-                                                            <h1 class="modal-title fs-5" id="deleteSalesLabel">Delete Item</h1>
-                                                        </div>
-                                                        <div>
-                                                            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
-                                                                <span aria-hidden="true">&times;</span>
-                                                            </button>
-                                                        </div>
-                                                    </div>
-                                                    </div>
-                                                    <div class="modal-body">
-                                                        <h5>Are you sure you want to delete this item?</h5>
+                                        </div>
+                
+                                        <!-- Delete Sales -->
+                                        <div class="modal fade" id="deleteSales-{{item.id}}" tabindex="-1" aria-labelledby="deleteSalesLabel" aria-hidden="true">
+                                            <div class="modal-dialog">
+                                            <div class="modal-content">
+                                                <div class="modal-header">
+                                                <div class="d-flex justify-content-between">
+                                                    <div>
+                                                        <h1 class="modal-title fs-5" id="deleteSalesLabel">Delete Item</h1>
                                                     </div>
-                                                    <div class="modal-footer">
-                                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-                                                        <a href="{{ url_for('table_blueprint.delete', aPath=link, id=item.id ) }}" class="btn btn-danger">Delete</a>
+                                                    <div>
+                                                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
+                                                            <span aria-hidden="true">&times;</span>
+                                                        </button>
                                                     </div>
                                                 </div>
                                                 </div>
+                                                <div class="modal-body">
+                                                    <h5>Are you sure you want to delete this item?</h5>
+                                                </div>
+                                                <div class="modal-footer">
+                                                    <button type="button" class="btn mb-0 btn-secondary" data-bs-dismiss="modal">Close</button>
+                                                    <a href="{{ url_for('table_blueprint.delete', aPath=link, id=item.id ) }}" class="btn mb-0 btn-danger">Delete</a>
+                                                </div>
                                             </div>
-    
-                                            <!-- View Sales -->
-                                            <div class="modal fade" id="viewSales-{{item.id}}" tabindex="-1" aria-labelledby="viweSalesLabel" aria-hidden="true">
-                                                <div class="modal-dialog modal-dialog-centered modal-xl">
-                                                    <div class="modal-content">
-                                                        <div class="modal-header">
-                                                            <div class="d-flex justify-content-between">
-                                                                <div>
-                                                                    <h1 class="modal-title fs-5" id="viewSalesLabel">View {{ link }}</h1>
-                                                                </div>
-                                                                <div>
-                                                                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
-                                                                        <span aria-hidden="true">&times;</span>
-                                                                    </button>
-                                                                </div>
+                                            </div>
+                                        </div>
+
+                                        <!-- View Sales -->
+                                        <div class="modal fade" id="viewSales-{{item.id}}" tabindex="-1" aria-labelledby="viweSalesLabel" aria-hidden="true">
+                                            <div class="modal-dialog modal-dialog-centered modal-lg">
+                                                <div class="modal-content">
+                                                    <div class="modal-header">
+                                                        <div class="d-flex justify-content-between">
+                                                            <div>
+                                                                <h1 class="modal-title fs-5" id="viewSalesLabel">View {{ link }}</h1>
+                                                            </div>
+                                                            <div>
+                                                                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
+                                                                    <span aria-hidden="true">&times;</span>
+                                                                </button>
                                                             </div>
                                                         </div>
-                                                        <div class="modal-body">
-                                                            <form action="#" method="post">
-                                                                
-                                                                <div class="row">
-                                                                    {% for field_name in db_field_names %}
-                                                                    <div class="col-md-6">
-                                                                        <div class="form-group">
-                                                                            <label for="{{ field_name }}" class="form-label">{{ field_name|title }}</label>
-                                                                            <input readonly type="text" value="{{ item|getattribute(field_name) }}" name="{{ field_name }}" id="{{ field_name }}" class="form-control">
-                                                                        </div>
+                                                    </div>
+                                                    <div class="modal-body">
+                                                        <form action="#" method="post">
+                                                            
+                                                            <div class="row">
+                                                                {% for field_name in db_field_names %}
+                                                                <div class="col-md-6">
+                                                                    <div class="form-group mb-3">
+                                                                        <label for="{{ field_name }}" class="form-label">{{ field_name|title }}</label>
+                                                                        <input readonly type="text" value="{{ item|getattribute(field_name) }}" name="{{ field_name }}" id="{{ field_name }}" class="form-control border px-2">
                                                                     </div>
-                                                                    {% endfor %}
                                                                 </div>
-                                                            </form>
-                                                        </div>
+                                                                {% endfor %}
+                                                            </div>
+                                                        </form>
                                                     </div>
                                                 </div>
                                             </div>
-                    
-                                            {% endfor %}
-                                        </tbody>
-                                    </table>
-                                </div>
+                                        </div>
+                
+                                        {% endfor %}
+                                    </tbody>
+                                </table>
                             </div>
+                        </div>
 
 
-                            {% if pagination.has_prev or pagination.has_next %}
-                                <nav aria-label="Page navigation example">
-                                    <ul class="pagination justify-content-center">
-                                        {% if pagination.has_prev %}
-                                            <li class="page-item">
-                                                <a class="page-link" href="?page={{ pagination.prev_num }}" aria-label="Previous">
-                                                    <span aria-hidden="true">&laquo;</span>
-                                                    <span class="sr-only">Previous</span>
-                                                </a>
-                                            </li>
-                                        {% endif %}
-                                        {% for n in range(1, pagination.pages + 1) %}
-                                            {% if pagination.page == n %}
-                                                <li class="page-item active"><a class="page-link">{{ n }}</a></li>
-                                            {% elif n > pagination.page - 3 and n < pagination.page + 3 %}
-                                                <li class="page-item"><a class="page-link" href="?page={{ n }}">{{ n }}</a></li>
-                                            {% endif %}
-                                        {% endfor %}
-                                        {% if pagination.has_next %}
-                                            <li class="page-item">
-                                                <a class="page-link" href="?page={{ pagination.next_num }}" aria-label="Next">
-                                                    <span aria-hidden="true">&raquo;</span>
-                                                    <span class="sr-only">Next</span>
-                                                </a>
-                                            </li>
+                        {% if pagination.has_prev or pagination.has_next %}
+                            <nav aria-label="Page navigation example">
+                                <ul class="pagination justify-content-center">
+                                    {% if pagination.has_prev %}
+                                        <li class="page-item">
+                                            <a class="page-link" href="?page={{ pagination.prev_num }}" aria-label="Previous">
+                                                <span aria-hidden="true">&laquo;</span>
+                                                <span class="sr-only">Previous</span>
+                                            </a>
+                                        </li>
+                                    {% endif %}
+                                    {% for n in range(1, pagination.pages + 1) %}
+                                        {% if pagination.page == n %}
+                                            <li class="page-item active"><a class="page-link">{{ n }}</a></li>
+                                        {% elif n > pagination.page - 3 and n < pagination.page + 3 %}
+                                            <li class="page-item"><a class="page-link" href="?page={{ n }}">{{ n }}</a></li>
                                         {% endif %}
-                                    </ul>
-                                </nav>
-                            {% endif %}
-
+                                    {% endfor %}
+                                    {% if pagination.has_next %}
+                                        <li class="page-item">
+                                            <a class="page-link" href="?page={{ pagination.next_num }}" aria-label="Next">
+                                                <span aria-hidden="true">&raquo;</span>
+                                                <span class="sr-only">Next</span>
+                                            </a>
+                                        </li>
+                                    {% endif %}
+                                </ul>
+                            </nav>
+                        {% endif %}
 
-                        </div>
 
                     </div>
 
+                </div>
 
-                    <!-- Export as CSV -->
-                    <div class="modal fade" id="exportCSV" tabindex="-1" aria-labelledby="exportCSVLabel" aria-hidden="true">
-                        <div class="modal-dialog modal-dialog-centered modal-xl">
-                            <div class="modal-content">
-                                <div class="modal-header">
-                                    <div class="d-flex justify-content-between">
-                                        <div>
-                                            <h1 class="modal-title fs-5" id="exportCSVLabel">Export as CSV</h1>
-                                        </div>
-                                        <div>
 
-                                            <a href="{{ url_for('table_blueprint.export_csv', aPath=link) }}">
-                                                <img style="width: 30px" class="export-img" src="{{ url_for('static', filename='assets/img/export.png') }}" alt="">
-                                            </a>
+                <!-- Export as CSV -->
+                <div class="modal fade" id="exportCSV" tabindex="-1" aria-labelledby="exportCSVLabel" aria-hidden="true">
+                    <div class="modal-dialog modal-dialog-centered modal-lg">
+                        <div class="modal-content">
+                            <div class="modal-header">
+                                <div class="d-flex justify-content-between">
+                                    <div>
+                                        <h1 class="modal-title fs-5" id="exportCSVLabel">Export as CSV</h1>
+                                    </div>
+                                    <div>
+
+                                        <a href="{{ url_for('table_blueprint.export_csv', aPath=link) }}">
+                                            <img style="width: 30px" class="export-img" src="{{ url_for('static', filename='assets/img/export.png') }}" alt="">
+                                        </a>
 
-                                        </div>
-                                        <div>
-                                            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
-                                                <span aria-hidden="true">&times;</span>
-                                            </button>
-                                        </div>
                                     </div>
-                                </div>
-                                <div class="modal-body">
-                                {% include "includes/items-table.html" %}
+                                    <div>
+                                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
+                                            <span aria-hidden="true">&times;</span>
+                                        </button>
+                                    </div>
                                 </div>
                             </div>
+                            <div class="modal-body">
+                            {% include "includes/items-table.html" %}
+                            </div>
                         </div>
                     </div>
+                </div>
 
-                    <!-- Add Sales -->
-                    <div class="modal fade" id="addSales" tabindex="-1" aria-labelledby="addSalesLabel" aria-hidden="true">
-                        <div class="modal-dialog modal-dialog-centered modal-xl">
-                            <div class="modal-content">
-                                <div class="modal-header">
-                                    <div class="d-flex justify-content-between">
-                                        <div>
-                                            <h1 class="modal-title fs-5" id="addSalesLabel">Add {{ link }}</h1>
-                                        </div>
-                                        <div>
-                                            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
-                                                <span aria-hidden="true">&times;</span>
-                                            </button>
-                                        </div>
+                <!-- Add Sales -->
+                <div class="modal fade" id="addSales" tabindex="-1" aria-labelledby="addSalesLabel" aria-hidden="true">
+                    <div class="modal-dialog modal-dialog-centered modal-lg">
+                        <div class="modal-content">
+                            <div class="modal-header">
+                                <div class="d-flex justify-content-between">
+                                    <div>
+                                        <h1 class="modal-title fs-5" id="addSalesLabel">Add {{ link }}</h1>
+                                    </div>
+                                    <div>
+                                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
+                                            <span aria-hidden="true">&times;</span>
+                                        </button>
                                     </div>
                                 </div>
-                                <div class="modal-body">
-                                    <form method="post" action="{{ url_for('table_blueprint.create', aPath=link) }}" class="row">
-
-                                        <!-- FKs -->
-                                        {% for field, values in fk_fields.items() %}
-                                        <div class="col-md-6">
-                                            <div class="form-group">
-                                                <label for="id_{{ field }}" class="form-label">{{ field|title }}</label>
-                                                <select class="form-control" name="{{ field }}" id="id_{{ field }}">
-                                                    {% for i in values %}
-                                                        <option value="{{ i.id }}">{{ i }}</option>
-                                                    {% endfor %}
-                                                </select>                                                    
-                                            </div>
+                            </div>
+                            <div class="modal-body">
+                                <form method="post" action="{{ url_for('table_blueprint.create', aPath=link) }}" class="row">
+
+                                    <!-- FKs -->
+                                    {% for field, values in fk_fields.items() %}
+                                    <div class="col-md-6">
+                                        <div class="form-group">
+                                            <label for="id_{{ field }}" class="form-label">{{ field|title }}</label>
+                                            <select class="form-select border px-2" name="{{ field }}" id="id_{{ field }}">
+                                                {% for i in values %}
+                                                    <option value="{{ i.id }}">{{ i }}</option>
+                                                {% endfor %}
+                                            </select>                                                    
                                         </div>
-                                        {% endfor %}
+                                    </div>
+                                    {% endfor %}
 
-                                        {% for field_name in db_field_names %}
-                                            {% if field_name not in read_only_fields and field_name not in fk_fields_keys and field_name not in exclude_auto_gen_fields %}
-                                            <div class="col-md-6">
-                                                <div class="form-group">
-                                                    <label for="id_{{ field_name }}" class="form-label">{{ field_name|title }}</label>
-                                                    {% if field_name in choices_dict %}
-                                                        <select name="{{ field_name }}" id="id_{{ field_name }}" class="form-select">
-                                                            <option value="">Select {{ field_name }}</option>
-                                                            {% for key, value in choices_dict|get(field_name) %}
-                                                                <option value="{{ key }}">{{ key }}</option>
-                                                            {% endfor %}
-                                                        </select>
+                                    {% for field_name in db_field_names %}
+                                        {% if field_name not in read_only_fields and field_name not in fk_fields_keys and field_name not in exclude_auto_gen_fields %}
+                                        <div class="col-md-6">
+                                            <div class="form-group mb-3">
+                                                <label for="id_{{ field_name }}" class="form-label">{{ field_name|title }}</label>
+                                                {% if field_name in choices_dict %}
+                                                    <select name="{{ field_name }}" id="id_{{ field_name }}" class="form-select border px-2">
+                                                        <option value="">Select {{ field_name }}</option>
+                                                        {% for key, value in choices_dict|get(field_name) %}
+                                                            <option value="{{ key }}">{{ key }}</option>
+                                                        {% endfor %}
+                                                    </select>
+                                                {% else %}
+                                                    {% if field_name in integer_fields %}
+                                                    <input type="number" name="{{ field_name }}" class="form-control border px-2" placeholder="{{ field_name|title }}" id="id_{{ field_name }}">
+                                                    {% elif field_name in date_time_fields %}
+                                                    <input type="datetime-local" name="{{ field_name }}" class="form-control border px-2" placeholder="{{ field_name|title }}" id="id_{{ field_name }}">
+                                                    {% elif field_name in email_fields %}
+                                                    <input type="email" name="{{ field_name }}" class="form-control border px-2" placeholder="{{ field_name|title }}" id="id_{{ field_name }}">
                                                     {% else %}
-                                                        {% if field_name in integer_fields %}
-                                                        <input type="number" name="{{ field_name }}" class="form-control" placeholder="{{ field_name|title }}" id="id_{{ field_name }}">
-                                                        {% elif field_name in date_time_fields %}
-                                                        <input type="datetime-local" name="{{ field_name }}" class="form-control" placeholder="{{ field_name|title }}" id="id_{{ field_name }}">
-                                                        {% elif field_name in email_fields %}
-                                                        <input type="email" name="{{ field_name }}" class="form-control" placeholder="{{ field_name|title }}" id="id_{{ field_name }}">
-                                                        {% else %}
-                                                        <input type="text" name="{{ field_name }}" class="form-control" placeholder="{{ field_name|title }}" id="id_{{ field_name }}">
-                                                        {% endif %}
+                                                    <input type="text" name="{{ field_name }}" class="form-control border px-2" placeholder="{{ field_name|title }}" id="id_{{ field_name }}">
                                                     {% endif %}
-                                                </div>
+                                                {% endif %}
                                             </div>
-                                            {% endif %}
-                                        {% endfor %}
-                                        
-                                        <div>
-                                            <button type="submit" class="btn btn-primary">Add</button>
                                         </div>
-                                    </form>
-                                </div>
+                                        {% endif %}
+                                    {% endfor %}
+                                    
+                                    <div>
+                                        <button type="submit" class="btn mb-0 bg-gradient-dark">Add</button>
+                                    </div>
+                                </form>
                             </div>
                         </div>
                     </div>
-
                 </div>
+
             </div>
         </div>
         
@@ -576,13 +555,13 @@ <h1 class="modal-title fs-5" id="addSalesLabel">Add {{ link }}</h1>
   
       var template = `
         <div class="input-container d-flex align-items-center gap-3 mb-3">
-          <div class="d-flex gap-2">
-            <select name="key" class="form-select w-50">
-              ${fieldNames.map(option => `<option value="${option}">${option}</option>`).join('')}
-            </select>
-            <input name="value" class="form-control" type="text" placeholder="Enter value">
-          </div>
-          <button class="remove-button btn btn-danger" onclick="removeInputContainer(this)">X</button>
+            <div class="d-flex gap-2">
+                <select name="key" class="form-select border px-2 w-50">
+                ${fieldNames.map(option => `<option value="${option}">${option}</option>`).join('')}
+                </select>
+                <input name="value" class="form-control border px-2" type="text" placeholder="Enter value">
+            </div>
+            <button class="remove-button btn btn-danger mb-0" onclick="removeInputContainer(this)">X</button>
         </div>
       `;
   
diff --git a/apps/templates/includes/items-table.html b/apps/templates/includes/items-table.html
new file mode 100644
index 00000000..7daf7c40
--- /dev/null
+++ b/apps/templates/includes/items-table.html
@@ -0,0 +1,25 @@
+
+<div class="dt-responsive table-responsive">
+    <table class="table">
+        <thead>
+          <tr>
+            {% for field in db_field_names %}
+                <th id="th_{{ field }}_export" class="px-0" scope="col">{{ field }}</th>
+            {% endfor %}
+          </tr>
+        </thead>
+        <tbody>
+            {% for item in items %}
+            <tr>
+                {% for field_name in db_field_names %}
+                    {% if field_name in choices_dict %}
+                    <td class="td_{{ field_name }} px-0">{{ item|getenumattribute(field_name) }}</td>
+                    {% else %}
+                    <td class="td_{{ field_name }} px-0">{{ item|getattribute(field_name) }}</td>
+                    {% endif %}
+                {% endfor %}
+            </tr>
+             {% endfor %}
+        </tbody>
+    </table>
+</div>
\ No newline at end of file
diff --git a/apps/templates/includes/sidebar.html b/apps/templates/includes/sidebar.html
index 81ebebf7..dd3f60f4 100644
--- a/apps/templates/includes/sidebar.html
+++ b/apps/templates/includes/sidebar.html
@@ -11,8 +11,8 @@
       <ul class="navbar-nav">
 
         <li class="nav-item">
-          <a class="nav-link {% if segment == 'dashboard' %}active{% endif %}" href="{{ url_for('home_blueprint.index') }}">
-            <div class="icon icon-shape icon-sm shadow border-radius-md bg-white text-center me-2 d-flex align-items-center justify-content-center">
+          <a data-bs-toggle="collapse" href="#dashboard-dropdown" class="nav-link {% if 'dashboard' in parent %}active{% endif %}" aria-controls="dashboard-dropdown" role="button" aria-expanded="false">
+            <div class="icon icon-shape icon-sm shadow border-radius-md bg-white text-center d-flex align-items-center justify-content-center  me-2">
               <svg width="12px" height="12px" viewBox="0 0 45 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                 <title>shop </title>
                 <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
@@ -29,7 +29,24 @@
             </div>
             <span class="nav-link-text ms-1">Dashboard</span>
           </a>
+          <div class="collapse {% if 'dashboard' in parent %}show{% endif %} " id="dashboard-dropdown">
+            <ul class="nav ms-4 ps-3">
+              <li class="nav-item {% if 'dashboard' in segment %}active{% endif %}">
+                <a class="nav-link {% if 'dashboard' in segment %}active{% endif %}" href="{{ url_for('home_blueprint.index') }}">
+                  <span class="sidenav-mini-icon"> D </span>
+                  <span class="sidenav-normal"> Default </span>
+                </a>
+              </li> 
+              <li class="nav-item {% if 'dynamic_dt' in segment %}active{% endif %}">
+                <a class="nav-link {% if 'dynamic_dt' in segment %}active{% endif %}" href="{{ url_for('table_blueprint.dynamic_dt') }}">
+                  <span class="sidenav-mini-icon"> D </span>
+                  <span class="sidenav-normal"> Dynamic DT </span>
+                </a>
+              </li> 
+            </ul>
+          </div>
         </li>
+
         <li class="nav-item">
           <a class="nav-link {% if segment == 'tables' %}active{% endif %}" href="{{ url_for('home_blueprint.tables') }}">
             <div class="icon icon-shape icon-sm shadow border-radius-md bg-white text-center me-2 d-flex align-items-center justify-content-center">