Panonim · Sep 30, 2026 · Sep 27, 2026 · Sep 30, 2026
diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@
 </p>
 <p align="center">
   <a href="https://github.com/Panonim/dynawidgets">Dynawidgets</a> •
-  <a href="https://github.com/Panonim/dynawidgets">Custom-api widgets</a> •
+  <a href="https://github.com/glanceapp/community-widgets">Custom-api widgets</a> •
   <a href="https://dynacat.artur.zone/preconfigured-pages">Preconfigured pages</a> •
   <a href="https://dynacat.artur.zone/themes">Themes</a> 
 </p>
@@ -65,8 +65,6 @@ Easily create your own theme by tweaking a few numbers or choose from one of the
 * **OIDC** - log in through your own identity provider
 * **More widgets** - docker controller, currently playing, latest media, torrenting, speedtest, stopwatch and Sonarr/Radarr releases in the calendar
 
-Each of these is covered in [the docs](https://dynacat.artur.zone).
-
 <br>
 
 ## Installation
@@ -103,8 +101,6 @@ services:
 ```
 </details>
 
-If you'd like a more detailed instructions they can be found in [the docs](https://dynacat.artur.zone/#installation).
-
 ## Configuration
 There are two ways to configure Dynacat, and they work on the same files:
 

diff --git a/docs/docs/changelog.md b/docs/docs/changelog.md
@@ -8,6 +8,7 @@
 - Fixed `clock` widget blanking after widget updates -> https://github.com/Panonim/dynacat/pull/160
 - Calendar now shows releases on the previous and next month days visible in the grid -> https://github.com/Panonim/dynacat/issues/156
 - Calendar now properly shows upcoming shows -> https://github.com/Panonim/dynacat/issues/156
+- Added a `grid` style to the `bookmarks` widget -> https://github.com/Panonim/dynacat/issues/162
 
 # Changes for 3.0.0
 - Moved the compose template to [Panonim/dynacat-compose-template](https://github.com/Panonim/dynacat-compose-template), the install command is now a single `curl | tar` with no `sed` renaming

diff --git a/docs/docs/configuration.md b/docs/docs/configuration.md
@@ -793,6 +793,10 @@ Preview:
 | Name | Type | Required |
 | ---- | ---- | -------- |
 | groups | array | yes |
+| style | string | no |
+
+##### `style`
+Set to `grid` to show the links as a grid of icon tiles with the title and description underneath, which works best when each link has an `icon`. Leave it empty for the default list.
 
 ##### `groups`
 An array of groups which can optionally have a title and a custom color.

diff --git a/internal/dynacat/static/css/widget-bookmarks.css b/internal/dynacat/static/css/widget-bookmarks.css
@@ -33,3 +33,43 @@
     height: 20px;
     opacity: 0.8;
 }
+
+.bookmarks-grid {
+    display: grid;
+    gap: 2rem 0.5rem;
+    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
+}
+
+.bookmarks-grid-icon-container {
+    width: max-content;
+    margin-inline: auto;
+    padding: 1rem;
+    border-radius: var(--border-radius);
+    background-color: var(--color-widget-background-highlight);
+    transition: background-color 0.2s, transform 0.2s;
+}
+
+.bookmarks-grid-icon {
+    display: block;
+    width: 4rem;
+    height: 4rem;
+    object-fit: contain;
+    opacity: 0.8;
+    transition: opacity 0.2s;
+}
+
+.bookmarks-grid-link:hover .bookmarks-grid-icon-container,
+.bookmarks-grid-link:focus-visible .bookmarks-grid-icon-container {
+    background-color: color-mix(in srgb, var(--bookmarks-group-color) 18%, var(--color-widget-background-highlight));
+    transform: translateY(-2px);
+}
+
+.bookmarks-grid-link:hover .bookmarks-grid-icon,
+.bookmarks-grid-link:focus-visible .bookmarks-grid-icon {
+    opacity: 1;
+}
+
+.bookmarks-grid-link:hover .bookmarks-grid-title,
+.bookmarks-grid-link:focus-visible .bookmarks-grid-title {
+    color: var(--bookmarks-group-color);
+}
diff --git a/internal/dynacat/templates/bookmarks-grid.html b/internal/dynacat/templates/bookmarks-grid.html
@@ -0,0 +1,32 @@
+{{ template "widget-base.html" . }}
+
+{{ define "widget-content-classes" }}{{ if .Frameless }}widget-content-frameless{{ end }}{{ end }}
+
+{{ define "widget-content" }}
+<div class="list list-gap-24 list-with-separator">
+    {{- range .Groups }}
+    <div class="bookmarks-group"{{ if .Color }} style="--bookmarks-group-color: {{ .Color.String | safeCSS }}"{{ end }}>
+        {{- if ne .Title "" }}
+        <div class="bookmarks-group-title size-h3 margin-bottom-10">{{ .Title }}</div>
+        {{- end }}
+        <ul class="bookmarks-grid">
+        {{- range .Links }}
+        <li class="text-center">
+            <a href="{{ .URL | safeURL }}" class="bookmarks-grid-link block" {{ if .Target }}target="{{ .Target }}"{{ end }} rel="noreferrer">
+                {{- if ne "" .Icon.URL }}
+                <div class="bookmarks-grid-icon-container">
+                    <img class="bookmarks-grid-icon{{ if .Icon.AutoInvert }} flat-icon{{ end }}" src="{{ .Icon.URL }}" alt="" loading="lazy">
+                </div>
+                {{- end }}
+                <p class="bookmarks-grid-title margin-top-7 text-truncate color-highlight size-h4">{{ .Title }}</p>
+            </a>
+            {{- if .Description }}
+            <div class="margin-top-5 text-truncate-2-lines text-compact">{{ .Description }}</div>
+            {{- end }}
+        </li>
+        {{- end }}
+        </ul>
+    </div>
+    {{- end }}
+</div>
+{{ end }}
diff --git a/internal/dynacat/widget-bookmarks.go b/internal/dynacat/widget-bookmarks.go
@@ -5,11 +5,13 @@ import (
 )
 
 var bookmarksWidgetTemplate = mustParseTemplate("bookmarks.html", "widget-base.html")
+var bookmarksGridWidgetTemplate = mustParseTemplate("bookmarks-grid.html", "widget-base.html")
 
 type bookmarksWidget struct {
 	widgetBase `yaml:",inline"`
 	cachedHTML template.HTML `yaml:"-"`
 	Frameless  bool          `yaml:"frameless"`
+	Style      string        `yaml:"style"`
 	Groups     []struct {
 		Title     string         `yaml:"title"`
 		Color     *hslColorField `yaml:"color"`
@@ -65,17 +67,25 @@ func (widget *bookmarksWidget) initialize() error {
 func (widget *bookmarksWidget) setProviders(providers *widgetProviders) {
 	widget.widgetBase.setProviders(providers)
 	widget.cacheIcons()
-	widget.cachedHTML = widget.renderTemplate(widget, bookmarksWidgetTemplate)
+	widget.cachedHTML = widget.render()
 }
 
 func (widget *bookmarksWidget) Render() template.HTML {
 	if widget.cachedHTML == "" {
-		widget.cachedHTML = widget.renderTemplate(widget, bookmarksWidgetTemplate)
+		widget.cachedHTML = widget.render()
 	}
 
 	return widget.cachedHTML
 }
 
+func (widget *bookmarksWidget) render() template.HTML {
+	if widget.Style == "grid" {
+		return widget.renderTemplate(widget, bookmarksGridWidgetTemplate)
+	}
+
+	return widget.renderTemplate(widget, bookmarksWidgetTemplate)
+}
+
 func (widget *bookmarksWidget) cacheIcons() {
 	if widget.Providers == nil {
 		return

diff --git a/internal/dynacat/widget-schema.go b/internal/dynacat/widget-schema.go
@@ -134,6 +134,9 @@ var itemAdvancedFields = map[string]bool{
 const maxListDepth = 2
 
 var fieldAnnotations = map[string]map[string]fieldAnnotation{
+	"bookmarks": {
+		"style": {Options: []string{"grid"}},
+	},
 	"calendar": {
 		"first-day-of-week": {Options: []string{"monday", "tuesday", "wednesday", "thursday", "friday", "saturday", "sunday"}},
 		"hosts.url":         {Hint: "Prefix with the service, e.g. sonarr:https://... or radarr:https://..."},