diff --git a/docs/configs/settings.md b/docs/configs/settings.md
index 7e1815bb..5fe30874 100644
--- a/docs/configs/settings.md
+++ b/docs/configs/settings.md
@@ -118,6 +118,22 @@ As an example, this would produce the following layout:
 
 <img width="1260" alt="Screenshot 2022-09-15 at 8 03 57 PM" src="https://user-images.githubusercontent.com/82196/190466646-8ca94505-0fcf-4964-9687-3a6c7cd3144f.png">
 
+### Icons-Only Layout
+
+You can also specify the an icon-only layout for bookmarks, either like so:
+
+```yaml
+layout:
+  Media:
+    iconsOnly: true
+```
+
+or globally:
+
+```yaml
+bookmarksStyle: icons
+```
+
 ### Sorting
 
 Service groups and bookmark groups can be mixed in order, **but should use different group names**. If you do not specify any bookmark groups they will all show at the bottom of the page.
diff --git a/docs/widgets/services/evcc.md b/docs/widgets/services/evcc.md
index 108b6eb4..1d3af2ba 100644
--- a/docs/widgets/services/evcc.md
+++ b/docs/widgets/services/evcc.md
@@ -3,7 +3,7 @@ title: EVCC
 description: EVCC Widget Configuration
 ---
 
