diff --git a/browser/ui/webui/ai_chat/ai_chat_ui.cc b/browser/ui/webui/ai_chat/ai_chat_ui.cc
index a6e48ebe79ac..9c5b7185f229 100644
--- a/browser/ui/webui/ai_chat/ai_chat_ui.cc
+++ b/browser/ui/webui/ai_chat/ai_chat_ui.cc
@@ -21,6 +21,7 @@
 #include "brave/components/constants/webui_url_constants.h"
 #include "brave/components/l10n/common/localization_util.h"
 #include "chrome/browser/profiles/profile.h"
+#include "chrome/browser/ui/tabs/tab_model.h"
 #include "chrome/browser/ui/webui/webui_util.h"
 #include "components/grit/brave_components_resources.h"
 #include "components/prefs/pref_service.h"
@@ -79,13 +80,6 @@ AIChatUI::AIChatUI(content::WebUI* web_ui)
         str.name, brave_l10n::GetLocalizedResourceUTF16String(str.id));
   }
 
-  base::Time last_accepted_disclaimer =
-      profile_->GetOriginalProfile()->GetPrefs()->GetTime(
-          ai_chat::prefs::kLastAcceptedDisclaimer);
-
-  untrusted_source->AddBoolean("hasAcceptedAgreement",
-                               !last_accepted_disclaimer.is_null());
-
 #if BUILDFLAG(IS_ANDROID) || BUILDFLAG(IS_IOS)
   constexpr bool kIsMobile = true;
 #else
@@ -96,11 +90,6 @@ AIChatUI::AIChatUI(content::WebUI* web_ui)
   untrusted_source->AddBoolean("isHistoryEnabled",
                                ai_chat::features::IsAIChatHistoryEnabled());
 
-  untrusted_source->AddBoolean(
-      "hasUserDismissedPremiumPrompt",
-      profile_->GetOriginalProfile()->GetPrefs()->GetBoolean(
-          ai_chat::prefs::kUserDismissedPremiumPrompt));
-
   untrusted_source->OverrideContentSecurityPolicy(
       network::mojom::CSPDirectiveName::ScriptSrc,
       "script-src 'self' chrome-untrusted://resources;");
@@ -128,21 +117,26 @@ void AIChatUI::BindInterface(
   if (embedder_) {
     embedder_->ShowUI();
   }
-
+  // Get the WebContents which SidePanel mode should be associated with
   content::WebContents* web_contents = nullptr;
 #if !BUILDFLAG(IS_ANDROID)
   Browser* browser =
       ai_chat::GetBrowserForWebContents(web_ui()->GetWebContents());
-  if (!browser) {
-    return;
+  if (browser) {
+    TabStripModel* tab_strip_model = browser->tab_strip_model();
+    if (tab_strip_model) {
+      // If this WebUI is a main tab, we never want to be associated with
+      // the active tab
+      if (tab_strip_model->GetIndexOfWebContents(web_ui()->GetWebContents()) ==
+          TabStripModel::kNoTab) {
+        web_contents = tab_strip_model->GetActiveWebContents();
+      }
+    }
   }
-
-  TabStripModel* tab_strip_model = browser->tab_strip_model();
-  DCHECK(tab_strip_model);
-  web_contents = tab_strip_model->GetActiveWebContents();
 #else
   web_contents = GetActiveWebContents(profile_);
 #endif
+  // Don't associate with the WebUI's WebContents
   if (web_contents == web_ui()->GetWebContents()) {
     web_contents = nullptr;
   }
diff --git a/browser/ui/webui/ai_chat/ai_chat_ui_page_handler.cc b/browser/ui/webui/ai_chat/ai_chat_ui_page_handler.cc
index 0d059503168e..8bafa8354685 100644
--- a/browser/ui/webui/ai_chat/ai_chat_ui_page_handler.cc
+++ b/browser/ui/webui/ai_chat/ai_chat_ui_page_handler.cc
@@ -205,10 +205,10 @@ void AIChatUIPageHandler::CloseUI() {
 #endif
 }
 
-void AIChatUIPageHandler::SetChatUI(
-    mojo::PendingRemote<mojom::ChatUI> chat_ui) {
+void AIChatUIPageHandler::SetChatUI(mojo::PendingRemote<mojom::ChatUI> chat_ui,
+                                    SetChatUICallback callback) {
   chat_ui_.Bind(std::move(chat_ui));
-  chat_ui_->SetInitialData(active_chat_tab_helper_ == nullptr);
+  std::move(callback).Run(active_chat_tab_helper_ == nullptr);
 }
 
 void AIChatUIPageHandler::BindRelatedConversation(
diff --git a/browser/ui/webui/ai_chat/ai_chat_ui_page_handler.h b/browser/ui/webui/ai_chat/ai_chat_ui_page_handler.h
index 7fc3c89cbe93..4dc28747bba5 100644
--- a/browser/ui/webui/ai_chat/ai_chat_ui_page_handler.h
+++ b/browser/ui/webui/ai_chat/ai_chat_ui_page_handler.h
@@ -54,7 +54,8 @@ class AIChatUIPageHandler : public mojom::AIChatUIHandler,
   void ManagePremium() override;
   void HandleVoiceRecognition(const std::string& conversation_uuid) override;
   void CloseUI() override;
-  void SetChatUI(mojo::PendingRemote<mojom::ChatUI> chat_ui) override;
+  void SetChatUI(mojo::PendingRemote<mojom::ChatUI> chat_ui,
+                 SetChatUICallback callback) override;
   void BindRelatedConversation(
       mojo::PendingReceiver<mojom::ConversationHandler> receiver,
       mojo::PendingRemote<mojom::ConversationUI> conversation_ui_handler)
diff --git a/components/ai_chat/core/browser/ai_chat_service.cc b/components/ai_chat/core/browser/ai_chat_service.cc
index 68478bf541be..b0d0884d9006 100644
--- a/components/ai_chat/core/browser/ai_chat_service.cc
+++ b/components/ai_chat/core/browser/ai_chat_service.cc
@@ -117,6 +117,10 @@ AIChatService::AIChatService(
       prefs::kStorageEnabled,
       base::BindRepeating(&AIChatService::MaybeInitStorage,
                           weak_ptr_factory_.GetWeakPtr()));
+  pref_change_registrar_.Add(
+      prefs::kUserDismissedPremiumPrompt,
+      base::BindRepeating(&AIChatService::OnStateChanged,
+                          weak_ptr_factory_.GetWeakPtr()));
 
   MaybeInitStorage();
 }
@@ -362,6 +366,7 @@ void AIChatService::MaybeInitStorage() {
                                weak_ptr_factory_.GetWeakPtr()));
     }
   }
+  OnStateChanged();
 }
 
 void AIChatService::OnOsCryptAsyncReady(os_crypt_async::Encryptor encryptor,
@@ -548,6 +553,18 @@ void AIChatService::MarkAgreementAccepted() {
   SetUserOptedIn(profile_prefs_, true);
 }
 
+void AIChatService::EnableStoragePref() {
+  profile_prefs_->SetBoolean(prefs::kStorageEnabled, true);
+}
+
+void AIChatService::DismissStorageNotice() {
+  profile_prefs_->SetBoolean(prefs::kUserDismissedStorageNotice, true);
+}
+
+void AIChatService::DismissPremiumPrompt() {
+  profile_prefs_->SetBoolean(prefs::kUserDismissedPremiumPrompt, true);
+}
+
 void AIChatService::GetActionMenuList(GetActionMenuListCallback callback) {
   std::move(callback).Run(ai_chat::GetActionMenuList());
 }
@@ -558,41 +575,6 @@ void AIChatService::GetPremiumStatus(GetPremiumStatusCallback callback) {
                      weak_ptr_factory_.GetWeakPtr(), std::move(callback)));
 }
 
