diff --git a/builder/code/phreeze.backbone/styles/style.css b/builder/code/phreeze.backbone/styles/style.css
index 28fa2a95..4085bbc4 100644
--- a/builder/code/phreeze.backbone/styles/style.css
+++ b/builder/code/phreeze.backbone/styles/style.css
@@ -20,6 +20,11 @@ p.buttonContainer {
 
 }
 
+table { 
+	width:auto !important; 
+	margin-bottom:0px !important; 
+}
+
 table.collection tr:hover {
     cursor: pointer;
 }
@@ -29,6 +34,14 @@ table.collection th:hover {
     opacity: 0.5;
 }
 
+.tableContainer {
+	  overflow: auto;
+	  width: 940px; /* add responsive parts in bootstrap.css */
+	  border: 2px solid #333;
+	  border-radius: 4px;
+	  padding:0px;
+}
+
 .date-picker input
 {
 	width: 80px;
@@ -96,3 +109,21 @@ span.help-inline {
 span.help-inline:empty {
 	display: none;
 }
+
+@media(min-width:1200px) {
+	.tableContainer{
+		width: 1170px;
+	}	
+}
+
+@media(min-width:768px) and (max-width:979px) {
+	.tableContainer{
+		width: 724px;
+	}
+}
+
+@media(max-width:767px) {
+	.tableContainer{
+		width: 100%;
+	}
+}
diff --git a/builder/code/phreeze.backbone/templates/ListView.tpl.tpl b/builder/code/phreeze.backbone/templates/ListView.tpl.tpl
index 3c1a05a3..c967e095 100644
--- a/builder/code/phreeze.backbone/templates/ListView.tpl.tpl
+++ b/builder/code/phreeze.backbone/templates/ListView.tpl.tpl
@@ -36,26 +36,19 @@
 
 	<!-- underscore template for the collection -->
 	<script type="text/template" id="{$singular|lcfirst}CollectionTemplate">
+	<div class="tableContainer">
 		<table class="collection table table-bordered table-hover">
 		<thead>
 			<tr>
 {foreach from=$table->Columns item=column name=columnsForEach}
-{if $smarty.foreach.columnsForEach.index == 5}{ldelim}* UNCOMMENT TO SHOW ADDITIONAL COLUMNS *{rdelim}
-{ldelim}*
-{/if}
 				<th id="header_{$column->NameWithoutPrefix|studlycaps}">{$column->NameWithoutPrefix|underscore2space}<% if (page.orderBy == '{$column->NameWithoutPrefix|studlycaps}') { %> <i class='icon-arrow-<%= page.orderDesc ? 'up' : 'down' %>' /><% } %></th>
 {/foreach}
-{if $smarty.foreach.columnsForEach.index >= 5}*{rdelim}
-{/if}
 			</tr>
 		</thead>
 		<tbody>
 		<% items.each(function(item) {ldelim} %>
 			<tr id="<%= _.escape(item.get('{$table->GetPrimaryKeyName()|studlycaps|lcfirst}')) %>">
 {foreach from=$table->Columns item=column name=columnsForEach}
-{if $smarty.foreach.columnsForEach.index == 5}{ldelim}* uncomment to show additional colums *{rdelim}
-{ldelim}*
-{/if}
 {if $column->Type == "date"}
 				<td><%if (item.get('{$column->NameWithoutPrefix|studlycaps|lcfirst}')) { %><%= _date(app.parseDate(item.get('{$column->NameWithoutPrefix|studlycaps|lcfirst}'))).format('MMM D, YYYY') %><% } else { %>NULL<% } %></td>
 {elseif $column->Type == "datetime" ||  $column->Type == "timestamp"}
@@ -66,12 +59,11 @@
 				<td><%= _.escape(item.get('{$column->NameWithoutPrefix|studlycaps|lcfirst}') || '') %></td>
 {/if}
 {/foreach}
-{if $smarty.foreach.columnsForEach.index >= 5}*{rdelim}
-{/if}
 			</tr>
 		<% {rdelim}); %>
 		</tbody>
 		</table>
+	</div>
 
 		<%=  view.getPaginationHtml(page) %>
 	</script>
diff --git a/builder/code/phreeze.blade/views/listview.blade.php.tpl b/builder/code/phreeze.blade/views/listview.blade.php.tpl
index e9fcbb8a..95f132df 100644
--- a/builder/code/phreeze.blade/views/listview.blade.php.tpl
+++ b/builder/code/phreeze.blade/views/listview.blade.php.tpl
@@ -34,26 +34,19 @@
 
 	<!-- underscore template for the collection -->
 	<script type="text/template" id="{$singular|lcfirst}CollectionTemplate">
+	<div class="tableContainer">
 		<table class="collection table table-bordered table-hover">
 		<thead>
 			<tr>
 {foreach from=$table->Columns item=column name=columnsForEach}
-{if $smarty.foreach.columnsForEach.index == 5}<!-- UNCOMMENT TO SHOW ADDITIONAL COLUMNS -->
-<!--
-{/if}
 				<th id="header_{$column->NameWithoutPrefix|studlycaps}">{$column->NameWithoutPrefix|underscore2space}<% if (page.orderBy == '{$column->NameWithoutPrefix|studlycaps}') { %> <i class='icon-arrow-<%= page.orderDesc ? 'up' : 'down' %>' /><% } %></th>
 {/foreach}
-{if $smarty.foreach.columnsForEach.index >= 5}-->
-{/if}
 			</tr>
 		</thead>
 		<tbody>
 		<% items.each(function(item) {ldelim} %>
 			<tr id="<%= _.escape(item.get('{$table->GetPrimaryKeyName()|studlycaps|lcfirst}')) %>">
 {foreach from=$table->Columns item=column name=columnsForEach}
-{if $smarty.foreach.columnsForEach.index == 5}<!-- uncomment to show additional colums -->
-<!--
-{/if}
 {if $column->Type == "date"}
 				<td><%if (item.get('{$column->NameWithoutPrefix|studlycaps|lcfirst}')) { %><%= _date(app.parseDate(item.get('{$column->NameWithoutPrefix|studlycaps|lcfirst}'))).format('MMM D, YYYY') %><% } else { %>NULL<% } %></td>
 {elseif $column->Type == "datetime" ||  $column->Type == "timestamp"}
@@ -64,12 +57,11 @@
 				<td><%= _.escape(item.get('{$column->NameWithoutPrefix|studlycaps|lcfirst}') || '') %></td>
 {/if}
 {/foreach}
-{if $smarty.foreach.columnsForEach.index >= 5}-->
-{/if}
 			</tr>
 		<% {rdelim}); %>
 		</tbody>
 		</table>
+	</div>
 
 		<%=  view.getPaginationHtml(page) %>
 	</script>
diff --git a/builder/code/phreeze.savant/templates/ListView.tpl.tpl b/builder/code/phreeze.savant/templates/ListView.tpl.tpl
index 381693df..1063b6b9 100644
--- a/builder/code/phreeze.savant/templates/ListView.tpl.tpl
+++ b/builder/code/phreeze.savant/templates/ListView.tpl.tpl
@@ -31,24 +31,19 @@
 
 	<!-- underscore template for the collection -->
 	<script type="text/template" id="{$singular|lcfirst}CollectionTemplate">
+	<div class="tableContainer">
 		<table class="collection table table-bordered table-hover">
 		<thead>
 			<tr>
 {foreach from=$table->Columns item=column name=columnsForEach}
-{if $smarty.foreach.columnsForEach.index == 5}<!-- UNCOMMENT TO SHOW ADDITIONAL COLUMNS
-{/if}
 				<th id="header_{$column->NameWithoutPrefix|studlycaps}">{$column->NameWithoutPrefix|underscore2space}<% if (page.orderBy == '{$column->NameWithoutPrefix|studlycaps}') { %> <i class='icon-arrow-<%= page.orderDesc ? 'up' : 'down' %>' /><% } %></th>
 {/foreach}
-{if $smarty.foreach.columnsForEach.index >= 5}-->
-{/if}
 			</tr>
 		</thead>
 		<tbody>
 		<% items.each(function(item) {ldelim} %>
 			<tr id="<%= _.escape(item.get('{$table->GetPrimaryKeyName()|studlycaps|lcfirst}')) %>">
 {foreach from=$table->Columns item=column name=columnsForEach}
-{if $smarty.foreach.columnsForEach.index == 5}<!-- UNCOMMENT TO SHOW ADDITIONAL COLUMNS
-{/if}
 {if $column->Type == "date"}
 				<td><%if (item.get('{$column->NameWithoutPrefix|studlycaps|lcfirst}')) { %><%= _date(app.parseDate(item.get('{$column->NameWithoutPrefix|studlycaps|lcfirst}'))).format('MMM D, YYYY') %><% } else { %>NULL<% } %></td>
 {elseif $column->Type == "datetime" ||  $column->Type == "timestamp"}
@@ -59,12 +54,11 @@
 				<td><%= _.escape(item.get('{$column->NameWithoutPrefix|studlycaps|lcfirst}') || '') %></td>
 {/if}
 {/foreach}
-{if $smarty.foreach.columnsForEach.index >= 5}-->
-{/if}
 			</tr>
 		<% {rdelim}); %>
 		</tbody>
 		</table>
+	</div>
 
 		<%=  view.getPaginationHtml(page) %>
 	</script>