-Learn more about [EVSS](https://github.com/evcc-io/evcc).
+Learn more about [EVCC](https://github.com/evcc-io/evcc).
 
 Allowed fields: `["pv_power", "grid_power", "home_power", "charge_power]`.
 
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 484f76b5..e3670e80 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -120,7 +120,7 @@
         "grid_power": "Grid",
         "home_power": "Consumption",
         "charge_power": "Charger",
-        "watt_hour": "Wh"
+        "kilowatt": "kW"
     },
     "flood": {
         "download": "Download",
diff --git a/src/components/bookmarks/group.jsx b/src/components/bookmarks/group.jsx
index 3a9f8323..9deb1b6a 100644
--- a/src/components/bookmarks/group.jsx
+++ b/src/components/bookmarks/group.jsx
@@ -7,7 +7,13 @@ import ErrorBoundary from "components/errorboundry";
 import List from "components/bookmarks/list";
 import ResolvedIcon from "components/resolvedicon";
 
-export default function BookmarksGroup({ bookmarks, layout, disableCollapse, groupsInitiallyCollapsed }) {
+export default function BookmarksGroup({
+  bookmarks,
+  layout,
+  disableCollapse,
+  groupsInitiallyCollapsed,
+  bookmarksStyle,
+}) {
   const panel = useRef();
 
   useEffect(() => {
@@ -64,7 +70,7 @@ export default function BookmarksGroup({ bookmarks, layout, disableCollapse, gro
             >
               <Disclosure.Panel className="transition-all overflow-hidden duration-300 ease-out" ref={panel} static>
                 <ErrorBoundary>
-                  <List bookmarks={bookmarks.bookmarks} layout={layout} />
+                  <List bookmarks={bookmarks.bookmarks} layout={layout} bookmarksStyle={bookmarksStyle} />
                 </ErrorBoundary>
               </Disclosure.Panel>
             </Transition>
diff --git a/src/components/bookmarks/item.jsx b/src/components/bookmarks/item.jsx
index 69097089..48698cc1 100644
--- a/src/components/bookmarks/item.jsx
+++ b/src/components/bookmarks/item.jsx
@@ -4,12 +4,17 @@ import classNames from "classnames";
 import { SettingsContext } from "utils/contexts/settings";
 import ResolvedIcon from "components/resolvedicon";
 
-export default function Item({ bookmark }) {
+export default function Item({ bookmark, iconOnly = false }) {
   const description = bookmark.description ?? new URL(bookmark.href).hostname;
   const { settings } = useContext(SettingsContext);
 
   return (
-    <li key={bookmark.name} id={bookmark.id} className="bookmark" data-name={bookmark.name}>
+    <li
+      key={bookmark.name}
+      id={bookmark.id}
+      className={classNames("bookmark", iconOnly && "grid")}
+      data-name={bookmark.name}
+    >
       <a
         href={bookmark.href}
         title={bookmark.name}
@@ -17,25 +22,37 @@ export default function Item({ bookmark }) {
         target={bookmark.target ?? settings.target ?? "_blank"}
         className={classNames(
           settings.cardBlur !== undefined && `backdrop-blur${settings.cardBlur.length ? "-" : ""}${settings.cardBlur}`,
-          "block w-full text-left cursor-pointer transition-all h-15 mb-3 rounded-md font-medium text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-100/20 hover:bg-theme-300/20 dark:bg-white/5 dark:hover:bg-white/10",
+          "text-left cursor-pointer transition-all rounded-md font-medium text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-100/20 hover:bg-theme-300/20 dark:bg-white/5 dark:hover:bg-white/10",
+          iconOnly ? "h-[60px] w-[60px] grid" : "block w-full h-15 mb-3",
         )}
       >
-        <div className="flex">
-          <div className="flex-shrink-0 flex items-center justify-center w-11 bg-theme-500/10 dark:bg-theme-900/50 text-theme-700 hover:text-theme-700 dark:text-theme-200 text-sm font-medium rounded-l-md bookmark-icon">
+        {iconOnly ? (
+          <div className="flex items-center justify-center text-theme-700 hover:text-theme-700 dark:text-theme-200 text-xl font-medium rounded-md bookmark-icon py-0.5">
             {bookmark.icon && (
-              <div className="flex-shrink-0 w-5 h-5">
+              <div className="w-7 h-7">
                 <ResolvedIcon icon={bookmark.icon} alt={bookmark.abbr} />
               </div>
             )}
             {!bookmark.icon && bookmark.abbr}
           </div>
-          <div className="flex-1 overflow-hidden flex items-center justify-between rounded-r-md bookmark-text">
-            <div className="pl-3 py-2 text-xs bookmark-name">{bookmark.name}</div>
-            <div className="shrink truncate px-2 py-2 text-theme-500 dark:text-theme-300 text-xs bookmark-description">
-              {description}
+        ) : (
+          <div className="flex">
+            <div className="flex-shrink-0 flex items-center justify-center w-11 bg-theme-500/10 dark:bg-theme-900/50 text-theme-700 hover:text-theme-700 dark:text-theme-200 text-sm font-medium rounded-l-md bookmark-icon">
+              {bookmark.icon && (
+                <div className="flex-shrink-0 w-5 h-5">
+                  <ResolvedIcon icon={bookmark.icon} alt={bookmark.abbr} />
+                </div>
+              )}
+              {!bookmark.icon && bookmark.abbr}
+            </div>
+            <div className="flex-1 overflow-hidden flex items-center justify-between rounded-r-md bookmark-text">
+              <div className="pl-3 py-2 text-xs bookmark-name">{bookmark.name}</div>
+              <div className="shrink truncate px-2 py-2 text-theme-500 dark:text-theme-300 text-xs bookmark-description">
+                {description}
+              </div>
             </div>
           </div>
-        </div>
+        )}
       </a>
     </li>
   );
diff --git a/src/components/bookmarks/list.jsx b/src/components/bookmarks/list.jsx
index 521ca7fb..194bb43a 100644
--- a/src/components/bookmarks/list.jsx
+++ b/src/components/bookmarks/list.jsx
@@ -4,16 +4,22 @@ import { columnMap } from "../../utils/layout/columns";
 
 import Item from "components/bookmarks/item";
 
-export default function List({ bookmarks, layout }) {
+export default function List({ bookmarks, layout, bookmarksStyle }) {
+  let classes =
+    layout?.style === "row" ? `grid ${columnMap[layout?.columns]} gap-x-2` : "flex flex-col mt-3 bookmark-list";
+  const style = {};
+  if (layout?.iconsOnly || bookmarksStyle === "icons") {
+    classes = "grid gap-3 mt-3 bookmark-list";
+    style.gridTemplateColumns = "repeat(auto-fill, minmax(60px, 1fr))";
+  }
   return (
-    <ul
-      className={classNames(
-        layout?.style === "row" ? `grid ${columnMap[layout?.columns]} gap-x-2` : "flex flex-col",
-        "mt-3 bookmark-list",
-      )}
-    >
+    <ul className={classNames(classes)} style={style}>
       {bookmarks.map((bookmark) => (
-        <Item key={`${bookmark.name}-${bookmark.href}`} bookmark={bookmark} />
+        <Item
+          key={`${bookmark.name}-${bookmark.href}`}
+          bookmark={bookmark}
+          iconOnly={layout?.iconsOnly || bookmarksStyle === "icons"}
+        />
       ))}
     </ul>
   );
diff --git a/src/components/widgets/widget/container.jsx b/src/components/widgets/widget/container.jsx
index 4a1fdd37..8675adf8 100644
--- a/src/components/widgets/widget/container.jsx
+++ b/src/components/widgets/widget/container.jsx
@@ -60,7 +60,7 @@ export function getBottomBlock(children) {
 
 export default function Container({ children = [], options, additionalClassNames = "" }) {
   const { settings } = useContext(SettingsContext);
-  return options.href ? (
+  return options?.href ? (
     <a
       href={options.href}
       target={options.target ?? settings.target ?? "_blank"}
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 0bdc78b6..c922c288 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -297,6 +297,7 @@ function Home({ initialSettings }) {
                   disableCollapse={settings.disableCollapse}
                   useEqualHeights={settings.useEqualHeights}
                   groupsInitiallyCollapsed={settings.groupsInitiallyCollapsed}
+                  bookmarksStyle={settings.bookmarksStyle}
                 />
               ) : (
                 <BookmarksGroup
@@ -333,6 +334,7 @@ function Home({ initialSettings }) {
                 layout={settings.layout?.[group.name]}
                 disableCollapse={settings.disableCollapse}
                 groupsInitiallyCollapsed={settings.groupsInitiallyCollapsed}
+                bookmarksStyle={settings.bookmarksStyle}
               />
             ))}
           </div>
@@ -350,6 +352,7 @@ function Home({ initialSettings }) {
     settings.useEqualHeights,
     settings.cardBlur,
     settings.groupsInitiallyCollapsed,
+    settings.bookmarksStyle,
     initialSettings.layout,
   ]);
 
diff --git a/src/widgets/evcc/component.jsx b/src/widgets/evcc/component.jsx
index 9f5d4c4d..09a8ffe4 100644
--- a/src/widgets/evcc/component.jsx
+++ b/src/widgets/evcc/component.jsx
@@ -4,6 +4,10 @@ import Container from "components/services/widget/container";
 import Block from "components/services/widget/block";
 import useWidgetAPI from "utils/proxy/use-widget-api";
 
+function toKilowatts(t, value) {
+  return value > 0 ? t("common.number", { value: value / 1000, maximumFractionDigits: 1 }) : 0;
+}
+
 export default function Component({ service }) {
   const { t } = useTranslation();
 
@@ -27,21 +31,12 @@ export default function Component({ service }) {
 
   return (
     <Container service={service}>
-      <Block
-        label="evcc.pv_power"
-        value={`${t("common.number", { value: stateData.result.pvPower })} ${t("evcc.watt_hour")}`}
-      />
-      <Block
-        label="evcc.grid_power"
-        value={`${t("common.number", { value: stateData.result.gridPower })} ${t("evcc.watt_hour")}`}
-      />
-      <Block
-        label="evcc.home_power"
-        value={`${t("common.number", { value: stateData.result.homePower })} ${t("evcc.watt_hour")}`}
-      />
+      <Block label="evcc.pv_power" value={`${toKilowatts(t, stateData.result.pvPower)} ${t("evcc.kilowatt")}`} />
+      <Block label="evcc.grid_power" value={`${toKilowatts(t, stateData.result.gridPower)} ${t("evcc.kilowatt")}`} />
+      <Block label="evcc.home_power" value={`${toKilowatts(t, stateData.result.homePower)} ${t("evcc.kilowatt")}`} />
       <Block
         label="evcc.charge_power"
-        value={`${t("common.number", { value: stateData.result.loadpoints[0].chargePower })} ${t("evcc.watt_hour")}`}
+        value={`${toKilowatts(t, stateData.result.loadpoints[0].chargePower)} ${t("evcc.kilowatt")}`}
       />
     </Container>
   );