diff --git a/src/components/widgets/datetime/datetime.jsx b/src/components/widgets/datetime/datetime.jsx
index 869834736..454d004dc 100644
--- a/src/components/widgets/datetime/datetime.jsx
+++ b/src/components/widgets/datetime/datetime.jsx
@@ -1,6 +1,9 @@
 import { useState, useEffect } from "react";
 import { useTranslation } from "next-i18next";
 
+import Container from "../widget/container";
+import Raw from "../widget/raw";
+
 const textSizes = {
   "4xl": "text-4xl",
   "3xl": "text-3xl",
@@ -17,7 +20,7 @@ export default function DateTime({ options }) {
   const { i18n } = useTranslation();
   const [date, setDate] = useState("");
   const dateLocale = locale ?? i18n.language;
-  
+
   useEffect(() => {
     const dateFormat = new Intl.DateTimeFormat(dateLocale, { ...format });
     const interval = setInterval(() => {
@@ -27,12 +30,14 @@ export default function DateTime({ options }) {
   }, [date, setDate, dateLocale, format]);
 
   return (
-    <div className="flex flex-col justify-center first:ml-0 ml-4">
-      <div className="flex flex-row items-center grow justify-end">
-        <span className={`text-theme-800 dark:text-theme-200 tabular-nums ${textSizes[textSize || "lg"]}`}>
-          {date}
-        </span>
-      </div>
-    </div>
+    <Container options={options}>
+      <Raw>
+        <div className="flex flex-row items-center grow justify-end">
+          <span className={`text-theme-800 dark:text-theme-200 tabular-nums ${textSizes[textSize || "lg"]}`}>
+            {date}
+          </span>
+        </div>
+      </Raw>
+    </Container>
   );
 }
diff --git a/src/components/widgets/glances/glances.jsx b/src/components/widgets/glances/glances.jsx
index 85dd44c0c..b45dfefeb 100644
--- a/src/components/widgets/glances/glances.jsx
+++ b/src/components/widgets/glances/glances.jsx
@@ -1,11 +1,13 @@
 import useSWR from "swr";
 import { useContext } from "react";
-import { BiError } from "react-icons/bi";
 import { FaMemory, FaRegClock, FaThermometerHalf } from "react-icons/fa";
 import { FiCpu, FiHardDrive } from "react-icons/fi";
 import { useTranslation } from "next-i18next";
 
-import UsageBar from "../resources/usage-bar";
+import Error from "../widget/error";
+import Resource from "../widget/resource";
+import Resources from "../widget/resources";
+import WidgetLabel from "../widget/widget_label";
 
 import { SettingsContext } from "utils/contexts/settings";
 
@@ -26,52 +28,17 @@ export default function Widget({ options }) {
   );
 
   if (error || data?.error) {
-    return (
-      <div className="flex flex-col justify-center first:ml-0 ml-4">
-        <div className="flex flex-row items-center justify-end">
-          <div className="flex flex-row items-center">
-            <BiError className="w-8 h-8 text-theme-800 dark:text-theme-200" />
-            <div className="flex flex-col ml-3 text-left">
-              <span className="text-theme-800 dark:text-theme-200 text-sm">{t("widget.api_error")}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
+    return <Error options={options} />
   }
 
   if (!data) {
-    return (
-      <div className="flex flex-col max-w:full sm:basis-auto self-center grow-0 flex-wrap ml-4">
-        <div className="flex flex-row self-center flex-wrap justify-between">
-           <div className="flex-none flex flex-row items-center mr-3 py-1.5">
-            <FiCpu className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-            <div className="flex flex-col ml-3 text-left min-w-[85px]">
-              <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
-                <div className="pl-0.5 text-xs">
-                  {t("glances.wait")}
-                </div>
-              </div>
-              <UsageBar percent="0" />
-            </div>
-          </div>
-          <div className="flex-none flex flex-row items-center mr-3 py-1.5">
-            <FaMemory className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-            <div className="flex flex-col ml-3 text-left min-w-[85px]">
-              <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
-                <div className="pl-0.5 text-xs">
-                  {t("glances.wait")}
-                </div>
-              </div>
-              <UsageBar percent="0" />
-            </div>
-          </div>
-        </div>
-        {options.label && (
-          <div className="ml-6 pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">{options.label}</div>
-        )}
-      </div>
-    );
+    return <Resources options={options}>
+      <Resource icon={FiCpu} label={t("glances.wait")} percentage="0" />
+      <Resource icon={FaMemory} label={t("glances.wait")} percentage="0" />
+      { options.cputemp && <Resource icon={FaThermometerHalf} label={t("glances.wait")} percentage="0" /> }
+      { options.uptime && <Resource icon={FaRegClock} label={t("glances.wait")} percentage="0" /> }
+      { options.label && <WidgetLabel label={options.label} /> }
+    </Resources>;
   }
 
   const unit = options.units === "imperial" ? "fahrenheit" : "celsius";
@@ -101,131 +68,84 @@ export default function Widget({ options }) {
   }
 
   return (
-    <a href={options.url} target={settings.target ?? "_blank"} className="flex flex-col max-w:full sm:basis-auto self-center grow-0 flex-wrap">
-      <div className="flex flex-row self-center flex-wrap justify-between">
-         <div className="flex-none flex flex-row items-center mr-3 py-1.5">
-          <FiCpu className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-          <div className="flex flex-col ml-3 text-left min-w-[85px]">
-            <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
-              <div className="pl-0.5">
-                {t("common.number", {
-                  value: data.cpu.total,
-                  style: "unit",
-                  unit: "percent",
-                  maximumFractionDigits: 0,
-                })}
-              </div>
-              <div className="pr-1">{t("glances.cpu")}</div>
-            </div>
-            {options.expanded && (
-              <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
-                <div className="pl-0.5 pr-1">
-                {t("common.number", {
-                  value: data.load.min15,
-                  style: "unit",
-                  unit: "percent",
-                  maximumFractionDigits: 0,
-                })}
-                </div>
-                <div className="pr-1">{t("glances.load")}</div>
-              </span>
-            )}
-            <UsageBar percent={data.cpu.total} />
-          </div>
-        </div>
-        <div className="flex-none flex flex-row items-center mr-3 py-1.5">
-          <FaMemory className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-          <div className="flex flex-col ml-3 text-left min-w-[85px]">
-            <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
-              <div className="pl-0.5">
-                {t("common.bytes", {
-                  value: data.mem.free,
-                  maximumFractionDigits: 1,
-                  binary: true,
-                })}
-              </div>
-              <div className="pr-1">{t("glances.free")}</div>
-            </div>
-            {options.expanded && (
-              <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
-                <div className="pl-0.5 pr-1">
-                  {t("common.bytes", {
-                    value: data.mem.total,
-                    maximumFractionDigits: 1,
-                    binary: true,
-                  })}
-                </div>
-                <div className="pr-1">{t("glances.total")}</div>
-              </span>
-            )}
-            <UsageBar percent={data.mem.percent} />
-          </div>
-        </div>
-        {disks.map((disk) => (
-          <div key={disk.mnt_point} className="flex-none flex flex-row items-center mr-3 py-1.5">
-            <FiHardDrive className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-            <div className="flex flex-col ml-3 text-left min-w-[85px]">
-              <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
-                <div className="pl-0.5">{t("common.bytes", { value: disk.free })}</div>
-                <div className="pr-1">{t("glances.free")}</div>
-              </span>
-              {options.expanded && (
-                <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
-                  <div className="pl-0.5 pr-1">{t("common.bytes", { value: disk.size })}</div>
-                  <div className="pr-1">{t("glances.total")}</div>
-                </span>
-              )}
-              <UsageBar percent={disk.percent} />
-            </div>
-          </div>))}
-        {options.cputemp && mainTemp > 0 &&
-            (<div className="flex-none flex flex-row items-center mr-3 py-1.5">
-            <FaThermometerHalf className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-            <div className="flex flex-col ml-3 text-left min-w-[85px]">
-              <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
-                <div className="pl-0.5">
-                  {t("common.number", { 
-                    value: mainTemp,
-                    maximumFractionDigits: 1,
-                    style: "unit",
-                    unit
-                  })}
-                </div>
-                <div className="pr-1">{t("glances.temp")}</div>
-              </span>
-              {options.expanded && (
-                <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
-                  <div className="pl-0.5 pr-1">
-                  {t("common.number", { 
-                    value: maxTemp,
-                    maximumFractionDigits: 1,
-                    style: "unit",
-                    unit
-                  })}
-                  </div>
-                  <div className="pr-1">{t("glances.warn")}</div>
-                </span>
-              )}
-              <UsageBar percent={tempPercent} />
-            </div>
-          </div>)}
-        {options.uptime && data.uptime &&
-            (<div className="flex-none flex flex-row items-center mr-3 py-1.5">
-            <FaRegClock className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-            <div className="flex flex-col ml-3 text-left min-w-[85px]">
-              <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
-                <div className="pl-0.5">
-                  {data.uptime.replace(" days,", t("glances.days")).replace(/:\d\d:\d\d$/g, t("glances.hours"))}
-                </div>
-                <div className="pr-1">{t("glances.uptime")}</div>
-              </span>
-              <UsageBar percent={Math.round((new Date().getSeconds() / 60) * 100)} />
-            </div>
-          </div>)}
-      </div>
-      {options.label && (
-        <div className="pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">{options.label}</div>
-      )}
-    </a>
+    <Resources options={options} target={settings.target ?? "_blank"}>
+      <Resource
+        icon={FiCpu}
+        value={t("common.number", {
+          value: data.cpu.total,
+          style: "unit",
+          unit: "percent",
+          maximumFractionDigits: 0,
+        })}
+        label={t("glances.cpu")}
+        expandedValue={t("common.number", {
+          value: data.load.min15,
+          style: "unit",
+          unit: "percent",
+          maximumFractionDigits: 0
+        })}
+        expandedLabel={t("glances.load")}
+        percentage={data.cpu.total}
+        expanded={options.expanded}
+      />
+      <Resource
+        icon={FaMemory}
+        value={t("common.bytes", {
+          value: data.mem.free,
+          maximumFractionDigits: 1,
+          binary: true,
+        })}
+        label={t("glances.free")}
+        expandedValue={t("common.bytes", {
+          value: data.mem.total,
+          maximumFractionDigits: 1,
+          binary: true,
+        })}
+        expandedLabel={t("glances.total")}
+        percentage={data.mem.percent}
+        expanded={options.expanded}
+      />
+      {disks.map((disk) => (
+        <Resource key={disk.mnt_point}
+          icon={FiHardDrive}
+          value={t("common.bytes", { value: disk.free })}
+          label={t("glances.free")}
+          expandedValue={t("common.bytes", { value: disk.size })}
+          expandedLabel={t("glances.total")}
+          percentage={disk.percent}
+          expanded={options.expanded}
+        />
+      ))}
+      {options.cputemp && mainTemp > 0 &&
+        <Resource
+          icon={FaThermometerHalf}
+          value={t("common.number", {
+            value: mainTemp,
+            maximumFractionDigits: 1,
+            style: "unit",
+            unit
+          })}
+          label={t("glances.temp")}
+          expandedValue={t("common.number", {
+            value: maxTemp,
+            maximumFractionDigits: 1,
+            style: "unit",
+            unit
+          })}
+          expandedLabel={t("glances.warn")}
+          percentage={tempPercent}
+          expanded={options.expanded}
+        />
+      }
+      {options.uptime && data.uptime &&
+        <Resource
+          icon={FaRegClock}
+          value={data.uptime.replace(" days,", t("glances.days")).replace(/:\d\d:\d\d$/g, t("glances.hours"))}
+          label={t("glances.uptime")}
+          percentage={Math.round((new Date().getSeconds() / 60) * 100).toString()}
+        />
+      }
+      {options.label && <WidgetLabel label={options.label} />}
+    </Resources>
   );
 }
diff --git a/src/components/widgets/greeting/greeting.jsx b/src/components/widgets/greeting/greeting.jsx
index da0f063d1..11de571c8 100644
--- a/src/components/widgets/greeting/greeting.jsx
+++ b/src/components/widgets/greeting/greeting.jsx
@@ -1,3 +1,6 @@
+import Container from "../widget/container";
+import Raw from "../widget/raw";
+
 const textSizes = {
   "4xl": "text-4xl",
   "3xl": "text-3xl",
@@ -11,12 +14,12 @@ const textSizes = {
 
 export default function Greeting({ options }) {
   if (options.text) {
-    return (
-      <div className="flex flex-row items-center justify-start">
+    return <Container options={options}>
+      <Raw>
         <span className={`text-theme-800 dark:text-theme-200 mr-3 ${textSizes[options.text_size || "xl"]}`}>
           {options.text}
         </span>
-      </div>
-    );
+      </Raw>
+    </Container>;
   }
 }
diff --git a/src/components/widgets/kubernetes/kubernetes.jsx b/src/components/widgets/kubernetes/kubernetes.jsx
index 78c4caaf9..2d1f55e4b 100644
--- a/src/components/widgets/kubernetes/kubernetes.jsx
+++ b/src/components/widgets/kubernetes/kubernetes.jsx
@@ -1,12 +1,15 @@
 import useSWR from "swr";
-import { BiError } from "react-icons/bi";
 import { useTranslation } from "next-i18next";
 
+import Error from "../widget/error";
+import Container from "../widget/container";
+import Raw from "../widget/raw";
+
 import Node from "./node";
 
 export default function Widget({ options }) {
   const { cluster, nodes } = options;
-  const { t, i18n } = useTranslation();
+  const { i18n } = useTranslation();
 
   const defaultData = {
     cpu: {
@@ -18,7 +21,7 @@ export default function Widget({ options }) {
       used: 0,
       total: 0,
       free: 0,
-      precent: 0
+      percent: 0
     }
   };
 
@@ -29,23 +32,12 @@ export default function Widget({ options }) {
   );
 
   if (error || data?.error) {
-    return (
-      <div className="flex flex-col justify-center first:ml-0 ml-4">
-        <div className="flex flex-row items-center justify-end">
-          <div className="flex flex-row items-center">
-            <BiError className="w-8 h-8 text-theme-800 dark:text-theme-200" />
-            <div className="flex flex-col ml-3 text-left">
-              <span className="text-theme-800 dark:text-theme-200 text-sm">{t("widget.api_error")}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
+    return <Error options={options} />
   }
 
   if (!data) {
-    return (
-      <div className="flex flex-col max-w:full sm:basis-auto self-center grow-0 flex-wrap">
+    return <Container options={options}>
+      <Raw>
         <div className="flex flex-row self-center flex-wrap justify-between">
           {cluster.show &&
             <Node type="cluster" key="cluster" options={options.cluster} data={defaultData} />
@@ -54,12 +46,12 @@ export default function Widget({ options }) {
             <Node type="node" key="nodes" options={options.nodes} data={defaultData} />
           }
         </div>
-      </div>
-    );
+      </Raw>
+    </Container>;
   }
 
-  return (
-    <div className="flex flex-col max-w:full sm:basis-auto self-center grow-0 flex-wrap">
+  return <Container options={options}>
+    <Raw>
       <div className="flex flex-row self-center flex-wrap justify-between">
         {cluster.show &&
           <Node key="cluster" type="cluster" options={options.cluster} data={data.cluster} />
@@ -69,6 +61,6 @@ export default function Widget({ options }) {
             <Node key={node.name} type="node" options={options.nodes} data={node} />)
         }
       </div>
-    </div>
-  );
+    </Raw>
+  </Container>;
 }
diff --git a/src/components/widgets/kubernetes/node.jsx b/src/components/widgets/kubernetes/node.jsx
index 7a7c322d4..cc864be68 100644
--- a/src/components/widgets/kubernetes/node.jsx
+++ b/src/components/widgets/kubernetes/node.jsx
@@ -3,8 +3,7 @@ import { FiAlertTriangle, FiCpu, FiServer } from "react-icons/fi";
 import { SiKubernetes } from "react-icons/si";
 import { useTranslation } from "next-i18next";
 
-import UsageBar from "./usage-bar";
-
+import UsageBar from "../resources/usage-bar";
 
 export default function Node({ type, options, data }) {
   const { t } = useTranslation();
@@ -29,7 +28,7 @@ export default function Node({ type, options, data }) {
             <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
               <div className="pl-0.5">
                 {t("common.number", {
-                  value: data.cpu.percent,
+                  value: data?.cpu?.percent ?? 0,
                   style: "unit",
                   unit: "percent",
                   maximumFractionDigits: 0
@@ -37,18 +36,18 @@ export default function Node({ type, options, data }) {
               </div>
               <FiCpu className="text-theme-800 dark:text-theme-200 w-3 h-3" />
             </div>
-            <UsageBar percent={data.cpu.percent} />
+            <UsageBar percent={data?.cpu?.percent ?? 0} />
             <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
               <div className="pl-0.5">
                 {t("common.bytes", {
-                  value: data.memory.free,
+                  value: data?.memory?.free ?? 0,
                   maximumFractionDigits: 0,
                   binary: true
                 })}
               </div>
               <FaMemory className="text-theme-800 dark:text-theme-200 w-3 h-3" />
             </div>
-            <UsageBar percent={data.memory.percent} />
+            <UsageBar percent={data?.memory?.percent} />
             {options.showLabel && (
               <div className="pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">{type === "cluster" ? options.label : data.name}</div>
             )}
diff --git a/src/components/widgets/kubernetes/usage-bar.jsx b/src/components/widgets/kubernetes/usage-bar.jsx
deleted file mode 100644
index c817db4c4..000000000
--- a/src/components/widgets/kubernetes/usage-bar.jsx
+++ /dev/null
@@ -1,12 +0,0 @@
-export default function UsageBar({ percent }) {
-  return (
-    <div className="mt-0.5 w-full bg-theme-800/30 rounded-full h-1 dark:bg-theme-200/20">
-      <div
-        className="bg-theme-800/70 h-1 rounded-full dark:bg-theme-200/50 transition-all duration-1000"
-        style={{
-          width: `${percent}%`,
-        }}
-      />
-    </div>
-  );
-}
diff --git a/src/components/widgets/logo/logo.jsx b/src/components/widgets/logo/logo.jsx
index 96e8569fc..3a4a25651 100644
--- a/src/components/widgets/logo/logo.jsx
+++ b/src/components/widgets/logo/logo.jsx
@@ -1,9 +1,13 @@
+import Container from "../widget/container";
+import Raw from "../widget/raw";
+
 import ResolvedIcon from "components/resolvedicon"
 
 export default function Logo({ options }) {
   return (
-    <div className="w-12 h-12 flex flex-row items-center align-middle mr-3 self-center">
-      {options.icon ?
+    <Container options={options}>
+      <Raw>
+        {options.icon ?
         <ResolvedIcon icon={options.icon} width={48} height={48} /> :
         // fallback to homepage logo
         <svg
@@ -57,6 +61,7 @@ export default function Logo({ options }) {
           </g>
         </svg>
       }
-    </div>
+      </Raw>
+    </Container>
   )
 }
diff --git a/src/components/widgets/longhorn/longhorn.jsx b/src/components/widgets/longhorn/longhorn.jsx
index 9fcb21b4a..c0169ceb9 100644
--- a/src/components/widgets/longhorn/longhorn.jsx
+++ b/src/components/widgets/longhorn/longhorn.jsx
@@ -1,37 +1,31 @@
 import useSWR from "swr";
-import { BiError } from "react-icons/bi";
-import { useTranslation } from "next-i18next";
+
+import Error from "../widget/error";
+import Container from "../widget/container";
+import Raw from "../widget/raw";
 
 import Node from "./node";
 
 export default function Longhorn({ options }) {
   const { expanded, total, labels, include, nodes } = options;
-  const { t } = useTranslation();
   const { data, error } = useSWR(`/api/widgets/longhorn`, {
     refreshInterval: 1500
   });
 
   if (error || data?.error) {
-    return (
-      <div className="flex flex-col max-w:full sm:basis-auto self-center grow-0 flex-wrap">
-        <BiError className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-        <div className="flex flex-col ml-3 text-left">
-          <span className="text-theme-800 dark:text-theme-200 text-xs">{t("widget.api_error")}</span>
-        </div>
-      </div>
-    );
+    return <Error options={options} />
   }
 
   if (!data) {
-    return (
-      <div className="flex flex-col max-w:full sm:basis-auto self-center grow-0 flex-wrap">
+    return <Container options={options}>
+      <Raw>
         <div className="flex flex-row self-center flex-wrap justify-between" />
-      </div>
-    );
+      </Raw>
+    </Container>;
   }
 
-  return (
-    <div className="flex flex-col max-w:full sm:basis-auto self-center grow-0 flex-wrap">
+  return <Container options={options}>
+    <Raw>
       <div className="flex flex-row self-center flex-wrap justify-between">
         {data.nodes
           .filter((node) => {
@@ -52,6 +46,6 @@ export default function Longhorn({ options }) {
             </div>
           )}
       </div>
-    </div>
-  );
+    </Raw>
+  </Container>;
 }
diff --git a/src/components/widgets/longhorn/node.jsx b/src/components/widgets/longhorn/node.jsx
index e0ee69afb..5235698a4 100644
--- a/src/components/widgets/longhorn/node.jsx
+++ b/src/components/widgets/longhorn/node.jsx
@@ -1,32 +1,20 @@
-import { FiHardDrive } from "react-icons/fi";
 import { useTranslation } from "next-i18next";
+import { FaThermometerHalf } from "react-icons/fa";
 
-import UsageBar from "../resources/usage-bar";
+import Resource from "../widget/resource";
+import WidgetLabel from "../widget/widget_label";
 
 export default function Node({ data, expanded, labels }) {
   const { t } = useTranslation();
 
-  return (
-    <>
-      <div className="flex-none flex flex-row items-center mr-3 py-1.5">
-        <FiHardDrive className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-        <div className="flex flex-col ml-3 text-left min-w-[85px]">
-        <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
-          <div className="pl-0.5">{t("common.bytes", { value: data.node.available })}</div>
-          <div className="pr-1">{t("resources.free")}</div>
-        </span>
-          {expanded && (
-            <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
-            <div className="pl-0.5">{t("common.bytes", { value: data.node.maximum })}</div>
-            <div className="pr-1">{t("resources.total")}</div>
-          </span>
-          )}
-          <UsageBar percent={Math.round(((data.node.maximum - data.node.available) / data.node.maximum) * 100)} />
-        </div>
-      </div>
-      {labels && (
-        <div className="ml-6 pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">{data.node.id}</div>
-      )}
-    </>
-  );
+  return <Resource
+    icon={FaThermometerHalf}
+    value={t("common.bytes", { value: data.node.available })}
+    label={t("resources.free")}
+    expandedValue={t("common.bytes", { value: data.node.maximum })}
+    expandedLabel={t("resources.total")}
+    percentage={Math.round(((data.node.maximum - data.node.available) / data.node.maximum) * 100)}
+    expanded={expanded}
+  >{ labels && <WidgetLabel label={data.node.id} /> }
+  </Resource>
 }
diff --git a/src/components/widgets/openmeteo/openmeteo.jsx b/src/components/widgets/openmeteo/openmeteo.jsx
index 0d29aef53..040a3b6b1 100644
--- a/src/components/widgets/openmeteo/openmeteo.jsx
+++ b/src/components/widgets/openmeteo/openmeteo.jsx
@@ -1,10 +1,16 @@
 import useSWR from "swr";
 import { useState } from "react";
-import { BiError } from "react-icons/bi";
 import { WiCloudDown } from "react-icons/wi";
 import { MdLocationDisabled, MdLocationSearching } from "react-icons/md";
 import { useTranslation } from "next-i18next";
 
+import Error from "../widget/error";
+import Container from "../widget/container";
+import ContainerButton from "../widget/container_button";
+import WidgetIcon from "../widget/widget_icon";
+import PrimaryText from "../widget/primary_text";
+import SecondaryText from "../widget/secondary_text";
+
 import Icon from "./icon";
 
 function Widget({ options }) {
@@ -15,60 +21,35 @@ function Widget({ options }) {
   );
 
   if (error || data?.error) {
-    return (
-      <div className="flex flex-col justify-center first:ml-0 ml-4 mr-2">
-        <div className="flex flex-row items-center justify-end">
-          <div className="flex flex-col items-center">
-            <BiError className="w-8 h-8 text-theme-800 dark:text-theme-200" />
-            <div className="flex flex-col ml-3 text-left">
-              <span className="text-theme-800 dark:text-theme-200 text-sm">{t("widget.api_error")}</span>
-              <span className="text-theme-800 dark:text-theme-200 text-xs">-</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
+    return <Error options={options} />
   }
 
   if (!data) {
-    return (
-      <div className="flex flex-col justify-center first:ml-0 ml-4 mr-2">
-        <div className="flex flex-row items-center justify-end">
-          <div className="flex flex-col items-center">
-            <WiCloudDown className="w-8 h-8 text-theme-800 dark:text-theme-200" />
-          </div>
-          <div className="flex flex-col ml-3 text-left">
-            <span className="text-theme-800 dark:text-theme-200 text-sm">{t("weather.updating")}</span>
-            <span className="text-theme-800 dark:text-theme-200 text-xs">{t("weather.wait")}</span>
-          </div>
-        </div>
-      </div>
-    );
+    return <Container options={options}>
+      <PrimaryText>{t("weather.updating")}</PrimaryText>
+      <SecondaryText>{t("weather.wait")}</SecondaryText>
+      <WidgetIcon icon={WiCloudDown} size="l" />
+    </Container>;
   }
 
   const unit = options.units === "metric" ? "celsius" : "fahrenheit";
-  const timeOfDay = data.current_weather.time > data.daily.sunrise[0] && data.current_weather.time < data.daily.sunset[0] ? "day" : "night";
+  const weatherInfo = {
+    condition: data.current_weather.weathercode,
+    timeOfDay: data.current_weather.time > data.daily.sunrise[0] && data.current_weather.time < data.daily.sunset[0] ? "day" : "night"
+  };
 
-  return (
-    <div className="flex flex-col justify-center first:ml-0 ml-4 mr-2">
-      <div className="flex flex-row items-center justify-end">
-        <div className="flex flex-col items-center">
-          <Icon condition={data.current_weather.weathercode} timeOfDay={timeOfDay} />
-        </div>
-        <div className="flex flex-col ml-3 text-left">
-          <span className="text-theme-800 dark:text-theme-200 text-sm">
-            {options.label && `${options.label}, `}
-            {t("common.number", {
-              value: data.current_weather.temperature,
-              style: "unit",
-              unit,
-            })}
-          </span>
-          <span className="text-theme-800 dark:text-theme-200 text-xs">{t(`wmo.${data.current_weather.weathercode}-${timeOfDay}`)}</span>
-        </div>
-      </div>
-    </div>
-  );
+  return <Container options={options}>
+    <PrimaryText>
+      {options.label && `${options.label}, `}
+      {t("common.number", {
+        value: data.current_weather.temperature,
+        style: "unit",
+        unit,
+      })}
+    </PrimaryText>
+    <SecondaryText>{t(`wmo.${data.current_weather.weathercode}-${weatherInfo.timeOfDay}`)}</SecondaryText>
+    <WidgetIcon icon={Icon} size="xl" weatherInfo={weatherInfo} />
+  </Container>;
 }
 
 export default function OpenMeteo({ options }) {
@@ -103,27 +84,11 @@ export default function OpenMeteo({ options }) {
   // if (!requesting && !location) requestLocation();
 
   if (!location) {
-    return (
-      <button
-        type="button"
-        onClick={() => requestLocation()}
-        className="flex flex-col justify-center first:ml-0 ml-4 mr-2"
-      >
-        <div className="flex flex-row items-center justify-end">
-          <div className="flex flex-col items-center">
-            {requesting ? (
-              <MdLocationSearching className="w-6 h-6 text-theme-800 dark:text-theme-200 animate-pulse" />
-            ) : (
-              <MdLocationDisabled className="w-6 h-6 text-theme-800 dark:text-theme-200" />
-            )}
-          </div>
-          <div className="flex flex-col ml-3 text-left">
-            <span className="text-theme-800 dark:text-theme-200 text-sm">{t("weather.current")}</span>
-            <span className="text-theme-800 dark:text-theme-200 text-xs">{t("weather.allow")}</span>
-          </div>
-        </div>
-      </button>
-    );
+    return <ContainerButton options={options} callback={requestLocation} >
+      <PrimaryText>{t("weather.current")}</PrimaryText>
+      <SecondaryText>{t("weather.allow")}</SecondaryText>
+      <WidgetIcon icon={ requesting ? MdLocationSearching : MdLocationDisabled} size="m" pulse />
+    </ContainerButton>;
   }
 
   return <Widget options={{ ...location, ...options }} />;
diff --git a/src/components/widgets/openweathermap/weather.jsx b/src/components/widgets/openweathermap/weather.jsx
index 49f428a04..305315139 100644
--- a/src/components/widgets/openweathermap/weather.jsx
+++ b/src/components/widgets/openweathermap/weather.jsx
@@ -1,12 +1,19 @@
 import useSWR from "swr";
 import { useState } from "react";
-import { BiError } from "react-icons/bi";
 import { WiCloudDown } from "react-icons/wi";
 import { MdLocationDisabled, MdLocationSearching } from "react-icons/md";
 import { useTranslation } from "next-i18next";
 
+import Error from "../widget/error";
+import Container from "../widget/container";
+import ContainerButton from "../widget/container_button";
+import PrimaryText from "../widget/primary_text";
+import SecondaryText from "../widget/secondary_text";
+import WidgetIcon from "../widget/widget_icon";
+
 import Icon from "./icon";
 
+
 function Widget({ options }) {
   const { t, i18n } = useTranslation();
 
@@ -15,58 +22,30 @@ function Widget({ options }) {
   );
 
   if (error || data?.cod === 401 || data?.error) {
-    return (
-      <div className="flex flex-col justify-center first:ml-auto ml-4 mr-2">
-        <div className="flex flex-row items-center justify-end">
-          <div className="hidden sm:flex flex-col items-center">
-            <BiError className="w-8 h-8 text-theme-800 dark:text-theme-200" />
-            <div className="flex flex-col ml-3 text-left">
-              <span className="text-theme-800 dark:text-theme-200 text-sm">{t("widget.api_error")}</span>
-              <span className="text-theme-800 dark:text-theme-200 text-xs">-</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
+    return <Error options={options} />
   }
 
   if (!data) {
-    return (
-      <div className="flex flex-col justify-center first:ml-auto ml-4 mr-2">
-        <div className="flex flex-row items-center justify-end">
-          <div className="hidden sm:flex flex-col items-center">
-            <WiCloudDown className="w-8 h-8 text-theme-800 dark:text-theme-200" />
-          </div>
-          <div className="flex flex-col ml-3 text-left">
-            <span className="text-theme-800 dark:text-theme-200 text-sm">{t("weather.updating")}</span>
-            <span className="text-theme-800 dark:text-theme-200 text-xs">{t("weather.wait")}</span>
-          </div>
-        </div>
-      </div>
-    );
+    return <Container options={options}>
+      <PrimaryText>{t("weather.updating")}</PrimaryText>
+      <SecondaryText>{t("weather.wait")}</SecondaryText>
+      <WidgetIcon icon={WiCloudDown} size="l" />
+    </Container>;
   }
 
   const unit = options.units === "metric" ? "celsius" : "fahrenheit";
 
-  return (
-    <div className="flex flex-col justify-center first:ml-auto ml-2 mr-2">
-      <div className="flex flex-row items-center justify-end">
-        <div className="hidden sm:flex flex-col items-center">
-          <Icon
-            condition={data.weather[0].id}
-            timeOfDay={data.dt > data.sys.sunrise && data.dt < data.sys.sunset ? "day" : "night"}
-          />
-        </div>
-        <div className="flex flex-col ml-3 text-left">
-          <span className="text-theme-800 dark:text-theme-200 text-sm">
-            {options.label && `${options.label}, `}
-            {t("common.number", { value: data.main.temp, style: "unit", unit })}
-          </span>
-          <span className="text-theme-800 dark:text-theme-200 text-xs">{data.weather[0].description}</span>
-        </div>
-      </div>
-    </div>
-  );
+  const weatherInfo = {
+    condition: data.weather[0].id,
+    timeOfDay: data.dt > data.sys.sunrise && data.dt < data.sys.sunset ? "day" : "night"
+  };
+
+  return <Container options={options}>
+    <PrimaryText>{options.label && `${options.label}, `}</PrimaryText>
+    <PrimaryText>{t("common.number", { value: data.main.temp, style: "unit", unit })}</PrimaryText>
+    <SecondaryText>{data.weather[0].description}</SecondaryText>
+    <WidgetIcon icon={Icon} size="xl" weatherInfo={weatherInfo} />
+  </Container>;
 }
 
 export default function OpenWeatherMap({ options }) {
@@ -98,30 +77,12 @@ export default function OpenWeatherMap({ options }) {
     }
   };
 
-  // if (!requesting && !location) requestLocation();
-
   if (!location) {
-    return (
-      <button
-        type="button"
-        onClick={() => requestLocation()}
-        className="flex flex-col justify-center first:ml-auto ml-4 mr-2"
-      >
-        <div className="flex flex-row items-center justify-end">
-          <div className="hidden sm:flex flex-col items-center">
-            {requesting ? (
-              <MdLocationSearching className="w-6 h-6 text-theme-800 dark:text-theme-200 animate-pulse" />
-            ) : (
-              <MdLocationDisabled className="w-6 h-6 text-theme-800 dark:text-theme-200" />
-            )}
-          </div>
-          <div className="flex flex-col ml-3 text-left">
-            <span className="text-theme-800 dark:text-theme-200 text-sm">{t("weather.current")}</span>
-            <span className="text-theme-800 dark:text-theme-200 text-xs">{t("weather.allow")}</span>
-          </div>
-        </div>
-      </button>
-    );
+    return <ContainerButton options={options} callback={requestLocation} >
+      <PrimaryText>{t("weather.current")}</PrimaryText>
+      <SecondaryText>{t("weather.allow")}</SecondaryText>
+      <WidgetIcon icon={requesting ? MdLocationSearching : MdLocationDisabled} size="m" pulse />
+    </ContainerButton>;
   }
 
   return <Widget options={{ ...location, ...options }} />;
diff --git a/src/components/widgets/resources/cpu.jsx b/src/components/widgets/resources/cpu.jsx
index 7069e3c4a..12972fe89 100644
--- a/src/components/widgets/resources/cpu.jsx
+++ b/src/components/widgets/resources/cpu.jsx
@@ -1,9 +1,9 @@
 import useSWR from "swr";
 import { FiCpu } from "react-icons/fi";
-import { BiError } from "react-icons/bi";
 import { useTranslation } from "next-i18next";
 
-import UsageBar from "./usage-bar";
+import Resource from "../widget/resource";
+import Error from "../widget/error";
 
 export default function Cpu({ expanded }) {
   const { t } = useTranslation();
@@ -13,67 +13,29 @@ export default function Cpu({ expanded }) {
   });
 
   if (error || data?.error) {
-    return (
-      <div className="flex-none flex flex-row items-center mr-3 py-1.5">
-        <BiError className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-        <div className="flex flex-col ml-3 text-left">
-          <span className="text-theme-800 dark:text-theme-200 text-xs">{t("widget.api_error")}</span>
-        </div>
-      </div>
-    );
+    return <Error />
   }
 
   if (!data) {
-    return (
-      <div className="flex-none flex flex-row items-center mr-3 py-1.5 animate-pulse">
-        <FiCpu className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-        <div className="flex flex-col ml-3 text-left min-w-[85px]">
-          <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
-            <div className="pl-0.5 pr-1">-</div>
-            <div className="pr-1">{t("resources.cpu")}</div>
-          </div>
-          {expanded && (
-            <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
-              <div className="pl-0.5 pr-1">-</div>
-              <div className="pr-1">{t("resources.load")}</div>
-            </div>
-          )}
-          <UsageBar percent={0} />
-        </div>
-      </div>
-    );
+    return <Resource icon={FiCpu} value="-" label={t("resources.cpu")} expandedValue="-"
+                     expandedLabel={t("resources.load")} percentage="0" expanded={expanded} />
   }
 
-  const percent = data.cpu.usage;
-
-  return (
-    <div className="flex-none flex flex-row items-center mr-3 py-1.5">
-      <FiCpu className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-      <div className="flex flex-col ml-3 text-left min-w-[85px]">
-        <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
-          <div className="pl-0.5 pr-1">
-            {t("common.number", {
-              value: data.cpu.usage,
-              style: "unit",
-              unit: "percent",
-              maximumFractionDigits: 0,
-            })}
-          </div>
-          <div className="pr-1">{t("resources.cpu")}</div>
-        </div>
-        {expanded && (
-          <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
-            <div className="pl-0.5 pr-1">
-              {t("common.number", {
-                value: data.cpu.load,
-                maximumFractionDigits: 2,
-              })}
-            </div>
-            <div className="pr-1">{t("resources.load")}</div>
-          </div>
-        )}
-        <UsageBar percent={percent} />
-      </div>
-    </div>
-  );
+  return <Resource
+    icon={FiCpu}
+    value={t("common.number", {
+      value: data.cpu.usage,
+      style: "unit",
+      unit: "percent",
+      maximumFractionDigits: 0,
+    })}
+    label={t("resources.cpu")}
+    expandedValue={t("common.number", {
+      value: data.cpu.load,
+      maximumFractionDigits: 2,
+    })}
+    expandedLabel={t("resources.load")}
+    percentage={data.cpu.usage}
+    expanded={expanded}
+  />
 }
diff --git a/src/components/widgets/resources/cputemp.jsx b/src/components/widgets/resources/cputemp.jsx
index 571e6c8a7..ba6d9b730 100644
--- a/src/components/widgets/resources/cputemp.jsx
+++ b/src/components/widgets/resources/cputemp.jsx
@@ -1,9 +1,9 @@
 import useSWR from "swr";
 import { FaThermometerHalf } from "react-icons/fa";
-import { BiError } from "react-icons/bi";
 import { useTranslation } from "next-i18next";
 
-import UsageBar from "./usage-bar";
+import Resource from "../widget/resource";
+import Error from "../widget/error";
 
 function convertToFahrenheit(t) {
   return t * 9/5 + 32
@@ -17,34 +17,18 @@ export default function CpuTemp({ expanded, units }) {
   });
 
   if (error || data?.error) {
-    return (
-      <div className="flex-none flex flex-row items-center mr-3 py-1.5">
-        <BiError className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-        <div className="flex flex-col ml-3 text-left">
-          <span className="text-theme-800 dark:text-theme-200 text-xs">{t("widget.api_error")}</span>
-        </div>
-      </div>
-    );
+    return <Error />
   }
 
   if (!data || !data.cputemp) {
-    return (
-      <div className="flex-none flex flex-row items-center mr-3 py-1.5 animate-pulse">
-        <FaThermometerHalf className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-        <div className="flex flex-col ml-3 text-left min-w-[85px]">
-          <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
-            <div className="pl-0.5">-</div>
-            <div className="pr-1">{t("resources.temp")}</div>
-          </span>
-          {expanded && (
-            <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
-              <div className="pl-0.5">-</div>
-              <div className="pr-1">{t("resources.max")}</div>
-            </span>
-          )}
-        </div>
-      </div>
-    );
+    return <Resource
+      icon={FaThermometerHalf}
+      value="-"
+      label={t("resources.temp")}
+      expandedValue="-"
+      expandedLabel={t("resources.max")}
+      expanded={expanded}
+    />;
   }
 
   let mainTemp = data.cputemp.main;
@@ -54,38 +38,24 @@ export default function CpuTemp({ expanded, units }) {
   const unit = units === "imperial" ? "fahrenheit" : "celsius";
   mainTemp = (unit === "celsius") ? mainTemp : convertToFahrenheit(mainTemp);
   const maxTemp = (unit === "celsius") ? data.cputemp.max : convertToFahrenheit(data.cputemp.max);
-  const percent = Math.round((mainTemp / maxTemp) * 100);
 
-  return (
-    <div className="flex-none flex flex-row items-center mr-3 py-1.5">
-      <FaThermometerHalf className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-      <div className="flex flex-col ml-3 text-left min-w-[85px]">
-        <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
-          <div className="pl-0.5">
-            {t("common.number", { 
-              value: mainTemp,
-              maximumFractionDigits: 1,
-              style: "unit",
-              unit
-            })}
-          </div>
-          <div className="pr-1">{t("resources.temp")}</div>
-        </span>
-        {expanded && (
-          <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
-            <div className="pl-0.5">
-              {t("common.number", {
-                value: maxTemp,
-                maximumFractionDigits: 1,
-                style: "unit",
-                unit
-              })}
-            </div>
-            <div className="pr-1">{t("resources.max")}</div>
-          </span>
-        )}
-        <UsageBar percent={percent} />
-      </div>
-    </div>
-  );
+  return  <Resource
+    icon={FaThermometerHalf}
+    value={t("common.number", {
+      value: mainTemp,
+      maximumFractionDigits: 1,
+      style: "unit",
+      unit
+    })}
+    label={t("resources.temp")}
+    expandedValue={t("common.number", {
+      value: maxTemp,
+      maximumFractionDigits: 1,
+      style: "unit",
+      unit
+    })}
+    expandedLabel={t("resources.max")}
+    percentage={Math.round((mainTemp / maxTemp) * 100)}
+    expanded={expanded}
+  />;
 }
diff --git a/src/components/widgets/resources/disk.jsx b/src/components/widgets/resources/disk.jsx
index ca09c0958..ab56624d9 100644
--- a/src/components/widgets/resources/disk.jsx
+++ b/src/components/widgets/resources/disk.jsx
@@ -1,9 +1,9 @@
 import useSWR from "swr";
 import { FiHardDrive } from "react-icons/fi";
-import { BiError } from "react-icons/bi";
 import { useTranslation } from "next-i18next";
 
-import UsageBar from "./usage-bar";
+import Resource from "../widget/resource";
+import Error from "../widget/error";
 
 export default function Disk({ options, expanded }) {
   const { t } = useTranslation();
@@ -13,56 +13,31 @@ export default function Disk({ options, expanded }) {
   });
 
   if (error || data?.error) {
-    return (
-      <div className="flex-none flex flex-row items-center mr-3 py-1.5">
-        <BiError className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-        <div className="flex flex-col ml-3 text-left">
-          <span className="text-theme-800 dark:text-theme-200 text-xs">{t("widget.api_error")}</span>
-        </div>
-      </div>
-    );
+    return <Error options={options} />
   }
 
   if (!data) {
-    return (
-      <div className="flex-none flex flex-row items-center mr-3 py-1.5 animate-pulse">
-        <FiHardDrive className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-        <div className="flex flex-col ml-3 text-left min-w-[85px]">
-          <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
-            <div className="pl-0.5 pr-1">-</div>
-            <div className="pr-1">{t("resources.free")}</div>
-          </span>
-          {expanded && (
-            <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
-              <div className="pl-0.5 pr-1">-</div>
-              <div className="pr-1">{t("resources.total")}</div>
-            </span>
-          )}
-          <UsageBar percent={0} />
-        </div>
-      </div>
-    );
+    return <Resource
+      icon={FiHardDrive}
+      value="-"
+      label={t("resources.free")}
+      expandedValue="-"
+      expandedLabel={t("resources.total")}
+      expanded={expanded}
+      percentage="0"
+    />;
   }
 
   // data.drive.used not accurate?
   const percent = Math.round(((data.drive.size - data.drive.available) / data.drive.size) * 100);
 
-  return (
-    <div className="flex-none flex flex-row items-center mr-3 py-1.5">
-      <FiHardDrive className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-      <div className="flex flex-col ml-3 text-left min-w-[85px]">
-        <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
-          <div className="pl-0.5 pr-1">{t("common.bytes", { value: data.drive.available })}</div>
-          <div className="pr-1">{t("resources.free")}</div>
-        </span>
-        {expanded && (
-          <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
-            <div className="pl-0.5 pr-1">{t("common.bytes", { value: data.drive.size })}</div>
-            <div className="pr-1">{t("resources.total")}</div>
-          </span>
-        )}
-        <UsageBar percent={percent} />
-      </div>
-    </div>
-  );
+  return <Resource
+    icon={FiHardDrive}
+    value={t("common.bytes", { value: data.drive.available })}
+    label={t("resources.free")}
+    expandedValue={t("common.bytes", { value: data.drive.size })}
+    expandedLabel={t("resources.total")}
+    percentage={percent}
+    expanded={expanded}
+  />;
 }
diff --git a/src/components/widgets/resources/memory.jsx b/src/components/widgets/resources/memory.jsx
index 30b7c8eb8..19ae86879 100644
--- a/src/components/widgets/resources/memory.jsx
+++ b/src/components/widgets/resources/memory.jsx
@@ -1,9 +1,9 @@
 import useSWR from "swr";
 import { FaMemory } from "react-icons/fa";
-import { BiError } from "react-icons/bi";
 import { useTranslation } from "next-i18next";
 
-import UsageBar from "./usage-bar";
+import Resource from "../widget/resource";
+import Error from "../widget/error";
 
 export default function Memory({ expanded }) {
   const { t } = useTranslation();
@@ -13,63 +13,30 @@ export default function Memory({ expanded }) {
   });
 
   if (error || data?.error) {
-    return (
-      <div className="flex-none flex flex-row items-center mr-3 py-1.5">
-        <BiError className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-        <div className="flex flex-col ml-3 text-left">
-          <span className="text-theme-800 dark:text-theme-200 text-xs">{t("widget.api_error")}</span>
-        </div>
-      </div>
-    );
+    return <Error />
   }
 
   if (!data) {
-    return (
-      <div className="flex-none flex flex-row items-center mr-3 py-1.5 animate-pulse">
-        <FaMemory className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-        <div className="flex flex-col ml-3 text-left min-w-[85px]">
-          <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
-            <div className="pl-0.5 pr-1">-</div>
-            <div className="pr-1">{t("resources.free")}</div>
-          </span>
-          {expanded && (
-            <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
-              <div className="pl-0.5 pr-1">-</div>
-              <div className="pr-1">{t("resources.total")}</div>
-            </span>
-          )}
-          <UsageBar percent={0} />
-        </div>
-      </div>
-    );
+    return <Resource
+      icon={FaMemory}
+      value="-"
+      label={t("resources.free")}
+      expandedValue="-"
+      expandedLabel={t("resources.total")}
+      expanded={expanded}
+      percentage="0"
+    />;
   }
 
   const percent = Math.round((data.memory.active / data.memory.total) * 100);
 
-  return (
-    <div className="flex-none flex flex-row items-center mr-3 py-1.5">
-      <FaMemory className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-      <div className="flex flex-col ml-3 text-left min-w-[85px]">
-        <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
-          <div className="pl-0.5 pr-1">
-            {t("common.bytes", { value: data.memory.available, maximumFractionDigits: 1, binary: true })}
-          </div>
-          <div className="pr-1">{t("resources.free")}</div>
-        </span>
-        {expanded && (
-          <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
-            <div className="pl-0.5 pr-1">
-              {t("common.bytes", {
-                value: data.memory.total,
-                maximumFractionDigits: 1,
-                binary: true,
-              })}
-            </div>
-            <div className="pr-1">{t("resources.total")}</div>
-          </span>
-        )}
-        <UsageBar percent={percent} />
-      </div>
-    </div>
-  );
+  return <Resource
+    icon={FaMemory}
+    value={t("common.bytes", { value: data.memory.available, maximumFractionDigits: 1, binary: true })}
+    label={t("resources.free")}
+    expandedValue={t("common.bytes", { value: data.memory.total, maximumFractionDigits: 1, binary: true })}
+    expandedLabel={t("resources.total")}
+    percentage={percent}
+    expanded={expanded}
+  />;
 }
diff --git a/src/components/widgets/resources/resources.jsx b/src/components/widgets/resources/resources.jsx
index 4ff0c81cd..0cc2c3013 100644
--- a/src/components/widgets/resources/resources.jsx
+++ b/src/components/widgets/resources/resources.jsx
@@ -1,3 +1,6 @@
+import Container from "../widget/container";
+import Raw from "../widget/raw";
+
 import Disk from "./disk";
 import Cpu from "./cpu";
 import Memory from "./memory";
@@ -6,8 +9,8 @@ import Uptime from "./uptime";
 
 export default function Resources({ options }) {
   const { expanded, units } = options;
-  return (
-    <div className="flex flex-col max-w:full sm:basis-auto self-center grow-0 flex-wrap">
+  return <Container options={options}>
+    <Raw>
       <div className="flex flex-row self-center flex-wrap justify-between">
         {options.cpu && <Cpu expanded={expanded} />}
         {options.memory && <Memory expanded={expanded} />}
@@ -20,6 +23,6 @@ export default function Resources({ options }) {
       {options.label && (
         <div className="ml-6 pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">{options.label}</div>
       )}
-    </div>
-  );
+    </Raw>
+  </Container>;
 }
diff --git a/src/components/widgets/resources/uptime.jsx b/src/components/widgets/resources/uptime.jsx
index 3bf785b1e..3984975f1 100644
--- a/src/components/widgets/resources/uptime.jsx
+++ b/src/components/widgets/resources/uptime.jsx
@@ -1,9 +1,9 @@
 import useSWR from "swr";
 import { FaRegClock } from "react-icons/fa";
-import { BiError } from "react-icons/bi";
 import { useTranslation } from "next-i18next";
 
-import UsageBar from "./usage-bar";
+import Resource from "../widget/resource";
+import Error from "../widget/error";
 
 export default function Uptime() {
   const { t } = useTranslation();
@@ -13,54 +13,24 @@ export default function Uptime() {
   });
 
   if (error || data?.error) {
-    return (
-      <div className="flex-none flex flex-row items-center mr-3 py-1.5">
-        <BiError className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-        <div className="flex flex-col ml-3 text-left">
-          <span className="text-theme-800 dark:text-theme-200 text-xs">{t("widget.api_error")}</span>
-        </div>
-      </div>
-    );
+    return <Error />
   }
 
   if (!data) {
-    return (
-      <div className="flex-none flex flex-row items-center mr-3 py-1.5 animate-pulse">
-        <FaRegClock className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-        <div className="flex flex-col ml-3 text-left min-w-[85px]">
-          <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
-            <div className="pl-0.5">-</div>
-            <div className="pr-1">{t("resources.temp")}</div>
-          </span>
-        </div>
-      </div>
-    );
+    return <Resource icon={FaRegClock} value="-" label={t("resources.uptime")} percentage="0" />;
   }
 
   const mo = Math.floor(data.uptime / (3600 * 24 * 31));
   const d = Math.floor(data.uptime % (3600 * 24 * 31) / (3600 * 24));
   const h = Math.floor(data.uptime % (3600 * 24) / 3600);
   const m = Math.floor(data.uptime % 3600 / 60);
-  
+
   let uptime;
   if (mo > 0) uptime = `${mo}${t("resources.months")} ${d}${t("resources.days")}`;
   else if (d > 0) uptime = `${d}${t("resources.days")} ${h}${t("resources.hours")}`;
   else uptime = `${h}${t("resources.hours")} ${m}${t("resources.minutes")}`;
 
-  const percent = Math.round((new Date().getSeconds() / 60) * 100);
+  const percent = Math.round((new Date().getSeconds() / 60) * 100).toString();
 
-  return (
-    <div className="flex-none flex flex-row items-center mr-3 py-1.5">
-      <FaRegClock className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-      <div className="flex flex-col ml-3 text-left min-w-[85px]">
-        <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
-          <div className="pl-0.5">
-            {uptime}
-          </div>
-          <div className="pr-1">{t("resources.uptime")}</div>
-        </span>
-        <UsageBar percent={percent} />
-      </div>
-    </div>
-  );
+  return <Resource icon={FaRegClock} value={uptime} label={t("resources.uptime")} percentage={percent} />;
 }
diff --git a/src/components/widgets/search/search.jsx b/src/components/widgets/search/search.jsx
index 4689567f3..1bac4a619 100644
--- a/src/components/widgets/search/search.jsx
+++ b/src/components/widgets/search/search.jsx
@@ -1,10 +1,13 @@
-import { useState, useEffect, Fragment } from "react";
+import { useState, useEffect, useCallback, Fragment } from "react";
 import { useTranslation } from "next-i18next";
 import { FiSearch } from "react-icons/fi";
 import { SiDuckduckgo, SiMicrosoftbing, SiGoogle, SiBaidu, SiBrave } from "react-icons/si";
 import { Listbox, Transition } from "@headlessui/react";
 import classNames from "classnames";
 
+import ContainerForm from "../widget/container_form";
+import Raw from "../widget/raw";
+
 export const searchProviders = {
   google: {
     name: "Google",
@@ -76,14 +79,9 @@ export default function Search({ options }) {
       setSelectedProvider(storedProvider);
     }
   }, [availableProviderIds]);
-  
-  if (!availableProviderIds) {
-    return null;
-  }
 
-  function handleSubmit(event) {
+  const submitCallback = useCallback(event =>  {
     const q = encodeURIComponent(query);
-
     const { url } = selectedProvider;
     if (url) {
       window.open(`${url}${q}`, options.target || "_blank");
@@ -94,6 +92,10 @@ export default function Search({ options }) {
     event.preventDefault();
     event.target.reset();
     setQuery("");
+  }, [options.target, options.url, query, selectedProvider]);
+
+  if (!availableProviderIds) {
+    return null;
   }
 
   const onChangeProvider = (provider) => {
@@ -101,77 +103,79 @@ export default function Search({ options }) {
     localStorage.setItem(localStorageKey, provider.name);
   }
 
-  return (
-    <form className="flex-col relative h-8 my-4 min-w-fit grow first:ml-0 ml-4" onSubmit={handleSubmit}>
-      <div className="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none w-full text-theme-800 dark:text-white" />
-      <input
-        type="text"
-        className="
-          overflow-hidden w-full h-full rounded-md
-          text-xs text-theme-900 dark:text-white
-          placeholder-theme-900 dark:placeholder-white/80
-          bg-white/50 dark:bg-white/10
-          focus:ring-theme-500 dark:focus:ring-white/50
-          focus:border-theme-500 dark:focus:border-white/50
-          border border-theme-300 dark:border-theme-200/50"
-        placeholder={t("search.placeholder")}
-        onChange={(s) => setQuery(s.currentTarget.value)}
-        required
-        autoCapitalize="off"
-        autoCorrect="off"
-        autoComplete="off"
-        // eslint-disable-next-line jsx-a11y/no-autofocus
-        autoFocus={options.focus}
-      />
-      <Listbox as="div" value={selectedProvider} onChange={onChangeProvider} className="relative text-left" disabled={availableProviderIds?.length === 1}>
-        <div>
-          <Listbox.Button
-            className="
-        absolute right-0.5 bottom-0.5 rounded-r-md px-4 py-2 border-1
-        text-white font-medium text-sm
-        bg-theme-600/40 dark:bg-white/10
-        focus:ring-theme-500 dark:focus:ring-white/50"
-          >
-            <selectedProvider.icon className="text-white w-3 h-3" />
-            <span className="sr-only">{t("search.search")}</span>
-          </Listbox.Button>
-        </div>
-        <Transition
-          as={Fragment}
-          enter="transition ease-out duration-100"
-          enterFrom="transform opacity-0 scale-95"
-          enterTo="transform opacity-100 scale-100"
-          leave="transition ease-in duration-75"
-          leaveFrom="transform opacity-100 scale-100"
-          leaveTo="transform opacity-0 scale-95"
-        >
-          <Listbox.Options
-            className="absolute right-0 z-10 mt-1 origin-top-right rounded-md 
-            bg-theme-100 dark:bg-theme-600 shadow-lg 
-            ring-1 ring-black ring-opacity-5 focus:outline-none"
+  return <ContainerForm options={options} callback={submitCallback} additionalClassNames="grow" >
+    <Raw>
+      <div className="flex-col relative h-8 my-4 min-w-fit">
+        <div className="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none w-full text-theme-800 dark:text-white" />
+        <input
+          type="text"
+          className="
+            overflow-hidden w-full h-full rounded-md
+            text-xs text-theme-900 dark:text-white
+            placeholder-theme-900 dark:placeholder-white/80
+            bg-white/50 dark:bg-white/10
+            focus:ring-theme-500 dark:focus:ring-white/50
+            focus:border-theme-500 dark:focus:border-white/50
+            border border-theme-300 dark:border-theme-200/50"
+          placeholder={t("search.placeholder")}
+          onChange={(s) => setQuery(s.currentTarget.value)}
+          required
+          autoCapitalize="off"
+          autoCorrect="off"
+          autoComplete="off"
+          // eslint-disable-next-line jsx-a11y/no-autofocus
+          autoFocus={options.focus}
+        />
+        <Listbox as="div" value={selectedProvider} onChange={onChangeProvider} className="relative text-left" disabled={availableProviderIds?.length === 1}>
+          <div>
+            <Listbox.Button
+              className="
+          absolute right-0.5 bottom-0.5 rounded-r-md px-4 py-2 border-1
+          text-white font-medium text-sm
+          bg-theme-600/40 dark:bg-white/10
+          focus:ring-theme-500 dark:focus:ring-white/50"
+            >
+              <selectedProvider.icon className="text-white w-3 h-3" />
+              <span className="sr-only">{t("search.search")}</span>
+            </Listbox.Button>
+          </div>
+          <Transition
+            as={Fragment}
+            enter="transition ease-out duration-100"
+            enterFrom="transform opacity-0 scale-95"
+            enterTo="transform opacity-100 scale-100"
+            leave="transition ease-in duration-75"
+            leaveFrom="transform opacity-100 scale-100"
+            leaveTo="transform opacity-0 scale-95"
           >
-            <div className="flex flex-col">
-              {availableProviderIds.map((providerId) => {
-                const p = searchProviders[providerId];
-                return (
-                  <Listbox.Option key={providerId} value={p} as={Fragment}>
-                    {({ active }) => (
-                      <li
-                        className={classNames(
-                          "rounded-md cursor-pointer",
-                          active ? "bg-theme-600/10 dark:bg-white/10 dark:text-gray-900" : "dark:text-gray-100"
-                        )}
-                      >
-                        <p.icon className="h-4 w-4 mx-4 my-2" />
-                      </li>
-                    )}
-                  </Listbox.Option>
-                );
-              })}
-            </div>
-          </Listbox.Options>
-        </Transition>
-      </Listbox>
-    </form>
-  );
+            <Listbox.Options
+              className="absolute right-0 z-10 mt-1 origin-top-right rounded-md
+              bg-theme-100 dark:bg-theme-600 shadow-lg
+              ring-1 ring-black ring-opacity-5 focus:outline-none"
+            >
+              <div className="flex flex-col">
+                {availableProviderIds.map((providerId) => {
+                  const p = searchProviders[providerId];
+                  return (
+                    <Listbox.Option key={providerId} value={p} as={Fragment}>
+                      {({ active }) => (
+                        <li
+                          className={classNames(
+                            "rounded-md cursor-pointer",
+                            active ? "bg-theme-600/10 dark:bg-white/10 dark:text-gray-900" : "dark:text-gray-100"
+                          )}
+                        >
+                          <p.icon className="h-4 w-4 mx-4 my-2" />
+                        </li>
+                      )}
+                    </Listbox.Option>
+                  );
+                })}
+              </div>
+            </Listbox.Options>
+          </Transition>
+        </Listbox>
+      </div>
+    </Raw>
+  </ContainerForm>;
 }
diff --git a/src/components/widgets/unifi_console/unifi_console.jsx b/src/components/widgets/unifi_console/unifi_console.jsx
index 13c90bd42..dad92cc78 100644
--- a/src/components/widgets/unifi_console/unifi_console.jsx
+++ b/src/components/widgets/unifi_console/unifi_console.jsx
@@ -3,6 +3,12 @@ import { MdSettingsEthernet } from "react-icons/md";
 import { useTranslation } from "next-i18next";
 import { SiUbiquiti } from "react-icons/si";
 
+import Error from "../widget/error";
+import Container from "../widget/container";
+import Raw from "../widget/raw";
+import WidgetIcon from "../widget/widget_icon";
+import PrimaryText from "../widget/primary_text";
+
 import useWidgetAPI from "utils/proxy/use-widget-api";
 
 export default function Widget({ options }) {
@@ -13,35 +19,16 @@ export default function Widget({ options }) {
   const { data: statsData, error: statsError } = useWidgetAPI(options, "stat/sites", { index: options.index });
 
   if (statsError) {
-    return (
-      <div className="flex flex-col justify-center first:ml-0 ml-4">
-        <div className="flex flex-row items-center justify-end">
-          <div className="flex flex-col items-center">
-            <BiError className="w-8 h-8 text-theme-800 dark:text-theme-200" />
-            <div className="flex flex-col ml-3 text-left">
-              <span className="text-theme-800 dark:text-theme-200 text-sm">{t("widget.api_error")}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
+    return <Error options={options} />
   }
 
   const defaultSite = options.site ? statsData?.data.find(s => s.desc === options.site) : statsData?.data?.find(s => s.name === "default");
 
   if (!defaultSite) {
-    return (
-      <div className="flex flex-col justify-center first:ml-0 ml-4">
-        <div className="flex flex-row items-center justify-end">
-          <div className="flex flex-col items-center">
-            <SiUbiquiti className="w-5 h-5 text-theme-800 dark:text-theme-200" />
-          </div>
-          <div className="flex flex-col ml-3 text-left">
-            <span className="text-theme-800 dark:text-theme-200 text-xs">{t("unifi.wait")}</span>
-          </div>
-        </div>
-      </div>
-    );
+    return <Container options={options}>
+      <PrimaryText>{t("unifi.wait")}</PrimaryText>
+      <WidgetIcon icon={SiUbiquiti} />
+    </Container>;
   }
 
   const wan = defaultSite.health.find(h => h.subsystem === "wan");
@@ -56,8 +43,9 @@ export default function Widget({ options }) {
 
   const dataEmpty = !(wan.show || lan.show || wlan.show || uptime);
 
-  return (
-    <div className="flex-none flex flex-row items-center mr-3 py-1.5">
+  return <Container options={options}>
+    <Raw>
+      <div className="flex-none flex flex-row items-center mr-3 py-1.5">
       <div className="flex flex-col">
         <div className="flex flex-row ml-3 mb-0.5">
           <SiUbiquiti className="text-theme-800 dark:text-theme-200 w-3 h-3 mr-1" />
@@ -141,6 +129,7 @@ export default function Widget({ options }) {
           </div>
         </div>}
       </div>
-    </div>
-  );
+      </div>
+    </Raw>
+  </Container>
 }
diff --git a/src/components/widgets/weather/weather.jsx b/src/components/widgets/weather/weather.jsx
index 20bf3dec2..702ea6693 100644
--- a/src/components/widgets/weather/weather.jsx
+++ b/src/components/widgets/weather/weather.jsx
@@ -1,10 +1,16 @@
 import useSWR from "swr";
 import { useState } from "react";
-import { BiError } from "react-icons/bi";
 import { WiCloudDown } from "react-icons/wi";
 import { MdLocationDisabled, MdLocationSearching } from "react-icons/md";
 import { useTranslation } from "next-i18next";
 
+import Error from "../widget/error";
+import Container from "../widget/container";
+import PrimaryText from "../widget/primary_text";
+import SecondaryText from "../widget/secondary_text";
+import WidgetIcon from "../widget/widget_icon";
+import ContainerButton from "../widget/container_button";
+
 import Icon from "./icon";
 
 function Widget({ options }) {
@@ -15,59 +21,35 @@ function Widget({ options }) {
   );
 
   if (error || data?.error) {
-    return (
-      <div className="flex flex-col justify-center first:ml-0 ml-4 mr-2">
-        <div className="flex flex-row items-center justify-end">
-          <div className="flex flex-col items-center">
-            <BiError className="w-8 h-8 text-theme-800 dark:text-theme-200" />
-            <div className="flex flex-col ml-3 text-left">
-              <span className="text-theme-800 dark:text-theme-200 text-sm">{t("widget.api_error")}</span>
-              <span className="text-theme-800 dark:text-theme-200 text-xs">-</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
+    return <Error options={options} />
   }
 
   if (!data) {
-    return (
-      <div className="flex flex-col justify-center first:ml-0 ml-4 mr-2">
-        <div className="flex flex-row items-center justify-end">
-          <div className="flex flex-col items-center">
-            <WiCloudDown className="w-8 h-8 text-theme-800 dark:text-theme-200" />
-          </div>
-          <div className="flex flex-col ml-3 text-left">
-            <span className="text-theme-800 dark:text-theme-200 text-sm">{t("weather.updating")}</span>
-            <span className="text-theme-800 dark:text-theme-200 text-xs">{t("weather.wait")}</span>
-          </div>
-        </div>
-      </div>
-    );
+    return <Container options={options}>
+      <PrimaryText>{t("weather.updating")}</PrimaryText>
+      <SecondaryText>{t("weather.wait")}</SecondaryText>
+      <WidgetIcon icon={WiCloudDown} size="l" />
+    </Container>;
   }
 
   const unit = options.units === "metric" ? "celsius" : "fahrenheit";
+  const weatherInfo = {
+    condition: data.current.condition.code,
+    timeOfDay: data.current.is_day ? "day" : "night",
+  };
 
-  return (
-    <div className="flex flex-col justify-center first:ml-0 ml-4 mr-2">
-      <div className="flex flex-row items-center justify-end">
-        <div className="flex flex-col items-center">
-          <Icon condition={data.current.condition.code} timeOfDay={data.current.is_day ? "day" : "night"} />
-        </div>
-        <div className="flex flex-col ml-3 text-left">
-          <span className="text-theme-800 dark:text-theme-200 text-sm">
-            {options.label && `${options.label}, `}
-            {t("common.number", {
-              value: options.units === "metric" ? data.current.temp_c : data.current.temp_f,
-              style: "unit",
-              unit,
-            })}
-          </span>
-          <span className="text-theme-800 dark:text-theme-200 text-xs">{data.current.condition.text}</span>
-        </div>
-      </div>
-    </div>
-  );
+  return <Container options={options}>
+    <PrimaryText>
+      {options.label && `${options.label}, `}
+      {t("common.number", {
+        value: options.units === "metric" ? data.current.temp_c : data.current.temp_f,
+        style: "unit",
+        unit,
+      })}
+    </PrimaryText>
+    <SecondaryText>{data.current.condition.text}</SecondaryText>
+    <WidgetIcon icon={Icon} size="xl" weatherInfo={weatherInfo} />
+  </Container>;
 }
 
 export default function WeatherApi({ options }) {
@@ -99,30 +81,12 @@ export default function WeatherApi({ options }) {
     }
   };
 
-  // if (!requesting && !location) requestLocation();
-
   if (!location) {
-    return (
-      <button
-        type="button"
-        onClick={() => requestLocation()}
-        className="flex flex-col justify-center first:ml-0 ml-4 mr-2"
-      >
-        <div className="flex flex-row items-center justify-end">
-          <div className="flex flex-col items-center">
-            {requesting ? (
-              <MdLocationSearching className="w-6 h-6 text-theme-800 dark:text-theme-200 animate-pulse" />
-            ) : (
-              <MdLocationDisabled className="w-6 h-6 text-theme-800 dark:text-theme-200" />
-            )}
-          </div>
-          <div className="flex flex-col ml-3 text-left">
-            <span className="text-theme-800 dark:text-theme-200 text-sm">{t("weather.current")}</span>
-            <span className="text-theme-800 dark:text-theme-200 text-xs">{t("weather.allow")}</span>
-          </div>
-        </div>
-      </button>
-    );
+    return <ContainerButton options={options} callback={requestLocation} >
+      <PrimaryText>{t("weather.current")}</PrimaryText>
+      <SecondaryText>{t("weather.allow")}</SecondaryText>
+      <WidgetIcon icon={requesting ? MdLocationSearching : MdLocationDisabled} size="m" pulse />
+    </ContainerButton>;
   }
 
   return <Widget options={{ ...location, ...options }} />;
diff --git a/src/components/widgets/widget.jsx b/src/components/widgets/widget.jsx
index 471418872..b4fdb1434 100644
--- a/src/components/widgets/widget.jsx
+++ b/src/components/widgets/widget.jsx
@@ -17,13 +17,13 @@ const widgetMappings = {
   kubernetes: dynamic(() => import("components/widgets/kubernetes/kubernetes")),
 };
 
-export default function Widget({ widget }) {
+export default function Widget({ widget, style }) {
   const InfoWidget = widgetMappings[widget.type];
 
   if (InfoWidget) {
     return (
       <ErrorBoundary>
-        <InfoWidget options={widget.options} />
+        <InfoWidget options={{ ...widget.options, style }} />
       </ErrorBoundary>
     );
   }
diff --git a/src/components/widgets/widget/container.jsx b/src/components/widgets/widget/container.jsx
new file mode 100644
index 000000000..3a4a9f57e
--- /dev/null
+++ b/src/components/widgets/widget/container.jsx
@@ -0,0 +1,42 @@
+import classNames from "classnames";
+
+import WidgetIcon from "./widget_icon";
+import PrimaryText from "./primary_text";
+import SecondaryText from "./secondary_text";
+import Raw from "./raw";
+
+export function getAllClasses(options, additionalClassNames = '') {
+  return classNames(
+    "flex flex-col justify-center first:ml-0 ml-4 mr-2",
+    additionalClassNames,
+    options?.style === "boxedWidgets" && " ml-4 mt-2 m:mb-0 rounded-md shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-100/20 dark:bg-white/5 p-2 pl-3",
+  );
+}
+
+export function getInnerBlock(children) {
+  // children won't be an array if it's Raw component
+  return Array.isArray(children) && <div className="flex flex-row items-center justify-end">
+    <div className="flex flex-col items-center">{children.find(child => child.type === WidgetIcon)}</div>
+    <div className="flex flex-col ml-3 text-left">
+      <span className="text-theme-800 dark:text-theme-200 text-sm">{children.find(child => child.type === PrimaryText)}</span>
+      <span className="text-theme-800 dark:text-theme-200 text-xs">{children.find(child => child.type === SecondaryText)}</span>
+    </div>
+  </div>;
+}
+
+export function getBottomBlock(children) {
+  if (children.type !== Raw) {
+    return children.find(child => child.type === Raw) || [];
+  }
+
+  return [children];
+}
+
+export default function Container({ children = [], options, additionalClassNames = '' }) {
+  return (
+    <div className={getAllClasses(options, additionalClassNames)}>
+      {getInnerBlock(children)}
+      {getBottomBlock(children)}
+    </div>
+  );
+}
diff --git a/src/components/widgets/widget/container_button.jsx b/src/components/widgets/widget/container_button.jsx
new file mode 100644
index 000000000..92d8a4166
--- /dev/null
+++ b/src/components/widgets/widget/container_button.jsx
@@ -0,0 +1,10 @@
+import { getAllClasses, getInnerBlock, getBottomBlock } from "./container";
+
+export default function ContainerButton ({ children = [], options, additionalClassNames = '', callback }) {
+  return (
+    <button type="button" onClick={callback} className={getAllClasses(options, additionalClassNames)}>
+      {getInnerBlock(children)}
+      {getBottomBlock(children)}
+    </button>
+  );
+}
diff --git a/src/components/widgets/widget/container_form.jsx b/src/components/widgets/widget/container_form.jsx
new file mode 100644
index 000000000..7d28a1bb3
--- /dev/null
+++ b/src/components/widgets/widget/container_form.jsx
@@ -0,0 +1,10 @@
+import { getAllClasses, getInnerBlock, getBottomBlock } from "./container";
+
+export default function ContainerForm ({ children = [], options, additionalClassNames = '', callback }) {
+  return (
+    <form type="button" onSubmit={callback} className={getAllClasses(options, additionalClassNames)}>
+      {getInnerBlock(children)}
+      {getBottomBlock(children)}
+    </form>
+  );
+}
diff --git a/src/components/widgets/widget/container_link.jsx b/src/components/widgets/widget/container_link.jsx
new file mode 100644
index 000000000..8ef0e80aa
--- /dev/null
+++ b/src/components/widgets/widget/container_link.jsx
@@ -0,0 +1,10 @@
+import { getAllClasses, getInnerBlock, getBottomBlock } from "./container";
+
+export default function ContainerLink ({ children = [], options, additionalClassNames = '', target }) {
+  return (
+    <a href={options.url} target={target} className={getAllClasses(options, additionalClassNames)}>
+      {getInnerBlock(children)}
+      {getBottomBlock(children)}
+    </a>
+  );
+}
diff --git a/src/components/widgets/widget/error.jsx b/src/components/widgets/widget/error.jsx
new file mode 100644
index 000000000..a3dbab85e
--- /dev/null
+++ b/src/components/widgets/widget/error.jsx
@@ -0,0 +1,15 @@
+import { useTranslation } from "react-i18next";
+import { BiError } from "react-icons/bi";
+
+import Container from "./container";
+import PrimaryText from "./primary_text";
+import WidgetIcon from "./widget_icon";
+
+export default function Error({ options }) {
+  const { t } = useTranslation();
+
+  return <Container options={options}>
+    <PrimaryText>{t("widget.api_error")}</PrimaryText>
+    <WidgetIcon icon={BiError} size="l" />
+  </Container>;
+}
diff --git a/src/components/widgets/widget/primary_text.jsx b/src/components/widgets/widget/primary_text.jsx
new file mode 100644
index 000000000..3418b92c7
--- /dev/null
+++ b/src/components/widgets/widget/primary_text.jsx
@@ -0,0 +1,5 @@
+export default function PrimaryText({ children }) {
+  return (
+    <span className="text-theme-800 dark:text-theme-200 text-sm">{children}</span>
+  );
+}
diff --git a/src/components/widgets/widget/raw.jsx b/src/components/widgets/widget/raw.jsx
new file mode 100644
index 000000000..44e3dddc4
--- /dev/null
+++ b/src/components/widgets/widget/raw.jsx
@@ -0,0 +1,7 @@
+export default function Raw({ children }) {
+  if (children.type === Raw) {
+      return [children];
+  }
+
+  return children;
+}
diff --git a/src/components/widgets/widget/resource.jsx b/src/components/widgets/widget/resource.jsx
new file mode 100644
index 000000000..e77bcb5a7
--- /dev/null
+++ b/src/components/widgets/widget/resource.jsx
@@ -0,0 +1,22 @@
+import UsageBar from "../resources/usage-bar";
+
+export default function Resource({ children, icon, value, label, expandedValue, expandedLabel, percentage, key, expanded = false }) {
+  const Icon = icon;
+
+  return <div key={key} className="flex-none flex flex-row items-center mr-3 py-1.5">
+    <Icon className="text-theme-800 dark:text-theme-200 w-5 h-5"/>
+    <div className="flex flex-col ml-3 text-left min-w-[85px]">
+      <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+        <div className="pl-0.5">{value}</div>
+        <div className="pr-1">{label}</div>
+      </div>
+      { expanded && <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+          <div className="pl-0.5">{expandedValue}</div>
+          <div className="pr-1">{expandedLabel}</div>
+        </div>
+      }
+      { percentage && <UsageBar percent={percentage} /> }
+      { children }
+    </div>
+  </div>;
+}
diff --git a/src/components/widgets/widget/resources.jsx b/src/components/widgets/widget/resources.jsx
new file mode 100644
index 000000000..19fb021de
--- /dev/null
+++ b/src/components/widgets/widget/resources.jsx
@@ -0,0 +1,15 @@
+import ContainerLink from "./container_link";
+import Resource from "./resource";
+import Raw from "./raw";
+import WidgetLabel from "./widget_label";
+
+export default function Resources({ options, children, target }) {
+  return <ContainerLink options={options} target={target}>
+    <Raw>
+      <div className="flex flex-row self-center flex-wrap justify-between">
+        { children.filter(child => child && child.type === Resource) }
+      </div>
+      { children.filter(child => child && child.type === WidgetLabel) }
+    </Raw>
+  </ContainerLink>;
+}
diff --git a/src/components/widgets/widget/secondary_text.jsx b/src/components/widgets/widget/secondary_text.jsx
new file mode 100644
index 000000000..363d1bd04
--- /dev/null
+++ b/src/components/widgets/widget/secondary_text.jsx
@@ -0,0 +1,5 @@
+export default function SecondaryText({ children }) {
+  return (
+    <span className="text-theme-800 dark:text-theme-200 text-xs">{children}</span>
+  );
+}
diff --git a/src/components/widgets/widget/widget_icon.jsx b/src/components/widgets/widget/widget_icon.jsx
new file mode 100644
index 000000000..9766a8791
--- /dev/null
+++ b/src/components/widgets/widget/widget_icon.jsx
@@ -0,0 +1,18 @@
+export default function WidgetIcon({ icon, size = "s", pulse = false, weatherInfo = {} }) {
+  const Icon = icon;
+  const { condition, timeOfDay } = weatherInfo;
+  let additionalClasses = "text-theme-800 dark:text-theme-200 ";
+
+  switch (size) {
+    case "m": additionalClasses += "w-6 h-6 "; break;
+    case "l": additionalClasses += "w-8 h-8 "; break;
+    case "xl": additionalClasses += "w-10 h-10 "; break;
+    default: additionalClasses += "w-5 h-5 ";
+  }
+
+  if (pulse) {
+    additionalClasses += "animate-pulse ";
+  }
+
+  return <Icon className={additionalClasses} condition={condition} timeOfDay={timeOfDay} />;
+}
diff --git a/src/components/widgets/widget/widget_label.jsx b/src/components/widgets/widget/widget_label.jsx
new file mode 100644
index 000000000..dcb9b9e96
--- /dev/null
+++ b/src/components/widgets/widget/widget_label.jsx
@@ -0,0 +1,3 @@
+export default function WidgetLabel({ label = "" }) {
+  return <div className="ml-6 pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">{label}</div>
+}
diff --git a/src/pages/api/widgets/longhorn.js b/src/pages/api/widgets/longhorn.js
index a6b6781c8..d23a7f61b 100644
--- a/src/pages/api/widgets/longhorn.js
+++ b/src/pages/api/widgets/longhorn.js
@@ -46,7 +46,7 @@ function parseLonghornData(data) {
 
 export default async function handler(req, res) {
   const settings = getSettings();
-  const longhornSettings = settings?.providers?.longhorn;
+  const longhornSettings = settings?.providers?.longhorn || {};
   const {url, username, password} = longhornSettings;
 
   if (!url) {
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index e170d4e1d..006456f9d 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -160,6 +160,7 @@ const headerStyles = {
     "m-4 mb-0 sm:m-8 sm:mb-0 rounded-md shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-100/20 dark:bg-white/5 p-3",
   underlined: "m-4 mb-0 sm:m-8 sm:mb-1 border-b-2 pb-4 border-theme-800 dark:border-theme-200/50",
   clean: "m-4 mb-0 sm:m-8 sm:mb-0",
+  boxedWidgets: "m-4 mb-0 sm:m-8 sm:mb-0 sm:mt-1",
 };
 
 function Home({ initialSettings }) {
@@ -208,6 +209,7 @@ function Home({ initialSettings }) {
       searchProvider = searchProviders[searchWidget.options?.provider];
     }
   }
+  const headerStyle = initialSettings?.headerStyle || "underlined";
 
   useEffect(() => {
     function handleKeyDown(e) {
@@ -256,7 +258,7 @@ function Home({ initialSettings }) {
         <div
           className={classNames(
             "flex flex-row flex-wrap  justify-between",
-            headerStyles[initialSettings.headerStyle || "underlined"]
+            headerStyles[headerStyle]
           )}
         >
           <QuickLaunch
@@ -272,14 +274,14 @@ function Home({ initialSettings }) {
               {widgets
                 .filter((widget) => !rightAlignedWidgets.includes(widget.type))
                 .map((widget, i) => (
-                  <Widget key={i} widget={widget} />
+                  <Widget key={i} widget={widget} style={headerStyle} />
                 ))}
 
-              <div className="m-auto sm:ml-2 flex flex-wrap grow sm:basis-auto justify-between md:justify-end">
+              <div className="m-auto sm:ml-4 flex flex-wrap grow sm:basis-auto justify-between md:justify-end">
                 {widgets
                   .filter((widget) => rightAlignedWidgets.includes(widget.type))
                   .map((widget, i) => (
-                    <Widget key={i} widget={widget} />
+                    <Widget key={i} widget={widget} style={headerStyle} />
                   ))}
               </div>
             </>