diff --git a/src/app/browsepanel/browsepanel.component.html b/src/app/browsepanel/browsepanel.component.html
index 471c1b74..ac7944cf 100644
--- a/src/app/browsepanel/browsepanel.component.html
+++ b/src/app/browsepanel/browsepanel.component.html
@@ -8,8 +8,8 @@
 	<div class="container text-left">
 		<a style="font-weight: bold">Featured Layer Groups</a>
 		<div class="row align-items-start" *ngFor="let layerGroup of layerGroupColumn | keyvalue">
-			<div class="col">
-				<a (click)="selectGroup(layerGroup)">
+			<div class="col" (click)="selectGroup(layerGroup)">
+				<a>
 					<span class="truncate-grp" [ngClass]="{'enbolden': isGroupSelected(layerGroup)}">{{layerGroup.key}}</span>
 				</a>
 			</div>
@@ -21,8 +21,8 @@
 		<a *ngIf="!layerColumnHeader" style="font-weight: bold">Layers</a>
 		<a *ngIf="layerColumnHeader" ><span style="font-weight: bold;" class="truncate-layer">{{layerColumnHeader}} Layers</span></a>
 		<div class="row align-items-start" *ngFor="let layer of layerColumn">
-			<div class="col">
-				<a (click)="selectLayer(layer)">
+			<div class="col" (click)="selectLayer(layer)">
+				<a>
 					<span class="truncate-layer" [ngClass]="{'enbolden': isLayerSelected(layer)}">{{layer.name}}</span>
 				</a>
 				<button *ngIf="isLayerSelected(layer)" style="float:right; width:6em; padding:2px" class="btn btn-sm btn-success" type="button" title="Add layer" (click)="addLayer(layer)">
diff --git a/src/app/browsepanel/browsepanel.component.scss b/src/app/browsepanel/browsepanel.component.scss
index e6e39b30..48b08d8a 100644
--- a/src/app/browsepanel/browsepanel.component.scss
+++ b/src/app/browsepanel/browsepanel.component.scss
@@ -39,6 +39,15 @@
         max-width: 200px !important;
     }
 
+    .col {
+        cursor: pointer;
+    }
+
+    .col:hover {
+        background-color: rgba(220, 220, 220, 0.8);
+        border-radius: 0.3rem;
+    }
+
     a, span {
         font-size: 16px;
         color: black;