diff --git a/apps/storageanalyzer/ChangeLog b/apps/storageanalyzer/ChangeLog
index 2286a7f70..78e64ee17 100644
--- a/apps/storageanalyzer/ChangeLog
+++ b/apps/storageanalyzer/ChangeLog
@@ -1 +1,2 @@
-0.01: New App!
\ No newline at end of file
+0.01: New App!
+0.02: Added pie chart for visualization, tweaked UI.
diff --git a/apps/storageanalyzer/app.png b/apps/storageanalyzer/app.png
deleted file mode 100644
index f204a5643..000000000
Binary files a/apps/storageanalyzer/app.png and /dev/null differ
diff --git a/apps/storageanalyzer/custom.html b/apps/storageanalyzer/custom.html
index 4b6c3879e..56756d175 100644
--- a/apps/storageanalyzer/custom.html
+++ b/apps/storageanalyzer/custom.html
@@ -3,67 +3,148 @@
     <link rel="stylesheet" href="../../css/spectre.min.css">
   </head>
   <body>
-
     <script src="../../core/lib/customize.js"></script>
-    <div id="storageInfo"></div>
+    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>    
+
+    <!-- Toggle Buttons -->
+    <div class="btn-group" style="margin: 1em; display: flex; justify-content: center;">
+      <button id="tableButton" class="btn btn-primary">View Table</button>
+      <button id="pieChartButton" class="btn">View Pie Chart</button>
+    </div>
+
+    <!-- Table View -->
+    <div id="storageTable"></div>
+
+    <!-- Chart View -->
+    <div id="storagePieChart" style="display: none; flex-direction: column; align-items: center;">
+      <div id="piechart" style="width: 100%; max-width: 600px; height: 400px;"></div>
+      <div id="totalStoragePie" style="width: 100%; max-width: 600px; height: 300px;"></div>
+    </div>
 
     <script>
-      // Called when we know what device we're using
+      let globalApps = [];
+      let storageStats = null;
+
       function onInit(device) {
         Util.showModal("Reading Storage...");
-        Puck.eval(`require("Storage").list(/\\.info$/).map(appInfoName => {
-  let appInfo = require("Storage").readJSON(appInfoName,1)||{};
-  //print(appInfoName, appInfo);
-  var fileSize = 0, dataSize = 0;
-  appInfo.files.split(",").forEach(f => fileSize += require("Storage").read(f).length);
-  var data = (appInfo.data||"").split(";");
-  function wildcardToRegexp(wc) {
-    return new RegExp("^"+wc.replaceAll(".","\\\\.").replaceAll("?",".*")+"$");
-  }
-  // normal files
-  if (data[0]) data[0].split(",").forEach(wc => {
-    require("Storage").list(wildcardToRegexp(wc), {sf:false}).forEach(f => {
-      dataSize += require("Storage").read(f).length
-    });
-  });
-  // storage files
-  if (data[1]) data[1].split(",").forEach(wc => {
-    require("Storage").list(wildcardToRegexp(wc), {sf:true}).forEach(f => {
-      dataSize += require("Storage").open(f,"r").getLength();
-    });
-  });
-  return [appInfo.id, fileSize, dataSize];
-})`, function(apps) {
-  apps.sort((a,b) => (b[1]+b[2]) - (a[1]+a[2]));
-  Util.hideModal();
-  console.log(apps);
-  document.getElementById("storageInfo").innerHTML = `
-    <table class="table table-striped">
-      <thead>
-        <tr>
-          <th>App</th>
-          <th>Code (kb)</th>
-          <th>Data (kb)</th>
-          <th>Total (kb)</th>
-        </tr>
-      </thead>
-      <tbody>
-        ${apps.map(app => `
-          <tr>
-            <td>${app[0]}</td>
-            <td>${(app[1]/1000).toFixed(1)}</td>
-            <td>${(app[2]/1000).toFixed(1)}</td>
-            <td>${((app[1]+app[2])/1000).toFixed(1)}</td>
-          </tr>`).join("")}
-      </tbody>
-    </table>`;
-    if (apps.length === 0) {
-      document.getElementById("storageInfo").innerHTML = "<p>No apps found</p>";
-  }
-});
+        Puck.eval(`(()=>{
+          let getApps = () => require("Storage").list(/\\.info$/).map(appInfoName => {
+            let appInfo = require("Storage").readJSON(appInfoName,1)||{};
+            var fileSize = 0, dataSize = 0;
+            appInfo.files.split(",").forEach(f => fileSize += require("Storage").read(f).length);
+            var data = (appInfo.data||"").split(";");
+            function wildcardToRegexp(wc) {
+              return new RegExp("^"+wc.replaceAll(".","\\\\.").replaceAll("?",".*")+"$");
+            }
+            if (data[0]) data[0].split(",").forEach(wc => {
+              require("Storage").list(wildcardToRegexp(wc), {sf:false}).forEach(f => {
+                dataSize += require("Storage").read(f).length
+              });
+            });
+            if (data[1]) data[1].split(",").forEach(wc => {
+              require("Storage").list(wildcardToRegexp(wc), {sf:true}).forEach(f => {
+                dataSize += require("Storage").open(f,"r").getLength();
+              });
+            });
+            return [appInfo.id, fileSize, dataSize];
+          });
+          return [getApps(), require(\"Storage\").getStats()]; })()`, function(result) {
+          Util.hideModal();
+          globalApps = result[0].sort((a,b) => (b[1]+b[2]) - (a[1]+a[2]));
+          storageStats = result[1];
+
+          if (globalApps.length === 0) {
+            document.getElementById("storageTable").innerHTML = "<p>No apps found</p>";
+            return;
+          }
+
+          drawTable();
+        });
       }
 
