diff --git a/resources/shop/css/site.css b/resources/shop/css/site.css
index e5bd6ae2..c89327e7 100644
--- a/resources/shop/css/site.css
+++ b/resources/shop/css/site.css
@@ -311,6 +311,52 @@ div.megamenu ul.megamenu li.megamenu.level1
 }
 
 
+.category-title {
+	font-size: 2em;
+}
+
+.category-description {
+	font-size: 1.2em;
+}
+
+.breadcrumb-title {
+	font-size: 1.6em;
+}
+
+.breadcrumb-current {
+	font-size: 1em;
+}
+
+@media (max-width: 767.98px){
+	.category-title {
+		font-size: 1.5em;
+	}
+	.category-description {
+		font-size: 1.05em;
+	}
+	.breadcrumb-title {
+		font-size: 1.4em;
+	}
+	.breadcrumb-current {
+		font-size: 0.95em;
+	}
+}
+
+@media (max-width: 575.98px){
+	.category-title {
+		font-size: 1.35em;
+	}
+	.category-description {
+		font-size: 0.95em;
+	}
+	.breadcrumb-title {
+		font-size: 1.2em;
+	}
+	.breadcrumb-current {
+		font-size: 0.9em;
+	}
+}
+
 @font-face {
     font-family: 'noto_sanscondensed';
     src: url('/fonts/notosans-condensed/notosans-condensed-webfont.eot');
@@ -375,4 +421,13 @@ div.megamenu ul.megamenu li.megamenu.level1
 	#navbarContentMobile .dropdown-menu .shadow {
 		box-shadow: none !important;
 	}
+
+	.category-card .card-body {
+		font-size: 0.75rem;
+	}
+
+	/* Supprimer les grandes marges du container en affichage mobile/tablette */
+	.container {
+		max-width: 100%;
+	}
 }
diff --git a/resources/views/Shop/Shelves/partials/breadcrumb.blade.php b/resources/views/Shop/Shelves/partials/breadcrumb.blade.php
index 3a186f24..953dcece 100644
--- a/resources/views/Shop/Shelves/partials/breadcrumb.blade.php
+++ b/resources/views/Shop/Shelves/partials/breadcrumb.blade.php
@@ -1,8 +1,6 @@
-<h1 style="font-size: 1.5em;">
+<h1 class="breadcrumb-title">
 	@foreach($breadcrumb ?? [] as $parent)
-		<a href="{{ route('Shop.Categories.show', ['id' => $parent['id']]) }}" style="text-decoration: none; color: inherit;">{{ $parent['name'] }}</a> /
+		<a href="{{ route('Shop.Categories.show', ['id' => $parent['id']]) }}" class="breadcrumb-link">{{ $parent['name'] }}</a> /
 	@endforeach
-	<span style="font-size: 1.4em;">
-		{{ $category['name'] }}
-	</span>
+	<span class="breadcrumb-current">{{ $category['name'] }}</span>
 </h1>
diff --git a/resources/views/Shop/Shelves/partials/category.blade.php b/resources/views/Shop/Shelves/partials/category.blade.php
index 611364ef..56bbe2ff 100644
--- a/resources/views/Shop/Shelves/partials/category.blade.php
+++ b/resources/views/Shop/Shelves/partials/category.blade.php
@@ -1,7 +1,7 @@
 <div class="row">
 	<div class="col-8">
-		<h1 style="font-size: 2em;">{{ $category['name'] }}</h1>
-		<h3 style="font-size: 1.2em;">{!! $category['description'] !!}</h3>
+		<h1 class="category-title">{{ $category['name'] }}</h1>
+		<h3 class="category-description">{!! $category['description'] !!}</h3>
 	</div>
 	<div class="col-4">
 		@include('Shop.layout.partials.category_add')
@@ -12,4 +12,4 @@
 	<div class="col-12">
 		@include('Shop.layout.partials.category_articles')
 	</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/resources/views/Shop/Shelves/partials/category_articles.blade.php b/resources/views/Shop/Shelves/partials/category_articles.blade.php
index a60a2232..7e249f4b 100644
--- a/resources/views/Shop/Shelves/partials/category_articles.blade.php
+++ b/resources/views/Shop/Shelves/partials/category_articles.blade.php
@@ -1,7 +1,7 @@
-<div class="row">
+<div class="row mx-n1">
 	@if ($articles ?? false)
 		@foreach ($articles as $product_name => $article)
-			<div class="col-lg-3 col-xs-12 mb-3">
+			<div class="category-card col-6 col-md-4 col-lg-3 mb-2 px-1">
 				@include('Shop.Articles.partials.article')
 			</div>
 		@endforeach
@@ -46,4 +46,3 @@
         });
 	</script>
 @endpush
-