-void AIChatService::GetCanShowPremiumPrompt(
-    GetCanShowPremiumPromptCallback callback) {
-  bool has_user_dismissed_prompt =
-      profile_prefs_->GetBoolean(prefs::kUserDismissedPremiumPrompt);
-
-  if (has_user_dismissed_prompt) {
-    std::move(callback).Run(false);
-    return;
-  }
-
-  base::Time last_accepted_disclaimer =
-      profile_prefs_->GetTime(prefs::kLastAcceptedDisclaimer);
-
-  // Can't show if we haven't accepted disclaimer yet
-  if (last_accepted_disclaimer.is_null()) {
-    std::move(callback).Run(false);
-    return;
-  }
-
-  base::Time time_1_day_ago = base::Time::Now() - base::Days(1);
-  bool is_more_than_24h_since_last_seen =
-      last_accepted_disclaimer < time_1_day_ago;
-
-  if (is_more_than_24h_since_last_seen) {
-    std::move(callback).Run(true);
-    return;
-  }
-
-  std::move(callback).Run(false);
-}
-
-void AIChatService::DismissPremiumPrompt() {
-  profile_prefs_->SetBoolean(prefs::kUserDismissedPremiumPrompt, true);
-}
-
 void AIChatService::DeleteConversation(const std::string& id) {
   auto handler_it = conversation_handlers_.find(id);
   if (handler_it != conversation_handlers_.end()) {
@@ -681,6 +663,38 @@ void AIChatService::MaybeUnloadConversation(
   }
 }
 
+mojom::ServiceStatePtr AIChatService::BuildState() {
+  bool has_user_dismissed_storage_notice =
+      profile_prefs_->GetBoolean(prefs::kUserDismissedStorageNotice);
+  base::Time last_accepted_disclaimer =
+      profile_prefs_->GetTime(ai_chat::prefs::kLastAcceptedDisclaimer);
+
+  bool is_user_opted_in = !last_accepted_disclaimer.is_null();
+
+  // Premium prompt is only shown conditionally (e.g. the user hasn't dismissed
+  // it and it's been some time since the user started using the feature).
+  bool can_show_premium_prompt =
+      !profile_prefs_->GetBoolean(prefs::kUserDismissedPremiumPrompt) &&
+      !last_accepted_disclaimer.is_null() &&
+      last_accepted_disclaimer < base::Time::Now() - base::Days(1);
+
+  bool is_storage_enabled = profile_prefs_->GetBoolean(prefs::kStorageEnabled);
+
+  mojom::ServiceStatePtr state = mojom::ServiceState::New();
+  state->has_accepted_agreement = is_user_opted_in;
+  state->is_storage_pref_enabled = is_storage_enabled;
+  state->is_storage_notice_dismissed = has_user_dismissed_storage_notice;
+  state->can_show_premium_prompt = can_show_premium_prompt;
+  return state;
+}
+
+void AIChatService::OnStateChanged() {
+  mojom::ServiceStatePtr state = BuildState();
+  for (auto& remote : observer_remotes_) {
+    remote->OnStateChanged(state.Clone());
+  }
+}
+
 bool AIChatService::IsAIChatHistoryEnabled() {
   return (features::IsAIChatHistoryEnabled() &&
           profile_prefs_->GetBoolean(prefs::kStorageEnabled));
@@ -843,8 +857,10 @@ void AIChatService::BindConversation(
 }
 
 void AIChatService::BindObserver(
-    mojo::PendingRemote<mojom::ServiceObserver> observer) {
+    mojo::PendingRemote<mojom::ServiceObserver> observer,
+    BindObserverCallback callback) {
   observer_remotes_.Add(std::move(observer));
+  std::move(callback).Run(BuildState());
 }
 
 bool AIChatService::HasUserOptedIn() {
@@ -866,6 +882,7 @@ size_t AIChatService::GetInMemoryConversationCountForTesting() {
 }
 
 void AIChatService::OnUserOptedIn() {
+  OnStateChanged();
   bool is_opted_in = HasUserOptedIn();
   if (!is_opted_in) {
     return;
@@ -873,9 +890,6 @@ void AIChatService::OnUserOptedIn() {
   for (auto& kv : conversation_handlers_) {
     kv.second->OnUserOptedIn();
   }
-  for (auto& remote : observer_remotes_) {
-    remote->OnAgreementAccepted();
-  }
   if (ai_chat_metrics_ != nullptr) {
     ai_chat_metrics_->RecordEnabled(true, true, {});
   }
diff --git a/components/ai_chat/core/browser/ai_chat_service.h b/components/ai_chat/core/browser/ai_chat_service.h
index 4856fccaff0e..b868c17e4e5d 100644
--- a/components/ai_chat/core/browser/ai_chat_service.h
+++ b/components/ai_chat/core/browser/ai_chat_service.h
@@ -136,13 +136,13 @@ class AIChatService : public KeyedService,
 
   // mojom::Service
   void MarkAgreementAccepted() override;
+  void EnableStoragePref() override;
+  void DismissStorageNotice() override;
+  void DismissPremiumPrompt() override;
   void GetVisibleConversations(
       GetVisibleConversationsCallback callback) override;
   void GetActionMenuList(GetActionMenuListCallback callback) override;
   void GetPremiumStatus(GetPremiumStatusCallback callback) override;
-  void GetCanShowPremiumPrompt(
-      GetCanShowPremiumPromptCallback callback) override;
-  void DismissPremiumPrompt() override;
   void DeleteConversation(const std::string& id) override;
   void RenameConversation(const std::string& id,
                           const std::string& new_name) override;
@@ -152,7 +152,8 @@ class AIChatService : public KeyedService,
       mojo::PendingReceiver<mojom::ConversationHandler> receiver,
       mojo::PendingRemote<mojom::ConversationUI> conversation_ui_handler)
       override;
-  void BindObserver(mojo::PendingRemote<mojom::ServiceObserver> ui) override;
+  void BindObserver(mojo::PendingRemote<mojom::ServiceObserver> ui,
+                    BindObserverCallback callback) override;
 
   bool HasUserOptedIn();
   bool IsPremiumStatus();
@@ -208,6 +209,8 @@ class AIChatService : public KeyedService,
                                mojom::PremiumStatus status,
                                mojom::PremiumInfoPtr info);
   void OnDataDeletedForDisabledStorage(bool success);
+  mojom::ServiceStatePtr BuildState();
+  void OnStateChanged();
 
   bool IsAIChatHistoryEnabled();
 
diff --git a/components/ai_chat/core/browser/ai_chat_service_unittest.cc b/components/ai_chat/core/browser/ai_chat_service_unittest.cc
index ba21807bb164..b1e3cc300ea4 100644
--- a/components/ai_chat/core/browser/ai_chat_service_unittest.cc
+++ b/components/ai_chat/core/browser/ai_chat_service_unittest.cc
@@ -17,6 +17,7 @@
 #include "base/files/scoped_temp_dir.h"
 #include "base/functional/bind.h"
 #include "base/functional/callback.h"
+#include "base/functional/callback_helpers.h"
 #include "base/functional/overloaded.h"
 #include "base/memory/scoped_refptr.h"
 #include "base/run_loop.h"
@@ -72,8 +73,8 @@ class MockAIChatCredentialManager : public AIChatCredentialManager {
 class MockServiceClient : public mojom::ServiceObserver {
  public:
   explicit MockServiceClient(AIChatService* service) {
-    service->BindObserver(
-        service_observer_receiver_.BindNewPipeAndPassRemote());
+    service->BindObserver(service_observer_receiver_.BindNewPipeAndPassRemote(),
+                          base::DoNothing());
     service->Bind(service_remote_.BindNewPipeAndPassReceiver());
   }
 
@@ -91,7 +92,7 @@ class MockServiceClient : public mojom::ServiceObserver {
               (std::vector<mojom::ConversationPtr>),
               (override));
 
-  MOCK_METHOD(void, OnAgreementAccepted, (), (override));
+  MOCK_METHOD(void, OnStateChanged, (mojom::ServiceStatePtr), (override));
 
  private:
   mojo::Receiver<mojom::ServiceObserver> service_observer_receiver_{this};
diff --git a/components/ai_chat/core/browser/constants.cc b/components/ai_chat/core/browser/constants.cc
index 161efe86ebbf..4ef399c47d34 100644
--- a/components/ai_chat/core/browser/constants.cc
+++ b/components/ai_chat/core/browser/constants.cc
@@ -128,6 +128,17 @@ base::span<const webui::LocalizedString> GetLocalizedStrings() {
        {"searchInProgress", IDS_CHAT_UI_SEARCH_IN_PROGRESS},
        {"searchQueries", IDS_CHAT_UI_SEARCH_QUERIES},
        {"learnMore", IDS_CHAT_UI_LEARN_MORE},
+       {"closeNotice", IDS_CHAT_UI_CLOSE_NOTICE},
+       {"noticeConversationHistoryBody",
+        IDS_CHAT_UI_NOTICE_CONVERSATION_HISTORY_BODY},
+       {"noticeConversationHistoryEmpty",
+        IDS_CHAT_UI_NOTICE_CONVERSATION_HISTORY_EMPTY},
+       {"noticeConversationHistoryTitleDisabledPref",
+        IDS_CHAT_UI_NOTICE_CONVERSATION_HISTORY_TITLE_DISABLED_PREF},
+       {"noticeConversationHistoryDisabledPref",
+        IDS_CHAT_UI_NOTICE_CONVERSATION_HISTORY_DISABLED_PREF},
+       {"noticeConversationHistoryDisabledPrefButton",
+        IDS_CHAT_UI_NOTICE_CONVERSATION_HISTORY_DISABLED_PREF_BUTTON},
        {"leoSettingsTooltipLabel", IDS_CHAT_UI_LEO_SETTINGS_TOOLTIP_LABEL},
        {"summarizePageButtonLabel", IDS_CHAT_UI_SUMMARIZE_PAGE},
        {"welcomeGuideTitle", IDS_CHAT_UI_WELCOME_GUIDE_TITLE},
@@ -171,6 +182,8 @@ base::span<const webui::LocalizedString> GetLocalizedStrings() {
        {"useMicButtonLabel", IDS_AI_CHAT_USE_MICROPHONE_BUTTON_LABEL},
        {"menuTitleCustomModels", IDS_AI_CHAT_MENU_TITLE_CUSTOM_MODELS},
        {"startConversationLabel", IDS_AI_CHAT_START_CONVERSATION_LABEL},
+       {"goBackToActiveConversationButton",
+        IDS_AI_CHAT_GO_BACK_TO_ACTIVE_CONVERSATION_BUTTON},
        {"conversationListUntitled", IDS_AI_CHAT_CONVERSATION_LIST_UNTITLED}});
 
   return kLocalizedStrings;
diff --git a/components/ai_chat/core/common/mojom/ai_chat.mojom b/components/ai_chat/core/common/mojom/ai_chat.mojom
index 3f81a9c326c3..6e0b7f72336f 100644
--- a/components/ai_chat/core/common/mojom/ai_chat.mojom
+++ b/components/ai_chat/core/common/mojom/ai_chat.mojom
@@ -299,9 +299,21 @@ struct ActionGroup {
   array<ActionEntry> entries;
 };
 
+// This does not cover more specific data that the Service owns, such as the
+// conversation list, but does cover status of preferences and notices.
+struct ServiceState {
+  bool has_accepted_agreement;
+  bool is_storage_pref_enabled;
+  bool is_storage_notice_dismissed;
+  bool can_show_premium_prompt;
+};
+
 interface Service {
-  // User opts-in to the feature at a profile level
+  // Profile-level acknowledgements
   MarkAgreementAccepted();
+  EnableStoragePref();
+  DismissStorageNotice();
+  DismissPremiumPrompt();
 
   // Get metadata for non-archived conversations
   GetVisibleConversations() => (array<Conversation> conversations);
@@ -312,16 +324,11 @@ interface Service {
   // Current status of subscription
   GetPremiumStatus() => (PremiumStatus status, PremiumInfo? info);
 
-  // Premium prompt is only shown conditionally (e.g. the user hasn't dismissed
-  // it and it's been some time since the user started using the feature).
-  GetCanShowPremiumPrompt() => (bool can_show);
-  DismissPremiumPrompt();
-
   DeleteConversation(string id);
   RenameConversation(string id, string new_name);
 
-  // Send events to the UI
-  BindObserver(pending_remote<ServiceObserver> ui);
+  // Bind ability to send events to the UI and receive current state
+  BindObserver(pending_remote<ServiceObserver> ui) => (ServiceState state);
 
   // Bind specified Conversation for 2-way communication
   BindConversation(
@@ -332,7 +339,7 @@ interface Service {
 
 interface ServiceObserver {
   OnConversationListChanged(array<Conversation> conversations);
-  OnAgreementAccepted();
+  OnStateChanged(ServiceState state);
 };
 
 // Browser-side handler for general AI Chat UI functions, implemented
@@ -358,7 +365,9 @@ interface AIChatUIHandler {
   // This might be a no-op if the UI isn't closeable
   CloseUI();
 
-  SetChatUI(pending_remote<ChatUI> chat_ui);
+  // Provide a reference of the UI to the UI handler and get some
+  // initial constant state
+  SetChatUI(pending_remote<ChatUI> chat_ui) => (bool is_standalone);
 
   // Bind 2-way communication to the conversation related to the open page in
   // the current browser window. No binding will occur if this isn't a
@@ -380,8 +389,6 @@ interface AIChatUIHandler {
 
 // UI-side handler for whole AI Chat UI
 interface ChatUI {
-  // Initial Data
-  SetInitialData(bool is_standalone);
   // Notifies that the default conversation for the
   // panel has changed. e.g. Tab navigation with AIChat open in sidebar.
   OnNewDefaultConversation();
diff --git a/components/ai_chat/core/common/pref_names.cc b/components/ai_chat/core/common/pref_names.cc
index 87f3e3838ee7..0bb49c3eb447 100644
--- a/components/ai_chat/core/common/pref_names.cc
+++ b/components/ai_chat/core/common/pref_names.cc
@@ -19,6 +19,7 @@ void RegisterProfilePrefs(PrefRegistrySimple* registry) {
     registry->RegisterBooleanPref(kStorageEnabled, true);
     registry->RegisterBooleanPref(kBraveChatAutocompleteProviderEnabled, true);
     registry->RegisterBooleanPref(kUserDismissedPremiumPrompt, false);
+    registry->RegisterBooleanPref(kUserDismissedStorageNotice, false);
 #if BUILDFLAG(IS_ANDROID)
     registry->RegisterBooleanPref(kBraveChatSubscriptionActiveAndroid, false);
     registry->RegisterStringPref(kBraveChatPurchaseTokenAndroid, "");
diff --git a/components/ai_chat/core/common/pref_names.h b/components/ai_chat/core/common/pref_names.h
index 1499a56d775d..1222461b4bd4 100644
--- a/components/ai_chat/core/common/pref_names.h
+++ b/components/ai_chat/core/common/pref_names.h
@@ -28,6 +28,8 @@ inline constexpr char kBraveChatPremiumCredentialCache[] =
     "brave.ai_chat.premium_credential_cache";
 inline constexpr char kUserDismissedPremiumPrompt[] =
     "brave.ai_chat.user_dismissed_premium_prompt";
+inline constexpr char kUserDismissedStorageNotice[] =
+    "brave.ai_chat.user_dismissed_storage_notice";
 inline constexpr char kBraveChatP3AOmniboxOpenWeeklyStorage[] =
     "brave.ai_chat.p3a_omnibox_open";
 inline constexpr char kBraveChatP3AOmniboxAutocompleteWeeklyStorage[] =
diff --git a/components/ai_chat/resources/page/ai_chat_ui.html b/components/ai_chat/resources/page/ai_chat_ui.html
index 99c9bf799961..4da2718b97b5 100644
--- a/components/ai_chat/resources/page/ai_chat_ui.html
+++ b/components/ai_chat/resources/page/ai_chat_ui.html
@@ -16,7 +16,7 @@
     <style>
       @media (prefers-color-scheme: dark) {
         body {
-          background-color: rgb(13, 18, 20); /* --leo-color-container-background optimization */
+          background-color: #111114; /* --leo-color-container-background optimization */
         }
       }
       #mountPoint {
@@ -29,7 +29,7 @@
     </style>
   </head>
   <body>
-    <script type="module" src="chat_ui.bundle.js"></script>
     <div id="mountPoint"></div>
+    <script src="chat_ui.bundle.js"></script>
   </body>
 </html>
diff --git a/components/ai_chat/resources/page/api/index.ts b/components/ai_chat/resources/page/api/index.ts
index 345029bb1008..572dc6656b73 100644
--- a/components/ai_chat/resources/page/api/index.ts
+++ b/components/ai_chat/resources/page/api/index.ts
@@ -4,38 +4,150 @@
  * You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 import * as mojom from 'gen/brave/components/ai_chat/core/common/mojom/ai_chat.mojom.m.js'
-
-// Provide access to all the generated types
 export * from 'gen/brave/components/ai_chat/core/common/mojom/ai_chat.mojom.m.js'
+import { debounce } from '$web-common/debounce'
+import { loadTimeData } from '$web-common/loadTimeData'
+
+// State that is owned by this class because it is global to the UI
+// (loadTimeData / Service / UIHandler).
+export type State = mojom.ServiceState & {
+  initialized: boolean
+  isStandalone?: boolean
+  visibleConversations: mojom.Conversation[]
+  isPremiumStatusFetching: boolean
+  isPremiumUser: boolean
+  isPremiumUserDisconnected: boolean
+  isMobile: boolean
+  isHistoryFeatureEnabled: boolean
+  allActions: mojom.ActionGroup[]
+}
+
+export const defaultUIState: State = {
+  initialized: false,
+  visibleConversations: [],
+  hasAcceptedAgreement: false,
+  isStoragePrefEnabled: false,
+  isPremiumStatusFetching: true,
+  isPremiumUser: false,
+  isPremiumUserDisconnected: false,
+  isStorageNoticeDismissed: false,
+  canShowPremiumPrompt: false,
+  isMobile: loadTimeData.getBoolean('isMobile'),
+  isHistoryFeatureEnabled: loadTimeData.getBoolean('isHistoryEnabled'),
+  allActions: [],
+}
+
+export type UIStateChangeEvent = CustomEvent<State>
 
 class API {
-  public Service: mojom.ServiceRemote
-  public Observer: mojom.ServiceObserverCallbackRouter
-  public UIHandler: mojom.AIChatUIHandlerRemote
-  public UIObserver: mojom.ChatUICallbackRouter
-  public isStandalone: boolean
+  public service: mojom.ServiceRemote
+  public observer: mojom.ServiceObserverCallbackRouter
+  public uiHandler: mojom.AIChatUIHandlerRemote
+  public uiObserver: mojom.ChatUICallbackRouter
+  public state: State = { ...defaultUIState }
+
+  private eventTarget = new EventTarget()
 
   constructor() {
     // Connect to service
-    this.Service = mojom.Service.getRemote()
-    this.Observer = new mojom.ServiceObserverCallbackRouter()
-    this.Service.bindObserver(this.Observer.$.bindNewPipeAndPassRemote())
+    this.service = mojom.Service.getRemote()
+    this.observer = new mojom.ServiceObserverCallbackRouter()
     // Connect to platform UI handler
-    this.UIHandler = mojom.AIChatUIHandler.getRemote()
-    this.UIObserver = new mojom.ChatUICallbackRouter()
-    this.UIObserver.setInitialData.addListener((isStandalone: boolean) => {
-      this.isStandalone = isStandalone
+    this.uiHandler = mojom.AIChatUIHandler.getRemote()
+    this.uiObserver = new mojom.ChatUICallbackRouter()
+    this.initialize()
+    this.updateCurrentPremiumStatus()
+  }
+
+  async initialize() {
+    // Get any global UI state. We can do that here instead of React context
+    // to start as early as possible.
+    // Premium state separately because it takes longer to fetch and we don't
+    // need to wait for it.
+    const [
+      { state },
+      { isStandalone },
+      { conversations: visibleConversations },
+      { actionList: allActions },
+      premiumStatus
+    ] = await Promise.all([
+      this.service.bindObserver(this.observer.$.bindNewPipeAndPassRemote()),
+      this.uiHandler.setChatUI(this.uiObserver.$.bindNewPipeAndPassRemote()),
+      this.service.getVisibleConversations(),
+      this.service.getActionMenuList(),
+      this.getCurrentPremiumStatus()
+    ])
+    this.setPartialState({
+      ...state,
+      ...premiumStatus,
+      initialized: true,
+      isStandalone,
+      visibleConversations,
+      allActions
+    })
+
+    this.observer.onStateChanged.addListener((state: mojom.ServiceState) => {
+      this.setPartialState(state)
+    })
+
+    this.observer.onConversationListChanged.addListener(
+      (conversations: mojom.Conversation[]) => {
+        this.setPartialState({
+          visibleConversations: conversations
+        })
+      }
+    )
+
+    // Since there is no browser-side event for premium status changing,
+    // we should check often. And since purchase or login is performed in
+    // a separate WebContents, we can check when focus is returned here.
+    window.addEventListener('focus', () => {
+      this.updateCurrentPremiumStatus()
+    })
+
+    document.addEventListener('visibilitychange', (e) => {
+      if (document.visibilityState === 'visible') {
+        this.updateCurrentPremiumStatus()
+      }
     })
-    this.UIHandler.setChatUI(this.UIObserver.$.bindNewPipeAndPassRemote())
   }
-}
 
-let apiInstance: API
+  addStateChangeListener(callback: (event: UIStateChangeEvent) => void) {
+    this.eventTarget.addEventListener('uistatechange', callback)
+  }
+
+  removeStateChangeListener(callback: (event: UIStateChangeEvent) => void) {
+    this.eventTarget.removeEventListener('uistatechange', callback)
+  }
+
+  private dispatchDebouncedStateChange = debounce(() => {
+    console.debug('dispatching uistatechange event', {...this.state})
+    this.eventTarget.dispatchEvent(
+      new Event('uistatechange')
+    )
+  }, 0)
+
+  public setPartialState(partialState: Partial<State>) {
+    this.state = { ...this.state, ...partialState }
+    this.dispatchDebouncedStateChange()
+  }
+
+  private async getCurrentPremiumStatus() {
+    const { status } = await this.service.getPremiumStatus()
+    return {
+      isPremiumStatusFetching: false,
+      isPremiumUser: (status !== undefined && status !== mojom.PremiumStatus.Inactive),
+      isPremiumUserDisconnected: status === mojom.PremiumStatus.ActiveDisconnected
+    }
+  }
 
-export function setAPIForTesting(instance: API) {
-  apiInstance = instance
+  private async updateCurrentPremiumStatus() {
+    this.setPartialState(await this.getCurrentPremiumStatus())
+  }
 }
 
+let apiInstance: API
+
 export default function getAPI() {
   if (!apiInstance) {
     apiInstance = new API()
@@ -49,13 +161,13 @@ export function bindConversation(id: string | undefined) {
   let callbackRouter = new mojom.ConversationUICallbackRouter()
 
   if (id !== undefined) {
-    getAPI().Service.bindConversation(
+    getAPI().service.bindConversation(
       id,
       conversationHandler.$.bindNewPipeAndPassReceiver(),
       callbackRouter.$.bindNewPipeAndPassRemote()
     )
   } else {
-    getAPI().UIHandler.bindRelatedConversation(
+    getAPI().uiHandler.bindRelatedConversation(
       conversationHandler.$.bindNewPipeAndPassReceiver(),
       callbackRouter.$.bindNewPipeAndPassRemote()
     )
@@ -68,11 +180,12 @@ export function bindConversation(id: string | undefined) {
 
 export function newConversation() {
   let conversationHandler: mojom.ConversationHandlerRemote =
-      new mojom.ConversationHandlerRemote()
+    new mojom.ConversationHandlerRemote()
   let callbackRouter = new mojom.ConversationUICallbackRouter()
-  getAPI().UIHandler.newConversation(
-      conversationHandler.$.bindNewPipeAndPassReceiver(),
-      callbackRouter.$.bindNewPipeAndPassRemote())
+  getAPI().uiHandler.newConversation(
+    conversationHandler.$.bindNewPipeAndPassReceiver(),
+    callbackRouter.$.bindNewPipeAndPassRemote()
+  )
   return {
     conversationHandler,
     callbackRouter
diff --git a/components/ai_chat/resources/page/chat_ui.tsx b/components/ai_chat/resources/page/chat_ui.tsx
index 2ec5630d3cc6..0bc398a3d0cf 100644
--- a/components/ai_chat/resources/page/chat_ui.tsx
+++ b/components/ai_chat/resources/page/chat_ui.tsx
@@ -5,25 +5,26 @@
 
 import * as React from 'react'
 import { createRoot } from 'react-dom/client'
-import { initLocale } from 'brave-ui'
 import { setIconBasePath } from '@brave/leo/react/icon'
-
-import '$web-components/app.global.scss'
 import '@brave/leo/tokens/css/variables.css'
-
+import '$web-components/app.global.scss'
 import '$web-common/defaultTrustedTypesPolicy'
-import { loadTimeData } from '$web-common/loadTimeData'
 import BraveCoreThemeProvider from '$web-common/BraveCoreThemeProvider'
+import getAPI from './api'
 import { AIChatContextProvider, useAIChat } from './state/ai_chat_context'
-import Main from './components/main'
 import {
   ConversationContextProvider
 } from './state/conversation_context'
+import Main from './components/main'
 import FullScreen from './components/full_page'
+import Loading from './components/loading'
 import { ActiveChatProviderFromUrl } from './state/active_chat_context'
 
 setIconBasePath('chrome-untrusted://resources/brave-icons')
 
+// Make sure we're fetching data as early as possible
+getAPI()
+
 function App() {
   React.useEffect(() => {
     document.getElementById('mountPoint')?.classList.add('loaded')
@@ -45,8 +46,8 @@ function App() {
 function Content() {
   const aiChatContext = useAIChat()
 
-  if (aiChatContext.isStandalone === undefined) {
-    return <div>loading...</div>
+  if (!aiChatContext.initialized || aiChatContext.isStandalone === undefined) {
+    return <Loading />
   }
 
   if (!aiChatContext.isStandalone) {
@@ -57,7 +58,6 @@ function Content() {
 }
 
 function initialize() {
-  initLocale(loadTimeData.data_)
   const root = createRoot(document.getElementById('mountPoint')!)
   root.render(<App />)
 }
diff --git a/components/ai_chat/resources/page/components/code_block/index.tsx b/components/ai_chat/resources/page/components/code_block/index.tsx
index c62daeacfb82..50b89f054ed9 100644
--- a/components/ai_chat/resources/page/components/code_block/index.tsx
+++ b/components/ai_chat/resources/page/components/code_block/index.tsx
@@ -3,18 +3,17 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at https://mozilla.org/MPL/2.0/. */
 
-import * as React from 'react'
-
-import styles from './style.module.scss'
-import { getLocale } from '@brave/brave-ui'
 import Button from '@brave/leo/react/button'
 import Icon from '@brave/leo/react/icon'
+import * as React from 'react'
 import { Light as SyntaxHighlighter } from 'react-syntax-highlighter'
 import hljsStyle from 'react-syntax-highlighter/dist/esm/styles/hljs/ir-black'
 import cpp from 'react-syntax-highlighter/dist/esm/languages/hljs/cpp'
 import javascript from 'react-syntax-highlighter/dist/esm/languages/hljs/javascript'
 import python from 'react-syntax-highlighter/dist/esm/languages/hljs/python'
 import json from 'react-syntax-highlighter/dist/esm/languages/hljs/json'
+import { getLocale } from '$web-common/locale'
+import styles from './style.module.scss'
 
 SyntaxHighlighter.registerLanguage('cpp', cpp)
 SyntaxHighlighter.registerLanguage('javascript', javascript)
diff --git a/components/ai_chat/resources/page/components/conversations_list/index.tsx b/components/ai_chat/resources/page/components/conversations_list/index.tsx
index d6dea6e0a247..29bd4d900737 100644
--- a/components/ai_chat/resources/page/components/conversations_list/index.tsx
+++ b/components/ai_chat/resources/page/components/conversations_list/index.tsx
@@ -12,6 +12,8 @@ import { useAIChat } from '../../state/ai_chat_context'
 import { getLocale } from '$web-common/locale'
 import getAPI from '../../api'
 import { useConversation } from '../../state/conversation_context'
+import Alert from '@brave/leo/react/alert'
+import Button from '@brave/leo/react/button'
 
 interface SimpleInputProps {
   text?: string
@@ -116,6 +118,26 @@ export default function ConversationsList(props: ConversationsListProps) {
     <>
       <div className={styles.scroller}>
         <nav className={styles.nav}>
+          {!aiChatContext.isStoragePrefEnabled &&
+          <Alert type='notice'>
+            <Icon name='history' slot='icon' />
+            <div slot='title'>{getLocale('noticeConversationHistoryTitleDisabledPref')}</div>
+            {getLocale('noticeConversationHistoryDisabledPref')}
+            <div slot='actions'>
+              <Button kind='outline' onClick={aiChatContext.enableStoragePref}>
+                {getLocale('noticeConversationHistoryDisabledPrefButton')}
+              </Button>
+            </div>
+          </Alert>
+          }
+          {aiChatContext.isStoragePrefEnabled && aiChatContext.visibleConversations.length === 0 &&
+          <Alert type='notice'>
+            <Icon name='history' slot='icon' />
+            <div slot='title'>{getLocale('menuConversationHistory')}</div>
+            {getLocale('noticeConversationHistoryEmpty')}
+          </Alert>
+          }
+          {aiChatContext.visibleConversations.length > 0 &&
           <ol>
             {aiChatContext.visibleConversations.map(item => {
               return (
@@ -137,7 +159,7 @@ export default function ConversationsList(props: ConversationsListProps) {
                           onBlur={() => aiChatContext.setEditingConversationId(null)}
                           onSubmit={(value) => {
                             aiChatContext.setEditingConversationId(null)
-                            getAPI().Service.renameConversation(item.uuid, value)
+                            getAPI().service.renameConversation(item.uuid, value)
                           }}
                         />
                       </div>
@@ -146,7 +168,7 @@ export default function ConversationsList(props: ConversationsListProps) {
                         title={item.title || getLocale('conversationListUntitled')}
                         description=''
                         onEditTitle={() => aiChatContext.setEditingConversationId(item.uuid)}
-                        onDelete={() => getAPI().Service.deleteConversation(item.uuid)}
+                        onDelete={() => getAPI().service.deleteConversation(item.uuid)}
                       />
                     )}
                   </a>
@@ -154,6 +176,7 @@ export default function ConversationsList(props: ConversationsListProps) {
               )
             })}
           </ol>
+          }
         </nav>
       </div>
     </>
diff --git a/components/ai_chat/resources/page/components/conversations_list/style.module.scss b/components/ai_chat/resources/page/components/conversations_list/style.module.scss
index 28c31d18f54b..971ee94d0a2e 100644
--- a/components/ai_chat/resources/page/components/conversations_list/style.module.scss
+++ b/components/ai_chat/resources/page/components/conversations_list/style.module.scss
@@ -11,6 +11,11 @@
   max-width: 680px;
   margin: 0 auto;
 
+  // In case we have multiple notices or notices + conversations
+  display: flex;
+  flex-direction: column;
+  gap: var(--leo-spacing-m);
+
   ol {
     list-style: none;
     padding: 0;
diff --git a/components/ai_chat/resources/page/components/feature_button_menu/index.tsx b/components/ai_chat/resources/page/components/feature_button_menu/index.tsx
index c8fc9cda745b..3030b0bbdbd2 100644
--- a/components/ai_chat/resources/page/components/feature_button_menu/index.tsx
+++ b/components/ai_chat/resources/page/components/feature_button_menu/index.tsx
@@ -125,7 +125,7 @@ export default function FeatureMenu(props: Props) {
             </div>
           </div>
         </leo-menu-item>
-        <leo-menu-item onClick={() => getAPI().Service.deleteConversation(conversationContext.conversationUuid!)}>
+        <leo-menu-item onClick={() => getAPI().service.deleteConversation(conversationContext.conversationUuid!)}>
           <div className={classnames(
             styles.menuItemWithIcon,
             styles.menuItemMainItem
@@ -170,7 +170,7 @@ export default function FeatureMenu(props: Props) {
           </div>
         </leo-menu-item>
       )}
-      {!aiChatContext.isStandalone && aiChatContext.isHistoryEnabled && (
+      {!aiChatContext.isStandalone && aiChatContext.isHistoryFeatureEnabled && (
         <>
           <leo-menu-item
             onClick={() => props.setIsConversationsListOpen?.(true)}
diff --git a/components/ai_chat/resources/page/components/full_page/index.tsx b/components/ai_chat/resources/page/components/full_page/index.tsx
index 58d6be95d566..3345615a7a77 100644
--- a/components/ai_chat/resources/page/components/full_page/index.tsx
+++ b/components/ai_chat/resources/page/components/full_page/index.tsx
@@ -8,6 +8,7 @@ import Button from '@brave/leo/react/button'
 import Icon from '@brave/leo/react/icon'
 import useMediaQuery from '$web-common/useMediaQuery'
 import { useAIChat } from '../../state/ai_chat_context'
+import { useConversation } from '../../state/conversation_context'
 import ConversationsList from '../conversations_list'
 import { NavigationHeader } from '../header'
 import Main from '../main'
@@ -17,6 +18,7 @@ import { useActiveChat } from '../../state/active_chat_context'
 export default function FullScreen() {
   const aiChatContext = useAIChat()
   const { createNewConversation } = useActiveChat()
+  const conversationContext = useConversation()
 
   const asideAnimationRef = React.useRef<Animation | null>()
   const controllerRef = React.useRef(new AbortController())
@@ -24,9 +26,12 @@ export default function FullScreen() {
   const [isNavigationCollapsed, setIsNavigationCollapsed] = React.useState(isSmall)
   const [isNavigationRendered, setIsNavigationRendered] = React.useState(!isSmall)
 
+  const canStartNewConversation = aiChatContext.hasAcceptedAgreement &&
+    !!conversationContext.conversationHistory.length
+
   const initAsideAnimation = React.useCallback((node: HTMLElement | null) => {
     if (!node) return
-    const open = { width: '340px', opacity: 1 }
+    const open = { width: 'var(--navigation-width)', opacity: 1 }
     const close = { width: '0px', opacity: 0 }
     const animationOptions: KeyframeAnimationOptions = {
       duration: 200,
@@ -100,7 +105,7 @@ export default function FullScreen() {
           >
             <Icon name={asideAnimationRef.current?.playbackRate === 1 ? 'sidenav-expand' : 'sidenav-collapse'} />
           </Button>
-          {!isNavigationRendered && (
+          {!isNavigationRendered && canStartNewConversation && (
             <>
               <Button
                 fab
@@ -117,10 +122,10 @@ export default function FullScreen() {
           className={styles.aside}
         >
           {isNavigationRendered && (
-            <>
+            <div className={styles.nav}>
               <NavigationHeader />
               <ConversationsList setIsConversationsListOpen={setIsNavigationCollapsed} />
-            </>
+            </div>
           )}
         </aside>
       </div>
diff --git a/components/ai_chat/resources/page/components/full_page/style.module.scss b/components/ai_chat/resources/page/components/full_page/style.module.scss
index 552474411e1c..5bf9cbb3ab19 100644
--- a/components/ai_chat/resources/page/components/full_page/style.module.scss
+++ b/components/ai_chat/resources/page/components/full_page/style.module.scss
@@ -27,7 +27,8 @@
 }
 
 .aside {
-  width: 340px;
+  --navigation-width: 340px;
+  width: var(--navigation-width);
   height: 100%;
   overflow: hidden;
   background: var(--leo-color-page-background);
@@ -41,6 +42,12 @@
   padding-top: var(--top-padding);
 }
 
+.nav {
+  // Ensure navigation content always stays at full-width even when animation
+  // is decreasing the width of the parent
+  width: var(--navigation-width);
+}
+
 .left {
   min-width: 52px;
 }
diff --git a/components/ai_chat/resources/page/components/header/index.tsx b/components/ai_chat/resources/page/components/header/index.tsx
index 77e46c2ef5f3..031ec40e8e35 100644
--- a/components/ai_chat/resources/page/components/header/index.tsx
+++ b/components/ai_chat/resources/page/components/header/index.tsx
@@ -38,16 +38,17 @@ export const ConversationHeader = React.forwardRef(function (props: FeatureButto
 
   const activeConversation = aiChatContext.visibleConversations.find(c => c.uuid === conversationContext.conversationUuid)
   const showTitle = !isTabAssociated || aiChatContext.isStandalone
-  const canShowFullScreenButton = aiChatContext.isHistoryEnabled && !aiChatContext.isMobile && !aiChatContext.isStandalone && conversationContext.conversationUuid
+  const canShowFullScreenButton = aiChatContext.isHistoryFeatureEnabled && !aiChatContext.isMobile && !aiChatContext.isStandalone && conversationContext.conversationUuid
 
   return (
     <div className={styles.header} ref={ref}>
       {showTitle ? (
-        <div className={styles.pageTitle}>
+        <div className={styles.conversationTitle}>
           {!isTabAssociated && !aiChatContext.isStandalone && <Button
             kind='plain-faint'
             fab
             onClick={() => location.href = tabAssociatedChatId}
+            title={getLocale('goBackToActiveConversationButton')}
           >
             <Icon name='arrow-left' />
           </Button>}
@@ -66,7 +67,7 @@ export const ConversationHeader = React.forwardRef(function (props: FeatureButto
                 title={newChatButtonLabel}
                 onClick={createNewConversation}
               >
-                <Icon name={aiChatContext.isHistoryEnabled ? 'edit-box' : 'erase'} />
+                <Icon name={aiChatContext.isHistoryFeatureEnabled ? 'edit-box' : 'erase'} />
               </Button>
             )}
             {canShowFullScreenButton &&
@@ -75,7 +76,7 @@ export const ConversationHeader = React.forwardRef(function (props: FeatureButto
                 kind='plain-faint'
                 aria-label={openFullPageButtonLabel}
                 title={openFullPageButtonLabel}
-                onClick={() => getAPI().UIHandler.openConversationFullPage(conversationContext.conversationUuid!)}
+                onClick={() => getAPI().uiHandler.openConversationFullPage(conversationContext.conversationUuid!)}
               >
                 <Icon name='expand' />
               </Button>}
@@ -87,7 +88,7 @@ export const ConversationHeader = React.forwardRef(function (props: FeatureButto
                 aria-label={closeButtonLabel}
                 title={closeButtonLabel}
                 className={styles.closeButton}
-                onClick={() => getAPI().UIHandler.closeUI()}
+                onClick={() => getAPI().uiHandler.closeUI()}
               >
                 <Icon name='close' />
               </Button>
diff --git a/components/ai_chat/resources/page/components/header/style.module.scss b/components/ai_chat/resources/page/components/header/style.module.scss
index aca3e58d418c..a127d901d6f5 100644
--- a/components/ai_chat/resources/page/components/header/style.module.scss
+++ b/components/ai_chat/resources/page/components/header/style.module.scss
@@ -64,9 +64,10 @@
 }
 
 .conversationTitle {
+  margin-right: var(--leo-spacing-m);
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: var(--leo-spacing-m);
   overflow: hidden;
 }
 
diff --git a/components/ai_chat/resources/page/components/loading/index.tsx b/components/ai_chat/resources/page/components/loading/index.tsx
new file mode 100644
index 000000000000..db9e82b1fd50
--- /dev/null
+++ b/components/ai_chat/resources/page/components/loading/index.tsx
@@ -0,0 +1,16 @@
+// Copyright (c) 2024 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// You can obtain one at https://mozilla.org/MPL/2.0/.
+
+import * as React from 'react'
+import ProgressRing from '@brave/leo/react/progressRing'
+import styles from './loading.module.scss'
+
+export default function Loading() {
+  return (
+    <div className={styles.loading}>
+      <ProgressRing />
+    </div>
+  )
+}
diff --git a/components/ai_chat/resources/page/components/loading/loading.module.scss b/components/ai_chat/resources/page/components/loading/loading.module.scss
new file mode 100644
index 000000000000..bc0ba682a92c
--- /dev/null
+++ b/components/ai_chat/resources/page/components/loading/loading.module.scss
@@ -0,0 +1,24 @@
+// Copyright (c) 2024 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// You can obtain one at https://mozilla.org/MPL/2.0/.
+
+.loading {
+  --leo-progressring-size: 60px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  // Only show if page has been loading for more than x milliseconds
+  animation: .24s ease-out 1s forwards fadeIn;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
diff --git a/components/ai_chat/resources/page/components/main/index.tsx b/components/ai_chat/resources/page/components/main/index.tsx
index a2ddc82f0cc3..4cb8d726105e 100644
--- a/components/ai_chat/resources/page/components/main/index.tsx
+++ b/components/ai_chat/resources/page/components/main/index.tsx
@@ -18,6 +18,7 @@ import ErrorConversationEnd from '../alerts/error_conversation_end'
 import ErrorInvalidEndpointURL from '../alerts/error_invalid_endpoint_url'
 import ErrorRateLimit from '../alerts/error_rate_limit'
 import LongConversationInfo from '../alerts/long_conversation_info'
+import NoticeConversationStorage from '../notices/notice_conversation_storage'
 import WarningPremiumDisconnected from '../alerts/warning_premium_disconnected'
 import ConversationEntries from '../conversation_entries'
 import ConversationsList from '../conversations_list'
@@ -50,6 +51,7 @@ function Main() {
     !aiChatContext.isPremiumStatusFetching && // Avoid flash of content
     !shouldShowPremiumSuggestionForModel && // Don't show 2 premium prompts
     !conversationContext.apiHasError && // Don't show premium prompt and errors (rate limit error has its own premium prompt suggestion)
+    !aiChatContext.isStorageNoticeDismissed && // Don't show premium prompt and storage notice
     aiChatContext.canShowPremiumPrompt &&
     conversationContext.associatedContentInfo === null && // SiteInfo request has finished and this is a standalone conversation
     !aiChatContext.isPremiumUser
@@ -192,61 +194,69 @@ function Main() {
         onScroll={handleScroll}
       >
         <AlertCenter position='top-left' className={styles.alertCenter} />
-        <div className={styles.conversationContent}
-          ref={conversationContentElement}>
-          {aiChatContext.hasAcceptedAgreement && <>
-            <ModelIntro />
-            <ConversationEntries
-              onLastElementHeightChange={handleLastElementHeightChange}
-            />
-          </>}
+        <div
+          className={styles.conversationContent}
+          ref={conversationContentElement}
+        >
+          {aiChatContext.hasAcceptedAgreement && (
+            <>
+              <ModelIntro />
+              <ConversationEntries
+                onLastElementHeightChange={handleLastElementHeightChange}
+              />
+            </>
+          )}
           {currentErrorElement && (
             <div className={styles.promptContainer}>{currentErrorElement}</div>
           )}
-          {
-            shouldShowPremiumSuggestionForModel && (
-              <div className={styles.promptContainer}>
-                <PremiumSuggestion
-                  title={getLocale('unlockPremiumTitle')}
-                  secondaryActionButton={
-                    <Button
-                      kind='plain-faint'
-                      onClick={() => conversationContext.switchToBasicModel()}
-                    >
-                      {getLocale('switchToBasicModelButtonLabel')}
-                    </Button>
-                  }
-                />
-              </div>
-            )
-          }
-          {
-            shouldShowPremiumSuggestionStandalone && (
-              <div className={styles.promptContainer}>
-                <PremiumSuggestion
-                  title={getLocale('unlockPremiumTitle')}
-                  secondaryActionButton={
-                    <Button
-                      kind='plain-faint'
-                      onClick={() => aiChatContext.dismissPremiumPrompt()}
-                    >
-                      {getLocale('dismissButtonLabel')}
-                    </Button>
-                  }
-                />
-              </div>
-            )
-          }
-          {aiChatContext.isPremiumUserDisconnected && (!conversationContext.currentModel || isLeoModel(conversationContext.currentModel)) &&
+          {aiChatContext.hasAcceptedAgreement && !aiChatContext.isStorageNoticeDismissed && (
+            <div className={styles.promptContainer}>
+              <NoticeConversationStorage />
+            </div>
+          )}
+          {shouldShowPremiumSuggestionForModel && (
+            <div className={styles.promptContainer}>
+              <PremiumSuggestion
+                title={getLocale('unlockPremiumTitle')}
+                secondaryActionButton={
+                  <Button
+                    kind='plain-faint'
+                    onClick={() => conversationContext.switchToBasicModel()}
+                  >
+                    {getLocale('switchToBasicModelButtonLabel')}
+                  </Button>
+                }
+              />
+            </div>
+          )}
+          {shouldShowPremiumSuggestionStandalone && (
+            <div className={styles.promptContainer}>
+              <PremiumSuggestion
+                title={getLocale('unlockPremiumTitle')}
+                secondaryActionButton={
+                  <Button
+                    kind='plain-faint'
+                    onClick={() => aiChatContext.dismissPremiumPrompt()}
+                  >
+                    {getLocale('dismissButtonLabel')}
+                  </Button>
+                }
+              />
+            </div>
+          )}
+          {aiChatContext.isPremiumUserDisconnected && (!conversationContext.currentModel || isLeoModel(conversationContext.currentModel)) && (
             <div className={styles.promptContainer}>
               <WarningPremiumDisconnected />
             </div>
-          }
-          {conversationContext.shouldShowLongConversationInfo &&
+          )}
+          {conversationContext.shouldShowLongConversationInfo && (
             <div className={styles.promptContainer}>
               <LongConversationInfo />
-            </div>}
-          {!aiChatContext.hasAcceptedAgreement && !conversationContext.conversationHistory.length && <WelcomeGuide />}
+            </div>
+          )}
+          {!aiChatContext.hasAcceptedAgreement && !conversationContext.conversationHistory.length && (
+            <WelcomeGuide />
+          )}
         </div>
       </div>
       <div className={styles.input}>
diff --git a/components/ai_chat/resources/page/components/main/style.module.scss b/components/ai_chat/resources/page/components/main/style.module.scss
index e9001d0ffeff..5c0a20c6a4a9 100644
--- a/components/ai_chat/resources/page/components/main/style.module.scss
+++ b/components/ai_chat/resources/page/components/main/style.module.scss
@@ -4,6 +4,8 @@
 // you can obtain one at https://mozilla.org/MPL/2.0/.
 
 .main {
+  --conversation-content-margin: var(--leo-spacing-2xl);
+  --conversation-content-max-width: calc(680px + calc(var(--conversation-content-margin) * 2));
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -16,24 +18,23 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  max-width: 680px;
-  margin: 0 auto;
-  padding: 0 8px 8px 8px;
-}
-
-.conversationContent {
-  width: 100%;
-  max-width: 680px;
+  max-width: var(--conversation-content-max-width);
   margin: 0 auto;
+  padding: 0
+           var(--conversation-content-margin)
+           var(--leo-spacing-m)
+           var(--conversation-content-margin);
 }
 
 .scroller {
+  --scrollbar-width: 6px;
   overflow: auto;
+  scrollbar-gutter: stable;
   height: 100%;
-  padding-bottom: 16px;
+  padding-bottom: var(--leo-spacing-xl);
 
   &::-webkit-scrollbar {
-    width: 6px;
+    width: var(--scrollbar-width);
   }
 
   &::-webkit-scrollbar-thumb {
@@ -42,6 +43,19 @@
   }
 }
 
+.conversationContent {
+  margin: 0 auto;
+  width: 100%;
+  max-width: var(--conversation-content-max-width);
+  // Adjust padding to account for scrollbar width so content lines up with
+  // input area which is outside of the scroller.
+  padding:
+    0
+    calc(var(--conversation-content-margin) - var(--scrollbar-width) / 2)
+    0
+    calc(var(--conversation-content-margin) + var(--scrollbar-width) / 2);
+}
+
 .flushBottom {
   display: flex;
   flex-direction: column;
@@ -50,7 +64,7 @@
 }
 
 .header {
-  padding: 8px 16px;
+  padding: var(--leo-spacing-m) var(--leo-spacing-xl);
   border-bottom: 1px solid var(--leo-color-divider-subtle);
   display: flex;
   align-items: center;
@@ -96,7 +110,8 @@
 }
 
 .promptContainer {
-  margin: 24px;
+  margin: var(--conversation-content-margin) 0;
+  container-type: inline-size;
 }
 
 .badgePremium {
@@ -139,6 +154,6 @@
   min-height: 60px;
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--leo-spacing-m);
   border-bottom: 1px solid var(--leo-color-divider-subtle);
 }
diff --git a/components/ai_chat/resources/page/components/notices/conversation_storage.svg b/components/ai_chat/resources/page/components/notices/conversation_storage.svg
new file mode 100644
index 000000000000..b4dba713b800
--- /dev/null
+++ b/components/ai_chat/resources/page/components/notices/conversation_storage.svg
@@ -0,0 +1,31 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 225 145">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M156.13 3.8c-.48 0-.94.34-1.05.82l-.22.94c-.2.71-.76 1.28-1.46 1.46l-.94.23a1.1 1.1 0 0 0-.83 1.05c0 .48.34.94.83 1.04l.94.23c.7.19 1.27.75 1.46 1.46l.22.94a1.08 1.08 0 0 0 2.1 0l.22-.94c.19-.7.75-1.27 1.46-1.46l.94-.23c.48-.11.83-.56.83-1.04 0-.49-.35-.95-.83-1.05l-.94-.23a2.08 2.08 0 0 1-1.46-1.46l-.22-.94a1.1 1.1 0 0 0-1.05-.82Zm-.3 1.01c0-.15.16-.22.3-.22.14 0 .26.07.3.22l.22.94a2.77 2.77 0 0 0 2.02 2.03l.94.22c.16 0 .23.15.23.3 0 .14-.07.25-.23.29l-.94.22a2.77 2.77 0 0 0-2.02 2.03l-.23.94c0 .15-.15.22-.3.22a.29.29 0 0 1-.29-.22l-.22-.94a2.77 2.77 0 0 0-2.03-2.03l-.94-.22c-.15 0-.22-.15-.22-.3 0-.14.07-.25.22-.29l.95-.22a2.77 2.77 0 0 0 2.02-2.03l.22-.94ZM10.4 120.74a1.3 1.3 0 0 0-1.26.99l-.26 1.13a2.5 2.5 0 0 1-1.76 1.75l-1.13.27c-.58.14-.99.68-.99 1.26s.41 1.13 1 1.25l1.12.27c.85.23 1.53.9 1.76 1.75l.26 1.13c.15.58.68 1 1.26 1a1.3 1.3 0 0 0 1.26-1l.27-1.13a2.5 2.5 0 0 1 1.75-1.75l1.13-.27c.58-.14.99-.67.99-1.25a1.3 1.3 0 0 0-.99-1.26l-1.13-.27a2.5 2.5 0 0 1-1.75-1.75l-.27-1.13a1.31 1.31 0 0 0-1.26-1Zm-.35 1.22c0-.19.18-.27.35-.27.17 0 .31.08.35.27l.27 1.13a3.32 3.32 0 0 0 2.43 2.42l1.13.27c.19 0 .27.19.27.36 0 .17-.08.3-.27.35l-1.13.27a3.32 3.32 0 0 0-2.43 2.43l-.27 1.13c0 .18-.18.27-.35.27a.34.34 0 0 1-.35-.27l-.27-1.13a3.32 3.32 0 0 0-2.43-2.43l-1.13-.27c-.18 0-.27-.18-.27-.35 0-.17.09-.31.27-.36l1.13-.27a3.32 3.32 0 0 0 2.43-2.43l.27-1.13ZM220 129.74c-.49 0-.95.34-1.05.82l-.23.94c-.18.7-.75 1.27-1.46 1.46l-.94.22a1.1 1.1 0 0 0-.82 1.05c0 .49.34.95.82 1.05l.94.22c.71.2 1.28.76 1.46 1.46l.23.95a1.08 1.08 0 0 0 2.1 0l.22-.95c.19-.7.75-1.27 1.46-1.46l.94-.22a1.08 1.08 0 0 0 0-2.1l-.94-.22a2.07 2.07 0 0 1-1.46-1.46l-.23-.94a1.1 1.1 0 0 0-1.04-.82Zm-.3 1c0-.15.16-.22.3-.22.14 0 .25.07.29.23l.22.94a2.77 2.77 0 0 0 2.03 2.03l.94.22c.15 0 .23.15.23.3a.3.3 0 0 1-.23.29l-.94.22a2.77 2.77 0 0 0-2.03 2.03l-.22.94c0 .15-.15.22-.3.22-.14 0-.25-.07-.29-.22l-.22-.94a2.76 2.76 0 0 0-2.03-2.03l-.94-.22c-.15 0-.22-.16-.22-.3 0-.14.07-.26.22-.3l.94-.22a2.77 2.77 0 0 0 2.03-2.02l.22-.94ZM25.7.2c-.68 0-1.33.48-1.47 1.15l-.32 1.32a2.9 2.9 0 0 1-2.04 2.05l-1.32.31a1.52 1.52 0 0 0 0 2.93l1.32.32a2.9 2.9 0 0 1 2.04 2.04l.32 1.32a1.5 1.5 0 0 0 2.93 0l.31-1.32a2.9 2.9 0 0 1 2.05-2.04l1.32-.32a1.53 1.53 0 0 0 1.15-1.46c0-.68-.48-1.32-1.15-1.47l-1.32-.31a2.9 2.9 0 0 1-2.05-2.05l-.3-1.32A1.53 1.53 0 0 0 25.68.2Zm-.42 1.42c0-.22.22-.32.41-.32.2 0 .37.1.42.32l.3 1.32a3.87 3.87 0 0 0 2.84 2.83l1.32.31c.22 0 .32.22.32.42 0 .2-.1.36-.32.4l-1.32.32a3.87 3.87 0 0 0-2.83 2.84l-.31 1.32c0 .21-.22.3-.42.3-.2 0-.36-.09-.4-.3l-.32-1.32a3.87 3.87 0 0 0-2.84-2.84l-1.32-.31c-.21 0-.3-.22-.3-.41 0-.2.09-.37.3-.42l1.32-.3a3.87 3.87 0 0 0 2.84-2.84l.31-1.32Z" fill="#010101"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M164.1 109.53a.98.98 0 0 0-.94-.75.98.98 0 0 0-.94.75l-.34 1.35a3.36 3.36 0 0 1-2.47 2.47l-1.35.34a.98.98 0 0 0-.74.94c0 .46.31.83.74.95l1.35.34a3.36 3.36 0 0 1 2.47 2.46l.34 1.35c.12.43.48.75.94.75a1 1 0 0 0 .95-.75l.34-1.35a3.36 3.36 0 0 1 2.46-2.46l1.35-.34a.98.98 0 0 0 .75-.95.98.98 0 0 0-.75-.94l-1.35-.34a3.36 3.36 0 0 1-2.46-2.47l-.34-1.35Z" fill="white"/>
+  <path d="M163.16 120.72c-.57 0-1.06-.4-1.2-.94l-.35-1.35a3.06 3.06 0 0 0-2.25-2.26l-1.35-.34a1.26 1.26 0 0 1-.95-1.2c0-.58.4-1.07.95-1.21l1.35-.34a3.1 3.1 0 0 0 2.25-2.26l.35-1.35c.14-.54.63-.95 1.2-.95.58 0 1.06.4 1.2.95l.35 1.35c.29 1.11 1.14 2 2.26 2.26l1.35.34c.54.14.94.63.94 1.2 0 .58-.4 1.06-.94 1.2l-1.35.35c-1.12.29-2 1.14-2.26 2.26l-.34 1.35c-.15.54-.63.94-1.2.94Zm0-11.65c-.31 0-.6.23-.68.52l-.34 1.34a3.65 3.65 0 0 1-2.67 2.67l-1.35.34a.68.68 0 0 0-.5.68c0 .34.22.6.5.69l1.35.34a3.65 3.65 0 0 1 2.67 2.66l.34 1.35c.09.31.34.51.68.51a.7.7 0 0 0 .69-.51l.34-1.35a3.65 3.65 0 0 1 2.66-2.66l1.35-.34a.68.68 0 0 0 .51-.69.7.7 0 0 0-.51-.68l-1.35-.34a3.65 3.65 0 0 1-2.66-2.67l-.34-1.35a.68.68 0 0 0-.69-.5Z" fill="#010101"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M8.8 57.38a.66.66 0 0 0-.65-.5c-.33 0-.6.22-.65.5l-.24.93a2.39 2.39 0 0 1-1.71 1.72l-.94.23c-.27.1-.5.32-.5.66 0 .33.23.6.5.65l.94.24c.83.23 1.52.87 1.71 1.72l.24.93c.08.27.32.5.65.5.34 0 .6-.23.66-.5l.23-.93c.23-.83.87-1.53 1.72-1.72l.93-.24a.68.68 0 0 0 .51-.65c0-.34-.23-.6-.5-.66l-.94-.23a2.39 2.39 0 0 1-1.72-1.72l-.23-.93Zm187.36 60.66a1 1 0 0 0-.95.65l-.22.77a1.63 1.63 0 0 1-1.28 1.14l-.87.2a.85.85 0 0 0-.73.84c0 .42.3.72.73.84l.87.2c.65.15 1.16.57 1.28 1.14l.22.77c.08.38.47.65.95.65.47 0 .81-.27.95-.65l.21-.77c.18-.58.65-1.04 1.29-1.15l.86-.19a.85.85 0 0 0 .74-.84c0-.42-.3-.72-.74-.84l-.86-.2c-.65-.15-1.17-.57-1.29-1.14l-.21-.77c-.09-.38-.48-.65-.95-.65Zm-.22.8c0-.11.14-.19.26-.19s.22.08.26.2l.21.77c.22.8.91 1.42 1.82 1.61l.86.2c.14 0 .22.11.22.22 0 .1-.08.2-.22.23l-.86.2c-.91.19-1.6.8-1.82 1.6l-.21.77c0 .13-.14.2-.26.2a.27.27 0 0 1-.26-.2l-.22-.77c-.21-.8-.9-1.42-1.8-1.6l-.88-.2c-.13 0-.21-.12-.21-.23 0-.1.08-.2.21-.23l.87-.19c.9-.2 1.6-.8 1.81-1.61l.22-.77Zm-26.32-99.75a.9.9 0 0 0-.84.65l-.2.77a1.52 1.52 0 0 1-1.14 1.14l-.77.2c-.38.07-.65.42-.65.84s.27.72.65.84l.77.2a1.5 1.5 0 0 1 1.15 1.14l.19.77c.07.38.42.65.84.65s.72-.27.84-.65l.2-.77a1.5 1.5 0 0 1 1.14-1.15l.77-.19c.39-.07.65-.42.65-.84s-.26-.72-.65-.84l-.77-.2a1.52 1.52 0 0 1-1.14-1.14l-.2-.77c-.07-.38-.42-.65-.84-.65Zm-.23.8c0-.11.12-.19.23-.19.11 0 .2.08.23.2l.2.77c.19.8.8 1.42 1.6 1.6l.78.2c.12 0 .19.12.19.23 0 .1-.07.2-.2.23l-.76.2c-.81.18-1.42.8-1.62 1.6l-.19.77c0 .13-.12.2-.23.2-.1 0-.2-.07-.23-.2l-.19-.77c-.2-.8-.8-1.42-1.61-1.6l-.77-.2c-.12 0-.2-.12-.2-.23 0-.1.08-.2.2-.23l.77-.2c.8-.18 1.42-.8 1.61-1.6l.2-.77Z" fill="#010101"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M106.96 127.63a1.04 1.04 0 0 0-1-.77c-.45 0-.87.3-1 .77l-.34 1.38a3.46 3.46 0 0 1-2.56 2.55l-1.38.35a1.04 1.04 0 0 0 0 2l1.38.34c1.26.3 2.26 1.3 2.56 2.56l.35 1.38c.12.45.54.76 1 .76.45 0 .87-.3.99-.76l.35-1.38a3.46 3.46 0 0 1 2.55-2.56l1.38-.35c.46-.12.77-.54.77-1 0-.45-.3-.87-.77-.99l-1.38-.35a3.46 3.46 0 0 1-2.55-2.55l-.35-1.38Z" fill="white"/>
+  <path d="M105.97 139.23a1.3 1.3 0 0 1-1.26-1l-.34-1.38a3.3 3.3 0 0 0-2.37-2.36l-1.38-.35a1.3 1.3 0 0 1-1-1.26c0-.6.43-1.1 1-1.26l1.38-.34a3.3 3.3 0 0 0 2.37-2.37l.34-1.38c.16-.57.65-1 1.26-1s1.1.43 1.26 1l.35 1.38a3.3 3.3 0 0 0 2.36 2.37l1.38.34c.58.16 1 .65 1 1.26s-.42 1.1-1 1.26l-1.38.35a3.3 3.3 0 0 0-2.36 2.36l-.35 1.38c-.15.58-.65 1-1.26 1Zm0-12.1a.69.69 0 0 0-.68.55l-.35 1.38a3.81 3.81 0 0 1-2.78 2.78l-1.38.35a.74.74 0 0 0-.54.68c0 .3.23.61.54.68l1.38.35a3.81 3.81 0 0 1 2.78 2.79l.35 1.38c.07.3.38.53.68.53.3 0 .61-.22.69-.53l.34-1.38a3.81 3.81 0 0 1 2.79-2.79l1.38-.35c.3-.07.54-.38.54-.68 0-.3-.23-.61-.54-.68l-1.38-.35a3.81 3.81 0 0 1-2.79-2.78l-.34-1.38a.74.74 0 0 0-.69-.54Z" fill="#010101"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M123.24 7.7a1.2 1.2 0 0 0-1.15-.88c-.53 0-1.02.34-1.16.89l-.4 1.6a4.01 4.01 0 0 1-2.96 2.96l-1.6.4a1.2 1.2 0 0 0-.89 1.15c0 .53.35 1.02.9 1.16l1.6.4a4.01 4.01 0 0 1 2.95 2.96l.4 1.6c.14.53.63.89 1.16.89.53 0 1.01-.35 1.15-.9l.4-1.59a4.01 4.01 0 0 1 2.97-2.96l1.6-.4c.52-.14.88-.63.88-1.16 0-.53-.34-1.01-.88-1.15l-1.6-.4a4.01 4.01 0 0 1-2.96-2.97l-.4-1.6Z" fill="white"/>
+  <path d="M122.1 21.2c-.7 0-1.28-.48-1.46-1.15l-.4-1.6a3.82 3.82 0 0 0-2.74-2.74l-1.6-.4a1.51 1.51 0 0 1-1.15-1.46c0-.7.48-1.28 1.15-1.46l1.6-.4a3.82 3.82 0 0 0 2.74-2.74l.4-1.6c.18-.67.75-1.15 1.46-1.15s1.28.48 1.46 1.15l.4 1.6a3.82 3.82 0 0 0 2.74 2.74l1.6.4c.67.18 1.16.75 1.16 1.46 0 .7-.49 1.28-1.16 1.46l-1.6.4a3.82 3.82 0 0 0-2.73 2.74l-.4 1.6a1.52 1.52 0 0 1-1.47 1.15Zm0-14.02a.8.8 0 0 0-.79.62l-.4 1.6a4.42 4.42 0 0 1-3.23 3.23l-1.6.4a.86.86 0 0 0-.62.8c0 .34.26.7.62.79l1.6.4c1.6.4 2.84 1.64 3.23 3.22l.4 1.6c.08.35.44.63.8.63.34 0 .7-.27.78-.63l.4-1.6a4.42 4.42 0 0 1 3.23-3.22l1.6-.4a.86.86 0 0 0 .63-.8c0-.34-.27-.7-.63-.79l-1.6-.4a4.42 4.42 0 0 1-3.22-3.23l-.4-1.6a.86.86 0 0 0-.8-.62Z" fill="#010101"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M25.7 78.9a1.27 1.27 0 0 0-1.22-.94c-.56 0-1.08.37-1.22.94l-.43 1.69a4.24 4.24 0 0 1-3.13 3.13l-1.7.43c-.55.15-.93.66-.93 1.22 0 .56.36 1.07.94 1.22l1.69.43a4.24 4.24 0 0 1 3.13 3.13l.43 1.69a1.26 1.26 0 0 0 2.44 0l.42-1.7a4.24 4.24 0 0 1 3.14-3.12l1.69-.43a1.26 1.26 0 0 0 0-2.44l-1.7-.43a4.24 4.24 0 0 1-3.13-3.13l-.42-1.7Z" fill="white"/>
+  <path d="M24.48 93.12a1.6 1.6 0 0 1-1.55-1.22l-.42-1.7a4.04 4.04 0 0 0-2.9-2.89l-1.7-.43a1.6 1.6 0 0 1-1.21-1.54c0-.75.51-1.35 1.22-1.54l1.69-.43a4.04 4.04 0 0 0 2.9-2.9l.42-1.69c.2-.7.8-1.22 1.55-1.22s1.35.52 1.54 1.22l.43 1.7a4.04 4.04 0 0 0 2.9 2.89l1.69.43c.7.19 1.22.79 1.22 1.54a1.6 1.6 0 0 1-1.22 1.54l-1.7.43a4.04 4.04 0 0 0-2.9 2.9l-.42 1.69c-.19.7-.8 1.22-1.54 1.22Zm0-14.84a.84.84 0 0 0-.84.66l-.43 1.7a4.63 4.63 0 0 1-3.4 3.4l-1.7.43a.91.91 0 0 0-.66.84c0 .37.28.75.66.84l1.7.43c1.68.42 3 1.73 3.4 3.4l.43 1.7a.9.9 0 0 0 .84.66.9.9 0 0 0 .84-.66l.42-1.7c.43-1.68 1.74-3 3.41-3.4l1.7-.43a.91.91 0 0 0 .66-.84.9.9 0 0 0-.67-.84l-1.69-.42a4.65 4.65 0 0 1-3.4-3.42l-.43-1.69a.91.91 0 0 0-.84-.66Z" fill="#010101"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M205.15 31.68c-.62 0-1.17.43-1.37 1.06l-.3 1.25a2.47 2.47 0 0 1-1.87 1.86l-1.25.31c-.62.12-1.05.69-1.05 1.37 0 .69.43 1.17 1.05 1.37l1.25.31c.94.26 1.69.94 1.86 1.86l.31 1.25c.12.63.69 1.06 1.37 1.06.69 0 1.18-.43 1.37-1.06l.31-1.25c.26-.94.94-1.68 1.86-1.86l1.25-.31c.63-.12 1.06-.68 1.06-1.37 0-.68-.43-1.17-1.06-1.37l-1.25-.31a2.47 2.47 0 0 1-1.85-1.86l-.32-1.25c-.12-.63-.68-1.06-1.37-1.06Zm-.37 1.31c0-.2.2-.3.37-.3.18 0 .32.1.38.3l.3 1.26a3.51 3.51 0 0 0 2.63 2.62l1.25.3c.2 0 .31.2.31.38s-.12.31-.31.37l-1.25.32a3.51 3.51 0 0 0-2.62 2.62l-.31 1.25c0 .2-.2.31-.38.31-.17 0-.3-.12-.37-.31l-.31-1.25a3.51 3.51 0 0 0-2.62-2.62l-1.25-.32c-.2 0-.32-.2-.32-.37 0-.18.12-.31.32-.37l1.25-.31a3.51 3.51 0 0 0 2.62-2.62l.31-1.26Zm11.43-14.21a.76.76 0 0 0-.71-.59.76.76 0 0 0-.72.6l-.26 1.04a2.72 2.72 0 0 1-1.88 1.88l-1.05.26a.76.76 0 0 0-.59.72c0 .33.27.65.6.71l1.04.27c.92.27 1.63.98 1.88 1.88l.26 1.04c.06.33.4.6.72.6.32 0 .65-.27.71-.6l.27-1.04c.27-.92.98-1.63 1.88-1.88l1.04-.27c.33-.06.6-.38.6-.71a.76.76 0 0 0-.6-.72l-1.04-.26a2.72 2.72 0 0 1-1.88-1.88l-.27-1.05Zm-86.47 118.59a.6.6 0 0 0-.6-.44c-.29 0-.51.2-.6.44l-.2.84c-.2.75-.75 1.35-1.52 1.52l-.84.2c-.27.07-.44.31-.44.6s.2.51.44.6l.84.2c.76.2 1.36.75 1.52 1.52l.2.84c.08.28.31.44.6.44s.52-.2.6-.44l.2-.84c.2-.75.76-1.35 1.52-1.52l.84-.2a.6.6 0 0 0 .44-.6c0-.29-.2-.51-.44-.6l-.84-.2a2.03 2.03 0 0 1-1.52-1.52l-.2-.84ZM4.68 15.07a.61.61 0 0 0-.58-.48.61.61 0 0 0-.57.48l-.21.83a2.16 2.16 0 0 1-1.5 1.5l-.84.22a.6.6 0 0 0-.47.57c0 .26.2.52.47.57l.83.22c.74.2 1.31.78 1.5 1.5l.22.83a.6.6 0 0 0 .57.48.6.6 0 0 0 .58-.48l.2-.83c.22-.74.8-1.3 1.51-1.5l.84-.22a.6.6 0 0 0 .47-.57.6.6 0 0 0-.47-.57l-.84-.21a2.18 2.18 0 0 1-1.5-1.5l-.21-.84Zm37.66 101.17a1 1 0 0 0-.95.73l-.22.87a1.7 1.7 0 0 1-1.29 1.28l-.86.22c-.43.08-.73.48-.73.95s.3.81.73.95l.86.21a1.7 1.7 0 0 1 1.3 1.29l.2.87c.09.43.48.73.96.73.47 0 .8-.3.94-.73l.22-.87a1.7 1.7 0 0 1 1.29-1.29l.86-.21c.44-.08.73-.48.73-.95s-.3-.81-.73-.95l-.86-.22a1.7 1.7 0 0 1-1.3-1.28l-.2-.87a.94.94 0 0 0-.95-.73Zm-.26.9c0-.13.13-.2.26-.2.12 0 .21.07.25.2l.22.88c.22.9.9 1.6 1.81 1.8l.87.23c.13 0 .22.13.22.25 0 .13-.09.22-.22.26l-.87.22c-.9.21-1.6.9-1.81 1.81l-.22.87c0 .13-.13.21-.25.21-.13 0-.22-.08-.26-.21l-.22-.87c-.22-.9-.9-1.6-1.81-1.81l-.87-.22c-.13 0-.22-.14-.22-.26s.09-.21.22-.25l.87-.22c.9-.22 1.6-.9 1.81-1.81l.22-.87ZM216 63a1 1 0 0 0-.95-.73.96.96 0 0 0-.95.73l-.33 1.35a3.45 3.45 0 0 1-2.49 2.48l-1.34.34c-.4.13-.74.46-.74.95 0 .48.34.86.74.94l1.34.34a3.47 3.47 0 0 1 2.49 2.48l.33 1.35c.13.4.47.73.95.73s.86-.33.94-.73l.34-1.35a3.45 3.45 0 0 1 2.48-2.48l1.35-.34c.4-.12.74-.46.74-.94a.96.96 0 0 0-.74-.95l-1.35-.34a3.45 3.45 0 0 1-2.48-2.48L216 63Z" fill="#010101"/>
+  <path d="M73.2 77.69a35.13 35.13 0 1 0 0-70.26 35.13 35.13 0 0 0 0 70.26Z" fill="#231F20" stroke="#231F20" stroke-miterlimit="10"/>
+  <path d="M71.35 73.98a33.27 33.27 0 1 0 0-66.55 33.27 33.27 0 0 0 0 66.55Z" fill="white"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M71.35 7.93a32.77 32.77 0 1 0 0 65.55 32.77 32.77 0 0 0 0-65.55ZM37.57 40.71a33.77 33.77 0 1 1 67.55 0 33.77 33.77 0 0 1-67.55 0Z" fill="#231F20"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M71.17 18a22.71 22.71 0 0 0-22.72 22.7 1.5 1.5 0 0 1-3 0 25.71 25.71 0 1 1 4.09 13.92 1.5 1.5 0 0 1 2.52-1.63 22.71 22.71 0 1 0 19.1-35Z" fill="#231F20"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M71.17 23.09c.82 0 1.5.67 1.5 1.5v15.47l10.7 10.17a1.5 1.5 0 1 1-2.07 2.18L70.13 41.79a1.5 1.5 0 0 1-.46-1.08V24.59c0-.83.67-1.5 1.5-1.5ZM43.98 38.08a1.5 1.5 0 0 0-1.3 2.25l2.97 5.15a1.5 1.5 0 0 0 2.6 0l2.97-5.15a1.5 1.5 0 0 0-1.3-2.25h-5.94Z" fill="#231F20"/>
+  <path d="M128.82 66.44H78.16a12.4 12.4 0 0 0-12.4 12.4v25.21c0 10.98 8.76 13.74 10.17 14.73l-1.95 11.42 4.9 4.6 11.73-13.75h43.12a12.4 12.4 0 0 0 12.4-12.4v-25.2c0-11.29-5.6-17.02-17.31-17.02v.01Z" fill="#231F20"/>
+  <path d="m76.87 115.94-.46-.07a12 12 0 0 1-10.21-11.8V78.85c0-6.6 5.36-11.96 11.95-11.96h50.67c6.6 0 11.95 5.36 11.95 11.96v25.2c0 6.6-5.36 11.96-11.95 11.96H85.5l-10.8 12.65 2.17-12.73Z" fill="white"/>
+  <path d="M128.82 67.34c6.34 0 11.5 5.17 11.5 11.5v25.21c0 6.34-5.16 11.5-11.5 11.5H85.29l-.27.32-9.6 11.26 1.8-10.67.16-.91-.9-.14a11.55 11.55 0 0 1-9.83-11.37v-25.2c0-6.34 5.16-11.5 11.5-11.5h50.66m0-.9H78.17a12.4 12.4 0 0 0-12.4 12.4v25.21a12.4 12.4 0 0 0 10.6 12.26l-2.38 13.9 11.73-13.75h43.12a12.4 12.4 0 0 0 12.4-12.4V78.84a12.4 12.4 0 0 0-12.4-12.4h-.01Z" fill="#231F20"/>
+  <path d="M174.63 39.57h-50.66a12.4 12.4 0 0 0-12.4 12.4v25.21c0 12.68 15.45 15.84 18.89 15.84h39.56l8.8 10.31 6.48 3.44-2.37-13.89a12.4 12.4 0 0 0 10.6-12.26v-25.2c0-3.84-1.74-7.26-4.47-9.53-1.6-1.32-7.96-6.33-14.43-6.33v.01Z" fill="#231F20"/>
+  <path d="M167.3 89.15h-43.33c-6.6 0-11.95-5.36-11.95-11.96V52c0-6.6 5.36-11.96 11.95-11.96h50.66c6.6 0 11.96 5.36 11.96 11.96v25.2A12 12 0 0 1 176.38 89l-.46.07 2.18 12.73-10.8-12.65Z" fill="white"/>
+  <path d="M174.63 40.47c6.34 0 11.5 5.17 11.5 11.5v25.21c0 5.66-4.22 10.55-9.81 11.37l-.91.14.15.9 1.82 10.68L167.77 89l-.27-.31h-43.53c-6.34 0-11.5-5.17-11.5-11.5V51.98c0-6.34 5.16-11.5 11.5-11.5h50.65m.01-.92h-50.65a12.4 12.4 0 0 0-12.4 12.4v25.21a12.4 12.4 0 0 0 12.4 12.4h43.11l11.73 13.75-2.37-13.89c6-.88 10.6-6.02 10.6-12.26v-25.2a12.4 12.4 0 0 0-12.4-12.4h-.02Z" fill="#231F20"/>
+  <path d="M168.1 60.8a4.15 4.15 0 0 0-6.23 5.22 21.9 21.9 0 0 0 3.02 3.5 4.15 4.15 0 0 0 6-5.42 24.6 24.6 0 0 0-2.78-3.3Zm-17.33 0a4.15 4.15 0 0 0-6.23 5.22c.35.63 2.33 3.01 3 3.5a4.15 4.15 0 0 0 6-5.42c-.35-.6-2.2-2.84-2.77-3.3Zm-17.34 0a4.15 4.15 0 0 0-6.23 5.22c.36.63 2.34 3.01 3.01 3.5a4.15 4.15 0 0 0 6-5.42 24.6 24.6 0 0 0-2.78-3.3Z" fill="#231F20"/>
+  <path d="M130.8 67.68a3.7 3.7 0 1 0 0-7.39 3.7 3.7 0 0 0 0 7.4Z" fill="white"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M130.8 60.79a3.2 3.2 0 1 0 0 6.4 3.2 3.2 0 0 0 0-6.4Zm-4.2 3.2a4.2 4.2 0 1 1 8.4 0 4.2 4.2 0 0 1-8.4 0Z" fill="#231F20"/>
+  <path d="M148.14 67.68a3.7 3.7 0 1 0 0-7.39 3.7 3.7 0 0 0 0 7.4Z" fill="white"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M148.14 60.79a3.2 3.2 0 1 0 0 6.4 3.2 3.2 0 0 0 0-6.4Zm-4.2 3.2a4.2 4.2 0 1 1 8.4 0 4.2 4.2 0 0 1-8.4 0Z" fill="#231F20"/>
+  <path d="M165.48 67.68a3.7 3.7 0 1 0 0-7.4 3.7 3.7 0 0 0 0 7.4Z" fill="white"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M165.48 60.79a3.2 3.2 0 1 0 0 6.4 3.2 3.2 0 0 0 0-6.4Zm-4.2 3.2a4.2 4.2 0 1 1 8.4 0 4.2 4.2 0 0 1-8.4 0Z" fill="#231F20"/>
+</svg>
diff --git a/components/ai_chat/resources/page/components/notices/notice_conversation_storage.tsx b/components/ai_chat/resources/page/components/notices/notice_conversation_storage.tsx
new file mode 100644
index 000000000000..d5b5738d2e91
--- /dev/null
+++ b/components/ai_chat/resources/page/components/notices/notice_conversation_storage.tsx
@@ -0,0 +1,73 @@
+// Copyright (c) 2024 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// You can obtain one at https://mozilla.org/MPL/2.0/.
+
+import * as React from 'react'
+import Button from '@brave/leo/react/button'
+import Icon from '@brave/leo/react/icon'
+import { getLocale } from '$web-common/locale'
+import VisibilityTimer from '$web-common/visibilityTimer'
+import { useAIChat } from '../../state/ai_chat_context'
+import styles from './notices.module.scss'
+import illustrationUrl from './conversation_storage.svg'
+
+export default function NoticeConversationStorage() {
+  const aiChatContext = useAIChat()
+
+  const visibilityTimer = React.useRef<VisibilityTimer>()
+
+  const noticeElementRef = React.useCallback((el: HTMLDivElement | null) => {
+    // note: el will be null when we destroy it.
+    // note: In new versions of React (maybe newer than we're using) you can return a cleanup function instead
+    // https://react.dev/blog/2024/04/25/react-19#cleanup-functions-for-refs
+    if (visibilityTimer.current) {
+      visibilityTimer.current.stopTracking()
+    }
+
+    if (!el) {
+      return
+    }
+
+    visibilityTimer.current = new VisibilityTimer(
+      aiChatContext.markStorageNoticeViewed, 4000, el
+    )
+
+    visibilityTimer.current.startTracking()
+  }, [])
+
+  return (
+    <div
+      className={styles.notice}
+      ref={noticeElementRef}
+    >
+      <div className={styles.illustration}>
+        <img src={illustrationUrl} alt="illustration" />
+      </div>
+      <div className={styles.content}>
+        <h4>{getLocale('menuConversationHistory')}</h4>
+        <p>{getLocale('noticeConversationHistoryBody')}</p>
+        <p>
+          <a
+            href='#'
+            target='_blank'
+            onClick={() => aiChatContext.uiHandler?.openModelSupportUrl()}
+          >
+            {getLocale('learnMore')}
+          </a>
+
+        </p>
+      </div>
+      <Button
+        className={styles.closeButton}
+        kind='filled'
+        size='tiny'
+        fab
+        title={getLocale('closeNotice')}
+        onClick={aiChatContext.dismissStorageNotice}
+      >
+        <Icon className={styles.closeIcon} name='close' />
+      </Button>
+    </div>
+  )
+}
diff --git a/components/ai_chat/resources/page/components/notices/notices.module.scss b/components/ai_chat/resources/page/components/notices/notices.module.scss
new file mode 100644
index 000000000000..c3b1ff7769c2
--- /dev/null
+++ b/components/ai_chat/resources/page/components/notices/notices.module.scss
@@ -0,0 +1,90 @@
+// Copyright (c) 2024 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// You can obtain one at https://mozilla.org/MPL/2.0/.
+
+.notice {
+  position: relative;
+  border-radius: var(--leo-radius-m);
+  background-color: var(--leo-color-container-highlight);
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  overflow: hidden;;
+  color: var(--leo-color-text-secondary);
+}
+
+.illustration {
+  flex: 0 0 auto;
+  width: 40%;
+  max-width: 260px;
+  background-color: #FF815C;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 3%;
+
+  img {
+    width: 100%;
+    height: auto;
+  }
+}
+
+.content {
+  flex-grow: 1;
+  padding: var(--leo-spacing-xl);
+
+  h4 {
+    margin: 0 0 var(--leo-spacing-s) 0;
+    // width of close button, make sure no overlap
+    padding-right: var(--leo-spacing-2xl);
+    display: block;
+    overflow: hidden;
+    overflow-wrap: break-word;
+    font: var(--leo-font-heading-h4);
+    color: var(--leo-color-text-primary);
+  }
+
+  p {
+    margin: 0 0 var(--leo-spacing-s) 0;
+    font: var(--leo-font-default-regular);
+  }
+
+  a {
+    font: var(--leo-font-default-link);
+    color: inherit;
+  }
+}
+
+.closeButton {
+  --leo-button-color: color-mix(in srgb,
+    transparent 50%,
+    var(--leo-color-container-background));
+  --leo-button-padding: var(--leo-spacing-xs);
+  --leo-button-radius: 100px;
+  position: absolute;
+  top: var(--leo-spacing-xl);
+  right: var(--leo-spacing-xl);
+}
+.closeIcon {
+  --leo-icon-color: var(--leo-color-icon-default);
+}
+
+@container (width < 410px) {
+  .notice {
+    flex-direction: column;
+  }
+  .illustration {
+    max-width: none;
+    width: auto;
+    padding: 3%;
+    height: 136px;
+    img {
+      width: auto;
+      max-width: 260px;
+      height: auto;
+      max-height: 100%;
+    }
+  }
+}
diff --git a/components/ai_chat/resources/page/state/active_chat_context.tsx b/components/ai_chat/resources/page/state/active_chat_context.tsx
index 54559e7a6e67..5f0ec6a9bbe8 100644
--- a/components/ai_chat/resources/page/state/active_chat_context.tsx
+++ b/components/ai_chat/resources/page/state/active_chat_context.tsx
@@ -4,7 +4,7 @@
 // You can obtain one at https://mozilla.org/MPL/2.0/.
 
 import * as React from 'react'
-import getAPI, * as API from '../api'
+import getAPI, * as AIChat from '../api'
 import { useRoute } from '$web-common/useRoute'
 import { useAIChat } from './ai_chat_context'
 
@@ -13,8 +13,8 @@ export const tabAssociatedChatId = 'tab'
 export interface SelectedChatDetails {
   selectedConversationId: string | undefined
   updateSelectedConversationId: (conversationId: string | undefined) => void
-  conversationHandler: API.ConversationHandlerRemote
-  callbackRouter: API.ConversationUICallbackRouter
+  conversationHandler: AIChat.ConversationHandlerRemote
+  callbackRouter: AIChat.ConversationUICallbackRouter
   createNewConversation: () => void,
   isTabAssociated: boolean
 }
@@ -58,7 +58,7 @@ function ActiveChatProvider({ children, selectedConversationId, updateSelectedCo
     selectedConversationId,
     updateSelectedConversationId,
     createNewConversation: () => {
-      setConversationAPI(API.newConversation())
+      setConversationAPI(AIChat.newConversation())
     },
     isTabAssociated: selectedConversationId === tabAssociatedChatId
   }), [selectedConversationId, updateSelectedConversationId, conversationAPI])
@@ -66,12 +66,12 @@ function ActiveChatProvider({ children, selectedConversationId, updateSelectedCo
   React.useEffect(() => {
     // Handle creating a new conversation
     if (!selectedConversationId) {
-      setConversationAPI(API.newConversation())
+      setConversationAPI(AIChat.newConversation())
       return
     }
 
     // Select a specific conversation
-    setConversationAPI(API.bindConversation(selectedConversationId === tabAssociatedChatId
+    setConversationAPI(AIChat.bindConversation(selectedConversationId === tabAssociatedChatId
       ? undefined
       : selectedConversationId))
 
@@ -79,12 +79,12 @@ function ActiveChatProvider({ children, selectedConversationId, updateSelectedCo
     // listen for changes.
     if (selectedConversationId === tabAssociatedChatId) {
       const onNewDefaultConversationListenerId =
-        getAPI().UIObserver.onNewDefaultConversation.addListener(() => {
-          setConversationAPI(API.bindConversation(undefined))
+        getAPI().uiObserver.onNewDefaultConversation.addListener(() => {
+          setConversationAPI(AIChat.bindConversation(undefined))
         })
 
       return () => {
-        getAPI().UIObserver.removeListener(onNewDefaultConversationListenerId)
+        getAPI().uiObserver.removeListener(onNewDefaultConversationListenerId)
       }
     }
 
diff --git a/components/ai_chat/resources/page/state/ai_chat_context.tsx b/components/ai_chat/resources/page/state/ai_chat_context.tsx
index c2fd3eabcb2b..68b63764d237 100644
--- a/components/ai_chat/resources/page/state/ai_chat_context.tsx
+++ b/components/ai_chat/resources/page/state/ai_chat_context.tsx
@@ -4,46 +4,35 @@
 // You can obtain one at https://mozilla.org/MPL/2.0/.
 
 import * as React from 'react'
-import getAPI, * as mojom from '../api'
-import { loadTimeData } from '$web-common/loadTimeData'
-
-export interface AIChatContext {
-  visibleConversations: mojom.Conversation[]
-  hasAcceptedAgreement: boolean
-  isPremiumStatusFetching: boolean
-  isPremiumUser: boolean
-  isPremiumUserDisconnected: boolean
-  canShowPremiumPrompt?: boolean
-  isMobile: boolean
-  isStandalone?: boolean
-  isHistoryEnabled: boolean
-  allActions: mojom.ActionGroup[]
+import getAPI, * as AIChat from '../api'
+
+type AIChatContextInternal = {
   initialized: boolean
   goPremium: () => void
   managePremium: () => void
   handleAgreeClick: () => void
+  enableStoragePref: () => void
+  markStorageNoticeViewed: () => void
+  dismissStorageNotice: () => void
   dismissPremiumPrompt: () => void
   userRefreshPremiumSession: () => void
-  uiHandler?: mojom.AIChatUIHandlerRemote
+  uiHandler?: AIChat.AIChatUIHandlerRemote
 
   editingConversationId: string | null
   setEditingConversationId: (uuid: string | null) => void
 }
 
+export type AIChatContext = AIChat.State & AIChatContextInternal
+
 const defaultContext: AIChatContext = {
-  visibleConversations: [],
-  hasAcceptedAgreement: Boolean(loadTimeData.getBoolean('hasAcceptedAgreement')),
-  isPremiumStatusFetching: true,
-  isPremiumUser: false,
-  isPremiumUserDisconnected: false,
-  canShowPremiumPrompt: undefined,
-  isMobile: Boolean(loadTimeData.getBoolean('isMobile')),
-  isHistoryEnabled: Boolean(loadTimeData.getBoolean('isHistoryEnabled')),
-  allActions: [],
+  ...AIChat.defaultUIState,
   initialized: false,
   goPremium: () => { },
   managePremium: () => { },
   handleAgreeClick: () => { },
+  enableStoragePref: () => { },
+  markStorageNoticeViewed: () => { },
+  dismissStorageNotice: () => { },
   dismissPremiumPrompt: () => { },
   userRefreshPremiumSession: () => { },
 
@@ -55,90 +44,56 @@ export const AIChatReactContext =
   React.createContext<AIChatContext>(defaultContext)
 
 export function AIChatContextProvider(props: React.PropsWithChildren) {
-  const [context, setContext] = React.useState<AIChatContext>(defaultContext)
+  // Intialize with global state that may have been set between module-load
+  // time and the first React render.
+  const [context, setContext] = React.useState<AIChatContext>({
+    ...defaultContext,
+    ...getAPI().state
+  })
   const [editingConversationId, setEditingConversationId] = React.useState<string | null>(null)
 
-  const setPartialContext = (partialContext: Partial<AIChatContext>) => {
+  const updateFromAPIState = (state: AIChat.State) => {
     setContext((value) => ({
       ...value,
-      ...partialContext
+      ...state
     }))
   }
 
   React.useEffect(() => {
-    const { Service, Observer } = getAPI()
-    async function initialize() {
-      const [
-        { conversations: visibleConversations },
-        { actionList: allActions },
-        { canShow: canShowPremiumPrompt }
-      ] = await Promise.all([
-        Service.getVisibleConversations(),
-        Service.getActionMenuList(),
-        Service.getCanShowPremiumPrompt()
-      ])
-      setPartialContext({
-        visibleConversations,
-        allActions,
-        canShowPremiumPrompt,
-        initialized: true
-      })
-    }
+    // Update with any global state change that may have occurred between
+    // first React render and first useEffect run.
+    updateFromAPIState(getAPI().state)
 
-    async function updateCurrentPremiumStatus() {
-      const { status } = await getAPI().Service.getPremiumStatus()
-      setPartialContext({
-        isPremiumStatusFetching: false,
-        isPremiumUser: (status !== undefined && status !== mojom.PremiumStatus.Inactive),
-        isPremiumUserDisconnected: status === mojom.PremiumStatus.ActiveDisconnected
-      })
+    // Listen for global state changes that occur after now
+    const onGlobalStateChange = () => {
+      updateFromAPIState(getAPI().state)
     }
+    getAPI().addStateChangeListener(onGlobalStateChange)
 
-    initialize()
-    updateCurrentPremiumStatus()
-
-    if (context.isHistoryEnabled) {
-      Observer.onConversationListChanged.addListener(
-        (conversations: mojom.Conversation[]) => {
-          setPartialContext({
-            visibleConversations: conversations
-          })
-        }
-      )
+    return () => {
+      getAPI().removeStateChangeListener(onGlobalStateChange)
     }
-
-    Observer.onAgreementAccepted.addListener(() =>
-      setPartialContext({
-        hasAcceptedAgreement: true
-      })
-    )
-
-    // Since there is no server-side event for premium status changing,
-    // we should check often. And since purchase or login is performed in
-    // a separate WebContents, we can check when focus is returned here.
-    window.addEventListener('focus', () => {
-      updateCurrentPremiumStatus()
-    })
-
-    document.addEventListener('visibilitychange', (e) => {
-      if (document.visibilityState === 'visible') {
-        updateCurrentPremiumStatus()
-      }
-    })
   }, [])
 
-  const { Service, UIHandler } = getAPI()
+  const { service, uiHandler } = getAPI()
 
   const store: AIChatContext = {
     ...context,
     ...props,
-    isStandalone: getAPI().isStandalone,
-    goPremium: () => UIHandler.goPremium(),
-    managePremium: () => UIHandler.managePremium(),
-    dismissPremiumPrompt: () => Service.dismissPremiumPrompt(),
-    userRefreshPremiumSession: () => UIHandler.refreshPremiumSession(),
-    handleAgreeClick: () => Service.markAgreementAccepted(),
-    uiHandler: UIHandler,
+    goPremium: () => uiHandler.goPremium(),
+    managePremium: () => uiHandler.managePremium(),
+    markStorageNoticeViewed: () => service.dismissStorageNotice(),
+    dismissStorageNotice: () => {
+      getAPI().setPartialState({
+        isStorageNoticeDismissed: true
+      })
+      service.dismissStorageNotice()
+    },
+    enableStoragePref: () => service.enableStoragePref(),
+    dismissPremiumPrompt: () => service.dismissPremiumPrompt(),
+    userRefreshPremiumSession: () => uiHandler.refreshPremiumSession(),
+    handleAgreeClick: () => service.markAgreementAccepted(),
+    uiHandler,
     editingConversationId,
     setEditingConversationId
   }
diff --git a/components/ai_chat/resources/page/stories/components_panel.tsx b/components/ai_chat/resources/page/stories/components_panel.tsx
index 95b561fbfdca..ef0312141503 100644
--- a/components/ai_chat/resources/page/stories/components_panel.tsx
+++ b/components/ai_chat/resources/page/stories/components_panel.tsx
@@ -12,10 +12,12 @@ import { getKeysForMojomEnum } from '$web-common/mojomUtils'
 import ThemeProvider from '$web-common/BraveCoreThemeProvider'
 import { InferControlsFromArgs } from '../../../../../.storybook/utils'
 import * as mojom from '../api/'
+import { ActiveChatContext, SelectedChatDetails } from '../state/active_chat_context'
 import { AIChatContext, AIChatReactContext } from '../state/ai_chat_context'
 import { ConversationContext, ConversationReactContext } from '../state/conversation_context'
 import FeedbackForm from '../components/feedback_form'
 import FullPage from '../components/full_page'
+import Loading from '../components/loading'
 import Main from '../components/main'
 import './locale'
 import ACTIONS_LIST from './actions'
@@ -389,14 +391,18 @@ const SITE_INFO: mojom.SiteInfo = {
 }
 
 type CustomArgs = {
+  initialized: boolean
   currentErrorState: keyof typeof mojom.APIError
   model: string
   inputText: string
   hasConversation: boolean
+  hasConversationListItems: boolean
   hasSuggestedQuestions: boolean
   hasSiteInfo: boolean
+  isStorageNoticeDismissed: boolean
   canShowPremiumPrompt: boolean
   hasAcceptedAgreement: boolean
+  isStoragePrefEnabled: boolean
   isPremiumModel: boolean
   isPremiumUser: boolean
   isPremiumUserDisconnected: boolean
@@ -410,11 +416,15 @@ type CustomArgs = {
 }
 
 const args: CustomArgs = {
+  initialized: true,
   inputText: `Write a Star Trek poem about Data's life on board the Enterprise`,
   hasConversation: true,
+  hasConversationListItems: true,
   hasSuggestedQuestions: true,
   hasSiteInfo: true,
+  isStorageNoticeDismissed: false,
   canShowPremiumPrompt: false,
+  isStoragePrefEnabled: true,
   hasAcceptedAgreement: true,
   isPremiumModel: false,
   isPremiumUser: true,
@@ -476,26 +486,40 @@ const preview: Meta<CustomArgs> = {
       }
 
       const aiChatContext: AIChatContext = {
-        initialized: true,
+        initialized: options.args.initialized,
         editingConversationId: null,
-        visibleConversations: CONVERSATIONS,
+        visibleConversations: options.args.hasConversationListItems ? CONVERSATIONS : [],
+        isStoragePrefEnabled: options.args.isStoragePrefEnabled,
         hasAcceptedAgreement: options.args.hasAcceptedAgreement,
         isPremiumStatusFetching: false,
         isPremiumUser: options.args.isPremiumUser,
         isPremiumUserDisconnected: options.args.isPremiumUserDisconnected,
+        isStorageNoticeDismissed: options.args.isStorageNoticeDismissed,
         canShowPremiumPrompt: options.args.canShowPremiumPrompt,
         isMobile: options.args.isMobile,
-        isHistoryEnabled: options.args.isHistoryEnabled,
+        isHistoryFeatureEnabled: options.args.isHistoryEnabled,
         isStandalone: options.args.isStandalone,
         allActions: ACTIONS_LIST,
         goPremium: () => {},
         managePremium: () => {},
         handleAgreeClick: () => {},
+        enableStoragePref: () => {},
+        markStorageNoticeViewed: () => {},
+        dismissStorageNotice: () => {},
         dismissPremiumPrompt: () => {},
         userRefreshPremiumSession: () => {},
         setEditingConversationId: () => {}
       }
 
+      const activeChatContext: SelectedChatDetails = {
+        selectedConversationId: CONVERSATIONS[0].uuid,
+        updateSelectedConversationId: () => {},
+        callbackRouter: undefined!,
+        conversationHandler: undefined!,
+        createNewConversation: () => {},
+        isTabAssociated: options.args.isDefaultConversation
+      }
+
       const inputText = options.args.inputText
 
       const conversationContext: ConversationContext = {
@@ -537,11 +561,13 @@ const preview: Meta<CustomArgs> = {
 
       return (
         <AIChatReactContext.Provider value={aiChatContext}>
-          <ConversationReactContext.Provider value={conversationContext}>
-          <ThemeProvider>
-            <Story />
-          </ThemeProvider>
-          </ConversationReactContext.Provider>
+          <ActiveChatContext.Provider value={activeChatContext}>
+            <ConversationReactContext.Provider value={conversationContext}>
+            <ThemeProvider>
+              <Story />
+            </ThemeProvider>
+            </ConversationReactContext.Provider>
+          </ActiveChatContext.Provider>
         </AIChatReactContext.Provider>
       )
     }
@@ -574,7 +600,8 @@ export const _FeedbackForm = {
 
 export const _FullPage = {
   args: {
-    isStandalone: true
+    isStandalone: true,
+    isDefaultConversation: false
   },
   render: () => {
     return (
@@ -584,3 +611,16 @@ export const _FullPage = {
     )
   }
 }
+
+export const _Loading = {
+  args: {
+    initialized: false
+  },
+  render: () => {
+    return (
+      <div className={styles.container}>
+        <Loading />
+      </div>
+    )
+  }
+}
diff --git a/components/ai_chat/resources/page/stories/locale.ts b/components/ai_chat/resources/page/stories/locale.ts
index 37b3c43f4d22..cbd938f20e15 100644
--- a/components/ai_chat/resources/page/stories/locale.ts
+++ b/components/ai_chat/resources/page/stories/locale.ts
@@ -20,6 +20,11 @@ provideStrings({
   braveLeoAssistantEndpointValidAsPrivateIp: 'If you would like to use a private IP address, you must first enable "Private IP Addresses for Custom Model Enpoints" via brave://flags/#brave-ai-chat-allow-private-ips',
   retryButtonLabel: 'Retry',
   learnMore: 'Learn more',
+  noticeConversationHistoryBody: 'Leo will now remember your previous conversations so you can go back to them. They are stored privately on your device, and you can delete them any time.',
+  noticeConversationHistoryEmpty: 'Your conversation history will appear here once you start a conversation.',
+  noticeConversationHistoryTitleDisabledPref: 'History is disabled',
+  noticeConversationHistoryDisabledPref: 'In order to view and search your previous conversations with Leo, you need to enable conversation history.',
+  noticeConversationHistoryDisabledPrefButton: 'Enable',
   dismissButtonLabel: 'Dismiss',
   'introMessage-0': `I'm here to help. What can I assist you with today? $1Learn more$2`,
   'introMessage-1': 'I have a vast base of knowledge and a large memory able to help with more complex challenges. $1Learn more$2',
@@ -27,6 +32,7 @@ provideStrings({
   modelFreemiumLabelNonPremium: 'Limited',
   modelPremiumLabelNonPremium: 'Premium',
   'modelCategory-chat': 'Chat',
+  menuConversationHistory: 'Conversation history',
   menuNewChat: 'New chat',
   menuSettings: 'Advanced Settings',
   menuTitleModels: 'Available language models',
@@ -104,4 +110,7 @@ provideStrings({
   sendChatButtonLabel: 'Send message to Leo',
   useMicButtonLabel: 'Use microphone',
   menuTitleCustomModels: 'Custom models',
+  startConversationLabel: 'Start new conversation',
+  goBackToActiveConversationButton: 'Go back to the active conversation',
+  conversationListUntitled: 'New conversation'
 })
diff --git a/components/resources/ai_chat_ui_strings.grdp b/components/resources/ai_chat_ui_strings.grdp
index 3e6babc555a4..aae09b545c3e 100644
--- a/components/resources/ai_chat_ui_strings.grdp
+++ b/components/resources/ai_chat_ui_strings.grdp
@@ -270,6 +270,24 @@
   <message name="IDS_CHAT_UI_LEARN_MORE" desc="Link text to learn more about a feature">
     Learn more
   </message>
+  <message name="IDS_CHAT_UI_CLOSE_NOTICE" desc="Label for button which closes a notice">
+    Close this notice
+  </message>
+  <message name="IDS_CHAT_UI_NOTICE_CONVERSATION_HISTORY_BODY" desc="Main text for the notice about conversation history">
+    Leo will now remember your conversations so you can go back to them. They are stored encrypted on your device, and you can delete them any time.
+  </message>
+  <message name="IDS_CHAT_UI_NOTICE_CONVERSATION_HISTORY_EMPTY" desc="Main text for a notice that the conversation list is empty">
+    Your conversation history will appear here once you start a conversation.
+  </message>
+  <message name="IDS_CHAT_UI_NOTICE_CONVERSATION_HISTORY_TITLE_DISABLED_PREF" desc="Title for a notice that the conversation history preference is disabled">
+    History is disabled
+  </message>
+  <message name="IDS_CHAT_UI_NOTICE_CONVERSATION_HISTORY_DISABLED_PREF" desc="Main text for a notice that the conversation history preference is disabled">
+    In order to view your previous conversations with Leo, you need to enable conversation history.
+  </message>
+  <message name="IDS_CHAT_UI_NOTICE_CONVERSATION_HISTORY_DISABLED_PREF_BUTTON" desc="Button label to enable conversation history preference">
+    Enable
+  </message>
   <message name="IDS_CHAT_UI_CHAT_BASIC_SUBTITLE" desc="A description for default chat model">
     General purpose chat
   </message>
@@ -405,6 +423,9 @@
   <message name="IDS_AI_CHAT_START_CONVERSATION_LABEL" desc="A label for when user starts a new conversation">
     Start new conversation
   </message>
+  <message name="IDS_AI_CHAT_GO_BACK_TO_ACTIVE_CONVERSATION_BUTTON" desc="A button to go back to the previous conversation">
+    Go back to the active conversation
+  </message>
   <message name="IDS_AI_CHAT_CONVERSATION_LIST_UNTITLED" desc="Label for untitled conversations in AI Chat">
     New conversation
   </message>
diff --git a/ios/brave-ios/Sources/AIChat/ModelView/AIChatViewModel.swift b/ios/brave-ios/Sources/AIChat/ModelView/AIChatViewModel.swift
index daebcf28e655..9662538f107b 100644
--- a/ios/brave-ios/Sources/AIChat/ModelView/AIChatViewModel.swift
+++ b/ios/brave-ios/Sources/AIChat/ModelView/AIChatViewModel.swift
@@ -29,7 +29,7 @@ public class AIChatViewModel: NSObject, ObservableObject {
 
   @Published var siteInfo: AiChat.SiteInfo?
   @Published var _shouldSendPageContents: Bool = true
-  @Published var canShowPremiumPrompt: Bool = false
+  @Published var _canShowPremiumPrompt: Bool = false
   @Published var premiumStatus: AiChat.PremiumStatus = .inactive
   @Published var suggestedQuestions: [String] = []
   @Published var suggestionsStatus: AiChat.SuggestionGenerationStatus = .none
@@ -68,11 +68,11 @@ public class AIChatViewModel: NSObject, ObservableObject {
 
   public var shouldShowPremiumPrompt: Bool {
     get {
-      return canShowPremiumPrompt
+      return _canShowPremiumPrompt
     }
 
     set {  // swiftlint:disable:this unused_setter_value
-      self.canShowPremiumPrompt = newValue
+      _canShowPremiumPrompt = newValue
       if !newValue {
         api.dismissPremiumPrompt()
       }
@@ -333,4 +333,8 @@ extension AIChatViewModel: AIChatDelegate {
     self.siteInfo = siteInfo
     self._shouldSendPageContents = shouldSendPageContents
   }
+
+  public func onServiceStateChanged(_ state: AiChat.ServiceState) {
+    self._canShowPremiumPrompt = state.canShowPremiumPrompt
+  }
 }
diff --git a/ios/browser/api/ai_chat/ai_chat.h b/ios/browser/api/ai_chat/ai_chat.h
index bf10cd7fa721..60b8d58037ba 100644
--- a/ios/browser/api/ai_chat/ai_chat.h
+++ b/ios/browser/api/ai_chat/ai_chat.h
@@ -59,8 +59,6 @@ OBJC_EXPORT
 
 - (void)modifyConversation:(NSUInteger)turnId newText:(NSString*)newText;
 
-- (void)getCanShowPremiumPrompt:(void (^_Nullable)(bool))completion;
-
 - (void)dismissPremiumPrompt;
 @end
 
diff --git a/ios/browser/api/ai_chat/ai_chat.mm b/ios/browser/api/ai_chat/ai_chat.mm
index d93a13aca60d..387930908b83 100644
--- a/ios/browser/api/ai_chat/ai_chat.mm
+++ b/ios/browser/api/ai_chat/ai_chat.mm
@@ -61,6 +61,9 @@ - (instancetype)initWithProfileIOS:(ProfileIOS*)profile
     current_content_ = std::make_unique<ai_chat::AssociatedContentDriverIOS>(
         profile_->GetSharedURLLoaderFactory(), delegate);
 
+    conversation_client_ = std::make_unique<ai_chat::ConversationClient>(
+        service_.get(), delegate_);
+
     [self createNewConversation];
   }
   return self;
@@ -78,8 +81,7 @@ - (void)dealloc {
 - (void)createNewConversation {
   current_conversation_ = service_->CreateConversationHandlerForContent(
       current_content_->GetContentId(), current_content_->GetWeakPtr());
-  conversation_client_ = std::make_unique<ai_chat::ConversationClient>(
-      current_conversation_.get(), delegate_);
+  conversation_client_->ChangeConversation(current_conversation_.get());
 }
 
 - (bool)isAgreementAccepted {
@@ -222,10 +224,6 @@ - (void)modifyConversation:(NSUInteger)turnId newText:(NSString*)newText {
                                             base::SysNSStringToUTF8(newText));
 }
 
-- (void)getCanShowPremiumPrompt:(void (^_Nullable)(bool))completion {
-  service_->GetCanShowPremiumPrompt(base::BindOnce(completion));
-}
-
 - (void)dismissPremiumPrompt {
   service_->DismissPremiumPrompt();
 }
diff --git a/ios/browser/api/ai_chat/ai_chat_delegate.h b/ios/browser/api/ai_chat/ai_chat_delegate.h
index ca9bdc67d935..fbc2569c150b 100644
--- a/ios/browser/api/ai_chat/ai_chat_delegate.h
+++ b/ios/browser/api/ai_chat/ai_chat_delegate.h
@@ -28,6 +28,7 @@ OBJC_EXPORT
                              status:(AiChatSuggestionGenerationStatus)status;
 - (void)onPageHasContent:(AiChatSiteInfo*)siteInfo
        shouldSendContent:(bool)shouldSendContent;
+- (void)onServiceStateChanged:(AiChatServiceState*)state;
 @end
 
 NS_ASSUME_NONNULL_END
diff --git a/ios/browser/api/ai_chat/conversation_client.h b/ios/browser/api/ai_chat/conversation_client.h
index ef923c6aa4c6..7ec3051dc317 100644
--- a/ios/browser/api/ai_chat/conversation_client.h
+++ b/ios/browser/api/ai_chat/conversation_client.h
@@ -9,6 +9,7 @@
 #include <string>
 #include <vector>
 
+#include "base/memory/weak_ptr.h"
 #include "brave/components/ai_chat/core/common/mojom/ai_chat.mojom.h"
 #include "mojo/public/cpp/bindings/receiver.h"
 
@@ -16,17 +17,21 @@
 
 namespace ai_chat {
 
+class AIChatService;
 class ConversationHandler;
 
 // TODO(petemill): Have AIChatViewModel.swift (aka AIChatDelegate) implement
-// mojom::ConversationUI and bind directly to ConversationHandler via ai_chat.mm
-// so that this proxy isn't neccessary.
-class ConversationClient : public mojom::ConversationUI {
+// mojom::ConversationUI and mojom::ServiceObserver and bind directly to
+// ConversationHandler and AIChatService via ai_chat.mm so that this proxy isn't
+// neccessary.
+class ConversationClient : public mojom::ConversationUI,
+                           public mojom::ServiceObserver {
  public:
-  ConversationClient(ConversationHandler* conversation,
-                     id<AIChatDelegate> bridge);
+  ConversationClient(AIChatService* ai_chat_service, id<AIChatDelegate> bridge);
   ~ConversationClient() override;
 
+  void ChangeConversation(ConversationHandler* conversation);
+
  protected:
   // mojom::ConversationUI
   void OnConversationHistoryUpdate() override;
@@ -43,11 +48,19 @@ class ConversationClient : public mojom::ConversationUI {
   void OnFaviconImageDataChanged() override;
   void OnConversationDeleted() override;
 
+  // mojom::ServiceObserver
+  void OnStateChanged(mojom::ServiceStatePtr state) override;
+  void OnConversationListChanged(
+      std::vector<mojom::ConversationPtr> conversations) override {}
+
  private:
   // The actual UI
   __weak id<AIChatDelegate> bridge_;
 
   mojo::Receiver<mojom::ConversationUI> receiver_{this};
+  mojo::Receiver<mojom::ServiceObserver> service_receiver_{this};
+
+  base::WeakPtrFactory<ConversationClient> weak_ptr_factory_{this};
 };
 
 }  // namespace ai_chat
diff --git a/ios/browser/api/ai_chat/conversation_client.mm b/ios/browser/api/ai_chat/conversation_client.mm
index 172077e241a5..d51bfdb2bb1a 100644
--- a/ios/browser/api/ai_chat/conversation_client.mm
+++ b/ios/browser/api/ai_chat/conversation_client.mm
@@ -8,6 +8,7 @@
 #include "ai_chat.mojom.objc+private.h"
 #include "base/strings/sys_string_conversions.h"
 #include "brave/base/mac/conversions.h"
+#include "brave/components/ai_chat/core/browser/ai_chat_service.h"
 #include "brave/components/ai_chat/core/browser/conversation_handler.h"
 #include "brave/components/ai_chat/core/common/mojom/ai_chat.mojom-shared.h"
 #include "brave/components/ai_chat/core/common/mojom/ai_chat.mojom.h"
@@ -16,14 +17,22 @@
 
 namespace ai_chat {
 
-ConversationClient::ConversationClient(ConversationHandler* conversation,
+ConversationClient::ConversationClient(AIChatService* ai_chat_service,
                                        id<AIChatDelegate> bridge)
     : bridge_(bridge) {
-  conversation->Bind(receiver_.BindNewPipeAndPassRemote());
+  ai_chat_service->BindObserver(
+      service_receiver_.BindNewPipeAndPassRemote(),
+      base::BindOnce(&ConversationClient::OnStateChanged,
+                     weak_ptr_factory_.GetWeakPtr()));
 }
 
 ConversationClient::~ConversationClient() = default;
 
+void ConversationClient::ChangeConversation(ConversationHandler* conversation) {
+  receiver_.reset();
+  conversation->Bind(receiver_.BindNewPipeAndPassRemote());
+}
+
 // MARK: - mojom::ConversationUI
 
 void ConversationClient::OnConversationHistoryUpdate() {
@@ -75,4 +84,9 @@
   // allows deletion.
 }
 
+void ConversationClient::OnStateChanged(const mojom::ServiceStatePtr state) {
+  [bridge_ onServiceStateChanged:[[AiChatServiceState alloc]
+                                     initWithServiceStatePtr:state->Clone()]];
+}
+
 }  // namespace ai_chat