diff --git a/public/css/index.css b/public/css/index.css
index 8409b5128..b0fc396cc 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -2374,83 +2374,35 @@ footer .ui.language .menu {
 .settings .content .segment {
   box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
 }
-.settings .list .item .green {
+.settings .list > .item .green {
   color: #21BA45 !important;
 }
-.settings .list .item:not(:first-child) {
+.settings .list > .item:not(:first-child) {
   border-top: 1px solid #eaeaea;
   padding: 1rem;
   margin: 15px -1rem -1rem -1rem;
-  min-height: 60px;
 }
-.settings .list .item > .mega-octicon {
+.settings .list > .item > .mega-octicon {
   display: table-cell;
 }
-.settings .list .item > .mega-octicon + .content {
+.settings .list > .item > .mega-octicon + .content {
   display: table-cell;
   padding: 0 0 0 .5em;
   vertical-align: top;
 }
+.settings .list > .item .info {
+  margin-top: 10px;
+}
+.settings .list > .item .info .tab.segment {
+  border: none;
+  padding: 10px 0 0;
+}
 .settings .list.key .meta {
   padding-top: 5px;
   color: #666;
 }
-.settings .hook.list > .item:not(:first-child) {
-  border-top: 1px solid #eaeaea;
-}
-.settings .hook.list .item {
-  padding: 10px 20px;
-}
-.settings .hook.list .item .octicon,
-.settings .hook.list .item .fa {
-  width: 20px;
-  text-align: center;
-}
-.settings .hook.list .item a {
-  /* These are technically the same, but use both */
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-  -ms-word-break: break-all;
-  /* This is the dangerous one in WebKit, as it breaks things wherever */
-  word-break: break-all;
-  /* Instead use this non-standard one: */
-  word-break: break-word;
-  /* Adds a hyphen where the word breaks, if supported (No Blink) */
-  -ms-hyphens: auto;
-  -moz-hyphens: auto;
-  -webkit-hyphens: auto;
-  hyphens: auto;
-}
-.settings .hook.history.list .item {
-  padding-left: 13px;
-}
-.settings .hook.history.list .item .meta .ui.right {
-  margin-top: 5px;
-}
-.settings .hook.history.list .item .meta .ui.right .time {
-  font-size: 12px;
-}
-.settings .hook.history.list .item .info {
-  margin-top: 10px;
-}
-.settings .hook.history.list .item .info .tabular.menu .item {
-  font-weight: 500;
-}
-.settings .hook.history.list .item .info .tab.segment {
-  border: none;
-  padding: 0;
-  padding-top: 10px;
-  box-shadow: none;
-}
-.settings .hook.history.list .item .info .tab.segment > * {
-  color: #666;
-}
-.settings .hook.history.list .item .info .tab.segment pre {
-  word-wrap: break-word;
-}
-.settings .hook.history.list .item .info .tab.segment pre .hljs {
-  padding: 0;
-  background-color: inherit;
+.settings .list.email > .item:not(:first-child) {
+  min-height: 60px;
 }
 .ui.vertical.menu .header.item {
   font-size: 1.1em;
diff --git a/public/less/_repository.less b/public/less/_repository.less
index 7fadc21a8..7f36274a2 100644
--- a/public/less/_repository.less
+++ b/public/less/_repository.less
@@ -1363,7 +1363,7 @@
 		}
 	}
 	.list {
-		.item {
+		> .item {
 			.green {
 				color: #21BA45 !important;
 			}
@@ -1371,7 +1371,6 @@
 				border-top: 1px solid #eaeaea;
 				padding:1rem;
 				margin: 15px -1rem -1rem -1rem;
-				min-height: 60px;
 			}
 			> .mega-octicon {
 				display: table-cell;
@@ -1381,6 +1380,13 @@
 				padding: 0 0 0 .5em;
 				vertical-align: top;
 			}
+			.info {
+				margin-top: 10px;
+				.tab.segment {
+					border: none;
+					padding: 10px 0 0;
+				}
+			}
 		}
 		&.key{
 			.meta {
@@ -1388,57 +1394,9 @@
 				color: #666;
 			}
 		}
-	}
-	.hook.list {
-		> .item:not(:first-child) {
-			border-top: 1px solid #eaeaea;
-		}
-		.item {
-			padding: 10px 20px;
-			.octicon,
-			.fa {
-				width: 20px;
-				text-align: center;
-			}
-			a {
-				.dont-break-out;
-			}
-		}
-	}
-	.hook.history.list {
-		.item {
-			padding-left: 13px;
-			.meta {
-				.ui.right {
-					margin-top: 5px;
-					.time {
-						font-size: 12px;
-					}
-				}
-			}
-			.info {
-				margin-top: 10px;
-				.tabular.menu {
-					.item {
-						font-weight: 500;
-					}
-				}
-				.tab.segment {
-					border: none;
-					padding: 0;
-					padding-top: 10px;
-					box-shadow: none;
-					> * {
-						color: #666;
-					}
-					pre {
-						word-wrap: break-word;
-						.hljs {
-							padding: 0;
-							background-color: inherit;
-						}
-					}
-				}
+		&.email {
+			> .item:not(:first-child) {
+				min-height: 60px;
 			}
 		}
 	}
diff --git a/templates/repo/settings/githooks.tmpl b/templates/repo/settings/githooks.tmpl
index 8014a7fe1..2af66780f 100644
--- a/templates/repo/settings/githooks.tmpl
+++ b/templates/repo/settings/githooks.tmpl
@@ -7,8 +7,8 @@
 		<h4 class="ui top attached header">
 			{{.i18n.Tr "repo.settings.githooks"}}
 		</h4>
-		<div class="ui attached table segment">
-			<div class="ui hook list">
+		<div class="ui attached segment">
+			<div class="ui list">
 				<div class="item">
 					{{.i18n.Tr "repo.settings.githooks_desc" | Str2html}}
 				</div>
diff --git a/templates/repo/settings/hook_history.tmpl b/templates/repo/settings/hook_history.tmpl
index 9ded6a790..a08481aaf 100644
--- a/templates/repo/settings/hook_history.tmpl
+++ b/templates/repo/settings/hook_history.tmpl
@@ -8,8 +8,8 @@
 			</div>
 		{{end}}
 	</h4>
-	<div class="ui attached table segment">
-		<div class="ui hook history list">
+	<div class="ui attached segment">
+		<div class="ui list">
 			{{range .History}}
 				<div class="item">
 					<div class="meta">
diff --git a/templates/repo/settings/hook_list.tmpl b/templates/repo/settings/hook_list.tmpl
index 94f1d1310..0b9c4d505 100644
--- a/templates/repo/settings/hook_list.tmpl
+++ b/templates/repo/settings/hook_list.tmpl
@@ -15,8 +15,8 @@
 		</div>
 	</div>
 </h4>
-<div class="ui attached table segment">
-	<div class="ui hook list">
+<div class="ui attached segment">
+	<div class="ui list">
 		<div class="item">
 			{{.Description | Str2html}}
 		</div>