diff --git a/docs/public/favicon.ico b/docs/public/favicon.ico
index a11777c..488fe60 100644
Binary files a/docs/public/favicon.ico and b/docs/public/favicon.ico differ
diff --git a/docs/public/index.html b/docs/public/index.html
index 9fe5999..501203b 100644
--- a/docs/public/index.html
+++ b/docs/public/index.html
@@ -7,10 +7,9 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Statflo's widget playground"
     />
     <link rel="stylesheet" href="https://cdn.statflo.com/brandon/brandon.css" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
diff --git a/docs/public/logo192.png b/docs/public/logo192.png
deleted file mode 100644
index fc44b0a..0000000
Binary files a/docs/public/logo192.png and /dev/null differ
diff --git a/docs/public/logo512.png b/docs/public/logo512.png
deleted file mode 100644
index a4e47a6..0000000
Binary files a/docs/public/logo512.png and /dev/null differ
diff --git a/docs/public/manifest.json b/docs/public/manifest.json
index 080d6c7..7f07eaa 100644
--- a/docs/public/manifest.json
+++ b/docs/public/manifest.json
@@ -1,21 +1,11 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Widget Playground",
+  "name": "Widget Playground",
   "icons": [
     {
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
   "start_url": ".",
diff --git a/docs/src/components/RemoteComponent.tsx b/docs/src/components/RemoteComponent.tsx
index a8c587c..96748ae 100644
--- a/docs/src/components/RemoteComponent.tsx
+++ b/docs/src/components/RemoteComponent.tsx
@@ -5,6 +5,7 @@ import { UseBoundStore } from "zustand/react";
 import { Mutate, StoreApi } from "zustand/vanilla";
 
 import { Widget, WidgetState } from "@statflo/widget-sdk";
+import usePublishMainWidgetEvents from "../hooks/usePublishMainWidgetEvents";
 
 type WidgetProps = {
   widget: Widget;
@@ -42,6 +43,8 @@ export const RemoteComponent: FC<WidgetProps> = ({
   const events = store((state) => state.events);
   const [loading, setLoading] = useState(true);
 
+  usePublishMainWidgetEvents(loading);
+
   const onLoad = (e: any) => {
     // Populate Iframe widgets with any events they may have missed before loading
     const iframe = document.getElementById(widget.id) as HTMLIFrameElement;
diff --git a/docs/src/components/Theme/DarkMode.tsx b/docs/src/components/Theme/DarkMode.tsx
index 5d07b56..28978c4 100644
--- a/docs/src/components/Theme/DarkMode.tsx
+++ b/docs/src/components/Theme/DarkMode.tsx
@@ -3,361 +3,290 @@ export const DarkMode = () => {
     <svg
       width="100%"
       height="100%"
-      viewBox="0 0 437 280"
+      viewBox="0 0 240 135"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g clipPath="url(#clip0_1462_13743)">
-        <g filter="url(#filter0_d_1462_13743)">
-          <mask
-            id="path-2-outside-1_1462_13743"
-            maskUnits="userSpaceOnUse"
-            x="329.5"
-            y="0"
-            width="107"
-            height="280"
-            fill="black"
-          >
-            <rect fill="white" x="329.5" width="107" height="280" />
-            <path d="M330.5 0H436.5V279.5H330.5V0Z" />
-          </mask>
-          <path
-            d="M330.5 0H436.5V279.5H330.5V0Z"
+      <g clip-path="url(#clip0_1469_4888)">
+        <rect width="8" height="135" fill="#0D101C" />
+        <rect x="3.125" y="6" width="2" height="6" rx="1" fill="#30374F" />
+        <rect x="2.625" y="26" width="3" height="3" rx="1" fill="#30374F" />
+        <rect x="2.625" y="33" width="3" height="3" rx="1" fill="#30374F" />
+        <rect x="2.625" y="40" width="3" height="3" rx="1" fill="#30374F" />
+        <rect x="2.625" y="47" width="3" height="3" rx="1" fill="#30374F" />
+        <rect x="2.625" y="54" width="3" height="3" rx="1" fill="#30374F" />
+        <rect
+          width="53"
+          height="135"
+          transform="translate(187)"
+          fill="#171A26"
+        />
+        <rect
+          width="53"
+          height="38"
+          transform="translate(187)"
+          fill="#1F2332"
+        />
+        <rect
+          x="202.688"
+          y="5.625"
+          width="21.625"
+          height="3.75"
+          rx="1"
+          fill="#30374F"
+        />
+        <rect x="190" y="17" width="26" height="4" rx="1" fill="#30374F" />
+        <rect x="190" y="23" width="26" height="4" rx="1" fill="#30374F" />
+        <g filter="url(#filter0_d_1469_4888)">
+          <rect
+            width="52"
+            height="135"
+            transform="translate(8)"
             fill="#171A26"
-            shapeRendering="crispEdges"
           />
           <rect
-            width="106"
-            height="53"
-            transform="translate(330.5)"
+            width="52"
+            height="26.25"
+            transform="translate(8)"
             fill="#1F2332"
           />
           <rect
-            x="361.875"
-            y="11.25"
-            width="43.25"
-            height="7.5"
-            rx="2"
+            x="11"
+            y="3.9375"
+            width="21.625"
+            height="3.125"
+            rx="1"
             fill="#30374F"
           />
-          <rect x="336.5" y="34" width="52" height="8" rx="2" fill="#30374F" />
-          <rect x="336.5" y="45" width="52" height="8" rx="2" fill="#30374F" />
-          <rect
-            width="106"
-            height="22.25"
-            transform="translate(330.5 53)"
-            fill="#1F2332"
+          <mask id="path-12-inside-1_1469_4888" fill="white">
+            <path d="M8 11H34V17H8V11Z" />
+          </mask>
+          <path d="M8 11H34V17H8V11Z" fill="#1F2333" />
+          <path
+            d="M34 16H8V18H34V16Z"
+            fill="#5A68ED"
+            mask="url(#path-12-inside-1_1469_4888)"
           />
+          <mask id="path-14-inside-2_1469_4888" fill="white">
+            <path d="M34 11H60V17H34V11Z" />
+          </mask>
+          <path d="M34 11H60V17H34V11Z" fill="#1F2333" />
           <path
-            d="M331.5 279.5V0H329.5V279.5H331.5Z"
-            fill="#3A415F"
-            mask="url(#path-2-outside-1_1462_13743)"
+            d="M60 16H34V18H60V16Z"
+            fill="#30374F"
+            mask="url(#path-14-inside-2_1469_4888)"
           />
-        </g>
-        <mask
-          id="path-7-outside-2_1462_13743"
-          maskUnits="userSpaceOnUse"
-          x="119.5"
-          y="0"
-          width="212"
-          height="280"
-          fill="black"
-        >
-          <rect fill="white" x="119.5" width="212" height="280" />
-          <path d="M120.5 0H330.5V279.5H120.5V0Z" />
-        </mask>
-        <path d="M120.5 0H330.5V279.5H120.5V0Z" fill="#171A26" />
-        <mask id="path-9-inside-3_1462_13743" fill="white">
-          <path d="M120.5 0H330.5V22H120.5V0Z" />
-        </mask>
-        <path d="M120.5 0H330.5V22H120.5V0Z" fill="#1F2332" />
-        <rect
-          x="132.5"
-          y="7.875"
-          width="37"
-          height="6.25"
-          rx="2"
-          fill="#30374F"
-        />
-        <path
-          d="M330.5 21H120.5V23H330.5V21Z"
-          fill="#3A415F"
-          mask="url(#path-9-inside-3_1462_13743)"
-        />
-        <rect
-          x="216.75"
-          y="166"
-          width="101.75"
-          height="30"
-          rx="8"
-          fill="#424DE5"
-        />
-        <rect
-          x="132.5"
-          y="206"
-          width="101.75"
-          height="30"
-          rx="8"
-          fill="#D2D5E3"
-        />
-        <g filter="url(#filter1_d_1462_13743)">
-          <rect
-            width="210"
-            height="31.5"
-            transform="translate(120.5 248)"
-            fill="white"
+          <mask id="path-16-inside-3_1469_4888" fill="white">
+            <path d="M8 17H60V26.25H8V17Z" />
+          </mask>
+          <path d="M8 17H60V26.25H8V17Z" fill="#1F2332" />
+          <path
+            d="M60 25.25H8V27.25H60V25.25Z"
+            fill="#1F2333"
+            mask="url(#path-16-inside-3_1469_4888)"
           />
           <rect
-            width="105"
-            height="12"
-            transform="translate(120.5 248)"
+            x="12.5"
+            y="30.75"
+            width="43"
+            height="14.5"
+            rx="3.5"
             fill="#1F2332"
           />
-          <rect x="120.5" y="258" width="105" height="2" fill="#5A68ED" />
-          <mask id="path-15-inside-4_1462_13743" fill="white">
-            <path d="M225.5 248H330.5V260H225.5V248Z" />
-          </mask>
-          <path d="M225.5 248H330.5V260H225.5V248Z" fill="#1F2332" />
-          <path
-            d="M330.5 259H225.5V261H330.5V259Z"
-            fill="#3A415F"
-            mask="url(#path-15-inside-4_1462_13743)"
+          <rect
+            x="12.5"
+            y="30.75"
+            width="43"
+            height="14.5"
+            rx="3.5"
+            stroke="#1F2333"
           />
           <rect
-            width="210"
-            height="19.5"
-            transform="translate(120.5 260)"
+            x="12.5"
+            y="50.25"
+            width="43"
+            height="14.5"
+            rx="3.5"
             fill="#1F2332"
           />
           <rect
-            x="124.5"
-            y="264"
-            width="171.25"
-            height="11.5"
-            rx="5.75"
-            fill="#2F344C"
+            x="12.5"
+            y="50.25"
+            width="43"
+            height="14.5"
+            rx="3.5"
+            stroke="#1F2333"
           />
           <rect
-            x="303.75"
-            y="264.5"
-            width="22.75"
-            height="10.5"
-            rx="5.25"
-            fill="#424DE5"
+            x="12.5"
+            y="69.75"
+            width="43"
+            height="14.5"
+            rx="3.5"
+            fill="#1F2332"
+          />
+          <rect
+            x="12.5"
+            y="69.75"
+            width="43"
+            height="14.5"
+            rx="3.5"
+            stroke="#1F2333"
           />
-        </g>
-        <path
-          d="M329.5 0V279.5H331.5V0H329.5ZM121.5 279.5V0H119.5V279.5H121.5Z"
-          fill="#30374F"
-          mask="url(#path-7-outside-2_1462_13743)"
-        />
-        <g filter="url(#filter2_d_1462_13743)">
           <rect
-            width="104"
-            height="22"
-            transform="translate(16.5)"
+            x="12.5"
+            y="89.25"
+            width="43"
+            height="14.5"
+            rx="3.5"
             fill="#1F2332"
           />
           <rect
-            x="28.5"
-            y="7.875"
-            width="43.25"
-            height="6.25"
-            rx="2"
-            fill="#30374F"
+            x="12.5"
+            y="89.25"
+            width="43"
+            height="14.5"
+            rx="3.5"
+            stroke="#1F2333"
           />
           <rect
-            width="52"
-            height="12"
-            transform="translate(16.5 22)"
+            x="12.5"
+            y="108.75"
+            width="43"
+            height="14.5"
+            rx="3.5"
             fill="#1F2332"
           />
-          <rect x="16.5" y="32" width="52" height="2" fill="#475AFF" />
-          <mask id="path-23-inside-6_1462_13743" fill="white">
-            <path d="M68.5 22H120.5V34H68.5V22Z" />
-          </mask>
-          <path d="M68.5 22H120.5V34H68.5V22Z" fill="#1F2332" />
-          <path
-            d="M120.5 33H68.5V35H120.5V33Z"
-            fill="#3A415F"
-            mask="url(#path-23-inside-6_1462_13743)"
-          />
-          <mask id="path-25-inside-7_1462_13743" fill="white">
-            <path d="M16.5 34H120.5V52.5H16.5V34Z" />
-          </mask>
-          <path d="M16.5 34H120.5V52.5H16.5V34Z" fill="#1F2332" />
-          <path
-            d="M120.5 51.5H16.5V53.5H120.5V51.5Z"
-            fill="#1F2333"
-            mask="url(#path-25-inside-7_1462_13743)"
+          <rect
+            x="12.5"
+            y="108.75"
+            width="43"
+            height="14.5"
+            rx="3.5"
+            stroke="#1F2333"
           />
-          <g
-            clipPath="url(#clip1_1462_13743)"
-            filter="url(#filter3_i_1462_13743)"
-          >
-            <rect
-              width="104"
-              height="208"
-              transform="translate(16.5 52.5)"
-              fill="#171A26"
-            />
-            <rect
-              x="25"
-              y="61"
-              width="87"
-              height="30"
-              rx="5.5"
-              fill="#1F2332"
-            />
-            <rect
-              x="25"
-              y="61"
-              width="87"
-              height="30"
-              rx="5.5"
-              stroke="#1F2333"
-            />
-            <rect
-              x="25"
-              y="100"
-              width="87"
-              height="30"
-              rx="5.5"
-              fill="#1F2332"
-            />
-            <rect
-              x="25"
-              y="100"
-              width="87"
-              height="30"
-              rx="5.5"
-              stroke="#1F2333"
-            />
-            <rect
-              x="25"
-              y="139"
-              width="87"
-              height="30"
-              rx="5.5"
-              fill="#1F2332"
-            />
-            <rect
-              x="25"
-              y="139"
-              width="87"
-              height="30"
-              rx="5.5"
-              stroke="#1F2333"
-            />
-            <rect
-              x="25"
-              y="178"
-              width="87"
-              height="30"
-              rx="5.5"
-              fill="#1F2332"
-            />
-            <rect
-              x="25"
-              y="178"
-              width="87"
-              height="30"
-              rx="5.5"
-              stroke="#1F2333"
-            />
-            <rect
-              x="25"
-              y="217"
-              width="87"
-              height="30"
-              rx="5.5"
-              fill="#1F2332"
-            />
-            <rect
-              x="25"
-              y="217"
-              width="87"
-              height="30"
-              rx="5.5"
-              stroke="#1F2333"
-            />
-            <rect
-              x="25"
-              y="256"
-              width="87"
-              height="30"
-              rx="5.5"
-              fill="#1F2332"
-            />
-            <rect
-              x="25"
-              y="256"
-              width="87"
-              height="30"
-              rx="5.5"
-              stroke="#1F2333"
-            />
-          </g>
           <mask
-            id="path-33-outside-8_1462_13743"
+            id="path-23-outside-4_1469_4888"
             maskUnits="userSpaceOnUse"
-            x="16.5"
-            y="259.5"
-            width="104"
-            height="20"
+            x="8"
+            y="125"
+            width="52"
+            height="10"
             fill="black"
           >
-            <rect fill="white" x="16.5" y="259.5" width="104" height="20" />
-            <path d="M16.5 260.5H120.5V279.5H16.5V260.5Z" />
+            <rect fill="white" x="8" y="125" width="52" height="10" />
+            <path d="M8 126H60V135H8V126Z" />
           </mask>
-          <path d="M16.5 260.5H120.5V279.5H16.5V260.5Z" fill="#1F2332" />
+          <path d="M8 126H60V135H8V126Z" fill="#1F2333" />
           <path
-            d="M16.5 261.5H120.5V259.5H16.5V261.5Z"
+            d="M8 127H60V125H8V127Z"
             fill="#1F2333"
-            mask="url(#path-33-outside-8_1462_13743)"
-          />
-          <path
-            d="M119.5 0V279.5H121.5V0H119.5Z"
-            fill="#3A415F"
-            mask="url(#path-19-outside-5_1462_13743)"
+            mask="url(#path-23-outside-4_1469_4888)"
           />
         </g>
         <mask
-          id="path-35-outside-9_1462_13743"
+          id="path-25-outside-5_1469_4888"
           maskUnits="userSpaceOnUse"
-          x="0"
+          x="59"
           y="0"
-          width="18"
-          height="280"
+          width="129"
+          height="135"
           fill="black"
         >
-          <rect fill="white" width="18" height="280" />
-          <path d="M0 0H16.5V279.5H0V0Z" />
+          <rect fill="white" x="59" width="129" height="135" />
+          <path d="M60 0H187V135H60V0Z" />
         </mask>
-        <path d="M0 0H16.5V279.5H0V0Z" fill="#0D101C" />
-        <rect x="6.25" y="12" width="4" height="12" rx="2" fill="#30374F" />
-        <rect x="5.25" y="52" width="6" height="6" rx="2" fill="#30374F" />
-        <rect x="5.25" y="66" width="6" height="6" rx="2" fill="#30374F" />
-        <rect x="5.25" y="80" width="6" height="6" rx="2" fill="#30374F" />
-        <rect x="5.25" y="94" width="6" height="6" rx="2" fill="#30374F" />
-        <rect x="5.25" y="108" width="6" height="6" rx="2" fill="#30374F" />
+        <path d="M60 0H187V135H60V0Z" fill="#171A26" />
+        <mask id="path-27-inside-6_1469_4888" fill="white">
+          <path d="M60 0H187V11H60V0Z" />
+        </mask>
+        <path d="M60 0H187V11H60V0Z" fill="#1F2332" />
+        <rect
+          x="66"
+          y="3.9375"
+          width="18.5"
+          height="3.125"
+          rx="1"
+          fill="#30374F"
+        />
+        <path
+          d="M187 10H60V12H187V10Z"
+          fill="#30374F"
+          mask="url(#path-27-inside-6_1469_4888)"
+        />
+        <rect
+          x="129.875"
+          y="78.25"
+          width="50.875"
+          height="15"
+          rx="4"
+          fill="#424DE5"
+        />
+        <rect
+          x="66"
+          y="98.25"
+          width="50.875"
+          height="15"
+          rx="4"
+          fill="#D2D5E3"
+        />
+        <mask id="path-32-inside-7_1469_4888" fill="white">
+          <path d="M60 119.25H123.5V125.25H60V119.25Z" />
+        </mask>
+        <path d="M60 119.25H123.5V125.25H60V119.25Z" fill="#1F2332" />
+        <path
+          d="M123.5 124.25H60V126.25H123.5V124.25Z"
+          fill="#5A68ED"
+          mask="url(#path-32-inside-7_1469_4888)"
+        />
+        <mask id="path-34-inside-8_1469_4888" fill="white">
+          <path d="M123.5 119.25H187V125.25H123.5V119.25Z" />
+        </mask>
+        <path d="M123.5 119.25H187V125.25H123.5V119.25Z" fill="#1F2332" />
+        <path
+          d="M187 124.25H123.5V126.25H187V124.25Z"
+          fill="#30374F"
+          mask="url(#path-34-inside-8_1469_4888)"
+        />
+        <rect
+          width="127"
+          height="9.75"
+          transform="translate(60 125.25)"
+          fill="#1F2332"
+        />
+        <rect
+          x="62"
+          y="127.25"
+          width="107.375"
+          height="5.75"
+          rx="2"
+          fill="#272C3F"
+        />
+        <rect
+          x="173.375"
+          y="127.5"
+          width="11.375"
+          height="5.25"
+          rx="2.625"
+          fill="#424DE5"
+        />
         <path
-          d="M15.5 0V279.5H17.5V0H15.5Z"
-          fill="#3A415F"
-          mask="url(#path-35-outside-9_1462_13743)"
+          d="M186 0V135H188V0H186ZM61 135V0H59V135H61Z"
+          fill="#30374F"
+          mask="url(#path-25-outside-5_1469_4888)"
         />
       </g>
       <defs>
         <filter
-          id="filter0_d_1462_13743"
-          x="325.5"
+          id="filter0_d_1469_4888"
+          x="4"
           y="-3"
-          width="115"
-          height="287.5"
+          width="60"
+          height="143"
           filterUnits="userSpaceOnUse"
-          colorInterpolationFilters="sRGB"
+          color-interpolation-filters="sRGB"
         >
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
           <feColorMatrix
             in="SourceAlpha"
             type="matrix"
@@ -374,130 +303,17 @@ export const DarkMode = () => {
           <feBlend
             mode="normal"
             in2="BackgroundImageFix"
-            result="effect1_dropShadow_1462_13743"
-          />
-          <feBlend
-            mode="normal"
-            in="SourceGraphic"
-            in2="effect1_dropShadow_1462_13743"
-            result="shape"
-          />
-        </filter>
-        <filter
-          id="filter1_d_1462_13743"
-          x="116.5"
-          y="243"
-          width="218"
-          height="39.5"
-          filterUnits="userSpaceOnUse"
-          colorInterpolationFilters="sRGB"
-        >
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
-          <feColorMatrix
-            in="SourceAlpha"
-            type="matrix"
-            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-            result="hardAlpha"
-          />
-          <feOffset dy="-1" />
-          <feGaussianBlur stdDeviation="2" />
-          <feComposite in2="hardAlpha" operator="out" />
-          <feColorMatrix
-            type="matrix"
-            values="0 0 0 0 0.121569 0 0 0 0 0.137255 0 0 0 0 0.196078 0 0 0 0.08 0"
-          />
-          <feBlend
-            mode="normal"
-            in2="BackgroundImageFix"
-            result="effect1_dropShadow_1462_13743"
+            result="effect1_dropShadow_1469_4888"
           />
           <feBlend
             mode="normal"
             in="SourceGraphic"
-            in2="effect1_dropShadow_1462_13743"
+            in2="effect1_dropShadow_1469_4888"
             result="shape"
           />
         </filter>
-        <filter
-          id="filter2_d_1462_13743"
-          x="12.5"
-          y="-3"
-          width="113"
-          height="287.5"
-          filterUnits="userSpaceOnUse"
-          colorInterpolationFilters="sRGB"
-        >
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
-          <feColorMatrix
-            in="SourceAlpha"
-            type="matrix"
-            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-            result="hardAlpha"
-          />
-          <feOffset dy="1" />
-          <feGaussianBlur stdDeviation="2" />
-          <feComposite in2="hardAlpha" operator="out" />
-          <feColorMatrix
-            type="matrix"
-            values="0 0 0 0 0.121097 0 0 0 0 0.136234 0 0 0 0 0.197579 0 0 0 0.16 0"
-          />
-          <feBlend
-            mode="normal"
-            in2="BackgroundImageFix"
-            result="effect1_dropShadow_1462_13743"
-          />
-          <feBlend
-            mode="normal"
-            in="SourceGraphic"
-            in2="effect1_dropShadow_1462_13743"
-            result="shape"
-          />
-        </filter>
-        <filter
-          id="filter3_i_1462_13743"
-          x="16.5"
-          y="52.5"
-          width="104"
-          height="208"
-          filterUnits="userSpaceOnUse"
-          colorInterpolationFilters="sRGB"
-        >
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
-          <feBlend
-            mode="normal"
-            in="SourceGraphic"
-            in2="BackgroundImageFix"
-            result="shape"
-          />
-          <feColorMatrix
-            in="SourceAlpha"
-            type="matrix"
-            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-            result="hardAlpha"
-          />
-          <feOffset />
-          <feGaussianBlur stdDeviation="1" />
-          <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
-          <feColorMatrix
-            type="matrix"
-            values="0 0 0 0 0.384314 0 0 0 0 0.427451 0 0 0 0 0.6 0 0 0 0.25 0"
-          />
-          <feBlend
-            mode="normal"
-            in2="shape"
-            result="effect1_innerShadow_1462_13743"
-          />
-        </filter>
-        <clipPath id="clip0_1462_13743">
-          <rect width="436.5" height="279.5" rx="12" fill="white" />
-        </clipPath>
-        <clipPath id="clip1_1462_13743">
-          <rect
-            width="104"
-            height="208"
-            fill="white"
-            transform="translate(16.5 52.5)"
-          />
+        <clipPath id="clip0_1469_4888">
+          <rect width="240" height="135" rx="4" fill="white" />
         </clipPath>
       </defs>
     </svg>
diff --git a/docs/src/components/Theme/LightMode.tsx b/docs/src/components/Theme/LightMode.tsx
index ee72d3d..15db9fc 100644
--- a/docs/src/components/Theme/LightMode.tsx
+++ b/docs/src/components/Theme/LightMode.tsx
@@ -3,270 +3,264 @@ export const LightMode = () => {
     <svg
       width="100%"
       height="100%"
-      viewBox="0 0 437 280"
+      viewBox="0 0 240 135"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g clipPath="url(#clip0_1462_13889)">
-        <g filter="url(#filter0_d_1462_13889)">
+      <g clip-path="url(#clip0_1470_4964)">
+        <g filter="url(#filter0_d_1470_4964)">
           <rect
-            width="106"
-            height="279.5"
-            transform="translate(330.5)"
+            width="53"
+            height="135"
+            transform="translate(187)"
             fill="#F9F9FB"
           />
           <rect
-            width="106"
-            height="53"
-            transform="translate(330.5)"
+            width="53"
+            height="41"
+            transform="translate(187)"
             fill="white"
           />
           <rect
-            x="361.875"
-            y="11.25"
-            width="43.25"
-            height="7.5"
-            rx="2"
+            x="202.688"
+            y="5.625"
+            width="21.625"
+            height="3.75"
+            rx="1"
             fill="#F2F3F7"
           />
-          <rect x="336.5" y="34" width="52" height="8" rx="2" fill="#F2F3F7" />
-          <rect x="336.5" y="45" width="52" height="8" rx="2" fill="#F2F3F7" />
+          <rect x="193" y="19" width="26" height="4" rx="1" fill="#F2F3F7" />
+          <rect x="193" y="26" width="26" height="4" rx="1" fill="#F2F3F7" />
+          <rect x="187" y="41.125" width="53" height="93.875" fill="#F9F9FB" />
+        </g>
+        <rect width="52" height="26.25" transform="translate(8)" fill="white" />
+        <rect
+          x="14"
+          y="3.9375"
+          width="21.625"
+          height="3.125"
+          rx="1"
+          fill="#F2F3F7"
+        />
+        <mask id="path-7-inside-1_1470_4964" fill="white">
+          <path d="M8 11H34V17H8V11Z" />
+        </mask>
+        <path d="M8 11H34V17H8V11Z" fill="white" />
+        <path
+          d="M34 16H8V18H34V16Z"
+          fill="#5A68ED"
+          mask="url(#path-7-inside-1_1470_4964)"
+        />
+        <mask id="path-9-inside-2_1470_4964" fill="white">
+          <path d="M34 11H60V17H34V11Z" />
+        </mask>
+        <path d="M34 11H60V17H34V11Z" fill="white" />
+        <path
+          d="M60 16H34V18H60V16Z"
+          fill="#F2F3F7"
+          mask="url(#path-9-inside-2_1470_4964)"
+        />
+        <rect
+          width="52"
+          height="9.25"
+          transform="translate(8 17)"
+          fill="white"
+        />
+        <g clip-path="url(#clip1_1470_4964)">
           <rect
-            width="106"
-            height="22.25"
-            transform="translate(330.5 53)"
-            fill="white"
+            width="52"
+            height="99.25"
+            transform="translate(8 26.25)"
+            fill="#F9F9FB"
           />
-          <g filter="url(#filter1_i_1462_13889)">
+          <g filter="url(#filter1_d_1470_4964)">
+            <rect
+              x="12"
+              y="30.25"
+              width="44"
+              height="15.5"
+              rx="3"
+              fill="white"
+            />
+          </g>
+          <g filter="url(#filter2_d_1470_4964)">
+            <rect
+              x="12"
+              y="49.75"
+              width="44"
+              height="15.5"
+              rx="3"
+              fill="white"
+            />
+          </g>
+          <g filter="url(#filter3_d_1470_4964)">
+            <rect
+              x="12"
+              y="69.25"
+              width="44"
+              height="15.5"
+              rx="3"
+              fill="white"
+            />
+          </g>
+          <g filter="url(#filter4_d_1470_4964)">
             <rect
-              x="330.5"
-              y="75.25"
-              width="106"
-              height="204.25"
-              fill="#F9F9FB"
+              x="12"
+              y="88.75"
+              width="44"
+              height="15.5"
+              rx="3"
+              fill="white"
+            />
+          </g>
+          <g filter="url(#filter5_d_1470_4964)">
+            <rect
+              x="12"
+              y="108.25"
+              width="44"
+              height="15.5"
+              rx="3"
+              fill="white"
             />
           </g>
         </g>
         <rect
-          width="210"
-          height="279.5"
-          transform="translate(120.5)"
+          width="52"
+          height="9.5"
+          transform="translate(8 125.5)"
           fill="white"
         />
-        <g filter="url(#filter2_d_1462_13889)">
-          <rect
-            width="210"
-            height="22"
-            transform="translate(120.5)"
-            fill="white"
-          />
-          <rect
-            x="132.5"
-            y="7.875"
-            width="37"
-            height="6.25"
-            rx="2"
-            fill="#F2F3F7"
-          />
-        </g>
+        <rect width="8" height="135" fill="white" />
+        <rect x="3.125" y="6" width="2" height="6" rx="1" fill="#F2F3F7" />
+        <rect x="2.625" y="26" width="3" height="3" rx="1" fill="#F2F3F7" />
+        <rect x="2.625" y="33" width="3" height="3" rx="1" fill="#F2F3F7" />
+        <rect x="2.625" y="40" width="3" height="3" rx="1" fill="#F2F3F7" />
+        <rect x="2.625" y="47" width="3" height="3" rx="1" fill="#F2F3F7" />
+        <rect x="2.625" y="54" width="3" height="3" rx="1" fill="#F2F3F7" />
+        <mask
+          id="path-22-outside-3_1470_4964"
+          maskUnits="userSpaceOnUse"
+          x="59"
+          y="0"
+          width="129"
+          height="135"
+          fill="black"
+        >
+          <rect fill="white" x="59" width="129" height="135" />
+          <path d="M60 0H187V135H60V0Z" />
+        </mask>
+        <path d="M60 0H187V135H60V0Z" fill="white" />
+        <mask
+          id="path-24-outside-4_1470_4964"
+          maskUnits="userSpaceOnUse"
+          x="60"
+          y="0"
+          width="127"
+          height="12"
+          fill="black"
+        >
+          <rect fill="white" x="60" width="127" height="12" />
+          <path d="M60 0H187V11H60V0Z" />
+        </mask>
+        <path d="M60 0H187V11H60V0Z" fill="white" />
         <rect
-          x="216.75"
-          y="166"
-          width="101.75"
-          height="30"
-          rx="8"
+          x="66"
+          y="3.9375"
+          width="18.5"
+          height="3.125"
+          rx="1"
+          fill="#F2F3F7"
+        />
+        <path
+          d="M187 10H60V12H187V10Z"
+          fill="#F9F9FB"
+          mask="url(#path-24-outside-4_1470_4964)"
+        />
+        <rect
+          x="129.875"
+          y="78.25"
+          width="50.875"
+          height="15"
+          rx="4"
           fill="#424DE5"
         />
         <rect
-          x="132.5"
-          y="206"
-          width="101.75"
-          height="30"
-          rx="8"
+          x="66"
+          y="98.25"
+          width="50.88"
+          height="15"
+          rx="4"
           fill="#D2D5E3"
         />
-        <g filter="url(#filter3_d_1462_13889)">
-          <rect
-            width="210"
-            height="31.5"
-            transform="translate(120.5 248)"
-            fill="white"
-          />
-          <rect
-            width="105"
-            height="12"
-            transform="translate(120.5 248)"
-            fill="white"
-          />
-          <rect x="120.5" y="258" width="105" height="2" fill="#5A68ED" />
-          <mask id="path-10-inside-1_1462_13889" fill="white">
-            <path d="M225.5 248H330.5V260H225.5V248Z" />
-          </mask>
-          <path d="M225.5 248H330.5V260H225.5V248Z" fill="white" />
-          <path
-            d="M330.5 259H225.5V261H330.5V259Z"
-            fill="#F2F3F7"
-            mask="url(#path-10-inside-1_1462_13889)"
-          />
-          <rect
-            width="210"
-            height="19.5"
-            transform="translate(120.5 260)"
-            fill="white"
-          />
-          <rect
-            x="124.5"
-            y="264"
-            width="171.25"
-            height="11.5"
-            rx="5.75"
-            fill="#F2F3F7"
-          />
-          <rect
-            x="303.75"
-            y="264.5"
-            width="22.75"
-            height="10.5"
-            rx="5.25"
-            fill="#424DE5"
-          />
-        </g>
-        <g filter="url(#filter4_d_1462_13889)">
-          <rect
-            width="104"
-            height="22"
-            transform="translate(16.5)"
-            fill="white"
-          />
-          <rect
-            x="28.5"
-            y="7.875"
-            width="43.25"
-            height="6.25"
-            rx="2"
-            fill="#F2F3F7"
-          />
-          <rect
-            width="52"
-            height="12"
-            transform="translate(16.5 22)"
-            fill="white"
-          />
-          <rect x="16.5" y="32" width="52" height="2" fill="#475AFF" />
-          <mask id="path-16-inside-2_1462_13889" fill="white">
-            <path d="M68.5 22H120.5V34H68.5V22Z" />
-          </mask>
-          <path d="M68.5 22H120.5V34H68.5V22Z" fill="white" />
-          <path
-            d="M120.5 33H68.5V35H120.5V33Z"
-            fill="#F2F3F7"
-            mask="url(#path-16-inside-2_1462_13889)"
-          />
-          <rect
-            width="104"
-            height="18.5"
-            transform="translate(16.5 34)"
-            fill="white"
-          />
-          <g
-            clipPath="url(#clip1_1462_13889)"
-            filter="url(#filter5_i_1462_13889)"
-          >
-            <rect
-              width="104"
-              height="208"
-              transform="translate(16.5 52.5)"
-              fill="#F9F9FB"
-            />
-            <g filter="url(#filter6_d_1462_13889)">
-              <rect
-                x="24.5"
-                y="60.5"
-                width="88"
-                height="31"
-                rx="6"
-                fill="white"
-              />
-            </g>
-            <g filter="url(#filter7_d_1462_13889)">
-              <rect
-                x="24.5"
-                y="99.5"
-                width="88"
-                height="31"
-                rx="6"
-                fill="white"
-              />
-            </g>
-            <g filter="url(#filter8_d_1462_13889)">
-              <rect
-                x="24.5"
-                y="138.5"
-                width="88"
-                height="31"
-                rx="6"
-                fill="white"
-              />
-            </g>
-            <g filter="url(#filter9_d_1462_13889)">
-              <rect
-                x="24.5"
-                y="177.5"
-                width="88"
-                height="31"
-                rx="6"
-                fill="white"
-              />
-            </g>
-            <g filter="url(#filter10_d_1462_13889)">
-              <rect
-                x="24.5"
-                y="216.5"
-                width="88"
-                height="31"
-                rx="6"
-                fill="white"
-              />
-            </g>
-            <g filter="url(#filter11_d_1462_13889)">
-              <rect
-                x="24.5"
-                y="255.5"
-                width="88"
-                height="31"
-                rx="6"
-                fill="white"
-              />
-            </g>
-          </g>
-          <rect
-            width="104"
-            height="19"
-            transform="translate(16.5 260.5)"
-            fill="white"
-          />
-        </g>
-        <g filter="url(#filter12_d_1462_13889)">
-          <rect width="16.5" height="279.5" fill="white" />
-          <rect x="6.25" y="12" width="4" height="12" rx="2" fill="#F2F3F7" />
-          <rect x="5.25" y="52" width="6" height="6" rx="2" fill="#F2F3F7" />
-          <rect x="5.25" y="66" width="6" height="6" rx="2" fill="#F2F3F7" />
-          <rect x="5.25" y="80" width="6" height="6" rx="2" fill="#F2F3F7" />
-          <rect x="5.25" y="94" width="6" height="6" rx="2" fill="#F2F3F7" />
-          <rect x="5.25" y="108" width="6" height="6" rx="2" fill="#F2F3F7" />
-        </g>
+        <mask
+          id="path-29-outside-5_1470_4964"
+          maskUnits="userSpaceOnUse"
+          x="60"
+          y="118.25"
+          width="127"
+          height="17"
+          fill="black"
+        >
+          <rect fill="white" x="60" y="118.25" width="127" height="17" />
+          <path d="M60 119.25H187V135H60V119.25Z" />
+        </mask>
+        <path d="M60 119.25H187V135H60V119.25Z" fill="white" />
+        <mask id="path-31-inside-6_1470_4964" fill="white">
+          <path d="M60 119.25H123.5V125.25H60V119.25Z" />
+        </mask>
+        <path d="M60 119.25H123.5V125.25H60V119.25Z" fill="white" />
+        <path
+          d="M123.5 124.25H60V126.25H123.5V124.25Z"
+          fill="#5A68ED"
+          mask="url(#path-31-inside-6_1470_4964)"
+        />
+        <mask id="path-33-inside-7_1470_4964" fill="white">
+          <path d="M123.5 119.25H187V125.25H123.5V119.25Z" />
+        </mask>
+        <path d="M123.5 119.25H187V125.25H123.5V119.25Z" fill="white" />
+        <path
+          d="M187 124.25H123.5V126.25H187V124.25Z"
+          fill="#F2F3F7"
+          mask="url(#path-33-inside-7_1470_4964)"
+        />
+        <rect
+          x="62"
+          y="127.25"
+          width="107.375"
+          height="5.75"
+          rx="2.875"
+          fill="#F2F3F7"
+        />
+        <rect
+          x="173.375"
+          y="127.5"
+          width="11.375"
+          height="5.25"
+          rx="2.625"
+          fill="#424DE5"
+        />
+        <path
+          d="M60 120.25H187V118.25H60V120.25Z"
+          fill="#F9F9FB"
+          mask="url(#path-29-outside-5_1470_4964)"
+        />
+        <path
+          d="M186 0V135H188V0H186ZM61 135V0H59V135H61Z"
+          fill="#F9F9FB"
+          mask="url(#path-22-outside-3_1470_4964)"
+        />
       </g>
       <defs>
         <filter
-          id="filter0_d_1462_13889"
-          x="327.5"
+          id="filter0_d_1470_4964"
+          x="184"
           y="-3"
-          width="114"
-          height="287.5"
+          width="61"
+          height="143"
           filterUnits="userSpaceOnUse"
-          colorInterpolationFilters="sRGB"
+          color-interpolation-filters="sRGB"
         >
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
           <feColorMatrix
             in="SourceAlpha"
             type="matrix"
@@ -278,204 +272,30 @@ export const LightMode = () => {
           <feComposite in2="hardAlpha" operator="out" />
           <feColorMatrix
             type="matrix"
-            values="0 0 0 0 0.121097 0 0 0 0 0.136234 0 0 0 0 0.197579 0 0 0 0.16 0"
-          />
-          <feBlend
-            mode="normal"
-            in2="BackgroundImageFix"
-            result="effect1_dropShadow_1462_13889"
-          />
-          <feBlend
-            mode="normal"
-            in="SourceGraphic"
-            in2="effect1_dropShadow_1462_13889"
-            result="shape"
-          />
-        </filter>
-        <filter
-          id="filter1_i_1462_13889"
-          x="330.5"
-          y="75.25"
-          width="106"
-          height="204.25"
-          filterUnits="userSpaceOnUse"
-          colorInterpolationFilters="sRGB"
-        >
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
-          <feBlend
-            mode="normal"
-            in="SourceGraphic"
-            in2="BackgroundImageFix"
-            result="shape"
-          />
-          <feColorMatrix
-            in="SourceAlpha"
-            type="matrix"
-            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-            result="hardAlpha"
-          />
-          <feOffset />
-          <feGaussianBlur stdDeviation="1" />
-          <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
-          <feColorMatrix
-            type="matrix"
-            values="0 0 0 0 0.384314 0 0 0 0 0.427451 0 0 0 0 0.6 0 0 0 0.24 0"
-          />
-          <feBlend
-            mode="normal"
-            in2="shape"
-            result="effect1_innerShadow_1462_13889"
-          />
-        </filter>
-        <filter
-          id="filter2_d_1462_13889"
-          x="116.5"
-          y="-4"
-          width="218"
-          height="30"
-          filterUnits="userSpaceOnUse"
-          colorInterpolationFilters="sRGB"
-        >
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
-          <feColorMatrix
-            in="SourceAlpha"
-            type="matrix"
-            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-            result="hardAlpha"
-          />
-          <feOffset />
-          <feGaussianBlur stdDeviation="2" />
-          <feColorMatrix
-            type="matrix"
-            values="0 0 0 0 0.121569 0 0 0 0 0.137255 0 0 0 0 0.196078 0 0 0 0.16 0"
-          />
-          <feBlend
-            mode="normal"
-            in2="BackgroundImageFix"
-            result="effect1_dropShadow_1462_13889"
-          />
-          <feBlend
-            mode="normal"
-            in="SourceGraphic"
-            in2="effect1_dropShadow_1462_13889"
-            result="shape"
-          />
-        </filter>
-        <filter
-          id="filter3_d_1462_13889"
-          x="116.5"
-          y="243"
-          width="218"
-          height="39.5"
-          filterUnits="userSpaceOnUse"
-          colorInterpolationFilters="sRGB"
-        >
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
-          <feColorMatrix
-            in="SourceAlpha"
-            type="matrix"
-            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-            result="hardAlpha"
-          />
-          <feOffset dy="-1" />
-          <feGaussianBlur stdDeviation="2" />
-          <feComposite in2="hardAlpha" operator="out" />
-          <feColorMatrix
-            type="matrix"
-            values="0 0 0 0 0.121569 0 0 0 0 0.137255 0 0 0 0 0.196078 0 0 0 0.08 0"
-          />
-          <feBlend
-            mode="normal"
-            in2="BackgroundImageFix"
-            result="effect1_dropShadow_1462_13889"
-          />
-          <feBlend
-            mode="normal"
-            in="SourceGraphic"
-            in2="effect1_dropShadow_1462_13889"
-            result="shape"
-          />
-        </filter>
-        <filter
-          id="filter4_d_1462_13889"
-          x="11.5"
-          y="-3"
-          width="112"
-          height="287.5"
-          filterUnits="userSpaceOnUse"
-          colorInterpolationFilters="sRGB"
-        >
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
-          <feColorMatrix
-            in="SourceAlpha"
-            type="matrix"
-            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-            result="hardAlpha"
-          />
-          <feOffset dx="-1" dy="1" />
-          <feGaussianBlur stdDeviation="2" />
-          <feComposite in2="hardAlpha" operator="out" />
-          <feColorMatrix
-            type="matrix"
-            values="0 0 0 0 0.121097 0 0 0 0 0.136234 0 0 0 0 0.197579 0 0 0 0.16 0"
+            values="0 0 0 0 0.121097 0 0 0 0 0.136234 0 0 0 0 0.197579 0 0 0 0.08 0"
           />
           <feBlend
             mode="normal"
             in2="BackgroundImageFix"
-            result="effect1_dropShadow_1462_13889"
+            result="effect1_dropShadow_1470_4964"
           />
           <feBlend
             mode="normal"
             in="SourceGraphic"
-            in2="effect1_dropShadow_1462_13889"
+            in2="effect1_dropShadow_1470_4964"
             result="shape"
           />
         </filter>
         <filter
-          id="filter5_i_1462_13889"
-          x="16.5"
-          y="52.5"
-          width="104"
-          height="208"
+          id="filter1_d_1470_4964"
+          x="10"
+          y="29.25"
+          width="48"
+          height="19.5"
           filterUnits="userSpaceOnUse"
-          colorInterpolationFilters="sRGB"
+          color-interpolation-filters="sRGB"
         >
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
-          <feBlend
-            mode="normal"
-            in="SourceGraphic"
-            in2="BackgroundImageFix"
-            result="shape"
-          />
-          <feColorMatrix
-            in="SourceAlpha"
-            type="matrix"
-            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-            result="hardAlpha"
-          />
-          <feOffset />
-          <feGaussianBlur stdDeviation="1" />
-          <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
-          <feColorMatrix
-            type="matrix"
-            values="0 0 0 0 0.384314 0 0 0 0 0.427451 0 0 0 0 0.6 0 0 0 0.24 0"
-          />
-          <feBlend
-            mode="normal"
-            in2="shape"
-            result="effect1_innerShadow_1462_13889"
-          />
-        </filter>
-        <filter
-          id="filter6_d_1462_13889"
-          x="22.5"
-          y="59.5"
-          width="92"
-          height="35"
-          filterUnits="userSpaceOnUse"
-          colorInterpolationFilters="sRGB"
-        >
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
           <feColorMatrix
             in="SourceAlpha"
             type="matrix"
@@ -486,30 +306,30 @@ export const LightMode = () => {
           <feGaussianBlur stdDeviation="1" />
           <feColorMatrix
             type="matrix"
-            values="0 0 0 0 0.121569 0 0 0 0 0.137255 0 0 0 0 0.196078 0 0 0 0.13 0"
+            values="0 0 0 0 0.121569 0 0 0 0 0.137255 0 0 0 0 0.196078 0 0 0 0.06 0"
           />
           <feBlend
             mode="normal"
             in2="BackgroundImageFix"
-            result="effect1_dropShadow_1462_13889"
+            result="effect1_dropShadow_1470_4964"
           />
           <feBlend
             mode="normal"
             in="SourceGraphic"
-            in2="effect1_dropShadow_1462_13889"
+            in2="effect1_dropShadow_1470_4964"
             result="shape"
           />
         </filter>
         <filter
-          id="filter7_d_1462_13889"
-          x="22.5"
-          y="98.5"
-          width="92"
-          height="35"
+          id="filter2_d_1470_4964"
+          x="10"
+          y="48.75"
+          width="48"
+          height="19.5"
           filterUnits="userSpaceOnUse"
-          colorInterpolationFilters="sRGB"
+          color-interpolation-filters="sRGB"
         >
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
           <feColorMatrix
             in="SourceAlpha"
             type="matrix"
@@ -520,30 +340,30 @@ export const LightMode = () => {
           <feGaussianBlur stdDeviation="1" />
           <feColorMatrix
             type="matrix"
-            values="0 0 0 0 0.121569 0 0 0 0 0.137255 0 0 0 0 0.196078 0 0 0 0.13 0"
+            values="0 0 0 0 0.121569 0 0 0 0 0.137255 0 0 0 0 0.196078 0 0 0 0.06 0"
           />
           <feBlend
             mode="normal"
             in2="BackgroundImageFix"
-            result="effect1_dropShadow_1462_13889"
+            result="effect1_dropShadow_1470_4964"
           />
           <feBlend
             mode="normal"
             in="SourceGraphic"
-            in2="effect1_dropShadow_1462_13889"
+            in2="effect1_dropShadow_1470_4964"
             result="shape"
           />
         </filter>
         <filter
-          id="filter8_d_1462_13889"
-          x="22.5"
-          y="137.5"
-          width="92"
-          height="35"
+          id="filter3_d_1470_4964"
+          x="10"
+          y="68.25"
+          width="48"
+          height="19.5"
           filterUnits="userSpaceOnUse"
-          colorInterpolationFilters="sRGB"
+          color-interpolation-filters="sRGB"
         >
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
           <feColorMatrix
             in="SourceAlpha"
             type="matrix"
@@ -554,30 +374,30 @@ export const LightMode = () => {
           <feGaussianBlur stdDeviation="1" />
           <feColorMatrix
             type="matrix"
-            values="0 0 0 0 0.121569 0 0 0 0 0.137255 0 0 0 0 0.196078 0 0 0 0.13 0"
+            values="0 0 0 0 0.121569 0 0 0 0 0.137255 0 0 0 0 0.196078 0 0 0 0.06 0"
           />
           <feBlend
             mode="normal"
             in2="BackgroundImageFix"
-            result="effect1_dropShadow_1462_13889"
+            result="effect1_dropShadow_1470_4964"
           />
           <feBlend
             mode="normal"
             in="SourceGraphic"
-            in2="effect1_dropShadow_1462_13889"
+            in2="effect1_dropShadow_1470_4964"
             result="shape"
           />
         </filter>
         <filter
-          id="filter9_d_1462_13889"
-          x="22.5"
-          y="176.5"
-          width="92"
-          height="35"
+          id="filter4_d_1470_4964"
+          x="10"
+          y="87.75"
+          width="48"
+          height="19.5"
           filterUnits="userSpaceOnUse"
-          colorInterpolationFilters="sRGB"
+          color-interpolation-filters="sRGB"
         >
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
           <feColorMatrix
             in="SourceAlpha"
             type="matrix"
@@ -588,30 +408,30 @@ export const LightMode = () => {
           <feGaussianBlur stdDeviation="1" />
           <feColorMatrix
             type="matrix"
-            values="0 0 0 0 0.121569 0 0 0 0 0.137255 0 0 0 0 0.196078 0 0 0 0.13 0"
+            values="0 0 0 0 0.121569 0 0 0 0 0.137255 0 0 0 0 0.196078 0 0 0 0.06 0"
           />
           <feBlend
             mode="normal"
             in2="BackgroundImageFix"
-            result="effect1_dropShadow_1462_13889"
+            result="effect1_dropShadow_1470_4964"
           />
           <feBlend
             mode="normal"
             in="SourceGraphic"
-            in2="effect1_dropShadow_1462_13889"
+            in2="effect1_dropShadow_1470_4964"
             result="shape"
           />
         </filter>
         <filter
-          id="filter10_d_1462_13889"
-          x="22.5"
-          y="215.5"
-          width="92"
-          height="35"
+          id="filter5_d_1470_4964"
+          x="10"
+          y="107.25"
+          width="48"
+          height="19.5"
           filterUnits="userSpaceOnUse"
-          colorInterpolationFilters="sRGB"
+          color-interpolation-filters="sRGB"
         >
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
           <feColorMatrix
             in="SourceAlpha"
             type="matrix"
@@ -622,98 +442,29 @@ export const LightMode = () => {
           <feGaussianBlur stdDeviation="1" />
           <feColorMatrix
             type="matrix"
-            values="0 0 0 0 0.121569 0 0 0 0 0.137255 0 0 0 0 0.196078 0 0 0 0.13 0"
+            values="0 0 0 0 0.121569 0 0 0 0 0.137255 0 0 0 0 0.196078 0 0 0 0.06 0"
           />
           <feBlend
             mode="normal"
             in2="BackgroundImageFix"
-            result="effect1_dropShadow_1462_13889"
+            result="effect1_dropShadow_1470_4964"
           />
           <feBlend
             mode="normal"
             in="SourceGraphic"
-            in2="effect1_dropShadow_1462_13889"
+            in2="effect1_dropShadow_1470_4964"
             result="shape"
           />
         </filter>
-        <filter
-          id="filter11_d_1462_13889"
-          x="22.5"
-          y="254.5"
-          width="92"
-          height="35"
-          filterUnits="userSpaceOnUse"
-          colorInterpolationFilters="sRGB"
-        >
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
-          <feColorMatrix
-            in="SourceAlpha"
-            type="matrix"
-            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-            result="hardAlpha"
-          />
-          <feOffset dy="1" />
-          <feGaussianBlur stdDeviation="1" />
-          <feColorMatrix
-            type="matrix"
-            values="0 0 0 0 0.121569 0 0 0 0 0.137255 0 0 0 0 0.196078 0 0 0 0.13 0"
-          />
-          <feBlend
-            mode="normal"
-            in2="BackgroundImageFix"
-            result="effect1_dropShadow_1462_13889"
-          />
-          <feBlend
-            mode="normal"
-            in="SourceGraphic"
-            in2="effect1_dropShadow_1462_13889"
-            result="shape"
-          />
-        </filter>
-        <filter
-          id="filter12_d_1462_13889"
-          x="-4"
-          y="-3"
-          width="24.5"
-          height="287.5"
-          filterUnits="userSpaceOnUse"
-          colorInterpolationFilters="sRGB"
-        >
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
-          <feColorMatrix
-            in="SourceAlpha"
-            type="matrix"
-            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-            result="hardAlpha"
-          />
-          <feOffset dy="1" />
-          <feGaussianBlur stdDeviation="2" />
-          <feComposite in2="hardAlpha" operator="out" />
-          <feColorMatrix
-            type="matrix"
-            values="0 0 0 0 0.121097 0 0 0 0 0.136234 0 0 0 0 0.197579 0 0 0 0.16 0"
-          />
-          <feBlend
-            mode="normal"
-            in2="BackgroundImageFix"
-            result="effect1_dropShadow_1462_13889"
-          />
-          <feBlend
-            mode="normal"
-            in="SourceGraphic"
-            in2="effect1_dropShadow_1462_13889"
-            result="shape"
-          />
-        </filter>
-        <clipPath id="clip0_1462_13889">
-          <rect width="436.5" height="279.5" rx="12" fill="white" />
+        <clipPath id="clip0_1470_4964">
+          <rect width="240" height="135" rx="4" fill="white" />
         </clipPath>
-        <clipPath id="clip1_1462_13889">
+        <clipPath id="clip1_1470_4964">
           <rect
-            width="104"
-            height="208"
+            width="52"
+            height="99.25"
             fill="white"
-            transform="translate(16.5 52.5)"
+            transform="translate(8 26.25)"
           />
         </clipPath>
       </defs>
diff --git a/docs/src/components/Theme/OS.tsx b/docs/src/components/Theme/OS.tsx
index 5787abd..e40108f 100644
--- a/docs/src/components/Theme/OS.tsx
+++ b/docs/src/components/Theme/OS.tsx
@@ -3,594 +3,313 @@ export const OS = () => {
     <svg
       width="100%"
       height="100%"
-      viewBox="0 0 437 280"
+      viewBox="0 0 240 135"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g clipPath="url(#clip0_1464_14280)">
-        <g filter="url(#filter0_d_1464_14280)">
-          <mask
-            id="path-2-outside-1_1464_14280"
-            maskUnits="userSpaceOnUse"
-            x="329.5"
-            y="0"
-            width="107"
-            height="280"
-            fill="black"
-          >
-            <rect fill="white" x="329.5" width="107" height="280" />
-            <path d="M330.5 0H436.5V279.5H330.5V0Z" />
-          </mask>
-          <path
-            d="M330.5 0H436.5V279.5H330.5V0Z"
-            fill="#171A26"
-            shapeRendering="crispEdges"
-          />
-          <rect
-            width="106"
-            height="53"
-            transform="translate(330.5)"
-            fill="#1F2332"
-          />
-          <rect
-            x="361.875"
-            y="11.25"
-            width="43.25"
-            height="7.5"
-            rx="2"
-            fill="#30374F"
-          />
-          <rect x="336.5" y="34" width="52" height="8" rx="2" fill="#30374F" />
-          <rect x="336.5" y="45" width="52" height="8" rx="2" fill="#30374F" />
-          <rect
-            width="106"
-            height="22.25"
-            transform="translate(330.5 53)"
-            fill="#1F2332"
-          />
-          <path
-            d="M331.5 279.5V0H329.5V279.5H331.5Z"
-            fill="#3A415F"
-            mask="url(#path-2-outside-1_1464_14280)"
-          />
-        </g>
+      <g clip-path="url(#clip0_1471_6773)">
+        <rect
+          width="53"
+          height="135"
+          transform="translate(187)"
+          fill="#171A26"
+        />
+        <rect
+          width="53"
+          height="38"
+          transform="translate(187)"
+          fill="#1F2332"
+        />
+        <rect
+          x="202.688"
+          y="5.625"
+          width="21.625"
+          height="3.75"
+          rx="1"
+          fill="#30374F"
+        />
+        <rect x="190" y="17" width="26" height="4" rx="1" fill="#30374F" />
+        <rect x="190" y="23" width="26" height="4" rx="1" fill="#30374F" />
         <mask
-          id="path-7-outside-2_1464_14280"
+          id="path-5-outside-1_1471_6773"
           maskUnits="userSpaceOnUse"
-          x="119.5"
+          x="59"
           y="0"
-          width="212"
-          height="280"
+          width="129"
+          height="135"
           fill="black"
         >
-          <rect fill="white" x="119.5" width="212" height="280" />
-          <path d="M120.5 0H330.5V279.5H120.5V0Z" />
+          <rect fill="white" x="59" width="129" height="135" />
+          <path d="M60 0H187V135H60V0Z" />
         </mask>
-        <path d="M120.5 0H330.5V279.5H120.5V0Z" fill="#171A26" />
-        <mask id="path-9-inside-3_1464_14280" fill="white">
-          <path d="M120.5 0H330.5V22H120.5V0Z" />
+        <path d="M60 0H187V135H60V0Z" fill="#171A26" />
+        <mask id="path-7-inside-2_1471_6773" fill="white">
+          <path d="M60 0H187V11H60V0Z" />
         </mask>
-        <path d="M120.5 0H330.5V22H120.5V0Z" fill="#1F2332" />
+        <path d="M60 0H187V11H60V0Z" fill="#1F2332" />
         <path
-          d="M330.5 21H120.5V23H330.5V21Z"
-          fill="#3A415F"
-          mask="url(#path-9-inside-3_1464_14280)"
+          d="M187 10H60V12H187V10Z"
+          fill="#30374F"
+          mask="url(#path-7-inside-2_1471_6773)"
         />
         <rect
-          x="216.75"
-          y="166"
-          width="101.75"
-          height="30"
-          rx="8"
+          x="129.875"
+          y="78.25"
+          width="50.875"
+          height="15"
+          rx="4"
           fill="#424DE5"
         />
-        <rect
-          x="132.5"
-          y="206"
-          width="101.75"
-          height="30"
-          rx="8"
-          fill="#D2D5E3"
+        <mask id="path-10-inside-3_1471_6773" fill="white">
+          <path d="M60 119.25H123.5V125.25H60V119.25Z" />
+        </mask>
+        <path d="M60 119.25H123.5V125.25H60V119.25Z" fill="#1F2332" />
+        <path
+          d="M123.5 124.25H60V126.25H123.5V124.25Z"
+          fill="#5A68ED"
+          mask="url(#path-10-inside-3_1471_6773)"
         />
-        <g filter="url(#filter1_d_1464_14280)">
-          <rect
-            width="210"
-            height="31.5"
-            transform="translate(120.5 248)"
-            fill="white"
-          />
-          <rect
-            width="105"
-            height="12"
-            transform="translate(120.5 248)"
-            fill="#1F2332"
-          />
-          <rect x="120.5" y="258" width="105" height="2" fill="#5A68ED" />
-          <mask id="path-14-inside-4_1464_14280" fill="white">
-            <path d="M225.5 248H330.5V260H225.5V248Z" />
-          </mask>
-          <path d="M225.5 248H330.5V260H225.5V248Z" fill="#1F2332" />
-          <path
-            d="M330.5 259H225.5V261H330.5V259Z"
-            fill="#3A415F"
-            mask="url(#path-14-inside-4_1464_14280)"
-          />
-          <rect
-            width="210"
-            height="19.5"
-            transform="translate(120.5 260)"
-            fill="#1F2332"
-          />
-          <rect
-            x="124.5"
-            y="264"
-            width="171.25"
-            height="11.5"
-            rx="5.75"
-            fill="#2F344C"
-          />
-          <rect
-            x="303.75"
-            y="264.5"
-            width="22.75"
-            height="10.5"
-            rx="5.25"
-            fill="#424DE5"
-          />
-        </g>
+        <mask id="path-12-inside-4_1471_6773" fill="white">
+          <path d="M123.5 119.25H187V125.25H123.5V119.25Z" />
+        </mask>
+        <path d="M123.5 119.25H187V125.25H123.5V119.25Z" fill="#1F2332" />
         <path
-          d="M329.5 0V279.5H331.5V0H329.5ZM121.5 279.5V0H119.5V279.5H121.5Z"
+          d="M187 124.25H123.5V126.25H187V124.25Z"
           fill="#30374F"
-          mask="url(#path-7-outside-2_1464_14280)"
+          mask="url(#path-12-inside-4_1471_6773)"
         />
-      </g>
-      <g clipPath="url(#clip1_1464_14280)">
         <rect
-          width="210"
-          height="279.5"
-          transform="translate(120.5)"
-          fill="white"
+          width="127"
+          height="9.75"
+          transform="translate(60 125.25)"
+          fill="#1F2332"
+        />
+        <rect
+          x="62"
+          y="127.25"
+          width="107.375"
+          height="5.75"
+          rx="2"
+          fill="#272C3F"
         />
-        <g filter="url(#filter2_d_1464_14280)">
-          <rect
-            width="210"
-            height="22"
-            transform="translate(120.5)"
-            fill="white"
-          />
-          <rect
-            x="132.5"
-            y="7.875"
-            width="37"
-            height="6.25"
-            rx="2"
-            fill="#F2F3F7"
-          />
-        </g>
         <rect
-          x="216.75"
-          y="166"
-          width="101.75"
-          height="30"
-          rx="8"
+          x="173.375"
+          y="127.5"
+          width="11.375"
+          height="5.25"
+          rx="2.625"
           fill="#424DE5"
         />
+        <path
+          d="M186 0V135H188V0H186ZM61 135V0H59V135H61Z"
+          fill="#30374F"
+          mask="url(#path-5-outside-1_1471_6773)"
+        />
+      </g>
+      <g clip-path="url(#clip1_1471_6773)">
+        <rect width="52" height="26.25" transform="translate(8)" fill="white" />
         <rect
-          x="132.5"
-          y="206"
-          width="101.75"
-          height="30"
-          rx="8"
-          fill="#D2D5E3"
+          x="14"
+          y="3.9375"
+          width="21.625"
+          height="3.125"
+          rx="1"
+          fill="#F2F3F7"
         />
-        <g filter="url(#filter3_d_1464_14280)">
-          <rect
-            width="210"
-            height="31.5"
-            transform="translate(120.5 248)"
-            fill="white"
-          />
-          <rect
-            width="105"
-            height="12"
-            transform="translate(120.5 248)"
-            fill="white"
-          />
-          <rect x="120.5" y="258" width="105" height="2" fill="#5A68ED" />
-          <rect
-            width="210"
-            height="19.5"
-            transform="translate(120.5 260)"
-            fill="white"
-          />
-          <rect
-            x="124.5"
-            y="264"
-            width="171.25"
-            height="11.5"
-            rx="5.75"
-            fill="#F2F3F7"
-          />
-        </g>
-        <g filter="url(#filter4_d_1464_14280)">
-          <rect
-            width="104"
-            height="22"
-            transform="translate(16.5)"
-            fill="white"
-          />
-          <rect
-            x="28.5"
-            y="7.875"
-            width="43.25"
-            height="6.25"
-            rx="2"
-            fill="#F2F3F7"
-          />
+        <mask id="path-18-inside-5_1471_6773" fill="white">
+          <path d="M8 11H34V17H8V11Z" />
+        </mask>
+        <path d="M8 11H34V17H8V11Z" fill="white" />
+        <path
+          d="M34 16H8V18H34V16Z"
+          fill="#5A68ED"
+          mask="url(#path-18-inside-5_1471_6773)"
+        />
+        <mask id="path-20-inside-6_1471_6773" fill="white">
+          <path d="M34 11H60V17H34V11Z" />
+        </mask>
+        <path d="M34 11H60V17H34V11Z" fill="white" />
+        <path
+          d="M60 16H34V18H60V16Z"
+          fill="#F2F3F7"
+          mask="url(#path-20-inside-6_1471_6773)"
+        />
+        <rect
+          width="52"
+          height="9.25"
+          transform="translate(8 17)"
+          fill="white"
+        />
+        <g clip-path="url(#clip2_1471_6773)">
           <rect
             width="52"
-            height="12"
-            transform="translate(16.5 22)"
-            fill="white"
+            height="99.25"
+            transform="translate(8 26.25)"
+            fill="#F9F9FB"
           />
-          <rect x="16.5" y="32" width="52" height="2" fill="#475AFF" />
-          <mask id="path-26-inside-5_1464_14280" fill="white">
-            <path d="M68.5 22H120.5V34H68.5V22Z" />
-          </mask>
-          <path d="M68.5 22H120.5V34H68.5V22Z" fill="white" />
-          <path
-            d="M120.5 33H68.5V35H120.5V33Z"
-            fill="#F2F3F7"
-            mask="url(#path-26-inside-5_1464_14280)"
-          />
-          <rect
-            width="104"
-            height="18.5"
-            transform="translate(16.5 34)"
-            fill="white"
-          />
-          <g
-            clipPath="url(#clip2_1464_14280)"
-            filter="url(#filter5_i_1464_14280)"
-          >
+          <g filter="url(#filter0_d_1471_6773)">
             <rect
-              width="104"
-              height="208"
-              transform="translate(16.5 52.5)"
-              fill="#F9F9FB"
+              x="12"
+              y="30.25"
+              width="44"
+              height="15.5"
+              rx="3"
+              fill="white"
+            />
+          </g>
+          <g filter="url(#filter1_d_1471_6773)">
+            <rect
+              x="12"
+              y="49.75"
+              width="44"
+              height="15.5"
+              rx="3"
+              fill="white"
+            />
+          </g>
+          <g filter="url(#filter2_d_1471_6773)">
+            <rect
+              x="12"
+              y="69.25"
+              width="44"
+              height="15.5"
+              rx="3"
+              fill="white"
+            />
+          </g>
+          <g filter="url(#filter3_d_1471_6773)">
+            <rect
+              x="12"
+              y="88.75"
+              width="44"
+              height="15.5"
+              rx="3"
+              fill="white"
+            />
+          </g>
+          <g filter="url(#filter4_d_1471_6773)">
+            <rect
+              x="12"
+              y="108.25"
+              width="44"
+              height="15.5"
+              rx="3"
+              fill="white"
             />
-            <g filter="url(#filter6_d_1464_14280)">
-              <rect
-                x="24.5"
-                y="60.5"
-                width="88"
-                height="31"
-                rx="6"
-                fill="white"
-              />
-            </g>
-            <g filter="url(#filter7_d_1464_14280)">
-              <rect
-                x="24.5"
-                y="99.5"
-                width="88"
-                height="31"
-                rx="6"
-                fill="white"
-              />
-            </g>
-            <g filter="url(#filter8_d_1464_14280)">
-              <rect
-                x="24.5"
-                y="138.5"
-                width="88"
-                height="31"
-                rx="6"
-                fill="white"
-              />
-            </g>
-            <g filter="url(#filter9_d_1464_14280)">
-              <rect
-                x="24.5"
-                y="177.5"
-                width="88"
-                height="31"
-                rx="6"
-                fill="white"
-              />
-            </g>
-            <g filter="url(#filter10_d_1464_14280)">
-              <rect
-                x="24.5"
-                y="216.5"
-                width="88"
-                height="31"
-                rx="6"
-                fill="white"
-              />
-            </g>
-            <g filter="url(#filter11_d_1464_14280)">
-              <rect
-                x="24.5"
-                y="255.5"
-                width="88"
-                height="31"
-                rx="6"
-                fill="white"
-              />
-            </g>
           </g>
-          <rect
-            width="104"
-            height="19"
-            transform="translate(16.5 260.5)"
-            fill="white"
-          />
-        </g>
-        <g filter="url(#filter12_d_1464_14280)">
-          <rect width="16.5" height="279.5" fill="white" />
-          <rect x="6.25" y="12" width="4" height="12" rx="2" fill="#F2F3F7" />
-          <rect x="5.25" y="52" width="6" height="6" rx="2" fill="#F2F3F7" />
-          <rect x="5.25" y="66" width="6" height="6" rx="2" fill="#F2F3F7" />
-          <rect x="5.25" y="80" width="6" height="6" rx="2" fill="#F2F3F7" />
-          <rect x="5.25" y="94" width="6" height="6" rx="2" fill="#F2F3F7" />
-          <rect x="5.25" y="108" width="6" height="6" rx="2" fill="#F2F3F7" />
         </g>
-      </g>
-      <defs>
-        <filter
-          id="filter0_d_1464_14280"
-          x="325.5"
-          y="-3"
-          width="115"
-          height="287.5"
-          filterUnits="userSpaceOnUse"
-          colorInterpolationFilters="sRGB"
-        >
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
-          <feColorMatrix
-            in="SourceAlpha"
-            type="matrix"
-            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-            result="hardAlpha"
-          />
-          <feOffset dy="1" />
-          <feGaussianBlur stdDeviation="2" />
-          <feComposite in2="hardAlpha" operator="out" />
-          <feColorMatrix
-            type="matrix"
-            values="0 0 0 0 0.121097 0 0 0 0 0.136234 0 0 0 0 0.197579 0 0 0 0.16 0"
-          />
-          <feBlend
-            mode="normal"
-            in2="BackgroundImageFix"
-            result="effect1_dropShadow_1464_14280"
-          />
-          <feBlend
-            mode="normal"
-            in="SourceGraphic"
-            in2="effect1_dropShadow_1464_14280"
-            result="shape"
-          />
-        </filter>
-        <filter
-          id="filter1_d_1464_14280"
-          x="116.5"
-          y="243"
-          width="218"
-          height="39.5"
-          filterUnits="userSpaceOnUse"
-          colorInterpolationFilters="sRGB"
-        >
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
-          <feColorMatrix
-            in="SourceAlpha"
-            type="matrix"
-            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-            result="hardAlpha"
-          />
-          <feOffset dy="-1" />
-          <feGaussianBlur stdDeviation="2" />
-          <feComposite in2="hardAlpha" operator="out" />
-          <feColorMatrix
-            type="matrix"
-            values="0 0 0 0 0.121569 0 0 0 0 0.137255 0 0 0 0 0.196078 0 0 0 0.08 0"
-          />
-          <feBlend
-            mode="normal"
-            in2="BackgroundImageFix"
-            result="effect1_dropShadow_1464_14280"
-          />
-          <feBlend
-            mode="normal"
-            in="SourceGraphic"
-            in2="effect1_dropShadow_1464_14280"
-            result="shape"
-          />
-        </filter>
-        <filter
-          id="filter2_d_1464_14280"
-          x="116.5"
-          y="-4"
-          width="218"
-          height="30"
-          filterUnits="userSpaceOnUse"
-          colorInterpolationFilters="sRGB"
-        >
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
-          <feColorMatrix
-            in="SourceAlpha"
-            type="matrix"
-            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-            result="hardAlpha"
-          />
-          <feOffset />
-          <feGaussianBlur stdDeviation="2" />
-          <feColorMatrix
-            type="matrix"
-            values="0 0 0 0 0.121569 0 0 0 0 0.137255 0 0 0 0 0.196078 0 0 0 0.16 0"
-          />
-          <feBlend
-            mode="normal"
-            in2="BackgroundImageFix"
-            result="effect1_dropShadow_1464_14280"
-          />
-          <feBlend
-            mode="normal"
-            in="SourceGraphic"
-            in2="effect1_dropShadow_1464_14280"
-            result="shape"
-          />
-        </filter>
-        <filter
-          id="filter3_d_1464_14280"
-          x="116.5"
-          y="243"
-          width="218"
-          height="39.5"
-          filterUnits="userSpaceOnUse"
-          colorInterpolationFilters="sRGB"
-        >
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
-          <feColorMatrix
-            in="SourceAlpha"
-            type="matrix"
-            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-            result="hardAlpha"
-          />
-          <feOffset dy="-1" />
-          <feGaussianBlur stdDeviation="2" />
-          <feComposite in2="hardAlpha" operator="out" />
-          <feColorMatrix
-            type="matrix"
-            values="0 0 0 0 0.121569 0 0 0 0 0.137255 0 0 0 0 0.196078 0 0 0 0.08 0"
-          />
-          <feBlend
-            mode="normal"
-            in2="BackgroundImageFix"
-            result="effect1_dropShadow_1464_14280"
-          />
-          <feBlend
-            mode="normal"
-            in="SourceGraphic"
-            in2="effect1_dropShadow_1464_14280"
-            result="shape"
-          />
-        </filter>
-        <filter
-          id="filter4_d_1464_14280"
-          x="11.5"
-          y="-3"
-          width="112"
-          height="287.5"
-          filterUnits="userSpaceOnUse"
-          colorInterpolationFilters="sRGB"
+        <rect
+          width="52"
+          height="9.5"
+          transform="translate(8 125.5)"
+          fill="white"
+        />
+        <rect width="8" height="135" fill="white" />
+        <rect x="3.125" y="6" width="2" height="6" rx="1" fill="#F2F3F7" />
+        <rect x="2.625" y="26" width="3" height="3" rx="1" fill="#F2F3F7" />
+        <rect x="2.625" y="33" width="3" height="3" rx="1" fill="#F2F3F7" />
+        <rect x="2.625" y="40" width="3" height="3" rx="1" fill="#F2F3F7" />
+        <rect x="2.625" y="47" width="3" height="3" rx="1" fill="#F2F3F7" />
+        <rect x="2.625" y="54" width="3" height="3" rx="1" fill="#F2F3F7" />
+        <mask
+          id="path-33-outside-7_1471_6773"
+          maskUnits="userSpaceOnUse"
+          x="59"
+          y="0"
+          width="129"
+          height="135"
+          fill="black"
         >
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
-          <feColorMatrix
-            in="SourceAlpha"
-            type="matrix"
-            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-            result="hardAlpha"
-          />
-          <feOffset dx="-1" dy="1" />
-          <feGaussianBlur stdDeviation="2" />
-          <feComposite in2="hardAlpha" operator="out" />
-          <feColorMatrix
-            type="matrix"
-            values="0 0 0 0 0.121097 0 0 0 0 0.136234 0 0 0 0 0.197579 0 0 0 0.16 0"
-          />
-          <feBlend
-            mode="normal"
-            in2="BackgroundImageFix"
-            result="effect1_dropShadow_1464_14280"
-          />
-          <feBlend
-            mode="normal"
-            in="SourceGraphic"
-            in2="effect1_dropShadow_1464_14280"
-            result="shape"
-          />
-        </filter>
-        <filter
-          id="filter5_i_1464_14280"
-          x="16.5"
-          y="52.5"
-          width="104"
-          height="208"
-          filterUnits="userSpaceOnUse"
-          colorInterpolationFilters="sRGB"
+          <rect fill="white" x="59" width="129" height="135" />
+          <path d="M60 0H187V135H60V0Z" />
+        </mask>
+        <path d="M60 0H187V135H60V0Z" fill="white" />
+        <mask
+          id="path-35-outside-8_1471_6773"
+          maskUnits="userSpaceOnUse"
+          x="60"
+          y="0"
+          width="127"
+          height="12"
+          fill="black"
         >
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
-          <feBlend
-            mode="normal"
-            in="SourceGraphic"
-            in2="BackgroundImageFix"
-            result="shape"
-          />
-          <feColorMatrix
-            in="SourceAlpha"
-            type="matrix"
-            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-            result="hardAlpha"
-          />
-          <feOffset />
-          <feGaussianBlur stdDeviation="1" />
-          <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
-          <feColorMatrix
-            type="matrix"
-            values="0 0 0 0 0.384314 0 0 0 0 0.427451 0 0 0 0 0.6 0 0 0 0.24 0"
-          />
-          <feBlend
-            mode="normal"
-            in2="shape"
-            result="effect1_innerShadow_1464_14280"
-          />
-        </filter>
-        <filter
-          id="filter6_d_1464_14280"
-          x="22.5"
-          y="59.5"
-          width="92"
-          height="35"
-          filterUnits="userSpaceOnUse"
-          colorInterpolationFilters="sRGB"
+          <rect fill="white" x="60" width="127" height="12" />
+          <path d="M60 0H187V11H60V0Z" />
+        </mask>
+        <path d="M60 0H187V11H60V0Z" fill="white" />
+        <rect
+          x="66"
+          y="3.9375"
+          width="18.5"
+          height="3.125"
+          rx="1"
+          fill="#F2F3F7"
+        />
+        <path
+          d="M187 10H60V12H187V10Z"
+          fill="#F9F9FB"
+          mask="url(#path-35-outside-8_1471_6773)"
+        />
+        <rect
+          x="66"
+          y="98.25"
+          width="50.88"
+          height="15"
+          rx="4"
+          fill="#D2D5E3"
+        />
+        <mask
+          id="path-39-outside-9_1471_6773"
+          maskUnits="userSpaceOnUse"
+          x="60"
+          y="118.25"
+          width="127"
+          height="17"
+          fill="black"
         >
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
-          <feColorMatrix
-            in="SourceAlpha"
-            type="matrix"
-            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-            result="hardAlpha"
-          />
-          <feOffset dy="1" />
-          <feGaussianBlur stdDeviation="1" />
-          <feColorMatrix
-            type="matrix"
-            values="0 0 0 0 0.121569 0 0 0 0 0.137255 0 0 0 0 0.196078 0 0 0 0.13 0"
-          />
-          <feBlend
-            mode="normal"
-            in2="BackgroundImageFix"
-            result="effect1_dropShadow_1464_14280"
-          />
-          <feBlend
-            mode="normal"
-            in="SourceGraphic"
-            in2="effect1_dropShadow_1464_14280"
-            result="shape"
-          />
-        </filter>
+          <rect fill="white" x="60" y="118.25" width="127" height="17" />
+          <path d="M60 119.25H187V135H60V119.25Z" />
+        </mask>
+        <path d="M60 119.25H187V135H60V119.25Z" fill="white" />
+        <mask id="path-41-inside-10_1471_6773" fill="white">
+          <path d="M60 119.25H123.5V125.25H60V119.25Z" />
+        </mask>
+        <path d="M60 119.25H123.5V125.25H60V119.25Z" fill="white" />
+        <path
+          d="M123.5 124.25H60V126.25H123.5V124.25Z"
+          fill="#5A68ED"
+          mask="url(#path-41-inside-10_1471_6773)"
+        />
+        <rect
+          x="62"
+          y="127.25"
+          width="107.375"
+          height="5.75"
+          rx="2.875"
+          fill="#F2F3F7"
+        />
+        <path
+          d="M60 120.25H187V118.25H60V120.25Z"
+          fill="#F9F9FB"
+          mask="url(#path-39-outside-9_1471_6773)"
+        />
+        <path
+          d="M186 0V135H188V0H186ZM61 135V0H59V135H61Z"
+          fill="#F9F9FB"
+          mask="url(#path-33-outside-7_1471_6773)"
+        />
+      </g>
+      <defs>
         <filter
-          id="filter7_d_1464_14280"
-          x="22.5"
-          y="98.5"
-          width="92"
-          height="35"
+          id="filter0_d_1471_6773"
+          x="10"
+          y="29.25"
+          width="48"
+          height="19.5"
           filterUnits="userSpaceOnUse"
-          colorInterpolationFilters="sRGB"
+          color-interpolation-filters="sRGB"
         >
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
           <feColorMatrix
             in="SourceAlpha"
             type="matrix"
@@ -601,30 +320,30 @@ export const OS = () => {
           <feGaussianBlur stdDeviation="1" />
           <feColorMatrix
             type="matrix"
-            values="0 0 0 0 0.121569 0 0 0 0 0.137255 0 0 0 0 0.196078 0 0 0 0.13 0"
+            values="0 0 0 0 0.121569 0 0 0 0 0.137255 0 0 0 0 0.196078 0 0 0 0.06 0"
           />
           <feBlend
             mode="normal"
             in2="BackgroundImageFix"
-            result="effect1_dropShadow_1464_14280"
+            result="effect1_dropShadow_1471_6773"
           />
           <feBlend
             mode="normal"
             in="SourceGraphic"
-            in2="effect1_dropShadow_1464_14280"
+            in2="effect1_dropShadow_1471_6773"
             result="shape"
           />
         </filter>
         <filter
-          id="filter8_d_1464_14280"
-          x="22.5"
-          y="137.5"
-          width="92"
-          height="35"
+          id="filter1_d_1471_6773"
+          x="10"
+          y="48.75"
+          width="48"
+          height="19.5"
           filterUnits="userSpaceOnUse"
-          colorInterpolationFilters="sRGB"
+          color-interpolation-filters="sRGB"
         >
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
           <feColorMatrix
             in="SourceAlpha"
             type="matrix"
@@ -635,30 +354,30 @@ export const OS = () => {
           <feGaussianBlur stdDeviation="1" />
           <feColorMatrix
             type="matrix"
-            values="0 0 0 0 0.121569 0 0 0 0 0.137255 0 0 0 0 0.196078 0 0 0 0.13 0"
+            values="0 0 0 0 0.121569 0 0 0 0 0.137255 0 0 0 0 0.196078 0 0 0 0.06 0"
           />
           <feBlend
             mode="normal"
             in2="BackgroundImageFix"
-            result="effect1_dropShadow_1464_14280"
+            result="effect1_dropShadow_1471_6773"
           />
           <feBlend
             mode="normal"
             in="SourceGraphic"
-            in2="effect1_dropShadow_1464_14280"
+            in2="effect1_dropShadow_1471_6773"
             result="shape"
           />
         </filter>
         <filter
-          id="filter9_d_1464_14280"
-          x="22.5"
-          y="176.5"
-          width="92"
-          height="35"
+          id="filter2_d_1471_6773"
+          x="10"
+          y="68.25"
+          width="48"
+          height="19.5"
           filterUnits="userSpaceOnUse"
-          colorInterpolationFilters="sRGB"
+          color-interpolation-filters="sRGB"
         >
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
           <feColorMatrix
             in="SourceAlpha"
             type="matrix"
@@ -669,30 +388,30 @@ export const OS = () => {
           <feGaussianBlur stdDeviation="1" />
           <feColorMatrix
             type="matrix"
-            values="0 0 0 0 0.121569 0 0 0 0 0.137255 0 0 0 0 0.196078 0 0 0 0.13 0"
+            values="0 0 0 0 0.121569 0 0 0 0 0.137255 0 0 0 0 0.196078 0 0 0 0.06 0"
           />
           <feBlend
             mode="normal"
             in2="BackgroundImageFix"
-            result="effect1_dropShadow_1464_14280"
+            result="effect1_dropShadow_1471_6773"
           />
           <feBlend
             mode="normal"
             in="SourceGraphic"
-            in2="effect1_dropShadow_1464_14280"
+            in2="effect1_dropShadow_1471_6773"
             result="shape"
           />
         </filter>
         <filter
-          id="filter10_d_1464_14280"
-          x="22.5"
-          y="215.5"
-          width="92"
-          height="35"
+          id="filter3_d_1471_6773"
+          x="10"
+          y="87.75"
+          width="48"
+          height="19.5"
           filterUnits="userSpaceOnUse"
-          colorInterpolationFilters="sRGB"
+          color-interpolation-filters="sRGB"
         >
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
           <feColorMatrix
             in="SourceAlpha"
             type="matrix"
@@ -703,30 +422,30 @@ export const OS = () => {
           <feGaussianBlur stdDeviation="1" />
           <feColorMatrix
             type="matrix"
-            values="0 0 0 0 0.121569 0 0 0 0 0.137255 0 0 0 0 0.196078 0 0 0 0.13 0"
+            values="0 0 0 0 0.121569 0 0 0 0 0.137255 0 0 0 0 0.196078 0 0 0 0.06 0"
           />
           <feBlend
             mode="normal"
             in2="BackgroundImageFix"
-            result="effect1_dropShadow_1464_14280"
+            result="effect1_dropShadow_1471_6773"
           />
           <feBlend
             mode="normal"
             in="SourceGraphic"
-            in2="effect1_dropShadow_1464_14280"
+            in2="effect1_dropShadow_1471_6773"
             result="shape"
           />
         </filter>
         <filter
-          id="filter11_d_1464_14280"
-          x="22.5"
-          y="254.5"
-          width="92"
-          height="35"
+          id="filter4_d_1471_6773"
+          x="10"
+          y="107.25"
+          width="48"
+          height="19.5"
           filterUnits="userSpaceOnUse"
-          colorInterpolationFilters="sRGB"
+          color-interpolation-filters="sRGB"
         >
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
           <feColorMatrix
             in="SourceAlpha"
             type="matrix"
@@ -737,73 +456,38 @@ export const OS = () => {
           <feGaussianBlur stdDeviation="1" />
           <feColorMatrix
             type="matrix"
-            values="0 0 0 0 0.121569 0 0 0 0 0.137255 0 0 0 0 0.196078 0 0 0 0.13 0"
+            values="0 0 0 0 0.121569 0 0 0 0 0.137255 0 0 0 0 0.196078 0 0 0 0.06 0"
           />
           <feBlend
             mode="normal"
             in2="BackgroundImageFix"
-            result="effect1_dropShadow_1464_14280"
+            result="effect1_dropShadow_1471_6773"
           />
           <feBlend
             mode="normal"
             in="SourceGraphic"
-            in2="effect1_dropShadow_1464_14280"
+            in2="effect1_dropShadow_1471_6773"
             result="shape"
           />
         </filter>
-        <filter
-          id="filter12_d_1464_14280"
-          x="-4"
-          y="-3"
-          width="24.5"
-          height="287.5"
-          filterUnits="userSpaceOnUse"
-          colorInterpolationFilters="sRGB"
-        >
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
-          <feColorMatrix
-            in="SourceAlpha"
-            type="matrix"
-            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-            result="hardAlpha"
-          />
-          <feOffset dy="1" />
-          <feGaussianBlur stdDeviation="2" />
-          <feComposite in2="hardAlpha" operator="out" />
-          <feColorMatrix
-            type="matrix"
-            values="0 0 0 0 0.121097 0 0 0 0 0.136234 0 0 0 0 0.197579 0 0 0 0.16 0"
-          />
-          <feBlend
-            mode="normal"
-            in2="BackgroundImageFix"
-            result="effect1_dropShadow_1464_14280"
-          />
-          <feBlend
-            mode="normal"
-            in="SourceGraphic"
-            in2="effect1_dropShadow_1464_14280"
-            result="shape"
-          />
-        </filter>
-        <clipPath id="clip0_1464_14280">
+        <clipPath id="clip0_1471_6773">
           <path
-            d="M218 0H425C431.627 0 437 5.37258 437 12V268C437 274.627 431.627 280 425 280H218V0Z"
+            d="M120 0H236C238.209 0 240 1.79086 240 4V131C240 133.209 238.209 135 236 135H120V0Z"
             fill="white"
           />
         </clipPath>
-        <clipPath id="clip1_1464_14280">
+        <clipPath id="clip1_1471_6773">
           <path
-            d="M0 12C0 5.37259 5.37258 0 12 0H218V280H12C5.37258 280 0 274.627 0 268V12Z"
+            d="M0 4C0 1.79086 1.79086 0 4 0H120V135H4C1.79086 135 0 133.209 0 131V4Z"
             fill="white"
           />
         </clipPath>
-        <clipPath id="clip2_1464_14280">
+        <clipPath id="clip2_1471_6773">
           <rect
-            width="104"
-            height="208"
+            width="52"
+            height="99.25"
             fill="white"
-            transform="translate(16.5 52.5)"
+            transform="translate(8 26.25)"
           />
         </clipPath>
       </defs>
diff --git a/docs/src/containers/DeleteWidget.tsx b/docs/src/containers/DeleteWidget.tsx
index fdcd7ea..4f574ee 100644
--- a/docs/src/containers/DeleteWidget.tsx
+++ b/docs/src/containers/DeleteWidget.tsx
@@ -18,11 +18,16 @@ const DeleteWidget = ({
       setOpen={setOpen}
       closeButton="Close"
       render={({ onClose, labelId, descriptionId }) => (
-        <div>
-          <p>
-            Are you sure you want to delete <span>{widgetName}</span>?
+        <div className="flex flex-col gap-4 w-80">
+          <h2 className="text-24 font-bold" id={labelId}>
+            Delete Widget
+          </h2>
+          <p id={descriptionId}>
+            Are you sure you want to delete
+            <br />
+            <span className="font-bold">{widgetName}</span>?
           </p>
-          <div>
+          <div className="flex justify-between pt-4 pb-2">
             <Button onClick={onClose} size="small" variant="tertiary">
               Cancel
             </Button>
diff --git a/docs/src/containers/EventsTrigger.tsx b/docs/src/containers/EventsTrigger.tsx
index 6c7924c..2052b96 100644
--- a/docs/src/containers/EventsTrigger.tsx
+++ b/docs/src/containers/EventsTrigger.tsx
@@ -8,7 +8,11 @@ const EventsTrigger = () => {
   const { publishEvent } = useWidgetContext();
   const { activeConversation } = useConversationContext();
 
-  const [darkMode, setDarkMode] = useState(false);
+  const [darkMode, setDarkMode] = useState(
+    localStorage.theme === "dark" ||
+      (!("theme" in localStorage) &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches)
+  );
 
   const events = useMemo(
     () => [
@@ -29,7 +33,7 @@ const EventsTrigger = () => {
       },
       {
         name: "DARK_MODE",
-        info: "Returns whether the user has their preferences set to view the app in dark mode or not. This event is triggered upon initial authentication.",
+        info: "Returns whether the user has their preferences set to view the app in dark mode or not. This event is triggered upon initial authentication. The default value that is used for this event can be updated on the Settings page or it can manually be set for just the event by using the toggle.",
         payload: darkMode,
         input: (
           <div className="flex gap-2 items-center">
@@ -64,7 +68,7 @@ const EventsTrigger = () => {
         {events.map((event) => (
           <div className="flex justify-between items-center" key={event.name}>
             <div className="flex gap-2 items-center">
-              <p className="font-semi">{event.name}</p>
+              <p>{event.name}</p>
               <Tooltip text={event.info} position="right">
                 <div>
                   <Icon
diff --git a/docs/src/containers/GettingStarted.tsx b/docs/src/containers/GettingStarted.tsx
index 6033cd2..6eddeb1 100644
--- a/docs/src/containers/GettingStarted.tsx
+++ b/docs/src/containers/GettingStarted.tsx
@@ -8,9 +8,13 @@ const Documentation = () => {
       <div>
         <h2 className="font-bold text-24 mb-2">Getting Started</h2>
         <p>
-          This playground is meant as a way to test out new widgets easily
+          This playground is meant as a way to test out new widgets easily,
           without having to go through the process of fully integrating into the
-          main Statflo app.
+          main Statflo app.{" "}
+          <span className="text-blueGrey-600 dark:text-blueGrey-300">
+            Note: Some functionality has been disabled as it is not required
+            when creating widgets.
+          </span>
         </p>
       </div>
       <p className="">
@@ -46,10 +50,10 @@ const Documentation = () => {
         and begin testing!
       </p>
       <p>
-        Events will be automatically trigger but they can also be manually
+        Events will be automatically triggered but they can also be manually
         triggered using the Event Manager{" "}
         <Icon className="inline mb-1" color="blueGrey" icon="script" />. A log
-        of all the events that have been published can all be viewed here.
+        of all the events that have been published can be viewed there.
       </p>
     </div>
   );
diff --git a/docs/src/containers/MessageInput.tsx b/docs/src/containers/MessageInput.tsx
index b57a101..0d8584b 100644
--- a/docs/src/containers/MessageInput.tsx
+++ b/docs/src/containers/MessageInput.tsx
@@ -1,16 +1,25 @@
 import { IconButton, Tabs, classNames } from "@statflo/ui";
 import Sendables from "./Sendables";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import ReactTextareaAutosize from "react-textarea-autosize";
 import { useConversationContext } from "../providers/ConversationProvider";
+import { WidgetEvents, useWidgetContext } from "../providers/WidgetProvider";
 
 const MessageInput = () => {
   const { activeConversation, addMessage } = useConversationContext();
+  const { events, getLatestEvent } = useWidgetContext();
   const [message, setMessage] = useState("");
   const inputRef = useRef<any>(null);
 
-  const handleAppend = (value: string) => setMessage(`${message} ${value}`);
-  const handleReplace = (value: string) => setMessage(value);
+  useEffect(() => {
+    const latest = getLatestEvent();
+    if (latest?.type === WidgetEvents.APPEND_MESSAGE) {
+      setMessage((prevState) => `${prevState} ${latest.data}`);
+    }
+    if (latest?.type === WidgetEvents.REPLACE_MESSAGE) {
+      setMessage(latest.data);
+    }
+  }, [events, getLatestEvent]);
 
   if (!activeConversation) return null;
 
@@ -33,7 +42,7 @@ const MessageInput = () => {
         ]}
       />
       <div className="flex p-4 flex-1 items-center gap-4 bg-background-light dark:bg-blueGrey-900">
-        <Sendables onAppend={handleAppend} onReplace={handleReplace} />
+        <Sendables />
         <div className="flex-1">
           <div className="group relative w-full flex items-center justify-center bg-blueGrey-100 rounded-2xl min-h-[44px] border-2 dark:bg-darkMode-600 focus-within:border-blue-400 border-transparent">
             <ReactTextareaAutosize
diff --git a/docs/src/containers/Sendables.tsx b/docs/src/containers/Sendables.tsx
index 8e00839..4f67370 100644
--- a/docs/src/containers/Sendables.tsx
+++ b/docs/src/containers/Sendables.tsx
@@ -3,36 +3,26 @@ import { useEffect, useState } from "react";
 import { Dialog, IconButton, Menu, Popover } from "@statflo/ui";
 
 import { RemoteComponent } from "../components/RemoteComponent";
-import usePublishMainWidgetEvents from "../hooks/usePublishMainWidgetEvents";
 import { WidgetEvents, useWidgetContext } from "../providers/WidgetProvider";
 import Placeholder from "../components/Placeholder";
 
-type SendablesProps = {
-  onAppend: (value: string) => void;
-  onReplace: (value: string) => void;
-};
-
-const Sendables = ({ onAppend, onReplace }: SendablesProps) => {
+const Sendables = () => {
   const { sendableWidgets, events, getLatestEvent, store } = useWidgetContext();
 
   const [activeWidget, setActiveWidget] = useState<Widget>();
   const [isWidgetOpen, setWidgetOpen] = useState<boolean>(false);
 
-  usePublishMainWidgetEvents(isWidgetOpen);
-
   useEffect(() => {
     const latest = getLatestEvent();
     if (latest?.type === WidgetEvents.APPEND_MESSAGE) {
-      onAppend(latest.data);
       setActiveWidget(undefined);
       setWidgetOpen(false);
     }
     if (latest?.type === WidgetEvents.REPLACE_MESSAGE) {
-      onReplace(latest.data);
       setActiveWidget(undefined);
       setWidgetOpen(false);
     }
-  }, [events, getLatestEvent, onAppend, onReplace]);
+  }, [events, getLatestEvent]);
 
   if (!sendableWidgets) return null;
 
diff --git a/docs/src/containers/WidgetForm.tsx b/docs/src/containers/WidgetForm.tsx
index 528b989..87bb4f3 100644
--- a/docs/src/containers/WidgetForm.tsx
+++ b/docs/src/containers/WidgetForm.tsx
@@ -14,9 +14,9 @@ import { faker } from "@faker-js/faker";
 import { useWidgetContext } from "../providers/WidgetProvider";
 
 const WidgetSchema = Yup.object().shape({
-  name: Yup.string().required(),
+  name: Yup.string().required("This field is required"),
   label: Yup.string(),
-  url: Yup.string().required(),
+  url: Yup.string().required("This field is required"),
   position: Yup.string().oneOf(["sendable", "right_panel"]),
   priorty: Yup.number(),
 });
@@ -131,7 +131,7 @@ const WidgetForm = ({ isEdit, widget }: WidgetFormProps) => {
                       name="name"
                       onChange={handleChange}
                       onBlur={handleBlur}
-                      placeholder="Example Widget"
+                      placeholder="eg. Example Widget"
                       value={values.name}
                       validation={
                         errors.name && touched.name
@@ -140,12 +140,12 @@ const WidgetForm = ({ isEdit, widget }: WidgetFormProps) => {
                       }
                     />
                     <TextField
-                      infoText="Displayed in the sendables menu to describe the purpose of the widget as well as open the widget."
+                      infoText="Displayed in the sendables menu, to describe the purpose of the widget."
                       label="Label"
                       name="label"
                       onChange={handleChange}
                       onBlur={handleBlur}
-                      placeholder="Add a date"
+                      placeholder="eg. Add an appointment link"
                       required={false}
                       value={values.label}
                       validation={
@@ -160,7 +160,7 @@ const WidgetForm = ({ isEdit, widget }: WidgetFormProps) => {
                       name="url"
                       onChange={handleChange}
                       onBlur={handleBlur}
-                      placeholder="http://localhost:3001"
+                      placeholder="eg. http://localhost:3001"
                       value={values.url}
                       validation={
                         errors.url && touched.url
@@ -170,30 +170,43 @@ const WidgetForm = ({ isEdit, widget }: WidgetFormProps) => {
                     />
                     <RadioGroup name="position" label="Position">
                       <span className="text-14 leading-[1.125rem] text-blueGrey-600 dark:text-blueGrey-300">
-                        Location of the widget on the conversations screen -
-                        right panel is the area beneath the contact information
-                        and sendable is the + button in the message input.
+                        Location of the widget on the conversations screen.
                       </span>
-                      <RadioButton
-                        checked={values.position === "right_panel"}
-                        label="Right Panel"
-                        onChange={handleChange}
-                        value="right_panel"
-                      />
-                      <RadioButton
-                        checked={values.position === "sendable"}
-                        label="Sendables"
-                        onChange={handleChange}
-                        value="sendable"
-                      />
+                      <div className="flex flex-col">
+                        <RadioButton
+                          className="text-14"
+                          checked={values.position === "right_panel"}
+                          label="Right Panel"
+                          name="position"
+                          onChange={handleChange}
+                          value="right_panel"
+                        />
+                        <span className="text-14 leading-[1.125rem] text-blueGrey-600 dark:text-blueGrey-300 pl-7">
+                          This is the area beneath the contact information.
+                        </span>
+                      </div>
+                      <div className="flex flex-col">
+                        <RadioButton
+                          className="text-14"
+                          checked={values.position === "sendable"}
+                          label="Sendables"
+                          name="position"
+                          onChange={handleChange}
+                          value="sendable"
+                        />
+                        <span className="text-14 leading-[1.125rem] text-blueGrey-600 dark:text-blueGrey-300 pl-7">
+                          This is the + button in the message input.
+                        </span>
+                      </div>
                     </RadioGroup>
                     <TextField
-                      infoText="The order that the widgets will be displayed to the user, higher priority will display at the top."
+                      infoText="The order the widgets will be displayed to the user, higher priority will display at the top. ex. A widget with priority 1 will display before a widget with priority 2."
                       label="Priority"
                       name="priority"
                       onChange={handleChange}
                       onBlur={handleBlur}
                       placeholder="99"
+                      required={false}
                       value={values.priority.toString()}
                       type="number"
                       validation={
diff --git a/docs/src/pages/Settings.tsx b/docs/src/pages/Settings.tsx
index 4dc75d3..7588962 100644
--- a/docs/src/pages/Settings.tsx
+++ b/docs/src/pages/Settings.tsx
@@ -1,7 +1,9 @@
 import { Button, Icon, TextField, classNames } from "@statflo/ui";
 import { RadioGroup } from "@headlessui/react";
+import { motion } from "framer-motion";
 import { useState } from "react";
 import * as Yup from "yup";
+
 import { LightMode } from "../components/Theme/LightMode";
 import { DarkMode } from "../components/Theme/DarkMode";
 import { OS } from "../components/Theme/OS";
@@ -78,20 +80,22 @@ const Settings = () => {
             {themes.map((theme) => (
               <RadioGroup.Option key={theme.id} value={theme}>
                 {({ checked }) => (
-                  <div
+                  <motion.div
                     className={classNames(
-                      "flex flex-col gap-4 pt-2 px-4 pb-4 rounded-xl shadow-card dark:shadow-transparent dark:border dark:border-blueGrey-800",
+                      "flex flex-col gap-4 pt-2 px-4 pb-4 rounded-xl shadow-card transition-colors hocus-not-disabled:cursor-pointer dark:shadow-transparent dark:border ",
                       checked
-                        ? "bg-blue-200 dark:bg-blue-400"
-                        : "bg-background-light dark:bg-darkMode-600"
+                        ? "bg-blue-200 hocus-not-disabled:bg-blue-300 dark:bg-blue-400 dark:border-blue-300 dark:hocus-not-disabled:bg-blue-300"
+                        : "bg-background-light hocus-not-disabled:bg-blue-100 dark:bg-darkMode-600 dark:border-blueGrey-800 dark:hocus-not-disabled:bg-darkMode-500"
                     )}
+                    whileTap={{ scale: 0.96 }}
+                    whileHover={{ scale: 1.04 }}
                   >
                     <span className={classNames(checked && "font-bold")}>
                       {theme.name}
                       {theme?.icon}
                     </span>
-                    <div className="w-48">{theme.preview}</div>
-                  </div>
+                    <div className="w-52">{theme.preview}</div>
+                  </motion.div>
                 )}
               </RadioGroup.Option>
             ))}
diff --git a/docs/src/pages/WidgetManager.tsx b/docs/src/pages/WidgetManager.tsx
index a3c563b..fa090b5 100644
--- a/docs/src/pages/WidgetManager.tsx
+++ b/docs/src/pages/WidgetManager.tsx
@@ -1,9 +1,14 @@
 import { useState } from "react";
 import WidgetForm from "../containers/WidgetForm";
 import { useWidgetContext } from "../providers/WidgetProvider";
-import { Illustration, Table } from "@statflo/ui";
+import { Table } from "@statflo/ui";
 import DeleteWidget from "../containers/DeleteWidget";
 
+const positions = {
+  sendable: "Sendable",
+  right_panel: "Right Panel",
+};
+
 const columns = [
   {
     id: "id",
@@ -21,7 +26,7 @@ const columns = [
     id: "label",
     header: "Label",
     accessorKey: "label",
-    cell: (info: any) => info.getValue() ?? "-",
+    cell: (info: any) => (info.getValue().length !== 0 ? info.getValue() : "-"),
   },
   {
     id: "url",
@@ -33,7 +38,8 @@ const columns = [
     id: "position",
     header: "Position",
     accessorKey: "scopes",
-    cell: (info: any) => info.getValue()[0].positions[0],
+    cell: (info: any) =>
+      positions[info.getValue()[0].positions[0] as keyof typeof positions],
   },
   {
     id: "priority",
@@ -83,13 +89,8 @@ const WidgetManager = () => {
                 Whoops! No Results Found
               </p>
               <p className="text-20 text-blueGrey-600 dark:text-blueGrey-300 mb-8">
-                Try adding a widget to get started!
+                Add a new widget to get started
               </p>
-              <Illustration
-                height="h-40"
-                illustration="noResultsAlt"
-                width="w-120"
-              />
             </>
           }
           pagination={{
diff --git a/docs/src/providers/WidgetProvider.tsx b/docs/src/providers/WidgetProvider.tsx
index b7b36e0..d0f2186 100644
--- a/docs/src/providers/WidgetProvider.tsx
+++ b/docs/src/providers/WidgetProvider.tsx
@@ -88,10 +88,10 @@ export function WidgetProvider({ children }: { children: React.ReactNode }) {
 
       if (widget.scopes[0].positions[0] === "right_panel") {
         setSendableWidgets((prevState) =>
-          prevState?.filter((w) => w.id !== widget.id)
+          prevState.filter((w) => w.id !== widget.id)
         );
         setRightPanelWidgets((prevState) =>
-          prevState
+          prevState.some((w) => w.id === widget.id)
             ? prevState
                 .map((w) => (w.id === widget.id ? widget : w))
                 .sort((a, b) => a.priority - b.priority)
@@ -103,7 +103,7 @@ export function WidgetProvider({ children }: { children: React.ReactNode }) {
           prevState?.filter((w) => w.id !== widget.id)
         );
         setSendableWidgets((prevState) =>
-          prevState
+          prevState.some((w) => w.id === widget.id)
             ? prevState
                 .map((w) => (w.id === widget.id ? widget : w))
                 .sort((a, b) => a.priority - b.priority)