diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css
index ba15534d5e..1bf908e1da 100644
--- a/view/theme/frio/css/style.css
+++ b/view/theme/frio/css/style.css
@@ -84,6 +84,20 @@ blockquote {
 	overflow: hidden !important;
 }
 
+/**
+ * details tag
+ */
+details {
+	padding: .5em .5em 0;
+}
+details details {
+	padding-left: .5em;
+}
+details summary {
+	font-weight: bold;
+	display: list-item;
+}
+
 /**
  * mobile aside
  */
diff --git a/view/theme/frio/js/module/admin/logs/view.js b/view/theme/frio/js/module/admin/logs/view.js
new file mode 100644
index 0000000000..fc19af28a2
--- /dev/null
+++ b/view/theme/frio/js/module/admin/logs/view.js
@@ -0,0 +1,41 @@
+$(function(){
+	$(".log-event").on("click", function(ev) {
+		var $modal = $("#logdetail");
+		var tr = $modal.find(".main-data tbody tr")[0];
+		tr.innerHTML = ev.currentTarget.innerHTML;
+
+		var data = JSON.parse(ev.currentTarget.dataset.source);
+		$modal.find(".source-data td").each(function(i,elm){
+			var k = elm.dataset.value;
+			elm.innerText = data[k];
+		});
+
+		var elm = $modal.find(".event-data")[0];
+		elm.innerHTML = "";
+		var data = ev.currentTarget.dataset.data;
+		if (data !== "") {
+			elm.innerHTML = "<h3>Data</h3>";
+			data = JSON.parse(data);
+			elm.innerHTML += recursive_details("", data);
+		}
+
+		$modal.modal({})
+	})
+
+	function recursive_details(s, data, lev=0) {
+		for(var k in data) {
+			if (data.hasOwnProperty(k)) {
+				var v = data[k];
+				var open = lev > 1 ? "" : "open";
+				s += "<details " + open + "><summary>" + k + "</summary>";
+				if (typeof v === 'object' && v !== null) {
+					s = recursive_details(s, v, lev+1);
+				} else {
+					s +=  $("<pre>").text(v)[0].outerHTML;
+				}
+				s += "</details>";
+			}
+		}
+		return s;
+	}
+});
diff --git a/view/theme/frio/templates/admin/logs/view.tpl b/view/theme/frio/templates/admin/logs/view.tpl
new file mode 100755
index 0000000000..99a96befd5
--- /dev/null
+++ b/view/theme/frio/templates/admin/logs/view.tpl
@@ -0,0 +1,93 @@
+<div id="adminpage">
+	<h1>{{$title}} - {{$page}}</h1>
+
+	<h3>{{$logname}}</h3>
+	{{if $error }}
+		<div id="admin-error-message-wrapper" class="alert alert-warning">
+			<p>{{$error nofilter}}</p>
+		</div>
+		{{else}}
+		<table class="table table-hover">
+			<thead>
+				<tr>
+					<th>Date</th>
+					<th>Level</th>
+					<th>Context</th>
+					<th>Message</th>
+				</tr>
+			</thead>
+			<tbody>
+				{{foreach $data as $row}}
+				<tr id="ev-{{$row->id}}" class="log-event"
+					data-data="{{$row->data}}" data-source="{{$row->source}}">
+					<td>{{$row->date}}</td>
+					<td class="
+						{{if $row->level == "CRITICAL"}}bg-danger
+						{{elseif $row->level == "ERROR"}}bg-danger
+						{{elseif $row->level == "WARNING"}}bg-warinig
+						{{elseif $row->level == "NOTICE"}}bg-info
+						{{elseif $row->level == "DEBUG"}}text-muted
+						{{/if}}
+					   ">{{$row->level}}</td>
+					<td>{{$row->context}}</td>
+					<td style="width:80%">{{$row->message}}</td>
+				</tr>
+				{{/foreach}}
+			</tbody>
+		</table>
+		{{/if}}
+</div>
+
+<div id="logdetail" class="modal fade" tabindex="-1" role="dialog">
+	<div class="modal-dialog modal-lg" style="width:90%" role="document">
+		<div class="modal-content">
+			<div class="modal-header">
+				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+				<h4 class="modal-title">Event details</h4>
+			</div>
+			<div class="modal-body">
+				<table class="table main-data">
+					<thead>
+						<tr>
+							<th>Date</th>
+							<th>Level</th>
+							<th>Context</th>
+							<th>Message</th>
+						</tr>
+					</thead>
+					<tbody><tr></tr></tbody>
+				</table>
+				<table class="table source-data">
+					<thead>
+						<tr>
+							<th>File</th>
+							<th>Line</th>
+							<th>Function</th>
+							<th>UID</th>
+							<th>Process ID</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr>
+							<td data-value="file"></td>
+							<td data-value="line"></td>
+							<td data-value="function" style="width:70%"></td>
+							<td data-value="uid"></td>
+							<td data-value="process_id"></td>
+						</tr>
+					</tbody>
+				</table>
+
+
+				<div class="event-source">
+				</div>
+				<div class="event-data">
+				</div>
+
+			</div>
+			<div class="modal-footer">
+				<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
+			</div>
+		</div><!-- /.modal-content -->
+	</div><!-- /.modal-dialog -->
+</div><!-- /.modal -->