diff --git a/bundles/org.openhab.ui.basic/gulpfile.js b/bundles/org.openhab.ui.basic/gulpfile.js
index 19909d3833..e05cb18302 100644
--- a/bundles/org.openhab.ui.basic/gulpfile.js
+++ b/bundles/org.openhab.ui.basic/gulpfile.js
@@ -17,7 +17,9 @@
 	var paths = {
 	        FontLibs: [
 			'./node_modules/material-design-icons/iconfont/MaterialIcons-Regular.woff*',
-			'./node_modules/material-design-icons/iconfont/MaterialIcons-Regular.ttf'
+			'./node_modules/material-design-icons/iconfont/MaterialIcons-Regular.ttf',
+			'./node_modules/framework7-icons/fonts/Framework7Icons-Regular.woff*',
+			'./node_modules/framework7-icons/fonts/Framework7Icons-Regular.ttf'
 	        ]
 	    };
 	
diff --git a/bundles/org.openhab.ui.basic/package-lock.json b/bundles/org.openhab.ui.basic/package-lock.json
index 1427da5adb..df8b0e878e 100644
--- a/bundles/org.openhab.ui.basic/package-lock.json
+++ b/bundles/org.openhab.ui.basic/package-lock.json
@@ -8,6 +8,7 @@
       "name": "org.openhab.ui.basic",
       "version": "4.0.0",
       "dependencies": {
+        "framework7-icons": "^5.0.5",
         "gulp": "^4.0.2",
         "gulp-eslint": "^6.0.0",
         "gulp-sass": "^5.0.0",
@@ -2143,6 +2144,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/framework7-icons": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/framework7-icons/-/framework7-icons-5.0.5.tgz",
+      "integrity": "sha512-bvHMLyujV9TFuudehd3ORZ/EvNp19Ir3ckVzYAOf3MkLymHba/9oHLsgopCh0x5UsrYZUpkrE+fd7ggj5y4wRw==",
+      "engines": {
+        "node": ">= 0.10.0"
+      }
+    },
     "node_modules/fs-minipass": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
@@ -8314,6 +8323,11 @@
         "map-cache": "^0.2.2"
       }
     },
+    "framework7-icons": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/framework7-icons/-/framework7-icons-5.0.5.tgz",
+      "integrity": "sha512-bvHMLyujV9TFuudehd3ORZ/EvNp19Ir3ckVzYAOf3MkLymHba/9oHLsgopCh0x5UsrYZUpkrE+fd7ggj5y4wRw=="
+    },
     "fs-minipass": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
diff --git a/bundles/org.openhab.ui.basic/package.json b/bundles/org.openhab.ui.basic/package.json
index 1014b4e55b..2778423b17 100644
--- a/bundles/org.openhab.ui.basic/package.json
+++ b/bundles/org.openhab.ui.basic/package.json
@@ -11,6 +11,7 @@
     "gulp-sass": "^5.0.0",
     "gulp-uglify": "^3.0.2",
     "material-design-icons": "^3.0.1",
+    "framework7-icons": "^5.0.5",
     "node-sass": "^8.0.0"
   }
 }
diff --git a/bundles/org.openhab.ui.basic/pom.xml b/bundles/org.openhab.ui.basic/pom.xml
index e8db58a628..1a96221879 100644
--- a/bundles/org.openhab.ui.basic/pom.xml
+++ b/bundles/org.openhab.ui.basic/pom.xml
@@ -32,14 +32,13 @@
       <plugin>
         <groupId>com.github.eirslett</groupId>
         <artifactId>frontend-maven-plugin</artifactId>
-        <version>1.9.0</version>
+        <version>1.13.4</version>
 
         <configuration>
-          <nodeVersion>v16.14.2</nodeVersion>
-          <npmVersion>8.6.0</npmVersion>
+          <nodeVersion>v18.17.0</nodeVersion>
+          <npmVersion>9.8.1</npmVersion>
           <environmentVariables>
             <npm_config_cache>${project.basedir}/npm_cache</npm_config_cache>
-            <npm_config_tmp>${project.basedir}/npm_tmp</npm_config_tmp>
           </environmentVariables>
         </configuration>
 
