diff --git a/chrome/browser/resources/settings/browseros_prefs_page/browseros_prefs_page.html b/chrome/browser/resources/settings/browseros_prefs_page/browseros_prefs_page.html
new file mode 100644
index 0000000000000..f7766f378ba0a
--- /dev/null
+++ b/chrome/browser/resources/settings/browseros_prefs_page/browseros_prefs_page.html
@@ -0,0 +1,336 @@
+    <link rel="import" href="../controls/settings_toggle_button.html">
+    <style include="cr-shared-style settings-shared md-select">
+      .page-header {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        padding: 20px 20px 16px;
+        border-bottom: var(--cr-separator-line);
+      }
+      
+      .page-icon {
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        background: var(--google-orange-500);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: white;
+        font-size: 18px;
+      }
+      
+      .page-title {
+        font-size: 20px;
+        font-weight: 400;
+        color: var(--cr-primary-text-color);
+        margin: 0;
+      }
+      
+      .page-subtitle {
+        font-size: 14px;
+        color: var(--cr-secondary-text-color);
+        margin: 4px 0 0 0;
+      }
+      
+      .prefs-container {
+        max-width: 680px;
+        margin: 20px auto;
+        padding: 0 20px 20px;
+      }
+      
+      .prefs-section {
+        background: var(--cr-card-background-color);
+        border: 1px solid var(--cr-separator-color);
+        border-radius: 8px;
+        padding: 20px;
+        margin-bottom: 16px;
+      }
+      
+      .prefs-section-header {
+        margin-bottom: 16px;
+        padding-bottom: 16px;
+        border-bottom: 1px solid var(--cr-separator-color);
+      }
+      
+      .prefs-section-title {
+        font-size: 16px;
+        font-weight: 500;
+        color: var(--cr-primary-text-color);
+        margin: 0;
+      }
+      
+      .prefs-toggle-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 12px 0;
+      }
+      
+      .prefs-toggle-label {
+        font-size: 14px;
+        color: var(--cr-primary-text-color);
+      }
+      
+      .prefs-toggle-sublabel {
+        font-size: 12px;
+        color: var(--cr-secondary-text-color);
+        margin-top: 4px;
+      }
+      
+      .custom-providers-list {
+        margin-top: 16px;
+      }
+      
+      .custom-provider-item {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 12px;
+        background: var(--cr-hover-background-color);
+        border-radius: 6px;
+        margin-bottom: 8px;
+      }
+      
+      .custom-provider-info {
+        flex: 1;
+      }
+      
+      .custom-provider-name {
+        font-size: 14px;
+        font-weight: 500;
+        color: var(--cr-primary-text-color);
+      }
+      
+      .custom-provider-url {
+        font-size: 12px;
+        color: var(--cr-secondary-text-color);
+        margin-top: 2px;
+      }
+      
+      .add-provider-button {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 16px;
+        margin-top: 12px;
+        border: 1px dashed var(--cr-separator-color);
+        border-radius: 6px;
+        background: transparent;
+        color: var(--cr-focus-outline-color);
+        cursor: pointer;
+        transition: all 0.2s ease;
+      }
+      
+      .add-provider-button:hover {
+        background: var(--cr-hover-background-color);
+        border-color: var(--cr-focus-outline-color);
+      }
+      
+      .provider-dialog {
+        --cr-dialog-width: 600px;
+        --cr-dialog-max-height: none;
+      }
+      
+      .provider-dialog::part(dialog) {
+        max-width: 600px;
+        width: 600px;
+      }
+      
+      .provider-dialog [slot="body"] {
+        overflow: visible !important;
+        min-height: 220px;
+        padding: 20px 24px;
+      }
+      
+      .provider-dialog .form-group {
+        margin-bottom: 24px;
+      }
+      
+      .provider-dialog .form-group:last-child {
+        margin-bottom: 0;
+      }
+      
+      .delete-button {
+        padding: 6px;
+        border-radius: 4px;
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        color: var(--google-red-600);
+        transition: background 0.2s ease;
+      }
+      
+      .delete-button:hover {
+        background: var(--cr-hover-background-color);
+      }
+      
+      .form-group {
+        margin-bottom: 16px;
+      }
+      
+      .form-label {
+        display: block;
+        font-size: 13px;
+        font-weight: 500;
+        color: var(--cr-primary-text-color);
+        margin-bottom: 8px;
+      }
+      
+      .form-field {
+        width: 100%;
+        height: 40px;
+        padding: 0 12px;
+        border: 1px solid var(--cr-separator-color);
+        border-radius: 4px;
+        font-size: 14px;
+        background: var(--cr-input-background-color);
+        color: var(--cr-primary-text-color);
+        transition: border-color 0.2s ease;
+        box-sizing: border-box;
+      }
+      
+      .form-field:hover {
+        border-color: var(--cr-hover-border-color);
+      }
+      
+      .form-field:focus {
+        outline: none;
+        border-color: var(--cr-focus-outline-color);
+      }
+      
+      .form-helper {
+        font-size: 12px;
+        color: var(--cr-secondary-text-color);
+        margin-top: 4px;
+      }
+      
+      .status-toast {
+        position: fixed;
+        bottom: 24px;
+        left: 50%;
+        transform: translateX(-50%) translateY(100px);
+        padding: 12px 24px;
+        border-radius: 4px;
+        background: var(--google-grey-900);
+        color: white;
+        font-size: 14px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        opacity: 0;
+        transition: all 0.3s ease;
+        z-index: 1000;
+      }
+      
+      .status-toast.show {
+        transform: translateX(-50%) translateY(0);
+        opacity: 1;
+      }
+      
+      @media (prefers-color-scheme: dark) {
+        .status-toast {
+          background: var(--google-grey-800);
+        }
+      }
+    </style>
+    
+    <div class="page-header">
+      <div class="page-icon">
+        <cr-icon icon="settings:settings"></cr-icon>
+      </div>
+      <div>
+        <h1 class="page-title">BrowserOS Preferences</h1>
+        <div class="page-subtitle">Configure BrowserOS-specific settings</div>
+      </div>
+    </div>
+    
+    <div class="prefs-container">
+      <!-- Toolbar Settings -->
+      <div class="prefs-section">
+        <div class="prefs-section-header">
+          <h3 class="prefs-section-title">Toolbar Settings</h3>
+        </div>
+        <div class="prefs-toggle-row">
+          <div>
+            <div class="prefs-toggle-label">Show labels in toolbar</div>
+            <div class="prefs-toggle-sublabel">Display text labels next to BrowserOS toolbar icons</div>
+            <div class="prefs-toggle-sublabel" style="color: var(--google-orange-600); font-weight: 500; margin-top: 4px;">
+              NOTE: Needs browser restart
+            </div>
+          </div>
+          <settings-toggle-button
+              id="showToolbarLabels"
+              pref="{{prefs.browseros.show_toolbar_labels}}">
+          </settings-toggle-button>
+        </div>
+      </div>
+      
+      <!-- Custom Providers -->
+      <div class="prefs-section" style="display: none;">
+        <div class="prefs-section-header">
+          <h3 class="prefs-section-title">Custom AI Providers</h3>
+        </div>
+        <div class="prefs-toggle-sublabel" style="margin-bottom: 16px;">
+          Add custom AI providers to use in LLM Chat and LLM Hub
+        </div>
+        
+        <div class="custom-providers-list" id="customProvidersList">
+          <template is="dom-repeat" items="[[customProviders]]">
+            <div class="custom-provider-item">
+              <div class="custom-provider-info">
+                <div class="custom-provider-name">[[item.name]]</div>
+                <div class="custom-provider-url">[[item.url]]</div>
+              </div>
+              <button class="delete-button" on-click="deleteCustomProvider_" data-index$="[[index]]">
+                <cr-icon icon="cr:delete"></cr-icon>
+              </button>
+            </div>
+          </template>
+        </div>
+        
+        <button class="add-provider-button" on-click="showAddProviderDialog_">
+          <cr-icon icon="cr:add"></cr-icon>
+          Add Provider
+        </button>
+      </div>
+    </div>
+    
+    <!-- Add Provider Dialog -->
+    <cr-dialog id="addProviderDialog" class="provider-dialog">
+      <div slot="title">Add Custom AI Provider</div>
+      <div slot="body">
+        <div class="form-group">
+          <label class="form-label" for="newProviderName">Provider Name</label>
+          <input type="text" 
+                 id="newProviderName"
+                 class="form-field"
+                 placeholder="e.g., My Custom AI"
+                 value="{{newProviderName_::input}}">
+          <div class="form-helper">Display name for the provider</div>
+        </div>
+        <div class="form-group">
+          <label class="form-label" for="newProviderUrl">Provider URL</label>
+          <input type="url" 
+                 id="newProviderUrl"
+                 class="form-field"
+                 placeholder="https://example.com/ai-chat"
+                 value="{{newProviderUrl_::input}}">
+          <div class="form-helper">Full URL to the AI provider interface</div>
+        </div>
+      </div>
+      <div slot="button-container">
+        <cr-button class="cancel-button" on-click="cancelAddProvider_">
+          Cancel
+        </cr-button>
+        <cr-button class="action-button" on-click="addCustomProvider_">
+          Add
+        </cr-button>
+      </div>
+    </cr-dialog>
+    
+    <!-- Status message toast -->
+    <div id="statusMessage" class="status-toast">
+      <cr-icon icon="cr:check-circle"></cr-icon>
+      Settings saved successfully
+    </div>
\ No newline at end of file