diff --git a/kinode/packages/app_store/app_store/src/http_api.rs b/kinode/packages/app_store/app_store/src/http_api.rs
index e6c1696a..0630cb74 100644
--- a/kinode/packages/app_store/app_store/src/http_api.rs
+++ b/kinode/packages/app_store/app_store/src/http_api.rs
@@ -60,20 +60,78 @@ pub fn init_frontend(our: &Address) {
 fn make_widget() -> String {
     return r#"<html>
 <head>
-    <script src="https://cdn.tailwindcss.com"></script>
     <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+
+        a {
+            text-decoration: none;
+            color: inherit;
+        }
+
+        body {
+            color: white;
+            overflow: hidden;
+        }
+
+        #latest-apps {
+            display: flex;
+            flex-wrap: wrap;
+            padding: 0.5rem;
+            gap: 0.5rem;
+            align-items: center;
+            backdrop-filter: saturate(1.25);
+            border-radius: 0.75rem;
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+            height: 100vh;
+            width: 100vw;
+            overflow-y: auto;
+            scrollbar-color: transparent transparent;
+            scrollbar-width: none;
+        }
+
         .app {
+            padding: 0.5rem;
+            display: flex;
+            flex-grow: 1;
+            align-items: stretch;
+            border-radius: 0.75rem;
+            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+            background-color: rgba(255, 255, 255, 0.1);
+            cursor: pointer;
+            font-family: sans-serif;
             width: 100%;
         }
 
+        .app:hover {
+            background-color: rgba(255, 255, 255, 0.2);
+        }
+
         .app-image {
-            background-size: cover;
+            border-radius: 0.75rem;
+            margin-right: 0.5rem;
+            flex-grow: 1;
+            background-size: contain;
             background-repeat: no-repeat;
             background-position: center;
+            height: 92px;
+            width: 92px;
+            max-width: 33%;
         }
 
         .app-info {
-            max-width: 67%
+            display: flex;
+            flex-direction: column;
+            flex-grow: 1;
+            max-width: 67%;
+        }
+
+        .app-info h2 {
+            font-weight: bold;
+            font-size: medium;
         }
 
         @media screen and (min-width: 500px) {
@@ -84,15 +142,7 @@ fn make_widget() -> String {
     </style>
 </head>
 <body class="text-white overflow-hidden">
-    <div
-        id="latest-apps"
-        class="flex flex-wrap p-2 gap-2 items-center backdrop-brightness-125 rounded-xl shadow-lg h-screen w-screen overflow-y-auto"
-        style="
-            scrollbar-color: transparent transparent;
-            scrollbar-width: none;
-        "
-    >
-    </div>
+    <div id="latest-apps"></div>
     <script>
         document.addEventListener('DOMContentLoaded', function() {
             fetch('/main:app_store:sys/apps/listed', { credentials: 'include' })
@@ -102,22 +152,19 @@ fn make_widget() -> String {
                     data.forEach(app => {
                         if (app.metadata) {
                             const a = document.createElement('a');
-                            a.className = 'app p-2 grow flex items-stretch rounded-lg shadow bg-white/10 hover:bg-white/20 font-sans cursor-pointer';
+                            a.className = 'app';
                             a.href = `/main:app_store:sys/app-details/${app.package}:${app.publisher}`
                             a.target = '_blank';
                             a.rel = 'noopener noreferrer';
                             const iconLetter = app.metadata_hash.replace('0x', '')[0].toUpperCase();
                             a.innerHTML = `<div
-                                class="app-image rounded mr-2 grow"
+                                class="app-image"
                                 style="
                                     background-image: url('${app.metadata.image || `/icons/${iconLetter}`}');
-                                    height: 92px;
-                                    width: 92px;
-                                    max-width: 33%;
                                 "
                             ></div>
-                            <div class="app-info flex flex-col grow">
-                                <h2 class="font-bold">${app.metadata.name}</h2>
+                            <div class="app-info">
+                                <h2>${app.metadata.name}</h2>
                                 <p>${app.metadata.description}</p>
                             </div>`;
                                 container.appendChild(a);
diff --git a/kinode/packages/kino_updates/widget/src/lib.rs b/kinode/packages/kino_updates/widget/src/lib.rs
index 08f3c040..68137ac8 100644
--- a/kinode/packages/kino_updates/widget/src/lib.rs
+++ b/kinode/packages/kino_updates/widget/src/lib.rs
@@ -33,7 +33,7 @@ fn init(_our: Address) {
                 serde_json::json!({
                     "Add": {
                         "label": "KinoUpdates",
-                        "widget": create_widget(fetch_most_recent_blog_posts(6)),
+                        "widget": create_widget(fetch_most_recent_blog_posts(12)),
                     }
                 })
                 .to_string(),
@@ -49,41 +49,86 @@ fn create_widget(posts: Vec<KinodeBlogPost>) -> String {
     return format!(
         r#"<html>
 <head>
-    <script src="https://cdn.tailwindcss.com"></script>
     <style>
+    * {{
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+    }}
+
+    a {{
+        text-decoration: none;
+        color: inherit;
+    }}
+
+    h2 {{
+        font-size: medium;
+    }}
+
+    body {{
+        color: white;
+        overflow: hidden;
+        height: 100vh;
+        width: 100vw;
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+        font-family: sans-serif;
+    }}
+
+    #latest-blog-posts {{
+        display: flex;
+        flex-direction: column;
+        padding: 0.5rem;
+        gap: 0.5rem;
+        backdrop-filter: brightness(1.25);
+        border-radius: 0.75rem;
+        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+        height: 100vh;
+        width: 100vw;
+        overflow-y: auto;
+        scrollbar-color: transparent transparent;
+        scrollbar-width: none;
+        align-self: stretch;
+    }}
+
+    .post {{
+        width: 100%;
+        display: flex;
+        gap: 8px;
+        background-color: rgba(255, 255, 255, 0.1);
+        border-radius: 0.5em;
+        padding: 0.5em;
+    }}
+
+    .post-image {{
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center;
+        width: 100px;
+        height: 100px;
+        border-radius: 4px;
+    }}
+
+    .post-info {{
+        max-width: 67%;
+        overflow: hidden;
+    }}
+
+    @media screen and (min-width: 500px) {{
         .post {{
-            width: 100%;
-        }}
-
-        .post-image {{
-            background-size: cover;
-            background-repeat: no-repeat;
-            background-position: center;
-            width: 100px;
-            height: 100px;
-            border-radius: 16px;
-        }}
-
-        .post-info {{
-            max-width: 67%
-        }}
-
-        @media screen and (min-width: 500px) {{
-            .post {{
-                width: 49%;
-            }}
+            width: 49%;
         }}
+    }}
     </style>
 </head>
-<body class="text-white overflow-hidden h-screen w-screen flex flex-col gap-2">
+<body class="text-white overflow-hidden">
     <div
         id="latest-blog-posts"
-        class="flex flex-col p-2 gap-2 backdrop-brightness-125 rounded-xl shadow-lg h-screen w-screen overflow-y-auto self-stretch"
         style="
             scrollbar-color: transparent transparent;
             scrollbar-width: none;
-        "
-    >
+        ">
         {}
     </div>
 </body>
@@ -123,17 +168,17 @@ fn trim_content(content: &str) -> String {
 
 fn post_to_html_string(post: KinodeBlogPost) -> String {
     format!(
-        r#"<a 
-            class="post p-2 grow self-stretch flex items-stretch rounded-lg shadow bg-white/10 hover:bg-white/20 font-sans w-full"
+        r#"<a
+            class="post"
             href="https://kinode.org/blog/post/{}"
-            target="_blank" 
+            target="_blank"
             rel="noopener noreferrer"
         >
         <div
-            class="post-image rounded mr-2 grow self-stretch h-full"
+            class="post-image"
             style="background-image: url('https://kinode.org{}');"
         ></div>
-        <div class="post-info flex flex-col grow">
+        <div class="post-info">
             <h2 class="font-bold">{}</h2>
             <p>{}</p>
         </div>
