1diff --git a/pkg/list/list.go b/pkg/list/list.go
  2index 482e5bfeb2622dd890a125085cf3ad7e0e676b44..8f3d875fb4b6fc17202dabaab72642ea5f0b41f2 100644
  3--- a/pkg/list/list.go
  4+++ b/pkg/list/list.go
  5@@ -31,6 +31,24 @@
  6 	return chuncks
  7 }
  8 
  9+func Chunck[T any](slice []T, size int) [][]T {
 10+	var divided [][]T
 11+
 12+	chunkSize := (len(slice) + size - 1) / size
 13+
 14+	for i := 0; i < len(slice); i += chunkSize {
 15+		end := i + chunkSize
 16+
 17+		if end > len(slice) {
 18+			end = len(slice)
 19+		}
 20+
 21+		divided = append(divided, slice[i:end])
 22+	}
 23+
 24+	return divided
 25+}
 26+
 27 func Zip[T, U any](left []T, right []U) []Pair[T, U] {
 28 	// pick the array with the smaller length
 29 	l := len(left)
 30diff --git a/scss/main.scss b/scss/main.scss
 31index 532a38a801bf6cc40f6e57780c6fc35505883439..95db99f8c9b0a4205248ba19e48654860ad7cbbb 100644
 32--- a/scss/main.scss
 33+++ b/scss/main.scss
 34@@ -15,6 +15,8 @@
 35 $table-cell-padding: 0.5em;
 36 $table-cell-border-width: 0;
 37 
 38+$section-padding: 0 1.5rem;
 39+
 40 $tag-delete-margin: 15px;
 41 
 42 $title-weight: normal;
 43@@ -57,19 +59,6 @@ .container {
 44     margin-top: 30px;
 45 }
 46 
 47-.card-image {
 48-    padding: 5px;
 49-}
 50-
 51-.image.is-fit {
 52-  height: auto;
 53-  width: 100%;
 54-}
 55-
 56-.column {
 57-    padding: 0;
 58-}
 59-
 60 th {
 61     font-weight: normal;
 62 }
 63@@ -79,10 +68,6 @@     padding-left: 15px;
 64     padding-right: 15px;
 65 }
 66 
 67-.img {
 68-    object-fit: cover;
 69-}
 70-
 71 .text-size-1{
 72     @extend .is-size-4 !optional;
 73 }
 74@@ -90,3 +75,34 @@
 75 .text-size-2{
 76     @extend .is-size-5 !optional;
 77 }
 78+
 79+.gallary_container{
 80+  display: grid;
 81+  gap: 1rem;
 82+  grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
 83+  grid-auto-rows: 15.5em;  
 84+  padding: 10px;
 85+}
 86+
 87+.image_container img{
 88+  width: 100%;
 89+  height: 100%; 
 90+    box-shadow: rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem, rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem;
 91+  object-fit: cover;
 92+}
 93+
 94+@media screen and (min-width: $breakpoint) {
 95+  .image-tall {
 96+    grid-row: span 2 / auto;
 97+  }
 98+
 99+  .image-wide {
100+    grid-column: span 2 / auto;
101+  }
102+}
103+
104+// Fix horizontal scroll on iOS
105+.scrolling-element {
106+    overflow-x: scroll; /* Must be 'scroll' not 'auto' */
107+    -webkit-overflow-scrolling: touch;
108+}
109diff --git a/templates/album.qtpl b/templates/album.qtpl
110index 58fc499ccceb04cbb33f4c8f9ec495293b043020..246c77c1d193cf0d767a9c55f520bf9e6f9d3e90 100644
111--- a/templates/album.qtpl
112+++ b/templates/album.qtpl
113@@ -20,15 +20,15 @@
114 {% func (p *AlbumPage) Title() %}Media{% endfunc %}
115 
116 {% func (p *AlbumPage) Content() %}
117-<h1 class="title text-size-1">{%s p.Name %}</h1>
118-<div class="tags are-large">
119-{% for _, a := range p.Albums %}
120-  <a href="/album?albumId={%s FromUInttoString(&a.ID) %}" class="tag text-size-2">{%s a.Name %}</a>
121-{% endfor %}
122-</div>
123-<div class="columns">
124+<section class="section">
125+    <h1 class="title text-size-1">{%s p.Name %}</h1>
126+    <div class="tags are-large">
127+    {% for _, a := range p.Albums %}
128+      <a href="/album?albumId={%s FromUInttoString(&a.ID) %}" class="tag text-size-2">{%s a.Name %}</a>
129+    {% endfor %}
130+    </div>
131+</section>
132 {%= Mosaic(p.Medias, p.PreloadAttr()) %}
133-</div>
134 <div>
135     <a href="/album?albumId={%s FromUInttoString(p.Next.AlbumID) %}&page={%d p.Next.Page %}" class="button is-pulled-right">next</a>
136 </div>
137diff --git a/templates/media.qtpl b/templates/media.qtpl
138index 737d03d63a2ae301fc37dd3a9926e216a6fe325a..6a1382716a967cb94aef46cf9edd29fdaec4cefe 100644
139--- a/templates/media.qtpl
140+++ b/templates/media.qtpl
141@@ -18,9 +18,7 @@
142 {% func (p *MediaPage) Title() %}Media{% endfunc %}
143 
144 {% func (p *MediaPage) Content() %}
145-<div class="columns">
146 {%= Mosaic(p.Medias, p.PreloadAttr()) %}
147-</div>
148 <div>
149     <a href="/media?page={%d p.Next.Page %}" class="button is-pulled-right">next</a>
150 </div>
151diff --git a/templates/mosaic.qtpl b/templates/mosaic.qtpl
152index 21a8bae9560e8e3c9b07bfd4aa75a66ec2465360..9e941b68fd2b003208c7e83b52e002bc411bcd8f 100644
153--- a/templates/mosaic.qtpl
154+++ b/templates/mosaic.qtpl
155@@ -1,26 +1,13 @@
156 {% import "git.sr.ht/~gabrielgio/img/pkg/database/repository" %}
157-{% import "git.sr.ht/~gabrielgio/img/pkg/list" %}
158 
159 {% func Mosaic(medias []*repository.Media, preloadAttr string) %}
160-<div class="columns">
161-{% for _, c := range list.Distribuite(medias, 6) %}
162-    <div class="column is-2">
163-    {% for _, media := range c %}
164-    <div class="card-image">
165-       <a href="/detail?path_hash={%s media.PathHash %}">
166-       {% if media.IsVideo() %}
167-       <video class="image is-fit" controls muted="true" poster="/media/thumbnail?path_hash={%s media.PathHash %}" preload="{%s preloadAttr %}">
168-           <source src="/media/image?path_hash={%s media.PathHash %}" type="{%s media.MIMEType %}">
169-       </video>
170-       {% else %}
171-       <figure class="image is-fit">
172-           <img src="/media/thumbnail?path_hash={%s media.PathHash %}">
173-       </figure>
174-       </a>
175-        {% endif %}
176-    </div>
177-    {% endfor %}
178-    </div>
179+<div class="gallary_container">
180+{% for _, media := range medias %}
181+    <a href="/detail?path_hash={%s media.PathHash %}">
182+        <figure class="image_container">
183+            <img src="/media/thumbnail?path_hash={%s media.PathHash %}" >
184+        </figure>
185+    </a>
186 {% endfor %}
187 </div>
188 {% endfunc %}