diff --git a/packages/shell/src/lib/app/state.ts b/packages/shell/src/lib/app/state.ts
index 7e893acdfd..0a4664da06 100644
--- a/packages/shell/src/lib/app/state.ts
+++ b/packages/shell/src/lib/app/state.ts
@@ -35,6 +35,9 @@ export function applyCommand(
   switch (command.type) {
     case "set-active-charm-id": {
       next.activeCharmId = command.charmId;
+      if (command.charmId) {
+        next.showShellCharmListView = false;
+      }
       break;
     }
     case "set-identity": {
diff --git a/packages/shell/test/app-state.test.ts b/packages/shell/test/app-state.test.ts
index 771d6b0ba3..43b4073014 100644
--- a/packages/shell/test/app-state.test.ts
+++ b/packages/shell/test/app-state.test.ts
@@ -1,5 +1,6 @@
 import { describe, it } from "@std/testing/bdd";
 import {
+  applyCommand,
   AppState,
   AppStateSerialized,
   deserialize,
@@ -69,4 +70,18 @@ describe("AppState", () => {
     assert(state.spaceName === SPACE_NAME);
     assert(state.identity?.did() === identity.did(), "deserializes identity.");
   });
+
+  it("clears charm list view when activating a charm", () => {
+    const initial: AppState = {
+      apiUrl: new URL(API_URL),
+      showShellCharmListView: true,
+    };
+
+    const next = applyCommand(initial, {
+      type: "set-active-charm-id",
+      charmId: "example",
+    });
+
+    assert(next.showShellCharmListView === false);
+  });
 });