diff --git a/public/viewjs/equipment.js b/public/viewjs/equipment.js
index 85c0d8ed..d6599309 100644
--- a/public/viewjs/equipment.js
+++ b/public/viewjs/equipment.js
@@ -39,7 +39,8 @@ function DisplayEquipment(id)
 	Grocy.Api.Get('get-object/equipment/' + id,
 		function(equipmentItem)
 		{
-			$("#description-tab").html(equipmentItem.description);
+			$(".selected-equipment-name").text(equipmentItem.name);
+			$("#description-tab-content").html(equipmentItem.description);
 
 			if (equipmentItem.instruction_manual_file_name !== null && !equipmentItem.instruction_manual_file_name.isEmpty())
 			{
@@ -111,3 +112,17 @@ $(document).on('click', '.equipment-delete-button', function (e)
 		}
 	});
 });
+
+$("#selectedEquipmentInstructionManualToggleFullscreenButton").on('click', function(e)
+{
+	$("#selectedEquipmentInstructionManualCard").toggleClass("fullscreen");
+	$("#selectedEquipmentInstructionManualCard .card-header").toggleClass("fixed-top");
+	$("#selectedEquipmentInstructionManualCard .card-body").toggleClass("mt-5");
+});
+
+$("#selectedEquipmentDescriptionToggleFullscreenButton").on('click', function(e)
+{
+	$("#selectedEquipmentDescriptionCard").toggleClass("fullscreen");
+	$("#selectedEquipmentDescriptionCard .card-header").toggleClass("fixed-top");
+	$("#selectedEquipmentDescriptionCard .card-body").toggleClass("mt-5");
+});
diff --git a/views/equipment.blade.php b/views/equipment.blade.php
index 08952e65..c5d56386 100644
--- a/views/equipment.blade.php
+++ b/views/equipment.blade.php
@@ -62,13 +62,33 @@
 				<a class="nav-link" data-toggle="tab" href="#description-tab">{{ $L('Notes') }}</a>
 			</li>
 		</ul>
-		<div class="tab-content border-left border-right border-bottom py-2 px-2">
+		<div class="tab-content">
 			<div class="tab-pane fade show active" id="instruction-manual-tab">
-				<p id="selected-equipment-has-no-instruction-manual-hint" class="text-muted font-italic d-none">{{ $L('The selected equipment has no instruction manual') }}</p>
-				<embed id="selected-equipment-instruction-manual" class="embed-responsive embed-responsive-4by3" width="100%" height="800px" src="" type="application/pdf">
+				<div id="selectedEquipmentInstructionManualCard" class="card">
+					<div class="card-header">
+						<i class="fas fa-toolbox"></i> <span class="selected-equipment-name"></span>
+						<a id="selectedEquipmentInstructionManualToggleFullscreenButton" class="btn btn-sm btn-outline-secondary py-0 float-right" href="#" data-toggle="tooltip" title="{{ $L('Expand to fullscreen') }}">
+							<i class="fas fa-expand-arrows-alt"></i>
+						</a>
+					</div>
+					<div class="card-body">
+						<p id="selected-equipment-has-no-instruction-manual-hint" class="text-muted font-italic d-none">{{ $L('The selected equipment has no instruction manual') }}</p>
+						<embed id="selected-equipment-instruction-manual" class="embed-responsive embed-responsive-4by3" width="100%" height="800px" src="" type="application/pdf">
+					</div>
+				</div>
 			</div>
 			<div class="tab-pane fade" id="description-tab">
-				
+				<div id="selectedEquipmentDescriptionCard" class="card">
+					<div class="card-header">
+						<i class="fas fa-toolbox"></i> <span class="selected-equipment-name"></span>
+						<a id="selectedEquipmentDescriptionToggleFullscreenButton" class="btn btn-sm btn-outline-secondary py-0 float-right" href="#" data-toggle="tooltip" title="{{ $L('Expand to fullscreen') }}">
+							<i class="fas fa-expand-arrows-alt"></i>
+						</a>
+					</div>
+					<div class="card-body">
+						<div id="description-tab-content" class="mb-0"></div>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>