+      function drawTable() {
+        document.getElementById("storageTable").innerHTML = `
+          <table class="table table-striped">
+            <thead>
+              <tr>
+                <th>App</th>
+                <th>Code (kb)</th>
+                <th>Data (kb)</th>
+                <th>Total (kb)</th>
+              </tr>
+            </thead>
+            <tbody>
+              ${globalApps.map(app => `
+                <tr>
+                  <td>${app[0]}</td>
+                  <td>${(app[1]/1000).toFixed(1)}</td>
+                  <td>${(app[2]/1000).toFixed(1)}</td>
+                  <td>${((app[1]+app[2])/1000).toFixed(1)}</td>
+                </tr>`).join("")}
+            </tbody>
+          </table>`;
+      }
 
+      function drawChart() {
+        if (globalApps.length === 0) return;
+
+        // App-specific chart
+        const chartData = [
+          ['App', 'Total Size (KB)']
+        ].concat(globalApps.map(app => [app[0], (app[1] + app[2])/1000]));
+
+        const data = google.visualization.arrayToDataTable(chartData);
+
+        const options = {
+          title: 'App Storage Breakdown',
+          chartArea: { width: '90%', height: '80%' },
+          legend: { position: 'bottom' }
+        };
+
+        const chart = new google.visualization.PieChart(document.getElementById('piechart'));
+        chart.draw(data, options);
+
+        // Total storage chart
+        if (storageStats) {
+          const usedKB = storageStats.usedBytes / 1000;
+          const freeKB = storageStats.freeBytes / 1000;
+          const totalData = google.visualization.arrayToDataTable([
+            ['Type', 'KB'],
+            ['Used', usedKB],
+            ['Free', freeKB]
+          ]);
+
+          const totalOptions = {
+            title: 'Total Storage Usage',
+            pieHole: 0.4,
+            chartArea: { width: '90%', height: '80%' },
+            legend: { position: 'bottom' }
+          };
+
+          const totalChart = new google.visualization.PieChart(document.getElementById('totalStoragePie'));
+          totalChart.draw(totalData, totalOptions);
+        }
+      }
+
+      google.charts.load('current', {'packages':['corechart']});
+      
+
+      document.getElementById("pieChartButton").addEventListener("click", function () {
+        document.getElementById("storageTable").style.display = "none";
+        document.getElementById("storagePieChart").style.display = "flex";
+        drawChart();
+        this.classList.add("btn-primary");
+        document.getElementById("tableButton").classList.remove("btn-primary");
+      });
+
+      document.getElementById("tableButton").addEventListener("click", function () {
+        document.getElementById("storageTable").style.display = "block";
+        document.getElementById("storagePieChart").style.display = "none";
+        drawTable();
+        this.classList.add("btn-primary");
+        document.getElementById("pieChartButton").classList.remove("btn-primary");
+      });
+      
     </script>
   </body>
 </html>
diff --git a/apps/storageanalyzer/icon.png b/apps/storageanalyzer/icon.png
new file mode 100644
index 000000000..c752a077f
Binary files /dev/null and b/apps/storageanalyzer/icon.png differ
diff --git a/apps/storageanalyzer/metadata.json b/apps/storageanalyzer/metadata.json
index 193b7c32c..4d10398f5 100644
--- a/apps/storageanalyzer/metadata.json
+++ b/apps/storageanalyzer/metadata.json
@@ -1,9 +1,9 @@
 {
   "id": "storageanalyzer",
   "name": "Storage Analyzer",
-  "version": "0.01",
-  "description": "Analyses Bangle.js storage and shows which apps are using it",
-  "icon": "app.png",
+  "version": "0.02",
+  "description": "Analyzes Bangle.js storage and shows which apps are using storage space",
+  "icon": "icon.png",
   "type": "RAM",
   "tags": "tool,storage,flash,memory",
   "supports": ["BANGLEJS","BANGLEJS2"],
