diff --git a/pkg/list/list.go b/pkg/list/list.go
index dfc3fb7bce58752364d08c552a45be6eb47b047a..3aa9d65676a9bffc0007249d53373ac2dfc209df 100644
--- a/pkg/list/list.go
+++ b/pkg/list/list.go
@@ -13,6 +13,25 @@ 	Left  T
 	Right U
 }
 
+func Chunck[T any](slice []T, size int) [][]T {
+	chuncks := make([][]T, size)
+
+	for i := 0; i < len(slice); i += size {
+		for x := 0; x < size; x++ {
+			end := i + x
+
+			if end > len(slice) {
+				break
+			}
+
+			chuncks[x] = append(chuncks[x], slice[end])
+		}
+
+	}
+
+	return chuncks
+}
+
 func Zip[T, U any](left []T, right []U) []Pair[T, U] {
 	// pick the array with the smaller length
 	l := len(left)
diff --git a/scss/main.scss b/scss/main.scss
index addae37547d11c435af03c54f643ed454cf146f5..8220af6ae62db68b8e37fbebd048b0f2abd7e421 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -1,9 +1,9 @@
 $breakpoint: 360px;
 
-$tablet: $breakpoint;
+$tablet: 480px;
 $body-font-size: 1rem;
 $radius-rounded: 0;
-$container-max-width: 920px;
+$container-max-width: 1080px;
 
 $navbar-breakpoint: $breakpoint;
 
@@ -34,15 +34,16 @@ @import "bulma/sass/elements/_all.sass";
 
 body {
     font-family: $family-primary;
-    padding-bottom: 10px;
 }
 
 .input, .button{
     border-radius: 0;
 }
+
 .wide-column {
     width: 100%;
 }
+
 .is-mono {
     font-family: monospace;
 }
@@ -71,17 +72,17 @@ }
 
 
 .card-image {
-    margin: 5px;
+    padding: 5px;
 }
 
 
 .image.is-fit {
   height: auto;
-  width: 130px;
+  width: 100%;
+}
 
-    @include until($breakpoint) {
-        width: auto;
-    }
+.column {
+    padding: 0;
 }
 
 th {
diff --git a/templates/album.qtpl b/templates/album.qtpl
index 9f4c0bd67ae7fdd6d21ebf52839cc6197be17f3c..328c6d444892cad0792ba27695045a93199e0b0f 100644
--- a/templates/album.qtpl
+++ b/templates/album.qtpl
@@ -1,4 +1,5 @@
 {% import "git.sr.ht/~gabrielgio/img/pkg/database/repository" %}
+{% import "git.sr.ht/~gabrielgio/img/pkg/list" %}
 
 {% code
 type AlbumPage struct {
@@ -26,8 +27,10 @@ {% for _, a := range p.Albums %}
   <a href="/album/?albumId={%s FromUInttoString(&a.ID) %}" class="tag text-size-2">{%s a.Name %}</a>
 {% endfor %}
 </div>
-<div class="columns is-multiline">
-{% for _, media := range p.Medias %}
+<div class="columns">
+{% for _, c := range list.Chunck(p.Medias, 4) %}
+    <div class="column is-3">
+    {% for _, media := range c %}
     <div class="card-image">
        {% if media.IsVideo() %}
        <video class="image is-fit" controls muted="true" poster="/media/thumbnail/?path_hash={%s media.PathHash %}" preload="{%s p.PreloadAttr() %}">
@@ -38,6 +41,8 @@         <figure class="image is-fit">
             <img src="/media/thumbnail/?path_hash={%s media.PathHash %}">
         </figure>
         {% endif %}
+    </div>
+    {% endfor %}
     </div>
 {% endfor %}
 </div>
diff --git a/templates/media.qtpl b/templates/media.qtpl
index 11fc9bcd5a62b0e6d0b7bf0e0a0cf51ce96b27de..7dcdf54a8c8e329be1b29912260e59d5e22b1ba5 100644
--- a/templates/media.qtpl
+++ b/templates/media.qtpl
@@ -1,4 +1,5 @@
 {% import "git.sr.ht/~gabrielgio/img/pkg/database/repository" %}
+{% import "git.sr.ht/~gabrielgio/img/pkg/list" %}
 
 {% code
 type MediaPage struct {
@@ -18,8 +19,10 @@
 {% func (p *MediaPage) Title() %}Media{% endfunc %}
 
 {% func (p *MediaPage) Content() %}
-<div class="columns is-multiline">
-{% for _, media := range p.Medias %}
+<div class="columns">
+{% for _, c := range list.Chunck(p.Medias, 4) %}
+    <div class="column is-3">
+    {% for _, media := range c %}
     <div class="card-image">
        {% if media.IsVideo() %}
        <video class="image is-fit" controls muted="true" poster="/media/thumbnail/?path_hash={%s media.PathHash %}" preload="{%s p.PreloadAttr() %}">
@@ -30,6 +33,8 @@         <figure class="image is-fit">
             <img src="/media/thumbnail/?path_hash={%s media.PathHash %}">
         </figure>
         {% endif %}
+    </div>
+    {% endfor %}
     </div>
 {% endfor %}
 </div>