diff --git a/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/WebAppConfig.java b/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/WebAppConfig.java
index 44d27b905c..8edc6fa05b 100644
--- a/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/WebAppConfig.java
+++ b/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/WebAppConfig.java
@@ -40,8 +40,14 @@ public class WebAppConfig {
     private static final String DEFAULT_INLINE_SVG = "false";
     private static final String DEFAULT_WEB_AUDIO = "false";
 
+    private static final String DEFAULT_CONFIG_NB_COLUMNS = "3-2";
+    private static final int DEFAULT_NB_COLUMNS_DESKTOP = 3;
+    private static final int DEFAULT_NB_COLUMNS_TABLET = 2;
+
     private String defaultSitemap = DEFAULT_SITEMAP;
     private String theme = DEFAULT_THEME;
+    private int nbColsDesktop = DEFAULT_NB_COLUMNS_DESKTOP;
+    private int nbColsTablet = DEFAULT_NB_COLUMNS_TABLET;
     private boolean iconify = Boolean.parseBoolean(DEFAULT_ICONIFY);
     private boolean inlineSvg = Boolean.parseBoolean(DEFAULT_INLINE_SVG);
     private boolean webAudio = Boolean.parseBoolean(DEFAULT_WEB_AUDIO);
@@ -53,6 +59,7 @@ public class WebAppConfig {
 
     private static final String CONFIG_ENABLE_ICONS = "enableIcons";
     private static final String CONFIG_CONDENSED_LAYOUT = "condensedLayout";
+    private static final String CONFIG_NB_COLUMNS = "nbColumns";
     private static final String CONFIG_CAPITALIZE = "capitalizeValues";
 
     static {
@@ -81,6 +88,9 @@ private void applyCssClasses(Map<String, Object> configProps) {
                 cssClassList.add(entry.getValue());
             }
         }
+        if (nbColsDesktop == 3) {
+            cssClassList.add("ui-large-window");
+        }
     }
 
     public void applyConfig(Map<String, Object> configProps) {
@@ -90,6 +100,22 @@ public void applyConfig(Map<String, Object> configProps) {
         if ("default".equals(theme)) {
             theme = DEFAULT_THEME;
         }
+        String nbColumns = (String) configProps.getOrDefault(CONFIG_NB_COLUMNS, DEFAULT_CONFIG_NB_COLUMNS);
+        if (nbColumns.length() == 3) {
+            try {
+                nbColsDesktop = Integer.parseInt(nbColumns.substring(0, 1));
+            } catch (NumberFormatException e) {
+                nbColsDesktop = DEFAULT_NB_COLUMNS_DESKTOP;
+            }
+            try {
+                nbColsTablet = Integer.parseInt(nbColumns.substring(2, 3));
+            } catch (NumberFormatException e) {
+                nbColsTablet = DEFAULT_NB_COLUMNS_TABLET;
+            }
+        } else {
+            nbColsDesktop = DEFAULT_NB_COLUMNS_DESKTOP;
+            nbColsTablet = DEFAULT_NB_COLUMNS_TABLET;
+        }
         iconify = "true".equalsIgnoreCase((String) configProps.getOrDefault("enableIconify", DEFAULT_ICONIFY));
         inlineSvg = "true".equalsIgnoreCase((String) configProps.getOrDefault("inlineSvg", DEFAULT_INLINE_SVG));
         webAudio = "true".equalsIgnoreCase((String) configProps.getOrDefault("webAudio", DEFAULT_WEB_AUDIO));
@@ -113,6 +139,14 @@ public String getCssClassList() {
         return result;
     }
 
+    public int getNbColsDesktop() {
+        return nbColsDesktop;
+    }
+
+    public int getNbColsTablet() {
+        return nbColsTablet;
+    }
+
     public boolean isIconifyEnabled() {
         return iconify;
     }
diff --git a/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/AbstractWidgetRenderer.java b/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/AbstractWidgetRenderer.java
index 4baaefbf58..a00b63055d 100644
--- a/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/AbstractWidgetRenderer.java
+++ b/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/AbstractWidgetRenderer.java
@@ -61,6 +61,7 @@ public abstract class AbstractWidgetRenderer implements WidgetRenderer {
     private static final String ICON_SOURCE_IF = "if";
     private static final String ICON_SOURCE_ICONIFY = "iconify";
     private static final String ICON_SOURCE_MATERIAL = "material";
+    private static final String ICON_SOURCE_FRAMEWORK7 = "f7";
     private static final String ICON_SET_OH_CLASSIC = "classic";
     private static final String DEFAULT_ICON_SOURCE = ICON_SOURCE_OH;
     private static final String DEFAULT_ICON_SET = ICON_SET_OH_CLASSIC;
@@ -124,6 +125,8 @@ protected String preprocessSnippet(String originalSnippet, Widget w) {
     protected String preprocessSnippet(String originalSnippet, Widget w, boolean ignoreStateForIcon) {
         String snippet = preprocessIcon(originalSnippet, w, ignoreStateForIcon);
 
+        snippet = snippet.replace("%cells%", String.valueOf(12 / config.getNbColsDesktop()));
+        snippet = snippet.replace("%cells_tablet%", String.valueOf(8 / config.getNbColsTablet()));
         snippet = snippet.replace("%widget_id%", itemUIRegistry.getWidgetId(w));
         snippet = snippet.replace("%item%", w.getItem() != null ? w.getItem() : "");
         // Optimization: avoid calling 3 times itemUIRegistry.getLabel(w)
@@ -174,6 +177,9 @@ private String preprocessIcon(String originalSnippet, Widget w, boolean ignoreSt
                 case ICON_SOURCE_MATERIAL:
                     iconSnippet = getSnippet("icon_material");
                     break;
+                case ICON_SOURCE_FRAMEWORK7:
+                    iconSnippet = getSnippet("icon_framework7");
+                    break;
                 default:
                     break;
             }
diff --git a/bundles/org.openhab.ui.basic/src/main/resources/OH-INF/config/config.xml b/bundles/org.openhab.ui.basic/src/main/resources/OH-INF/config/config.xml
index f045147678..c4e8f01391 100644
--- a/bundles/org.openhab.ui.basic/src/main/resources/OH-INF/config/config.xml
+++ b/bundles/org.openhab.ui.basic/src/main/resources/OH-INF/config/config.xml
@@ -59,6 +59,19 @@
 			</options>
 			<default>false</default>
 		</parameter>
+		<parameter name="nbColumns" type="text">
+			<label>Number Columns</label>
+			<description>The number of columns to consider to fill the grid in large screen width (desktop) and medium screen
+				width (tablet).</description>
+			<options>
+				<option value="1-1">1 column on desktop and tablet</option>
+				<option value="2-1">2 columns on desktop but only 1 on tablet</option>
+				<option value="2-2">2 columns on desktop and tablet</option>
+				<option value="3-1">3 columns on desktop but only 1 on tablet</option>
+				<option value="3-2">3 columns on desktop but only 2 on tablet</option>
+			</options>
+			<default>3-2</default>
+		</parameter>
 		<parameter name="capitalizeValues" type="text" required="true">
 			<label>Capitalize Values</label>
 			<description>Displays all widget states in uppercase.</description>
diff --git a/bundles/org.openhab.ui.basic/src/main/resources/OH-INF/i18n/basic.properties b/bundles/org.openhab.ui.basic/src/main/resources/OH-INF/i18n/basic.properties
index 9973707d63..1e8422ee25 100644
--- a/bundles/org.openhab.ui.basic/src/main/resources/OH-INF/i18n/basic.properties
+++ b/bundles/org.openhab.ui.basic/src/main/resources/OH-INF/i18n/basic.properties
@@ -20,6 +20,13 @@ ui.config.basic.inlineSvg.label = Inline SVG
 ui.config.basic.inlineSvg.description = If enabled, any SVG icon provided by the openHAB icon server will automatically be converted to an inline SVG in the WEB page, allowing control of its color with the sitemap widget property "iconcolor" in the case where the SVG icon sets "currentColor" as the fill color. Note that this will work with custom SVG icons but not with all the packaged icons from the classic iconset since they are defined with a hard-coded color palette. This feature is disabled by default.
 ui.config.basic.inlineSvg.option.true = Enable
 ui.config.basic.inlineSvg.option.false = Disable
+ui.config.basic.nbColumns.label = Number Columns
+ui.config.basic.nbColumns.description = The number of columns to consider to fill the grid in large screen width (desktop) and medium screen width (tablet).
+ui.config.basic.nbColumns.option.1-1 = 1 column on desktop and tablet
+ui.config.basic.nbColumns.option.2-1 = 2 columns on desktop but only 1 on tablet
+ui.config.basic.nbColumns.option.2-2 = 2 columns on desktop and tablet
+ui.config.basic.nbColumns.option.3-1 = 3 columns on desktop but only 1 on tablet
+ui.config.basic.nbColumns.option.3-2 = 3 columns on desktop but only 2 on tablet
 ui.config.basic.theme.label = Theme
 ui.config.basic.theme.description = Defines the UI theme.
 ui.config.basic.theme.option.bright = Bright
diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/buttons.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/buttons.html
index c3d563f151..8ad90b5fd9 100644
--- a/bundles/org.openhab.ui.basic/src/main/resources/snippets/buttons.html
+++ b/bundles/org.openhab.ui.basic/src/main/resources/snippets/buttons.html
@@ -1,4 +1,4 @@
-<div class="mdl-form__row mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet %visibility_class%">
+<div class="mdl-form__row mdl-cell mdl-cell--%cells%-col mdl-cell--%cells_tablet%-col-tablet %visibility_class%">
 	<span %iconstyle% class="mdl-form__icon">
 		%icon_snippet%
 	</span>
diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/colorpicker.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/colorpicker.html
index 6e53aece7e..d0af3637ff 100644
--- a/bundles/org.openhab.ui.basic/src/main/resources/snippets/colorpicker.html
+++ b/bundles/org.openhab.ui.basic/src/main/resources/snippets/colorpicker.html
@@ -1,4 +1,4 @@
-<div class="mdl-form__row mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet %visibility_class%">
+<div class="mdl-form__row mdl-cell mdl-cell--%cells%-col mdl-cell--%cells_tablet%-col-tablet %visibility_class%">
 	<span %iconstyle% class="mdl-form__icon">
 		%icon_snippet%
 	</span>
diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/group.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/group.html
index 75485cd201..64c190c1dd 100644
--- a/bundles/org.openhab.ui.basic/src/main/resources/snippets/group.html
+++ b/bundles/org.openhab.ui.basic/src/main/resources/snippets/group.html
@@ -1,4 +1,4 @@
-<div class="mdl-form__row mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet mdl-form__link %visibility_class%">
+<div class="mdl-form__row mdl-cell mdl-cell--%cells%-col mdl-cell--%cells_tablet%-col-tablet mdl-form__link %visibility_class%">
 	<span %iconstyle% class="mdl-form__icon">
 		%icon_snippet%
 	</span>
diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/icon_framework7.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/icon_framework7.html
new file mode 100644
index 0000000000..fac2b9ce0a
--- /dev/null
+++ b/bundles/org.openhab.ui.basic/src/main/resources/snippets/icon_framework7.html
@@ -0,0 +1 @@
+<spam class="f7-icons">%icon_name%</spam>
\ No newline at end of file
diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/input.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/input.html
index 8279915ec2..14293ea9ba 100644
--- a/bundles/org.openhab.ui.basic/src/main/resources/snippets/input.html
+++ b/bundles/org.openhab.ui.basic/src/main/resources/snippets/input.html
@@ -1,4 +1,4 @@
-<div class="mdl-form__row mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet %visibility_class%">
+<div class="mdl-form__row mdl-cell mdl-cell--%cells%-col mdl-cell--%cells_tablet%-col-tablet %visibility_class%">
 	<span %iconstyle% class="mdl-form__icon">
 		%icon_snippet%
 	</span>
diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/main.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/main.html
index bbe93bf1d4..c9285bb78e 100644
--- a/bundles/org.openhab.ui.basic/src/main/resources/snippets/main.html
+++ b/bundles/org.openhab.ui.basic/src/main/resources/snippets/main.html
@@ -25,6 +25,7 @@
 
 		<link rel="stylesheet" type="text/css" href="mdl/material.min.css" />
 		<link rel="stylesheet" type="text/css" href="material-icons.css" />
+		<link rel="stylesheet" type="text/css" href="framework7-icons.css" />
 		<link rel="stylesheet" type="text/css" href="smarthome.css" />
 
 		<script type="application/json" id="config">{"webAudio":%config.web-audio%}</script>
diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/mapview.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/mapview.html
index c4b1ef01e5..dffb31cc72 100644
--- a/bundles/org.openhab.ui.basic/src/main/resources/snippets/mapview.html
+++ b/bundles/org.openhab.ui.basic/src/main/resources/snippets/mapview.html
@@ -1,4 +1,4 @@
-<div class="mdl-form__row mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet %visibility_class%">
+<div class="mdl-form__row mdl-cell mdl-cell--12-col %visibility_class%">
     <span %iconstyle% class="mdl-form__icon">
         %icon_snippet%
     </span>
diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/rollerblind.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/rollerblind.html
index fe01639227..7d4a4e191e 100644
--- a/bundles/org.openhab.ui.basic/src/main/resources/snippets/rollerblind.html
+++ b/bundles/org.openhab.ui.basic/src/main/resources/snippets/rollerblind.html
@@ -1,4 +1,4 @@
-<div class="mdl-form__row mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet %visibility_class%">
+<div class="mdl-form__row mdl-cell mdl-cell--%cells%-col mdl-cell--%cells_tablet%-col-tablet %visibility_class%">
 	<span %iconstyle% class="mdl-form__icon">
 		%icon_snippet%
 	</span>
diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/selection.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/selection.html
index 6892c96e7c..f441d8c306 100644
--- a/bundles/org.openhab.ui.basic/src/main/resources/snippets/selection.html
+++ b/bundles/org.openhab.ui.basic/src/main/resources/snippets/selection.html
@@ -1,4 +1,4 @@
-<div class="mdl-form__row mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet mdl-form__link %visibility_class%">
+<div class="mdl-form__row mdl-cell mdl-cell--%cells%-col mdl-cell--%cells_tablet%-col-tablet mdl-form__link %visibility_class%">
 	<span %iconstyle% class="mdl-form__icon">
 		%icon_snippet%
 	</span>
diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/setpoint.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/setpoint.html
index edfbbf2743..341c7045f9 100644
--- a/bundles/org.openhab.ui.basic/src/main/resources/snippets/setpoint.html
+++ b/bundles/org.openhab.ui.basic/src/main/resources/snippets/setpoint.html
@@ -1,4 +1,4 @@
-<div class="mdl-form__row mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet %visibility_class%">
+<div class="mdl-form__row mdl-cell mdl-cell--%cells%-col mdl-cell--%cells_tablet%-col-tablet %visibility_class%">
 	<span %iconstyle% class="mdl-form__icon">
 		%icon_snippet%
 	</span>
diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/slider.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/slider.html
index 2fc00151b6..0202f49d4f 100644
--- a/bundles/org.openhab.ui.basic/src/main/resources/snippets/slider.html
+++ b/bundles/org.openhab.ui.basic/src/main/resources/snippets/slider.html
@@ -1,4 +1,4 @@
-<div class="mdl-form__row mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet %visibility_class%">
+<div class="mdl-form__row mdl-cell mdl-cell--%cells%-col mdl-cell--%cells_tablet%-col-tablet %visibility_class%">
 	<span %iconstyle% class="mdl-form__icon">
 		%icon_snippet%
 	</span>
diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/switch.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/switch.html
index ddc6ef473d..8a99fcf9f1 100644
--- a/bundles/org.openhab.ui.basic/src/main/resources/snippets/switch.html
+++ b/bundles/org.openhab.ui.basic/src/main/resources/snippets/switch.html
@@ -1,4 +1,4 @@
-<div class="mdl-form__row mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet %visibility_class%">
+<div class="mdl-form__row mdl-cell mdl-cell--%cells%-col mdl-cell--%cells_tablet%-col-tablet %visibility_class%">
 	<span %iconstyle% class="mdl-form__icon">
 		%icon_snippet%
 	</span>
diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/text.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/text.html
index bdfe631912..68540b7195 100644
--- a/bundles/org.openhab.ui.basic/src/main/resources/snippets/text.html
+++ b/bundles/org.openhab.ui.basic/src/main/resources/snippets/text.html
@@ -1,4 +1,4 @@
-<div class="mdl-form__row mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet %visibility_class%">
+<div class="mdl-form__row mdl-cell mdl-cell--%cells%-col mdl-cell--%cells_tablet%-col-tablet %visibility_class%">
 	<span %iconstyle% class="mdl-form__icon">
 		%icon_snippet%
 	</span>
diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/text_link.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/text_link.html
index f2bb9444b5..18b0ce14f2 100644
--- a/bundles/org.openhab.ui.basic/src/main/resources/snippets/text_link.html
+++ b/bundles/org.openhab.ui.basic/src/main/resources/snippets/text_link.html
@@ -1,4 +1,4 @@
-<div class="mdl-form__row mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet mdl-form__link %visibility_class%">
+<div class="mdl-form__row mdl-cell mdl-cell--%cells%-col mdl-cell--%cells_tablet%-col-tablet mdl-form__link %visibility_class%">
 	<span %iconstyle% class="mdl-form__icon">
 		%icon_snippet%
 	</span>
diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/webview.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/webview.html
index fe2b28ea0c..aab1f5e96d 100644
--- a/bundles/org.openhab.ui.basic/src/main/resources/snippets/webview.html
+++ b/bundles/org.openhab.ui.basic/src/main/resources/snippets/webview.html
@@ -1,4 +1,4 @@
-<div class="mdl-form__row mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet %visibility_class%">
+<div class="mdl-form__row mdl-cell mdl-cell--12-col %visibility_class%">
     <span %iconstyle% class="mdl-form__icon">
         %icon_snippet%
     </span>
diff --git a/bundles/org.openhab.ui.basic/src/main/resources/web/framework7-icons.css b/bundles/org.openhab.ui.basic/src/main/resources/web/framework7-icons.css
new file mode 100644
index 0000000000..0c95e3cf39
--- /dev/null
+++ b/bundles/org.openhab.ui.basic/src/main/resources/web/framework7-icons.css
@@ -0,0 +1,33 @@
+@font-face {
+  font-family: 'Framework7 Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Framework7 Icons'),
+       local('Framework7Icons-Regular'),
+       url('fonts/Framework7Icons-Regular.woff2') format('woff2'),
+       url('fonts/Framework7Icons-Regular.woff') format('woff'),
+       url('fonts/Framework7Icons-Regular.ttf') format('truetype');
+}
+
+.f7-icons,
+.framework7-icons {
+  font-family: 'Framework7 Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 28px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-feature-settings: 'liga';
+  -moz-font-feature-settings: 'liga=1';
+  -moz-font-feature-settings: 'liga';
+  font-feature-settings: 'liga';
+  text-align: center;
+}
diff --git a/bundles/org.openhab.ui.basic/web-src/_layout.scss b/bundles/org.openhab.ui.basic/web-src/_layout.scss
index 2431a97b01..d07ef391a2 100644
--- a/bundles/org.openhab.ui.basic/web-src/_layout.scss
+++ b/bundles/org.openhab.ui.basic/web-src/_layout.scss
@@ -46,6 +46,9 @@
 
 .page-content {
 	max-width: 1080px;
+	html.ui-large-window & {
+		max-width: 1620px;
+	}
 	@media screen and (max-width: $layout-tablet-size-threshold) {
 		padding: 0;
 	}
@@ -167,6 +170,16 @@
 				font-size: 28px;
 			}
 		}
+		.f7-icons {
+			font-size: 32px;
+			vertical-align: middle;
+			html:not(.ui-icons-enabled) & {
+				display: none;
+			}
+			html.ui-layout-condensed & {
+				font-size: 28px;
+			}
+		}
 	}
 	&__label {
 		@media screen and (max-width: $layout-tablet-size-threshold) {
diff --git a/bundles/org.openhab.ui/web/src/assets/definitions/blockly/blocks-math.js b/bundles/org.openhab.ui/web/src/assets/definitions/blockly/blocks-math.js
index 7171a62637..0756241d4b 100644
--- a/bundles/org.openhab.ui/web/src/assets/definitions/blockly/blocks-math.js
+++ b/bundles/org.openhab.ui/web/src/assets/definitions/blockly/blocks-math.js
@@ -4,6 +4,7 @@
 
 import Blockly from 'blockly'
 import { javascriptGenerator } from 'blockly/javascript'
+import { blockGetCheckedInputType } from './utils'
 
 export default function (f7, isGraalJs) {
   Blockly.Blocks['oh_bit_not'] = {
@@ -88,13 +89,25 @@ export default function (f7, isGraalJs) {
           block.updateType(operation)
         })
       this.appendValueInput('NUM')
-        .setCheck('Number')
+        .setCheck(['Number', 'oh_quantity'])
         .appendField(dropDown, 'op')
+
       this.setColour('%{BKY_MATH_HUE}')
       this.setInputsInline(false)
       this.setTooltip('Round a number up or down')
       this.setHelpUrl('https://www.openhab.org/docs/configuration/blockly/rules-blockly-math.html#round')
-      this.setOutput(true, 'Number')
+      this.setOutput(true, null)
+    },
+    updateShape_: function () {
+      if (this.getInput('NUM')) {
+        let type = blockGetCheckedInputType(this, 'NUM')
+        if (type) {
+          this.setOutput(true, type)
+        }
+      }
+    },
+    onchange: function () {
+      this.updateShape_()
     },
     updateType: function (type) {
       if (type === 'toFixed') {
@@ -111,13 +124,20 @@ export default function (f7, isGraalJs) {
         this.removeInput('declabel')
         this.setInputsInline(false)
       }
+      this.updateShape_()
     }
   }
 
   javascriptGenerator['math_round'] = function (block) {
-    const math_number = javascriptGenerator.valueToCode(block, 'NUM', javascriptGenerator.ORDER_FUNCTION_CALL)
+    const inputType = blockGetCheckedInputType(block, 'NUM')
+    const math_number_input = javascriptGenerator.valueToCode(block, 'NUM', javascriptGenerator.ORDER_FUNCTION_CALL)
+    let math_number = math_number_input
+    if (inputType === 'oh_quantity') {
+      math_number = math_number_input + '.float'
+    }
     const decimals = javascriptGenerator.valueToCode(block, 'DECIMALS', javascriptGenerator.ORDER_NONE)
     const operand = block.getFieldValue('op')
+
     let code = ''
     if (operand !== 'toFixed') {
       let method = ''
@@ -136,6 +156,10 @@ export default function (f7, isGraalJs) {
     } else {
       code = `(${math_number}).toFixed(${decimals})`
     }
+
+    if (inputType === 'oh_quantity') {
+      code = `Quantity((${code}).toString() + ' ' + ${math_number_input}.symbol)`
+    }
     return [code, 0]
   }
 }
diff --git a/bundles/org.openhab.ui/web/src/assets/definitions/blockly/utils.js b/bundles/org.openhab.ui/web/src/assets/definitions/blockly/utils.js
index 53df72e677..0f5ac2e57e 100644
--- a/bundles/org.openhab.ui/web/src/assets/definitions/blockly/utils.js
+++ b/bundles/org.openhab.ui/web/src/assets/definitions/blockly/utils.js
@@ -230,7 +230,7 @@ export function blockGetCheckedInputType (block, inputName) {
   // Get the input type checks for this block
   const thisBlock = block.getInput(inputName).connection.getCheck()
   // Get the output type checks for the connected block
-  const connectedBlock = block.getInput(inputName).connection.targetBlock().outputConnection.getCheck()
+  const connectedBlock = block.getInput(inputName).connection.targetBlock()?.outputConnection.getCheck()
   // Skip if no checks are available
   if (!thisBlock || !connectedBlock) return ''
   // Find any intersection in the checklist
diff --git a/bundles/org.openhab.ui/web/src/pages/developer/widgets/widget-edit.vue b/bundles/org.openhab.ui/web/src/pages/developer/widgets/widget-edit.vue
index 61dcb853df..75655c29db 100644
--- a/bundles/org.openhab.ui/web/src/pages/developer/widgets/widget-edit.vue
+++ b/bundles/org.openhab.ui/web/src/pages/developer/widgets/widget-edit.vue
@@ -55,6 +55,9 @@
         </f7-navbar>
         <f7-block v-if="widget.props">
           <f7-col>
+            <f7-block-footer>
+              Please note that expressions in properties are not evaluated inside the widget editor, but are evaluated when the widget is used on pages.
+            </f7-block-footer>
             <config-sheet
               :parameterGroups="widget.props.parameterGroups || []"
               :parameters="widget.props.parameters || []"