removed the comments

less/documentDB.less

@@ -1772,9 +1772,9 @@ input::-webkit-calendar-picker-indicator {
 
 .paddingspan4 {
   padding-top: 20px;
-  padding-left: 20px;
   color: white;
-  font-size: 14px;
+  padding-left: 25px;
+  padding-right: 25px;
 }
 
 .closebtnn {
@@ -1914,7 +1914,8 @@ input::-webkit-calendar-picker-indicator::after {
 }
 
 .nav-tabs-margin {
-  background-color: #f2f2f2;
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
 
   .nav-tabs {
     display: flex;
@@ -1922,11 +1923,19 @@ input::-webkit-calendar-picker-indicator::after {
     align-items: flex-end;
     height: 100%;
     margin-bottom: -0.5px;
+    // border-bottom: 1px solid var(--colorNeutralStroke1);
 
     li {
-      // Override the bootstrap defaults here to align with our layout constants.
       margin-bottom: 0px;
       height: 32px;
+
+      &:hover {
+        background-color: var(--colorNeutralBackground1Hover);
+      }
+
+      &:active {
+        background-color: var(--colorNeutralBackground1Pressed);
+      }
     }
   }
 }
@@ -1940,8 +1949,20 @@ input::-webkit-calendar-picker-indicator::after {
 .nav.nav-tabs.qslevel > li > a:hover {
   border: none;
   border-radius: 0;
-  background-color: transparent !important;
+  background-color: var(--colorNeutralBackground1Selected) !important;
   border-color: transparent;
+  color: var(--colorNeutralForeground1);
+}
+
+.nav-tabs > li > .tabNavContentContainer > .tab_Content:hover {
+  background-color: var(--colorNeutralBackground1Hover);
+  // border-bottom: 2px solid var(--colorNeutralStroke1);
+}
+
+.nav-tabs > li.active > .tabNavContentContainer > .tab_Content,
+.nav-tabs > li.active > .tabNavContentContainer > .tab_Content:hover {
+  background-color: var(--colorNeutralBackground1Selected);
+  // border-bottom: 2px solid var(--colorCompoundBrandBackground);
 }
 
 .numbersize {
@@ -2375,7 +2396,9 @@ a:link {
   height: 100%;
   display: flex;
   flex-direction: column;
-  min-width: 0; // This prevents it to grow past the parent's width if its content is too wide
+  min-width: 0;
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
 }
 
 .tabs {
@@ -2631,9 +2654,10 @@ a:link {
 }
 
 .tabPanesContainer {
-  display: flex;
   flex-grow: 1;
-  overflow: hidden;
+  overflow-y: scroll;
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
 }
 
 .tabs-container {
@@ -2655,11 +2679,11 @@ a:link {
 .nav-tabs > li.active > .tabNavContentContainer,
 .nav-tabs > li.active > .tabNavContentContainer:focus,
 .nav-tabs > li.active > .tabNavContentContainer:hover {
-  color: #555;
+  color: var(--colorNeutralForeground1);
   cursor: default;
-  background-color: @BaseLight;
-  border-color: @BaseMedium;
-  border-bottom-color: @BaseLight;
+  background-color: var(--colorNeutralBackground1Selected);
+  border-color: var(--colorNeutralStroke1);
+  // border-bottom-color: var(--colorCompoundBrandBackground);
   border-style: solid;
   border-width: 1px;
   height: @ActiveTabHeight;
@@ -2668,7 +2692,7 @@ a:link {
 
 .nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .contentWrapper > .tabNavText {
   font-weight: bolder;
-  border-bottom: 2px solid rgba(0, 120, 212, 1);
+  border-bottom: 2px solid var(--colorCompoundBrandBackground);
 }
 
 .nav-tabs > li.active:focus > .tabNavContentContainer {
@@ -2681,7 +2705,7 @@ a:link {
   justify-content: space-between;
   border-radius: 2px 2px 0 0;
   padding: @DefaultSpace 0px @SmallSpace 0px;
-  color: @BaseHigh;
+  color: var(--colorNeutralForeground1);
   width: @TabsWidth;
   text-align: center;
   position: relative;
@@ -2689,75 +2713,29 @@ a:link {
 
   &:hover {
     text-decoration: none;
-    background-color: @BaseMediumLow;
-    border-color: @BaseMediumLow;
+    background-color: var(--colorNeutralBackground1Hover);
+    border-color: transparent;
   }
 
   &:active {
-    background-color: @BaseMediumLow;
+    background-color: var(--colorNeutralBackground1Pressed);
   }
 
   .tab_Content {
     .flex-display();
     width: @TabsWidth;
-    border-right: @ButtonBorderWidth solid @BaseMedium;
+    border-right: @ButtonBorderWidth solid var(--colorNeutralStroke1);
     white-space: nowrap;
+    color: var(--colorNeutralForeground1);
+
     .contentWrapper {
       .flex-display();
       width: @ContentWrapper;
 
-      .statusIconContainer {
-        width: @StatusIconContainerSize;
-        height: @StatusIconContainerSize;
-        margin-left: @SmallSpace;
-        display: inline-flex;
-
-        .errorIconContainer {
-          width: @ErrorIconContainer;
-          height: @ErrorIconContainer;
-          margin-top: 1px;
-
-          .errorIcon {
-            width: @ErrorIconWidth;
-            height: @LoadingErrorIconSize;
-            background-image: url(../images/error_no_outline.svg);
-            background-repeat: no-repeat;
-            background-position: center;
-            background-size: 3px;
-            display: block;
-            margin: 1px 0px 0px 6px;
-          }
-        }
-
-        .errorIconContainer.actionsEnabled {
-          &:hover {
-            .hover();
-          }
-
-          &:focus {
-            .focus();
-          }
-
-          &:active {
-            .active();
-          }
-        }
-
-        .errorIconContainer[tabindex]:active {
-          outline: none;
-        }
-
-        .loadingIcon {
-          width: @LoadingErrorIconSize;
-          height: @LoadingErrorIconSize;
-          margin: 0px 0px @SmallSpace @SmallSpace;
-        }
-      }
-
       .tabNavText {
         margin-left: @SmallSpace;
         margin-right: 2px;
-        color: @BaseDark;
+        color: var(--colorNeutralForeground1);
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
@@ -2768,21 +2746,36 @@ a:link {
     .tabIconSection {
       width: 29px;
       position: relative;
-      padding-top: 2px;
 
       .cancelButton {
         padding: 0px @SmallSpace 0px @SmallSpace;
+        color: var(--colorNeutralForeground1);
+        width: 16px;
+        height: 16px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
 
         &:hover {
-          .hover();
+          background-color: var(--colorNeutralBackground1Hover);
+          color: var(--colorNeutralForeground1);
         }
 
         &:focus {
-          .focus();
+          background-color: var(--colorNeutralBackground1Pressed);
+          color: var(--colorNeutralForeground1);
         }
 
         &:active {
-          .active();
+          background-color: var(--colorNeutralBackground1Pressed);
+          color: var(--colorNeutralForeground1);
+        }
+
+        &::before {
+          content: "×";
+          font-size: 16px;
+          line-height: 1;
         }
       }
     }
@@ -3136,3 +3129,12 @@ a:link {
 .sidebarContainer {
   height: 100%;
 }
+
+.close-Icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}

less/documentDBFabric.less

@@ -37,12 +37,40 @@ a:focus {
 }
 
 .tabsManagerContainer {
-  background-color: #ffffff;
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
 }
 
 .nav-tabs-margin {
   padding-top: 5px;
-  background-color: #ffffff;
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
+}
+
+.nav-tabs {
+  border-bottom: 1px solid var(--colorNeutralStroke1);
+  color: var(--colorNeutralForeground1);
+}
+
+.nav-tabs > li > .tabNavContentContainer > .tab_Content:hover {
+  border-bottom: 2px solid var(--colorNeutralStroke1);
+  background-color: var(--colorNeutralBackground1Hover);
+}
+
+.nav-tabs > li.active > .tabNavContentContainer > .tab_Content,
+.nav-tabs > li.active > .tabNavContentContainer > .tab_Content:hover {
+  border-bottom: 2px solid var(--colorCompoundBrandBackground);
+  background-color: var(--colorNeutralBackground1Selected);
+}
+
+.nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .contentWrapper > .tabNavText {
+  border-bottom: 0px none transparent;
+  color: var(--colorNeutralForeground1);
+}
+
+.tabPanesContainer {
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
 }
 
 .commandBarContainer {
@@ -67,24 +95,12 @@ a:focus {
   }
 }
 
-.nav-tabs > li > .tabNavContentContainer > .tab_Content:hover {
-  border-bottom: 2px solid #e0e0e0;
-}
-
-.nav-tabs > li.active > .tabNavContentContainer > .tab_Content,
-.nav-tabs > li.active > .tabNavContentContainer > .tab_Content:hover {
-  border-bottom: 2px solid @FabricAccentMedium;
-}
-
-.nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .contentWrapper > .tabNavText {
-  border-bottom: 0px none transparent;
-}
-
 .tabNavContentContainer {
   padding: @SmallSpace 0px @SmallSpace 0px;
+  color: var(--colorNeutralForeground1);
 
   &:hover {
-    background-color: transparent;
+    background-color: var(--colorNeutralBackground1Hover);
     border-color: transparent;
   }
 
@@ -93,6 +109,7 @@ a:focus {
     margin: 0px @SmallSpace 0px @SmallSpace;
     width: calc(@TabsWidth - (@SmallSpace * 2));
     padding-bottom: @SmallSpace;
+    color: var(--colorNeutralForeground1);
 
     .contentWrapper {
       .statusIconContainer {
@@ -103,17 +120,18 @@ a:focus {
     .tabIconSection {
       .cancelButton {
         padding: 0px 0px 0px @SmallSpace;
+        color: var(--colorNeutralForeground1);
 
         &:hover {
-          background-color: transparent;
+          background-color: var(--colorNeutralBackground1Hover);
         }
 
         &:focus {
-          background-color: transparent;
+          background-color: var(--colorNeutralBackground1Pressed);
         }
 
         &:active {
-          background-color: transparent;
+          background-color: var(--colorNeutralBackground1Pressed);
         }
       }
     }

less/forms.less

@@ -1,211 +1,227 @@
 @import "./Common/Constants";
 
 .dirty {
-    border: 1px solid #9b4f96;
+  border: 1px solid #9b4f96;
 }
 
 .dirty:focus {
-    outline: 1px solid #9b4f96;
+  outline: 1px solid #9b4f96;
 }
 
 .tabForm {
-    padding: 12px 20px 20px 20px;
-    margin-left: 3px;
+  padding: 12px 20px 20px 20px;
+  margin-left: 3px;
 }
 
 .storedTabForm {
-    padding-top: @LargeSpace;
+  padding-top: @LargeSpace;
 }
 
 .scaleSettingScrollable {
-    overflow-y: auto;
-    overflow-x: hidden;
-    height:100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: 100%;
 }
 
 .disableFocusDefaults[tabindex] {
-    &:focus {
-        outline: none;
-    }
+  &:focus {
+    outline: none;
+  }
 
-    &:active {
-        outline: none;
-    }
+  &:active {
+    outline: none;
+  }
 }
 
 .indexingPolicyEditor {
-    width: 100%;
-    height: calc(~"100vh - 400px");
+  width: 100%;
+  height: calc(~"100vh - 400px");
 }
 
 .scaleDivison {
-    padding: @MediumSpace 0px @DefaultSpace 0px;
+  padding: @MediumSpace 0px @DefaultSpace 0px;
 }
 
 .scaleSettingTitle {
-    font-size: 14px;
-    cursor: pointer;
+  font-size: 14px;
+  cursor: pointer;
 }
 
 .autoScaleThroughputTitle {
-    margin-bottom: @SmallSpace;
+  margin-bottom: @SmallSpace;
 }
 
 .autoScaleDescription {
-    margin-top: 6px;
-    margin-bottom: @SmallSpace;
+  margin-top: 6px;
+  margin-bottom: @SmallSpace;
 }
 
 .ssExpandCollapseIcon {
-    width: 10px;
-    height: 10px;
+  width: 10px;
+  height: 10px;
 }
 
 .ssCollapseIcon {
-    margin-bottom: 5px;
+  margin-bottom: 5px;
 }
 
 .ssTextAllignment {
-    padding-left: 19px;
+  padding-left: 19px;
 }
 
 .throughputStorageBlock {
-    border-top: 1px solid #bbb;
-    border-bottom: 1px solid #bbb;
-    background-color: #ccc;
-    padding-left: 10px;
-    width: 315px;
+  border-top: 1px solid #bbb;
+  border-bottom: 1px solid #bbb;
+  background-color: #ccc;
+  padding-left: 10px;
+  width: 315px;
 }
 
 .storageCapacityTitle {
-    padding: @LargeSpace 0px;
-
+  padding: @LargeSpace 0px;
 }
 .throughputStorageValue {
-    font-size: 12px;
+  font-size: 12px;
 }
 
-.estimatedCost, .largePartitionKeyEnabled {
-    padding: @SmallSpace 0px @LargeSpace;
+.estimatedCost,
+.largePartitionKeyEnabled {
+  padding: @SmallSpace 0px @LargeSpace;
 }
 
 .storagePadding {
-    padding-top: 6px;
-    padding-bottom: 14px;
+  padding-top: 6px;
+  padding-bottom: 14px;
 }
 
 .dirtyTextbox {
-    width: 176px;
-    margin-top: 7px;
-    padding-left: 5px;
+  width: 176px;
+  margin-top: 7px;
+  padding-left: 5px;
 }
 
 .formTitleFirst {
-    padding: @DefaultSpace (2 * @MediumSpace);
+  padding: @DefaultSpace (2 * @MediumSpace);
 }
 
 .formTitleTextbox {
-    padding: 0px 0px @DefaultSpace (2 * @MediumSpace);
+  padding: 0px 0px @DefaultSpace (2 * @MediumSpace);
 }
 
 .formTree {
-    border: 1px solid #969696;
-    color: #393939;
-    padding: 0px 12px 1px 8px;
+  border: 1px solid var(--colorNeutralStroke1);
+  color: var(--colorNeutralForeground1);
+  background-color: var(--colorNeutralBackground1);
+  padding: 0px 12px 1px 8px;
 }
 
 .formTree:hover {
-    border: 1px solid #969696;
-    background-color: #e6f8fe;
+  border: 1px solid var(--colorNeutralStroke1Hover);
+  background-color: var(--colorNeutralBackground1Hover);
+}
+
+.formTree::placeholder {
+  color: var(--colorNeutralForeground2);
+  opacity: 1;
 }
 
 .formTree:active {
-    border: 1px solid #1ebbee;
+  border: 1px solid var(--colorNeutralStroke1Pressed);
+  background-color: var(--colorNeutralBackground1Pressed);
 }
 
 .scaleForm {
-    padding-left: 8px;
-    color: @BaseDark;
-    border: 1px solid #969696;
-    min-width: @ScaleFormWidth;
+  padding-left: 8px;
+  color: @BaseDark;
+  border: 1px solid #969696;
+  min-width: @ScaleFormWidth;
 
-    &:hover {
-        background-color: #e6f8fe;
-    }    
+  &:hover {
+    background-color: #e6f8fe;
+  }
 }
 
 .formTitle {
-    margin-top: 16px;
-    margin-bottom: 4px; 
+  margin-top: 16px;
+  margin-bottom: 4px;
 }
 
-
 .spUdfTriggerHeader {
-    padding: @DefaultSpace 0px @SmallSpace (2 * @MediumSpace); 
+  padding: @DefaultSpace 0px @SmallSpace (2 * @MediumSpace);
 }
 
 .storedUdfTriggerEditor {
-    width: 100%;
-    height: 100%;
+  width: 100%;
+  height: 100%;
 }
 
 .unselectedRadio {
-    background-color: white;
-    border-color: #EEE!important;
-    color: black!important;
+  background-color: white;
+  border-color: #eee !important;
+  color: black !important;
 }
 
 .disabledRadio {
-    background-color: #A19F9D;
-    border-color: #EEE!important;
-    color: white!important;
+  background-color: #a19f9d;
+  border-color: #eee !important;
+  color: white !important;
 }
 
 .selectedRadio {
-    background-color: @AccentMediumHigh;
-    border-color: #EEE!important;
-    color: white!important;
-    cursor: pointer;
+  background-color: @AccentMediumHigh;
+  border-color: #eee !important;
+  color: white !important;
+  cursor: pointer;
 }
 
 .selectedRadio:hover {
-    background-color: @AccentMediumHigh;
-    border-color: #EEE!important;
-    color: white!important;
-    cursor: pointer;
+  background-color: @AccentMediumHigh;
+  border-color: #eee !important;
+  color: white !important;
+  cursor: pointer;
 }
 
 .selectedRadio:active {
-    background-color: #0072c6;
-    border-color: #EEE!important;
-    color: white!important;
-    cursor: pointer;
-    border: 1px solid #0072c6;
+  background-color: #0072c6;
+  border-color: #eee !important;
+  color: white !important;
+  cursor: pointer;
+  border: 1px solid #0072c6;
 }
 
 .selectedRadio.dirty {
-    background-color: #9b4f96;
+  background-color: #9b4f96;
 }
 
 .tabs {
-    margin: 0;
+  margin: 0;
 }
 
 .formReadOnly {
-    background-color: #ddd;
-    border: 1px solid #969696;
-    min-width: 184px;
-    padding-left: 8px;
+  background-color: #ddd;
+  border: 1px solid #969696;
+  min-width: 184px;
+  padding-left: 8px;
 }
 
 .migration:disabled {
-    background-color: #ccc;
+  background-color: #ccc;
 }
 
 .trigger-field {
-    width: 40%;
-    margin-top: 10px
+  width: 40%;
+  margin-top: 10px;
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
 }
+
+.trigger-field input::placeholder {
+  color: var(--colorNeutralForeground3);
+  opacity: 1;
+}
+
 .trigger-form {
-    padding: 10px 30px 10px 30px;
-}
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
+  padding: 10px 30px;
+}

less/tree.less

@@ -1,270 +1,270 @@
-@import "./Common/Constants";
+// @import "./Common/Constants";
 
-.resourceTree {
-  height: 100%;
-  flex: 0 0 auto;
-  .main {
-    height: 100%;
-  }
-}
+// .resourceTree {
+//   height: 100%;
+//   flex: 0 0 auto;
+//   .main {
+//     height: 100%;
+//   }
+// }
 
-.resourceTreeScroll {
-  height: 100%;
-  display: flex;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding-right: 10px;
-}
+// .resourceTreeScroll {
+//   height: 100%;
+//   display: flex;
+//   overflow-y: auto;
+//   overflow-x: hidden;
+//   padding-right: 10px;
+// }
 
-.userSelectNone {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-}
+// .userSelectNone {
+//   -webkit-user-select: none;
+//   -moz-user-select: none;
+//   -ms-user-select: none;
+// }
 
-.treeHovermargin {
-  margin-left: 16px;
-}
+// .treeHovermargin {
+//   margin-left: 16px;
+// }
 
-.highlight {
-  padding: @SmallSpace 2px;
-  outline: 0;
+// .highlight {
+//   padding: @SmallSpace 2px;
+//   outline: 0;
 
-  &:hover {
-    .hover();
-  }
+//   &:hover {
+//     .hover();
+//   }
 
-  &:active {
-    .active();
-  }
+//   &:active {
+//     .active();
+//   }
 
-  &:focus {
-    .focus();
-  }
-}
+//   &:focus {
+//     .focus();
+//   }
+// }
 
-.contextmenushowing {
-  background-color: #eee;
-}
+// .contextmenushowing {
+//   background-color: #eee;
+// }
 
-.collectionstree {
-  width: 100%;
-  margin-top: @DefaultSpace;
+// .collectionstree {
+//   width: 100%;
+//   margin-top: @DefaultSpace;
 
-  .databaseList {
-    list-style-type: none;
-    padding-left: 0px;
+//   .databaseList {
+//     list-style-type: none;
+//     padding-left: 0px;
 
-    .collectionList {
-      padding-left: (2 * @MediumSpace);
-    }
+//     .collectionList {
+//       padding-left: (2 * @MediumSpace);
+//     }
 
-    .collectionChildList {
-      padding-left: @LargeSpace;
-    }
+//     .collectionChildList {
+//       padding-left: @LargeSpace;
+//     }
 
-    .databaseDocuments {
-      padding-left: (5 * @MediumSpace);
-    }
-  }
-}
+//     .databaseDocuments {
+//       padding-left: (5 * @MediumSpace);
+//     }
+//   }
+// }
 
-.pointerCursor {
-  cursor: pointer;
-}
+// .pointerCursor {
+//   cursor: pointer;
+// }
 
-.menuEllipsis {
-  padding-right: 6px;
-  font-weight: bold;
-  font-size: 18px;
-  position: relative;
-  top: -5px;
-  left: 0px;
-  float: right;
-  display: none;
-  padding-left: 6px !important;
-  line-height: @TreeLineHeight;
-}
+// .menuEllipsis {
+//   padding-right: 6px;
+//   font-weight: bold;
+//   font-size: 18px;
+//   position: relative;
+//   top: -5px;
+//   left: 0px;
+//   float: right;
+//   display: none;
+//   padding-left: 6px !important;
+//   line-height: @TreeLineHeight;
+// }
 
-.databaseMenu {
-  .flex-display();
-}
+// .databaseMenu {
+//   .flex-display();
+// }
 
-.databaseMenu:hover .menuEllipsis,
-.databaseMenu:focus .menuEllipsis {
-  display: block;
-}
+// .databaseMenu:hover .menuEllipsis,
+// .databaseMenu:focus .menuEllipsis {
+//   display: block;
+// }
 
-.databaseCollChildTextOverflow {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  flex: 1;
-}
+// .databaseCollChildTextOverflow {
+//   text-overflow: ellipsis;
+//   white-space: nowrap;
+//   overflow: hidden;
+//   flex: 1;
+// }
 
-.collectionMenu {
-  .flex-display();
-}
+// .collectionMenu {
+//   .flex-display();
+// }
 
-.collectionMenu:hover .menuEllipsis,
-.collectionMenu:focus .menuEllipsis {
-  display: block;
-}
+// .collectionMenu:hover .menuEllipsis,
+// .collectionMenu:focus .menuEllipsis {
+//   display: block;
+// }
 
-.documentsMenu:hover .menuEllipsis,
-.documentsMenu:focus .menuEllipsis {
-  display: block;
-}
+// .documentsMenu:hover .menuEllipsis,
+// .documentsMenu:focus .menuEllipsis {
+//   display: block;
+// }
 
-.treeChildMenu {
-  display: flex;
-}
+// .treeChildMenu {
+//   display: flex;
+// }
 
-.storedProcedureMenu:hover .menuEllipsis,
-.storedProcedureMenu:focus .menuEllipsis {
-  display: block;
-}
+// .storedProcedureMenu:hover .menuEllipsis,
+// .storedProcedureMenu:focus .menuEllipsis {
+//   display: block;
+// }
 
-.childMenu {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  padding-left: (6 * @MediumSpace);
-  width: 100%;
-}
+// .childMenu {
+//   overflow: hidden;
+//   text-overflow: ellipsis;
+//   white-space: nowrap;
+//   padding-left: (6 * @MediumSpace);
+//   width: 100%;
+// }
 
-.storedChildMenu:hover .menuEllipsis,
-.storedChildMenu:focus .menuEllipsis {
-  display: block;
-}
+// .storedChildMenu:hover .menuEllipsis,
+// .storedChildMenu:focus .menuEllipsis {
+//   display: block;
+// }
 
-.contextmenu6 {
-  top: -29px;
-}
+// .contextmenu6 {
+//   top: -29px;
+// }
 
-.userDefinedMenu:hover .contextmenu6 {
-  display: block;
-}
+// .userDefinedMenu:hover .contextmenu6 {
+//   display: block;
+// }
 
-.userDefinedchildMenu:hover .menuEllipsis,
-.userDefinedchildMenu:focus .menuEllipsis {
-  display: block;
-}
+// .userDefinedchildMenu:hover .menuEllipsis,
+// .userDefinedchildMenu:focus .menuEllipsis {
+//   display: block;
+// }
 
-.triggersMenu:hover .menuEllipsis,
-.triggersMenu:focus .menuEllipsis {
-  display: block;
-}
+// .triggersMenu:hover .menuEllipsis,
+// .triggersMenu:focus .menuEllipsis {
+//   display: block;
+// }
 
-.triggersChildMenu:hover .menuEllipsis,
-.triggersChildMenu:focus .menuEllipsis {
-  display: block;
-}
+// .triggersChildMenu:hover .menuEllipsis,
+// .triggersChildMenu:focus .menuEllipsis {
+//   display: block;
+// }
 
-.databaseId {
-  font-size: 14px;
-}
+// .databaseId {
+//   font-size: 14px;
+// }
 
-.storedUdfTriggerMenu {
-  padding-left: 0px;
-}
+// .storedUdfTriggerMenu {
+//   padding-left: 0px;
+// }
 
-.collectionstree img {
-  width: 16px;
-  height: 16px;
-  vertical-align: text-top;
-}
+// .collectionstree img {
+//   width: 16px;
+//   height: 16px;
+//   vertical-align: text-top;
+// }
 
-img.collectionsTreeCollapseExpand {
-  width: 10px;
-  height: 10px;
-  vertical-align: middle;
-  margin-bottom: 5px;
-}
+// img.collectionsTreeCollapseExpand {
+//   width: 10px;
+//   height: 10px;
+//   vertical-align: middle;
+//   margin-bottom: 5px;
+// }
 
-.collapsed::before {
-  content: "\23F5";
-  margin-left: 0px;
-  font-size: 15px;
-}
+// .collapsed::before {
+//   content: "\23F5";
+//   margin-left: 0px;
+//   font-size: 15px;
+// }
 
-.expanded::before {
-  content: "\23F7";
-  margin-left: 0px;
-  font-size: 15px;
-}
+// .expanded::before {
+//   content: "\23F7";
+//   margin-left: 0px;
+//   font-size: 15px;
+// }
 
-.collectionMenuChildren {
-  padding-left: 42px;
-}
+// .collectionMenuChildren {
+//   padding-left: 42px;
+// }
 
-.main-nav {
-  width: 100vh;
-  height: 40px;
-  background: white;
-  transform-origin: left top;
-  -webkit-transform-origin: left top;
-  -ms-transform-origin: left top;
-  transform: rotate(-90deg) translateX(-100%);
-  -webkit-transform: rotate(-90deg) translateX(-100%);
-  -ms-transform: rotate(-90deg) translateX(-100%);
-  border-bottom: 1px solid #ccc;
-}
+// .main-nav {
+//   width: 100vh;
+//   height: 40px;
+//   background: white;
+//   transform-origin: left top;
+//   -webkit-transform-origin: left top;
+//   -ms-transform-origin: left top;
+//   transform: rotate(-90deg) translateX(-100%);
+//   -webkit-transform: rotate(-90deg) translateX(-100%);
+//   -ms-transform: rotate(-90deg) translateX(-100%);
+//   border-bottom: 1px solid #ccc;
+// }
 
-.main-nav-img {
-  width: 16px;
-  height: 16px;
-  margin: -32px 0 0 0;
-  transform: rotate(-90deg) translateX(-100%);
-  -webkit-transform: rotate(-90deg) translateX(-100%);
-  -ms-transform: rotate(-90deg) translateX(-100%);
-}
+// .main-nav-img {
+//   width: 16px;
+//   height: 16px;
+//   margin: -32px 0 0 0;
+//   transform: rotate(-90deg) translateX(-100%);
+//   -webkit-transform: rotate(-90deg) translateX(-100%);
+//   -ms-transform: rotate(-90deg) translateX(-100%);
+// }
 
-.main-nav-img.main-nav-sub-img {
-  width: 16px;
-  height: 16px;
-  margin: 0px 0px 0 0;
-  transform: rotate(180deg) translateX(0%);
-  -webkit-transform: rotate(180deg) translateX(0%);
-  -ms-transform: rotate(180deg) translateX(0%);
-  position: absolute;
-  right: -8px;
-  top: 16px;
-}
+// .main-nav-img.main-nav-sub-img {
+//   width: 16px;
+//   height: 16px;
+//   margin: 0px 0px 0 0;
+//   transform: rotate(180deg) translateX(0%);
+//   -webkit-transform: rotate(180deg) translateX(0%);
+//   -ms-transform: rotate(180deg) translateX(0%);
+//   position: absolute;
+//   right: -8px;
+//   top: 16px;
+// }
 
-ul.nav {
-  margin: 0 auto;
-  margin-top: 0px;
-  margin-left: 0px;
-}
+// ul.nav {
+//   margin: 0 auto;
+//   margin-top: 0px;
+//   margin-left: 0px;
+// }
 
-.mini ul.nav li {
-  float: right;
-  line-height: 25px;
-  height: auto;
-  margin-top: 3px;
-}
+// .mini ul.nav li {
+//   float: right;
+//   line-height: 25px;
+//   height: auto;
+//   margin-top: 3px;
+// }
 
-.spancolchildstyle {
-  padding: 4px;
-}
+// .spancolchildstyle {
+//   padding: 4px;
+// }
 
-.contextmenubutton {
-  float: right;
-  display: none;
-}
+// .contextmenubutton {
+//   float: right;
+//   display: none;
+// }
 
-.highlight:hover > .contextmenubutton {
-  display: unset;
-}
+// .highlight:hover > .contextmenubutton {
+//   display: unset;
+// }
 
-.highlight:hover > .contextmenubutton::after {
-  content: "\2026";
-  font-size: 12px;
-}
+// .highlight:hover > .contextmenubutton::after {
+//   content: "\2026";
+//   font-size: 12px;
+// }
 
-.showEllipsis {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
+// .showEllipsis {
+//   text-overflow: ellipsis;
+//   white-space: nowrap;
+//   overflow: hidden;
+// }

src/Contracts/ViewModels.ts

@@ -5,7 +5,7 @@ import {
   TriggerDefinition,
   UserDefinedFunctionDefinition,
 } from "@azure/cosmos";
-import Explorer from "../Explorer/Explorer";
+import type Explorer from "../Explorer/Explorer";
 import { ConsoleData } from "../Explorer/Menus/NotificationConsole/ConsoleData";
 import { CassandraTableKey, CassandraTableKeys } from "../Explorer/Tables/TableDataClient";
 import ConflictId from "../Explorer/Tree/ConflictId";
@@ -462,3 +462,6 @@ export interface DropdownOption<T> {
   value: T;
   disable?: boolean;
 }
+
+// Remove the duplicate Explorer interface and export the type
+export type { Explorer };

src/Explorer/Controls/Editor/EditorReact.tsx

@@ -1,4 +1,5 @@
 import { Spinner, SpinnerSize } from "@fluentui/react";
+import { monacoTheme } from "hooks/useTheme";
 import * as React from "react";
 import { loadMonaco, monaco } from "../../LazyMonaco";
 // import "./EditorReact.less";
@@ -211,7 +212,7 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
       ariaLabel: this.props.ariaLabel,
       fontSize: this.props.fontSize || 12,
       automaticLayout: true,
-      theme: this.props.theme,
+      theme: monacoTheme,
       wordWrap: this.props.wordWrap || "off",
       lineNumbers: this.props.lineNumbers || "off",
       lineNumbersMinChars: this.props.lineNumbersMinChars,

src/Explorer/Controls/Settings/SettingsComponent.less

@@ -4,6 +4,8 @@
   height: 100%;
   overflow-y: auto;
   width: 100%;
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
 }
 
 .settingsV2ToolTip {
@@ -23,6 +25,8 @@
   overflow-y: auto;
   width: 100%;
   font-family: @DataExplorerFont;
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
 }
 
 .settingsV2Editor {

src/Explorer/Controls/Settings/SettingsComponent.test.tsx

@@ -1,5 +1,8 @@
+import { IndexingPolicy } from "@azure/cosmos";
+import { act } from "@testing-library/react";
 import { AuthType } from "AuthType";
 import { shallow } from "enzyme";
+import { useIndexingPolicyStore } from "Explorer/Tabs/QueryTab/ResultsView";
 import ko from "knockout";
 import { Features } from "Platform/Hosted/extractFeatures";
 import React from "react";
@@ -288,3 +291,47 @@ describe("SettingsComponent", () => {
     expect(wrapper.state("isThroughputBucketsSaveable")).toBe(false);
   });
 });
+
+describe("SettingsComponent - indexing policy subscription", () => {
+  const baseProps: SettingsComponentProps = {
+    settingsTab: new CollectionSettingsTabV2({
+      collection: collection,
+      tabKind: ViewModels.CollectionTabKind.CollectionSettingsV2,
+      title: "Scale & Settings",
+      tabPath: "",
+      node: undefined,
+    }),
+  };
+
+  it("subscribes to the correct container's indexing policy and updates state on change", async () => {
+    const containerId = collection.id();
+    const mockIndexingPolicy: IndexingPolicy = {
+      automatic: false,
+      indexingMode: "lazy",
+      includedPaths: [{ path: "/foo/*" }],
+      excludedPaths: [{ path: "/bar/*" }],
+      compositeIndexes: [],
+      spatialIndexes: [],
+      vectorIndexes: [],
+      fullTextIndexes: [],
+    };
+
+    const wrapper = shallow(<SettingsComponent {...baseProps} />);
+    const instance = wrapper.instance() as SettingsComponent;
+
+    await act(async () => {
+      useIndexingPolicyStore.setState({
+        indexingPolicies: {
+          [containerId]: mockIndexingPolicy,
+        },
+      });
+    });
+
+    wrapper.update();
+
+    expect(wrapper.state("indexingPolicyContent")).toEqual(mockIndexingPolicy);
+    expect(wrapper.state("indexingPolicyContentBaseline")).toEqual(mockIndexingPolicy);
+    // @ts-expect-error: rawDataModel is intentionally accessed for test validation
+    expect(instance.collection.rawDataModel.indexingPolicy).toEqual(mockIndexingPolicy);
+  });
+});

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -1,4 +1,4 @@
-import { IPivotItemProps, IPivotProps, Pivot, PivotItem } from "@fluentui/react";
+import { IPivotItemProps, IPivotProps, Pivot, PivotItem, Stack, getTheme } from "@fluentui/react";
 import {
   ComputedPropertiesComponent,
   ComputedPropertiesComponentProps,
@@ -11,6 +11,7 @@ import {
   ThroughputBucketsComponent,
   ThroughputBucketsComponentProps,
 } from "Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent";
+import { useIndexingPolicyStore } from "Explorer/Tabs/QueryTab/ResultsView";
 import { useDatabases } from "Explorer/useDatabases";
 import { isFullTextSearchEnabled, isVectorSearchEnabled } from "Utils/CapabilityUtils";
 import { isRunningOnPublicCloud } from "Utils/CloudUtils";
@@ -65,7 +66,6 @@ import {
   parseConflictResolutionMode,
   parseConflictResolutionProcedure,
 } from "./SettingsUtils";
-
 interface SettingsV2TabInfo {
   tab: SettingsV2TabTypes;
   content: JSX.Element;
@@ -167,7 +167,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   private totalThroughputUsed: number;
   private throughputBucketsEnabled: boolean;
   public mongoDBCollectionResource: MongoDBCollectionResource;
-
+  private unsubscribe: () => void;
   constructor(props: SettingsComponentProps) {
     super(props);
 
@@ -298,8 +298,19 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     if (this.props.settingsTab.isActive()) {
       useCommandBar.getState().setContextButtons(this.getTabsButtons());
     }
+    this.unsubscribe = useIndexingPolicyStore.subscribe(
+      () => {
+        this.refreshCollectionData();
+      },
+      (state) => state.indexingPolicies[this.collection.id()],
+    );
+    this.refreshCollectionData();
+  }
+  componentWillUnmount(): void {
+    if (this.unsubscribe) {
+      this.unsubscribe();
+    }
   }
-
   componentDidUpdate(): void {
     if (this.props.settingsTab.isActive()) {
       useCommandBar.getState().setContextButtons(this.getTabsButtons());
@@ -772,7 +783,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
         { name: "name_of_property", query: "query_to_compute_property" },
       ] as DataModels.ComputedProperties;
     }
-
     const throughputBuckets = this.offer?.throughputBuckets;
 
     return {
@@ -924,10 +934,31 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       startKey,
     );
   };
+  private refreshCollectionData = async (): Promise<void> => {
+    const containerId = this.collection.id();
+    const latestIndexingPolicy = useIndexingPolicyStore.getState().indexingPolicies[containerId];
+    const rawPolicy = latestIndexingPolicy ?? this.collection.indexingPolicy();
+
+    const latestCollection: DataModels.IndexingPolicy = {
+      automatic: rawPolicy?.automatic ?? true,
+      indexingMode: rawPolicy?.indexingMode ?? "consistent",
+      includedPaths: rawPolicy?.includedPaths ?? [],
+      excludedPaths: rawPolicy?.excludedPaths ?? [],
+      compositeIndexes: rawPolicy?.compositeIndexes ?? [],
+      spatialIndexes: rawPolicy?.spatialIndexes ?? [],
+      vectorIndexes: rawPolicy?.vectorIndexes ?? [],
+      fullTextIndexes: rawPolicy?.fullTextIndexes ?? [],
+    };
+
+    this.collection.rawDataModel.indexingPolicy = latestCollection;
+    this.setState({
+      indexingPolicyContent: latestCollection,
+      indexingPolicyContentBaseline: latestCollection,
+    });
+  };
 
   private saveCollectionSettings = async (startKey: number): Promise<void> => {
     const newCollection: DataModels.Collection = { ...this.collection.rawDataModel };
-
     if (
       this.state.isSubSettingsSaveable ||
       this.state.isContainerPolicyDirty ||
@@ -1137,6 +1168,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   };
 
   public render(): JSX.Element {
+    const theme = getTheme();
     const scaleComponentProps: ScaleComponentProps = {
       collection: this.collection,
       database: this.database,
@@ -1154,7 +1186,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       onScaleDiscardableChange: this.onScaleDiscardableChange,
       throughputError: this.state.throughputError,
     };
-
     if (!this.isCollectionSettingsTab) {
       return (
         <div className="settingsV2MainContainer">
@@ -1340,28 +1371,101 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       selectedKey: SettingsV2TabTypes[this.state.selectedTab],
     };
 
-    const pivotItems = tabs.map((tab) => {
-      const pivotItemProps: IPivotItemProps = {
-        itemKey: SettingsV2TabTypes[tab.tab],
-        style: { marginTop: 20 },
-        headerText: getTabTitle(tab.tab),
-      };
-
-      return (
-        <PivotItem key={pivotItemProps.itemKey} {...pivotItemProps}>
-          {tab.content}
-        </PivotItem>
-      );
-    });
+    const pivotStyles = {
+      root: {
+        backgroundColor: 'var(--colorNeutralBackground1)',
+        color: 'var(--colorNeutralForeground1)',
+        selectors: {
+          '& .ms-Pivot-link': {
+            color: 'var(--colorNeutralForeground1)'
+          },
+          '& .ms-Pivot-link.is-selected::before': {
+            backgroundColor: 'var(--colorCompoundBrandBackground)'
+          },
+         
+        }
+      },
+      link: {
+        backgroundColor: 'var(--colorNeutralBackground1)',
+        color: 'var(--colorNeutralForeground1)',
+        selectors: {
+          '&:hover': {
+            backgroundColor: 'var(--colorNeutralBackground1)',
+            color: 'var(--colorNeutralForeground1)'
+          },
+          '&:active': {
+            backgroundColor: 'var(--colorNeutralBackground1)',
+            color: 'var(--colorNeutralForeground1)'
+          },
+          '&[aria-selected="true"]': {
+            backgroundColor: 'var(--colorNeutralBackground1)',
+            color: 'var(--colorNeutralForeground1)',
+            selectors: {
+              '&:hover': {
+                backgroundColor: 'var(--colorNeutralBackground1)',
+                color: 'var(--colorNeutralForeground1)'
+              },
+              '&:active': {
+                backgroundColor: 'var(--colorNeutralBackground1)',
+                color: 'var(--colorNeutralForeground1)'
+              }
+            }
+          }
+        }
+      },
+   
+      itemContainer: {
+        // padding: '20px 24px',
+        backgroundColor: 'var(--colorNeutralBackground1)',
+        color: 'var(--colorNeutralForeground1)'
+      }
+    };
 
+    const contentStyles = {
+      root: {
+        backgroundColor: 'var(--colorNeutralBackground1)',
+        color: 'var(--colorNeutralForeground1)',
+        // padding: '20px 24px'
+      }
+    };
+    
     return (
-      <div className="settingsV2MainContainer">
+      <div className="settingsV2MainContainer" style={{ 
+        backgroundColor: 'var(--colorNeutralBackground1)',
+        color: 'var(--colorNeutralForeground1)',
+        position: 'relative'
+      } as React.CSSProperties}>
         {this.shouldShowKeyspaceSharedThroughputMessage() && (
           <div>This table shared throughput is configured at the keyspace</div>
         )}
 
-        <div className="settingsV2TabsContainer">
-          <Pivot {...pivotProps}>{pivotItems}</Pivot>
+        <div className="settingsV2TabsContainer" style={{ 
+          backgroundColor: 'var(--colorNeutralBackground1)',
+          color: 'var(--colorNeutralForeground1)',
+          position: 'relative',
+          padding: '20px 24px'
+        } as React.CSSProperties}>
+          <Pivot {...pivotProps} styles={pivotStyles}>
+            {tabs.map((tab) => {
+              const pivotItemProps: IPivotItemProps = {
+                itemKey: SettingsV2TabTypes[tab.tab],
+                style: { 
+                  marginTop: 20,
+                  backgroundColor: 'var(--colorNeutralBackground1)',
+                  color: 'var(--colorNeutralForeground1)'
+                },
+                headerText: getTabTitle(tab.tab),
+              };
+
+              return (
+                <PivotItem key={pivotItemProps.itemKey} {...pivotItemProps}>
+                  <Stack styles={contentStyles}>
+                    {tab.content}
+                  </Stack>
+                </PivotItem>
+              );
+            })}
+          </Pivot>
         </div>
       </div>
     );

src/Explorer/Controls/Settings/SettingsRenderUtils.tsx

@@ -63,7 +63,7 @@ export interface PriceBreakdown {
 
 export type editorType = "indexPolicy" | "computedProperties";
 
-export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14, color: "windowtext" } };
+export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14, color: "var(--colorNeutralForeground1)" } };
 
 export const noLeftPaddingCheckBoxStyle: ICheckboxStyles = {
   label: {
@@ -166,7 +166,7 @@ export const separatorStyles: Partial<ISeparatorStyles> = {
 };
 
 export const messageBarStyles: Partial<IMessageBarStyles> = {
-  root: { marginTop: "5px", backgroundColor: "white" },
+  root: { marginTop: "5px", backgroundColor: "var(--colorNeutralBackground1)" },
   text: { fontSize: 14 },
 };
 
@@ -214,9 +214,11 @@ export const getEstimatedSpendingElement = (
   const ruRange: string = isAutoscale ? throughput / 10 + " RU/s - " : "";
   return (
     <Stack>
-      <Text style={{ fontWeight: 600 }}>Cost estimate*</Text>
+      <Text style={{ fontWeight: 600, color: "var(--colorNeutralForeground1)" }}>Cost estimate*</Text>
       {costElement}
-      <Text style={{ fontWeight: 600, marginTop: 15 }}>How we calculate this</Text>
+      <Text style={{ fontWeight: 600, marginTop: 15, color: "var(--colorNeutralForeground1)" }}>
+        How we calculate this
+      </Text>
       <Stack id="throughputSpendElement" style={{ marginTop: 5 }}>
         <span>
           {numberOfRegions} region{numberOfRegions > 1 && <span>s</span>}
@@ -230,7 +232,7 @@ export const getEstimatedSpendingElement = (
           {priceBreakdown.pricePerRu}/RU
         </span>
       </Stack>
-      <Text style={{ marginTop: 15 }}>
+      <Text style={{ marginTop: 15, color: "var(--colorNeutralForeground1)" }}>
         <em>*{estimatedCostDisclaimer}</em>
       </Text>
     </Stack>
@@ -272,7 +274,7 @@ export const updateThroughputDelayedApplyWarningMessage: JSX.Element = (
 
 export const getUpdateThroughputBeyondInstantLimitMessage = (instantMaximumThroughput: number): JSX.Element => {
   return (
-    <Text styles={infoAndToolTipTextStyle} id="updateThroughputDelayedApplyWarningMessage">
+    <Text id="updateThroughputDelayedApplyWarningMessage">
       Scaling up will take 4-6 hours as it exceeds what Azure Cosmos DB can instantly support currently based on your
       number of physical partitions. You can increase your throughput to {instantMaximumThroughput} instantly or proceed
       with this value and wait until the scale-up is completed.
@@ -290,7 +292,7 @@ export const getUpdateThroughputBeyondSupportLimitMessage = (
         Your request to increase throughput exceeds the pre-allocated capacity which may take longer than expected.
         There are three options you can choose from to proceed:
       </Text>
-      <ol style={{ fontSize: 14, color: "windowtext", marginTop: "5px" }}>
+      <ol style={{ fontSize: 14, color: "var(--colorNeutralForeground1)", marginTop: "5px" }}>
         <li>You can instantly scale up to {instantMaximumThroughput} RU/s.</li>
         {instantMaximumThroughput < maximumThroughput && (
           <li>You can asynchronously scale up to any value under {maximumThroughput} RU/s in 4-6 hours.</li>
@@ -326,7 +328,7 @@ export const getUpdateThroughputBelowMinimumMessage = (minimum: number): JSX.Ele
 };
 
 export const saveThroughputWarningMessage: JSX.Element = (
-  <Text styles={infoAndToolTipTextStyle}>
+  <Text>
     Your bill will be affected as you update your throughput settings. Please review the updated cost estimate below
     before saving your changes
   </Text>
@@ -507,11 +509,25 @@ export const getTextFieldStyles = (current: isDirtyTypes, baseline: isDirtyTypes
     height: 25,
     width: 300,
     borderColor: isDirty(current, baseline) ? StyleConstants.Dirty : "",
+    backgroundColor: "var(--colorNeutralBackground3)",
     selectors: {
       ":disabled": {
-        backgroundColor: StyleConstants.BaseMedium,
+        backgroundColor: "var(--colorNeutralBackground1)",
         borderColor: StyleConstants.BaseMediumHigh,
       },
+      "input:disabled": {
+        backgroundColor: "var(--colorNeutralBackground3)",
+      },
+    },
+    field: {
+      color: "var(--colorNeutralForeground1)",
+    },
+  },
+  subComponentStyles: {
+    label: {
+      root: {
+        color: "var(--colorNeutralForeground1)",
+      },
     },
   },
 });
@@ -521,6 +537,9 @@ export const getChoiceGroupStyles = (
   baseline: isDirtyTypes,
   isHorizontal?: boolean,
 ): Partial<IChoiceGroupStyles> => ({
+  label: {
+    color: "var(--colorNeutralForeground1)",
+  },
   flexContainer: [
     {
       selectors: {
@@ -535,6 +554,7 @@ export const getChoiceGroupStyles = (
           fontSize: 14,
           fontFamily: StyleConstants.DataExplorerFont,
           padding: "2px 5px",
+          color: "var(--colorNeutralForeground1)",
         },
       },
       display: isHorizontal ? "inline-flex" : "default",

src/Explorer/Controls/Settings/SettingsSubComponents/ComputedPropertiesComponent.tsx

@@ -3,9 +3,9 @@ import * as DataModels from "Contracts/DataModels";
 import { titleAndInputStackProps, unsavedEditorWarningMessage } from "Explorer/Controls/Settings/SettingsRenderUtils";
 import { isDirty } from "Explorer/Controls/Settings/SettingsUtils";
 import { loadMonaco } from "Explorer/LazyMonaco";
+import { monacoTheme } from "hooks/useTheme";
 import * as monaco from "monaco-editor";
 import * as React from "react";
-
 export interface ComputedPropertiesComponentProps {
   computedPropertiesContent: DataModels.ComputedProperties;
   computedPropertiesContentBaseline: DataModels.ComputedProperties;
@@ -86,6 +86,7 @@ export class ComputedPropertiesComponent extends React.Component<
       value: value,
       language: "json",
       ariaLabel: "Computed properties",
+      theme:monacoTheme,
     });
     if (this.computedPropertiesEditor) {
       const computedPropertiesEditorModel = this.computedPropertiesEditor.getModel();

src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.tsx

@@ -1,4 +1,5 @@
 import { MessageBar, MessageBarType, Stack } from "@fluentui/react";
+import { monacoTheme } from "hooks/useTheme";
 import * as monaco from "monaco-editor";
 import * as React from "react";
 import * as DataModels from "../../../../Contracts/DataModels";
@@ -6,7 +7,6 @@ import { loadMonaco } from "../../../LazyMonaco";
 import { titleAndInputStackProps, unsavedEditorWarningMessage } from "../SettingsRenderUtils";
 import { isDirty, isIndexTransforming } from "../SettingsUtils";
 import { IndexingPolicyRefreshComponent } from "./IndexingPolicyRefresh/IndexingPolicyRefreshComponent";
-
 export interface IndexingPolicyComponentProps {
   shouldDiscardIndexingPolicy: boolean;
   resetShouldDiscardIndexingPolicy: () => void;
@@ -87,20 +87,71 @@ export class IndexingPolicyComponent extends React.Component<
   };
 
   private async createIndexingPolicyEditor(): Promise<void> {
+    if (!this.indexingPolicyDiv.current) {
+      return;
+    }
     const value: string = JSON.stringify(this.props.indexingPolicyContent, undefined, 4);
     const monaco = await loadMonaco();
-    this.indexingPolicyEditor = monaco.editor.create(this.indexingPolicyDiv.current, {
-      value: value,
-      language: "json",
-      readOnly: isIndexTransforming(this.props.indexTransformationProgress),
-      ariaLabel: "Indexing Policy",
-    });
-    if (this.indexingPolicyEditor) {
-      const indexingPolicyEditorModel = this.indexingPolicyEditor.getModel();
-      indexingPolicyEditorModel.onDidChangeContent(this.onEditorContentChange.bind(this));
-      this.props.logIndexingPolicySuccessMessage();
+    if (this.indexingPolicyDiv.current) {
+      this.indexingPolicyEditor = monaco.editor.create(this.indexingPolicyDiv.current, {
+        value: value,
+        language: "json",
+        readOnly: isIndexTransforming(this.props.indexTransformationProgress),
+        ariaLabel: "Indexing Policy",
+        theme: monacoTheme,
+      });
+      if (this.indexingPolicyEditor) {
+        const indexingPolicyEditorModel = this.indexingPolicyEditor.getModel();
+        indexingPolicyEditorModel.onDidChangeContent(this.onEditorContentChange.bind(this));
+        this.props.logIndexingPolicySuccessMessage();
+      }
     }
   }
+//   private async createIndexingPolicyEditor(): Promise<void> {
+//   const isDarkMode = true;
+//   const monacoThemeName = "fluent-theme";
+
+//   if (!this.indexingPolicyDiv.current) return;
+
+//   const value: string = JSON.stringify(this.props.indexingPolicyContent, undefined, 4);
+//   const monaco = await loadMonaco();
+
+//   // Safely get Fluent UI theme colors
+//   const bodyStyles = getComputedStyle(document.body);
+//   const backgroundColor = bodyStyles.getPropertyValue("--colorNeutralBackground1").trim() || "#1b1a19";
+//   const foregroundColor = bodyStyles.getPropertyValue("--colorNeutralForeground1").trim() || "#ffffff";
+
+//   // Define Monaco theme using Fluent UI colors
+//   monaco.editor.defineTheme(monacoThemeName, {
+//     base: isDarkMode ? "vs-dark" : "vs",
+//     inherit: true,
+//     rules: [],
+//     colors: {
+//       "editor.background": backgroundColor,
+//       "editor.foreground": foregroundColor,
+//       "editorCursor.foreground": "#ffcc00",
+//       "editorLineNumber.foreground": "#aaaaaa",
+//       "editor.selectionBackground": "#666666",
+//       "editor.lineHighlightBackground": "#333333"
+//     }
+//   });
+
+//   // Create the editor with the custom theme
+//   this.indexingPolicyEditor = monaco.editor.create(this.indexingPolicyDiv.current, {
+//     value,
+//     language: "json",
+//     readOnly: isIndexTransforming(this.props.indexTransformationProgress),
+//     ariaLabel: "Indexing Policy",
+//     theme: monacoThemeName
+//   });
+
+//   if (this.indexingPolicyEditor) {
+//     const indexingPolicyEditorModel = this.indexingPolicyEditor.getModel();
+//     indexingPolicyEditorModel?.onDidChangeContent(this.onEditorContentChange.bind(this));
+//     this.props.logIndexingPolicySuccessMessage();
+//   }
+// }
+
 
   private onEditorContentChange = (): void => {
     const indexingPolicyEditorModel = this.indexingPolicyEditor.getModel();

src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/IndexingPolicyRefreshComponent.tsx

@@ -1,10 +1,10 @@
-import * as React from "react";
 import { MessageBar, MessageBarType } from "@fluentui/react";
+import * as React from "react";
+import { handleError } from "../../../../../Common/ErrorHandlingUtils";
 import {
   mongoIndexTransformationRefreshingMessage,
   renderMongoIndexTransformationRefreshMessage,
 } from "../../SettingsRenderUtils";
-import { handleError } from "../../../../../Common/ErrorHandlingUtils";
 import { isIndexTransforming } from "../../SettingsUtils";
 
 export interface IndexingPolicyRefreshComponentProps {

src/Explorer/Controls/Settings/SettingsSubComponents/PartitionKeyComponent.tsx

@@ -56,13 +56,15 @@ export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({ da
   const partitionKeyValue = getPartitionKeyValue();
 
   const textHeadingStyle = {
-    root: { fontWeight: FontWeights.semibold, fontSize: 16 },
+    root: { fontWeight: FontWeights.semibold, fontSize: 16, color: 'var(--colorNeutralForeground1)' },
   };
 
   const textSubHeadingStyle = {
-    root: { fontWeight: FontWeights.semibold },
+    root: { fontWeight: FontWeights.semibold , color: 'var(--colorNeutralForeground1)'  },
+  };
+  const textSubHeadingStyle1 = {
+    root: {color: 'var(--colorNeutralForeground1)'  },
   };
-
   const startPollingforUpdate = (currentJob: DataTransferJobGetResults) => {
     if (isCurrentJobInProgress(currentJob)) {
       const jobName = currentJob?.properties?.jobName;
@@ -158,8 +160,8 @@ export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({ da
             <Text styles={textSubHeadingStyle}>Partitioning</Text>
           </Stack>
           <Stack tokens={{ childrenGap: 5 }}>
-            <Text>{partitionKeyValue}</Text>
-            <Text>{isHierarchicalPartitionedContainer() ? "Hierarchical" : "Non-hierarchical"}</Text>
+            <Text styles={textSubHeadingStyle1}>{partitionKeyValue}</Text>
+            <Text styles={textSubHeadingStyle1}>{isHierarchicalPartitionedContainer() ? "Hierarchical" : "Non-hierarchical"}</Text>
           </Stack>
         </Stack>
       </Stack>
@@ -174,7 +176,7 @@ export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({ da
           Learn more
         </Link>
       </MessageBar>
-      <Text>
+      <Text styles={textSubHeadingStyle1}>
         To change the partition key, a new destination container must be created or an existing destination container
         selected. Data will then be copied to the destination container.
       </Text>

src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx

@@ -1,4 +1,4 @@
-import { ChoiceGroup, IChoiceGroupOption, Label, Link, MessageBar, Stack, Text, TextField } from "@fluentui/react";
+import { ChoiceGroup, IChoiceGroupOption, Label, Link, MessageBar, Stack, Text, TextField, getTheme, mergeStyleSets } from "@fluentui/react";
 import * as React from "react";
 import * as ViewModels from "../../../../Contracts/ViewModels";
 import { userContext } from "../../../../UserContext";
@@ -25,6 +25,13 @@ import {
 } from "../SettingsUtils";
 import { ToolTipLabelComponent } from "./ToolTipLabelComponent";
 
+const theme = getTheme();
+
+const classNames = mergeStyleSets({
+  hintText: {
+    color: 'var(--colorNeutralForeground1)', // theme-aware
+  },
+});
 export interface SubSettingsComponentProps {
   collection: ViewModels.Collection;
   timeToLive: TtlType;
@@ -181,7 +188,19 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
     userContext.apiType === "Mongo" ? (
       <MessageBar
         messageBarIconProps={{ iconName: "InfoSolid", className: "messageBarInfoIcon" }}
-        styles={{ text: { fontSize: 14 } }}
+        styles={{
+          root: {
+            backgroundColor: 'var(--colorNeutralBackground1)',
+            color: 'var(--colorNeutralForeground1)'
+          },
+          text: {
+            fontSize: 14,
+            color: theme.semanticColors.bodyText,
+          },
+          icon: {
+            color: theme.semanticColors.bodyText,
+          },
+        }}
       >
         To enable time-to-live (TTL) for your collection/documents,
         <Link href="https://docs.microsoft.com/en-us/azure/cosmos-db/mongodb-time-to-live" target="_blank">
@@ -191,7 +210,7 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
       </MessageBar>
     ) : (
       <Stack {...titleAndInputStackProps}>
-        <ChoiceGroup
+        <ChoiceGroup  
           id="timeToLive"
           label="Time to Live"
           selectedKey={this.props.timeToLive}
@@ -323,14 +342,14 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
       )}
 
       {userContext.apiType === "SQL" && this.isLargePartitionKeyEnabled() && (
-        <Text>Large {this.partitionKeyName.toLowerCase()} has been enabled.</Text>
+        <Text className={classNames.hintText}>Large {this.partitionKeyName.toLowerCase()} has been enabled.</Text>
       )}
 
       {userContext.apiType === "SQL" &&
         (this.isHierarchicalPartitionedContainer() ? (
-          <Text>Hierarchically partitioned container.</Text>
-        ) : (
-          <Text>Non-hierarchically partitioned container.</Text>
+          <Text className={classNames.hintText}>Hierarchically partitioned container.</Text>
+      ) : (
+        <Text className={classNames.hintText}>Non-hierarchically partitioned container.</Text>
         ))}
     </Stack>
   );

src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx

@@ -235,12 +235,12 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
       );
       return (
         <div>
-          <Text style={{ fontWeight: 600 }}>Updated cost per month</Text>
+          <Text style={{ fontWeight: 600 , color: 'var(--colorNeutralForeground1)' }}>Updated cost per month</Text>
           <Stack horizontal style={{ marginTop: 5, marginBottom: 10 }}>
-            <Text style={{ width: "50%" }}>
+            <Text style={{ width: "50%" , color: 'var(--colorNeutralForeground1)' }}>
               {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice / 10)} min
             </Text>
-            <Text style={{ width: "50%" }}>
+            <Text style={{ width: "50%" , color: 'var(--colorNeutralForeground1)'}}>
               {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice)} max
             </Text>
           </Stack>
@@ -253,12 +253,12 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
       return (
         <Stack {...checkBoxAndInputStackProps} style={{ marginTop: 15 }}>
           {newThroughput && newThroughputCostElement()}
-          <Text style={{ fontWeight: 600 }}>Current cost per month</Text>
-          <Stack horizontal style={{ marginTop: 5 }}>
-            <Text style={{ width: "50%" }}>
+          <Text style={{ fontWeight: 600, color: 'var(--colorNeutralForeground1)' }}>Current cost per month</Text>
+          <Stack horizontal style={{ marginTop: 5, color: 'var(--colorNeutralForeground1)' }}>
+            <Text style={{ width: "50%" , color: 'var(--colorNeutralForeground1)' }}>
               {prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice / 10)} min
             </Text>
-            <Text style={{ width: "50%" }}>
+            <Text style={{ width: "50%" , color: 'var(--colorNeutralForeground1)' }}>
               {prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice)} max
             </Text>
           </Stack>
@@ -268,7 +268,10 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
 
     return getEstimatedSpendingElement(costElement(), newThroughput ?? throughput, numberOfRegions, prices, true);
   };
-
+  settingsAndScaleStyle = {
+    root: {  width: "33%", 
+      color: 'var(--colorNeutralForeground1)' },
+  };
   private getEstimatedManualSpendElement = (
     throughput: number,
     serverId: string,
@@ -288,36 +291,36 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
       );
       return (
         <div>
-          <Text style={{ fontWeight: 600 }}>Updated cost per month</Text>
+          <Text style={{ fontWeight: 600, color: 'var(--colorNeutralForeground1)' }}>Updated cost per month</Text>
           <Stack horizontal style={{ marginTop: 5, marginBottom: 10 }}>
-            <Text style={{ width: "33%" }}>
+            <Text style={ this.settingsAndScaleStyle.root }>
               {newPrices.currencySign} {calculateEstimateNumber(newPrices.hourlyPrice)}/hr
             </Text>
-            <Text style={{ width: "33%" }}>
+            <Text style={ this.settingsAndScaleStyle.root }>
               {newPrices.currencySign} {calculateEstimateNumber(newPrices.dailyPrice)}/day
             </Text>
-            <Text style={{ width: "33%" }}>
+            <Text style={ this.settingsAndScaleStyle.root }>
               {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice)}/mo
             </Text>
           </Stack>
         </div>
       );
     };
-
+ 
     const costElement = (): JSX.Element => {
       const prices: PriceBreakdown = getRuPriceBreakdown(throughput, serverId, numberOfRegions, isMultimaster, false);
       return (
         <Stack {...checkBoxAndInputStackProps} style={{ marginTop: 15 }}>
           {newThroughput && newThroughputCostElement()}
-          <Text style={{ fontWeight: 600 }}>Current cost per month</Text>
+          <Text style={{ fontWeight: 600 , color: 'var(--colorNeutralForeground1)'}}>Current cost per month</Text>
           <Stack horizontal style={{ marginTop: 5 }}>
-            <Text style={{ width: "33%" }}>
+            <Text style={ this.settingsAndScaleStyle.root }>
               {prices.currencySign} {calculateEstimateNumber(prices.hourlyPrice)}/hr
             </Text>
-            <Text style={{ width: "33%" }}>
+            <Text style={ this.settingsAndScaleStyle.root }>
               {prices.currencySign} {calculateEstimateNumber(prices.dailyPrice)}/day
             </Text>
-            <Text style={{ width: "33%" }}>
+            <Text style={ this.settingsAndScaleStyle.root }>
               {prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice)}/mo
             </Text>
           </Stack>
@@ -402,8 +405,8 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
     const capacity: string = this.props.isFixed ? "Fixed" : "Unlimited";
     return (
       <Stack {...titleAndInputStackProps}>
-        <Label>Storage capacity</Label>
-        <Text>{capacity}</Text>
+        <Label style={{ color: 'var(--colorNeutralForeground1)'}}>Storage capacity</Label>
+        <Text  style={{ color: 'var(--colorNeutralForeground1)'}}>{capacity}</Text>
       </Stack>
     );
   };
@@ -608,7 +611,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
             </Stack>
           )}
           {this.props.isAutoPilotSelected ? (
-            <Text style={{ marginTop: "40px" }}>
+            <Text style={{ marginTop: "40px" , color: 'var(--colorNeutralForeground1)'}}>
               Based on usage, your {this.props.collectionName ? "container" : "database"} throughput will scale from{" "}
               <b>
                 {AutoPilotUtils.getMinRUsBasedOnUserInput(this.props.maxAutoPilotThroughput)} RU/s (10% of max RU/s) -{" "}
@@ -630,7 +633,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
             </>
           )}
           {!this.overrideWithProvisionedThroughputSettings() && (
-            <Text>
+            <Text style={{ color: 'var(--colorNeutralForeground1)'}}>
               Estimate your required RU/s with
               <Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/">
                 {` capacity calculator`} <FontIcon iconName="NavigateExternalInline" />

src/Explorer/Controls/Settings/SettingsSubComponents/ToolTipLabelComponent.tsx

@@ -1,5 +1,5 @@
+import { DirectionalHint, IIconStyles, Icon, Stack, Text, TooltipHost } from "@fluentui/react";
 import * as React from "react";
-import { Stack, Text, IIconStyles, Icon, TooltipHost, DirectionalHint } from "@fluentui/react";
 import { toolTipLabelStackTokens } from "../SettingsRenderUtils";
 
 export interface ToolTipLabelComponentProps {
@@ -14,7 +14,7 @@ export class ToolTipLabelComponent extends React.Component<ToolTipLabelComponent
     return (
       <>
         <Stack horizontal verticalAlign="center" tokens={toolTipLabelStackTokens}>
-          {this.props.label && <Text style={{ fontWeight: 600 }}>{this.props.label}</Text>}
+          {this.props.label && <Text style={{ fontWeight: 600 , color: 'var(--colorNeutralForeground1)'}}>{this.props.label}</Text>}
           {this.props.toolTipElement && (
             <TooltipHost
               content={this.props.toolTipElement}

src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap

@@ -69,6 +69,27 @@ exports[`SettingsComponent renders 1`] = `
               "partitionKeyProperties": [
                 "partitionKey",
               ],
+              "rawDataModel": {
+                "indexingPolicy": {
+                  "automatic": true,
+                  "compositeIndexes": [],
+                  "excludedPaths": [],
+                  "fullTextIndexes": [],
+                  "includedPaths": [],
+                  "indexingMode": "consistent",
+                  "spatialIndexes": [],
+                  "vectorIndexes": [],
+                },
+                "uniqueKeyPolicy": {
+                  "uniqueKeys": [
+                    {
+                      "paths": [
+                        "/id",
+                      ],
+                    },
+                  ],
+                },
+              },
               "readSettings": [Function],
               "uniqueKeyPolicy": {},
               "usageSizeInKB": [Function],
@@ -148,6 +169,27 @@ exports[`SettingsComponent renders 1`] = `
               "partitionKeyProperties": [
                 "partitionKey",
               ],
+              "rawDataModel": {
+                "indexingPolicy": {
+                  "automatic": true,
+                  "compositeIndexes": [],
+                  "excludedPaths": [],
+                  "fullTextIndexes": [],
+                  "includedPaths": [],
+                  "indexingMode": "consistent",
+                  "spatialIndexes": [],
+                  "vectorIndexes": [],
+                },
+                "uniqueKeyPolicy": {
+                  "uniqueKeys": [
+                    {
+                      "paths": [
+                        "/id",
+                      ],
+                    },
+                  ],
+                },
+              },
               "readSettings": [Function],
               "uniqueKeyPolicy": {},
               "usageSizeInKB": [Function],
@@ -187,17 +229,25 @@ exports[`SettingsComponent renders 1`] = `
           indexingPolicyContent={
             {
               "automatic": true,
+              "compositeIndexes": [],
               "excludedPaths": [],
+              "fullTextIndexes": [],
               "includedPaths": [],
               "indexingMode": "consistent",
+              "spatialIndexes": [],
+              "vectorIndexes": [],
             }
           }
           indexingPolicyContentBaseline={
             {
               "automatic": true,
+              "compositeIndexes": [],
               "excludedPaths": [],
+              "fullTextIndexes": [],
               "includedPaths": [],
               "indexingMode": "consistent",
+              "spatialIndexes": [],
+              "vectorIndexes": [],
             }
           }
           isVectorSearchEnabled={false}
@@ -267,6 +317,27 @@ exports[`SettingsComponent renders 1`] = `
               "partitionKeyProperties": [
                 "partitionKey",
               ],
+              "rawDataModel": {
+                "indexingPolicy": {
+                  "automatic": true,
+                  "compositeIndexes": [],
+                  "excludedPaths": [],
+                  "fullTextIndexes": [],
+                  "includedPaths": [],
+                  "indexingMode": "consistent",
+                  "spatialIndexes": [],
+                  "vectorIndexes": [],
+                },
+                "uniqueKeyPolicy": {
+                  "uniqueKeys": [
+                    {
+                      "paths": [
+                        "/id",
+                      ],
+                    },
+                  ],
+                },
+              },
               "readSettings": [Function],
               "uniqueKeyPolicy": {},
               "usageSizeInKB": [Function],
@@ -336,6 +407,121 @@ exports[`SettingsComponent renders 1`] = `
           shouldDiscardComputedProperties={false}
         />
       </PivotItem>
+      <PivotItem
+        headerText="Global Secondary Index (Preview)"
+        itemKey="GlobalSecondaryIndexTab"
+        key="GlobalSecondaryIndexTab"
+        style={
+          {
+            "marginTop": 20,
+          }
+        }
+      >
+        <GlobalSecondaryIndexComponent
+          collection={
+            {
+              "analyticalStorageTtl": [Function],
+              "changeFeedPolicy": [Function],
+              "computedProperties": [Function],
+              "conflictResolutionPolicy": [Function],
+              "container": Explorer {
+                "_isInitializingNotebooks": false,
+                "isFixedCollectionWithSharedThroughputSupported": [Function],
+                "isTabsContentExpanded": [Function],
+                "onRefreshDatabasesKeyPress": [Function],
+                "onRefreshResourcesClick": [Function],
+                "phoenixClient": PhoenixClient {
+                  "armResourceId": undefined,
+                  "retryOptions": {
+                    "maxTimeout": 5000,
+                    "minTimeout": 5000,
+                    "retries": 3,
+                  },
+                },
+                "provideFeedbackEmail": [Function],
+                "queriesClient": QueriesClient {
+                  "container": [Circular],
+                },
+                "refreshNotebookList": [Function],
+                "resourceTree": ResourceTreeAdapter {
+                  "container": [Circular],
+                  "copyNotebook": [Function],
+                  "parameters": [Function],
+                },
+              },
+              "databaseId": "test",
+              "defaultTtl": [Function],
+              "fullTextPolicy": [Function],
+              "geospatialConfig": [Function],
+              "getDatabase": [Function],
+              "id": [Function],
+              "indexingPolicy": [Function],
+              "materializedViewDefinition": [Function],
+              "materializedViews": [Function],
+              "offer": [Function],
+              "partitionKey": {
+                "kind": "hash",
+                "paths": [],
+                "version": 2,
+              },
+              "partitionKeyProperties": [
+                "partitionKey",
+              ],
+              "rawDataModel": {
+                "indexingPolicy": {
+                  "automatic": true,
+                  "compositeIndexes": [],
+                  "excludedPaths": [],
+                  "fullTextIndexes": [],
+                  "includedPaths": [],
+                  "indexingMode": "consistent",
+                  "spatialIndexes": [],
+                  "vectorIndexes": [],
+                },
+                "uniqueKeyPolicy": {
+                  "uniqueKeys": [
+                    {
+                      "paths": [
+                        "/id",
+                      ],
+                    },
+                  ],
+                },
+              },
+              "readSettings": [Function],
+              "usageSizeInKB": [Function],
+              "vectorEmbeddingPolicy": [Function],
+            }
+          }
+          explorer={
+            Explorer {
+              "_isInitializingNotebooks": false,
+              "isFixedCollectionWithSharedThroughputSupported": [Function],
+              "isTabsContentExpanded": [Function],
+              "onRefreshDatabasesKeyPress": [Function],
+              "onRefreshResourcesClick": [Function],
+              "phoenixClient": PhoenixClient {
+                "armResourceId": undefined,
+                "retryOptions": {
+                  "maxTimeout": 5000,
+                  "minTimeout": 5000,
+                  "retries": 3,
+                },
+              },
+              "provideFeedbackEmail": [Function],
+              "queriesClient": QueriesClient {
+                "container": [Circular],
+              },
+              "refreshNotebookList": [Function],
+              "resourceTree": ResourceTreeAdapter {
+                "container": [Circular],
+                "copyNotebook": [Function],
+                "parameters": [Function],
+              },
+            }
+          }
+        />
+      </PivotItem>
     </StyledPivot>
   </div>
 </div>

src/Explorer/DataExplorer.tsx

@@ -0,0 +1,29 @@
+import { makeStyles } from "@fluentui/react-components";
+import React from "react";
+import type { Explorer } from "../Contracts/ViewModels";
+import { useTheme } from "../hooks/useTheme";
+
+interface DataExplorerProps {
+  dataExplorer: Explorer;
+}
+
+const useStyles = makeStyles({
+  root: {
+    backgroundColor: "var(--colorNeutralBackground1)",
+    color: "var(--colorNeutralForeground1)",
+    height: "100%",
+    width: "100%"
+  }
+});
+
+export const DataExplorer: React.FC<DataExplorerProps> = ({ dataExplorer }) => {
+  const { isDarkMode } = useTheme();
+  const styles = useStyles();
+
+
+  return (
+    <div className={`dataExplorerContainer ${styles.root}`}>
+      <div>Data Explorer Content</div>
+    </div>
+  );
+};

src/Explorer/ErrorBoundary.tsx

@@ -0,0 +1,37 @@
+import React, { Component, ErrorInfo, ReactNode } from "react";
+
+interface Props {
+  children: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  public state: State = {
+    hasError: false,
+    error: null,
+  };
+
+  public static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+  }
+
+  public render() {
+    if (this.state.hasError) {
+      return (
+        <div style={{ padding: "20px", color: "red" }}>
+          <h2>Something went wrong.</h2>
+          <details style={{ whiteSpace: "pre-wrap" }}>{this.state.error && this.state.error.toString()}</details>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

src/Explorer/Menus/CommandBar/CommandBarComponent.less

@@ -4,11 +4,10 @@
   padding: @SmallSpace 0px @SmallSpace 0px;
   .flex-display();
   span {
-    border-left: @ButtonBorderWidth solid @BaseMediumHigh;
     margin: 0 10px 0 10px;
   }
 }
 
 .commandBarContainer {
-  border-bottom: 1px solid @BaseMedium;
+  border-bottom: 1px solid var(--colorNeutralStroke1);
 }

src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx

@@ -4,6 +4,7 @@
  * and update any knockout observables passed from the parent.
  */
 import { CommandBar as FluentCommandBar, ICommandBarItemProps } from "@fluentui/react";
+import { makeStyles, useFluent } from "@fluentui/react-components";
 import { useNotebook } from "Explorer/Notebook/useNotebook";
 import { KeyboardActionGroup, useKeyboardActionGroup } from "KeyboardShortcuts";
 import { isFabric } from "Platform/Fabric/FabricUtil";
@@ -11,7 +12,6 @@ import { userContext } from "UserContext";
 import * as React from "react";
 import create, { UseStore } from "zustand";
 import { ConnectionStatusType, PoolIdType } from "../../../Common/Constants";
-import { StyleConstants } from "../../../Common/StyleConstants";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../../Explorer";
 import { useSelectedNode } from "../../useSelectedNode";
@@ -30,18 +30,26 @@ export interface CommandBarStore {
 }
 
 export const useCommandBar: UseStore<CommandBarStore> = create((set) => ({
-  contextButtons: [],
+  contextButtons: [] as CommandButtonComponentProps[],
   setContextButtons: (contextButtons: CommandButtonComponentProps[]) => set((state) => ({ ...state, contextButtons })),
   isHidden: false,
   setIsHidden: (isHidden: boolean) => set((state) => ({ ...state, isHidden })),
 }));
 
+const useStyles = makeStyles({
+  commandBarContainer: {
+    borderBottom: "1px solid var(--colorNeutralStroke1)"
+  }
+});
+
 export const CommandBar: React.FC<Props> = ({ container }: Props) => {
   const selectedNodeState = useSelectedNode();
   const buttons = useCommandBar((state) => state.contextButtons);
   const isHidden = useCommandBar((state) => state.isHidden);
-  const backgroundColor = StyleConstants.BaseLight;
+  const { targetDocument } = useFluent();
+  // const isDarkMode = targetDocument?.body.classList.contains("isDarkMode");
   const setKeyboardHandlers = useKeyboardActionGroup(KeyboardActionGroup.COMMAND_BAR);
+  const styles = useStyles();
 
   if (userContext.apiType === "Postgres" || userContext.apiType === "VCoreMongo") {
     const buttons =
@@ -49,12 +57,15 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
         ? CommandBarComponentButtonFactory.createPostgreButtons(container)
         : CommandBarComponentButtonFactory.createVCoreMongoButtons(container);
     return (
-      <div className="commandBarContainer" style={{ display: isHidden ? "none" : "initial" }}>
+      <div className={styles.commandBarContainer} style={{ display: isHidden ? "none" : "initial" }}>
         <FluentCommandBar
           ariaLabel="Use left and right arrow keys to navigate between commands"
-          items={CommandBarUtil.convertButton(buttons, backgroundColor)}
+          items={CommandBarUtil.convertButton(buttons, "var(--colorNeutralBackground1)")}
           styles={{
-            root: { backgroundColor: backgroundColor },
+            root: { 
+              backgroundColor: "var(--colorNeutralBackground1)",
+              color: "var(--colorNeutralForeground1)"
+            }
           }}
           overflowButtonProps={{ ariaLabel: "More commands" }}
         />
@@ -68,18 +79,18 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
   );
   const controlButtons = CommandBarComponentButtonFactory.createControlCommandBarButtons(container);
 
-  const uiFabricStaticButtons = CommandBarUtil.convertButton(staticButtons, backgroundColor);
+  const uiFabricStaticButtons = CommandBarUtil.convertButton(staticButtons, "var(--colorNeutralBackground1)");
   if (buttons && buttons.length > 0) {
     uiFabricStaticButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
   }
 
-  const uiFabricTabsButtons: ICommandBarItemProps[] = CommandBarUtil.convertButton(contextButtons, backgroundColor);
+  const uiFabricTabsButtons: ICommandBarItemProps[] = CommandBarUtil.convertButton(contextButtons, "var(--colorNeutralBackground1)");
 
   if (uiFabricTabsButtons.length > 0) {
     uiFabricStaticButtons.push(CommandBarUtil.createDivider("commandBarDivider"));
   }
 
-  const uiFabricControlButtons = CommandBarUtil.convertButton(controlButtons, backgroundColor);
+  const uiFabricControlButtons = CommandBarUtil.convertButton(controlButtons, "var(--colorNeutralBackground1)");
   uiFabricControlButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
 
   const connectionInfo = useNotebook((state) => state.connectionInfo);
@@ -96,14 +107,16 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
   const rootStyle = isFabric()
     ? {
         root: {
-          backgroundColor: "transparent",
+          backgroundColor: "var(--colorNeutralBackground1)",
           padding: "2px 8px 0px 8px",
-        },
+          color: "var(--colorNeutralForeground1)"
+        }
       }
     : {
         root: {
-          backgroundColor: backgroundColor,
-        },
+          backgroundColor: "var(--colorNeutralBackground1)",
+          color: "var(--colorNeutralForeground1)"
+        }
       };
 
   const allButtons = staticButtons.concat(contextButtons).concat(controlButtons);
@@ -111,7 +124,7 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
   setKeyboardHandlers(keyboardHandlers);
 
   return (
-    <div className="commandBarContainer" style={{ display: isHidden ? "none" : "initial" }}>
+    <div className={styles.commandBarContainer} style={{ display: isHidden ? "none" : "initial" }}>
       <FluentCommandBar
         ariaLabel="Use left and right arrow keys to navigate between commands"
         items={uiFabricStaticButtons.concat(uiFabricTabsButtons)}

src/Explorer/Menus/CommandBar/CommandBarUtil.tsx

@@ -1,10 +1,10 @@
 import {
-  Dropdown,
-  ICommandBarItemProps,
-  IComponentAsProps,
-  IconType,
-  IDropdownOption,
-  IDropdownStyles,
+    Dropdown,
+    ICommandBarItemProps,
+    IComponentAsProps,
+    IconType,
+    IDropdownOption,
+    IDropdownStyles,
 } from "@fluentui/react";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
 import { KeyboardHandlerMap } from "KeyboardShortcuts";
@@ -53,7 +53,7 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
       const result: ICommandBarItemProps = {
         iconProps: {
           style: {
-            width: StyleConstants.CommandBarIconWidth, // 16
+            width: StyleConstants.CommandBarIconWidth,
             alignSelf: btn.iconName ? "baseline" : undefined,
             filter: getFilter(btn.disabled),
           },
@@ -79,7 +79,7 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
         "data-test": `CommandBar/Button:${label}`,
         buttonStyles: {
           root: {
-            backgroundColor: backgroundColor,
+            backgroundColor: "var(--colorNeutralBackground1)",
             height: buttonHeightPx,
             paddingRight: 0,
             paddingLeft: 0,
@@ -87,15 +87,29 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
             minWidth: 24,
             marginLeft: isSplit ? 0 : 5,
             marginRight: isSplit ? 0 : 5,
+            color: "var(--colorNeutralForeground1)",
+            selectors: {
+              "&:hover": {
+                backgroundColor: "var(--colorNeutralBackground1Hover)",
+                color: "var(--colorNeutralForeground1)"
+              },
+              "&:active": {
+                backgroundColor: "var(--colorNeutralBackground1Pressed)",
+                color: "var(--colorNeutralForeground1)"
+              }
+            }
           },
           rootDisabled: {
-            backgroundColor: backgroundColor,
+            backgroundColor: "var(--colorNeutralBackground1)",
             pointerEvents: "auto",
+            color: "var(--colorNeutralForegroundDisabled)"
           },
           splitButtonMenuButton: {
-            backgroundColor: backgroundColor,
+            backgroundColor: "var(--colorNeutralBackground1)",
             selectors: {
-              ":hover": { backgroundColor: hoverColor },
+              ":hover": { 
+                backgroundColor: "var(--colorNeutralBackground1Hover)"
+              },
             },
             width: 16,
           },
@@ -104,13 +118,22 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
               configContext.platform == Platform.Fabric
                 ? StyleConstants.DefaultFontSize
                 : StyleConstants.mediumFontSize,
+            color: "var(--colorNeutralForeground1)"
+          },
+          rootHovered: { 
+            backgroundColor: "var(--colorNeutralBackground1Hover)",
+            color: "var(--colorNeutralForeground1)"
+          },
+          rootPressed: { 
+            backgroundColor: "var(--colorNeutralBackground1Pressed)",
+            color: "var(--colorNeutralForeground1)"
           },
-          rootHovered: { backgroundColor: hoverColor },
-          rootPressed: { backgroundColor: hoverColor },
           splitButtonMenuButtonExpanded: {
-            backgroundColor: StyleConstants.AccentExtra,
+            backgroundColor: "var(--colorNeutralBackground1Pressed)",
             selectors: {
-              ":hover": { backgroundColor: hoverColor },
+              ":hover": { 
+                backgroundColor: "var(--colorNeutralBackground1Hover)"
+              },
             },
           },
           splitButtonDivider: {
@@ -119,6 +142,7 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
           icon: {
             paddingLeft: 0,
             paddingRight: 0,
+            color: "var(--colorNeutralForeground1)"
           },
           splitButtonContainer: {
             marginLeft: 5,

src/Explorer/Sidebar.tsx

@@ -8,9 +8,8 @@ import {
   MenuList,
   MenuPopover,
   MenuTrigger,
-  mergeClasses,
   shorthands,
-  SplitButton,
+  SplitButton
 } from "@fluentui/react-components";
 import { Add16Regular, ArrowSync12Regular, ChevronLeft12Regular, ChevronRight12Regular } from "@fluentui/react-icons";
 import { configContext, Platform } from "ConfigContext";
@@ -18,7 +17,6 @@ import Explorer from "Explorer/Explorer";
 import { AddDatabasePanel } from "Explorer/Panes/AddDatabasePanel/AddDatabasePanel";
 import { Tabs } from "Explorer/Tabs/Tabs";
 import { CosmosFluentProvider, cosmosShorthands, tokens } from "Explorer/Theme/ThemeUtil";
-import { ResourceTree } from "Explorer/Tree/ResourceTree";
 import { useDatabases } from "Explorer/useDatabases";
 import { KeyboardAction, KeyboardActionGroup, KeyboardActionHandler, useKeyboardActionGroup } from "KeyboardShortcuts";
 import { isFabric, isFabricMirrored, isFabricNative } from "Platform/Fabric/FabricUtil";
@@ -26,8 +24,10 @@ import { userContext } from "UserContext";
 import { getCollectionName, getDatabaseName } from "Utils/APITypeUtils";
 import { Allotment, AllotmentHandle } from "allotment";
 import { useSidePanel } from "hooks/useSidePanel";
+import { useTheme } from "hooks/useTheme";
 import { debounce } from "lodash";
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { ResourceTree } from "./Tree/ResourceTree";
 
 const useSidebarStyles = makeStyles({
   sidebar: {
@@ -35,38 +35,67 @@ const useSidebarStyles = makeStyles({
   },
   sidebarContainer: {
     height: "100%",
+    width: "100%",
+    borderRight: `1px solid ${tokens.colorNeutralStroke1}`,
+    transition: "all 0.2s ease-in-out",
+    display: "flex",
+    flexDirection: "column",
     backgroundColor: tokens.colorNeutralBackground1,
+    position: "relative",
   },
   expandedContent: {
     display: "grid",
     height: "100%",
+    width: "100%",
     gridTemplateRows: `calc(${tokens.layoutRowHeight} * 2) 1fr`,
   },
   floatingControlsContainer: {
-    position: "relative",
+    position: "absolute",
+    top: 0,
+    right: 0,
     zIndex: 1000,
-    width: "100%",
+    width: "auto",
+    padding: tokens.spacingHorizontalS,
   },
   floatingControls: {
     display: "flex",
     flexDirection: "row",
-    position: "absolute",
-    right: 0,
+    gap: tokens.spacingHorizontalXS,
   },
   floatingControlButton: {
     ...shorthands.border("none"),
     backgroundColor: "transparent",
+    color: tokens.colorNeutralForeground1,
+    cursor: "pointer",
+    padding: tokens.spacingHorizontalXS,
+    borderRadius: tokens.borderRadiusMedium,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    ":hover": {
+      backgroundColor: tokens.colorNeutralBackground1Hover,
+      color: tokens.colorNeutralForeground1,
+    },
+    ":active": {
+      backgroundColor: tokens.colorNeutralBackground1Pressed,
+      color: tokens.colorNeutralForeground1,
+    },
+    ":disabled": {
+      color: tokens.colorNeutralForegroundDisabled,
+      cursor: "not-allowed",
+    },
   },
   globalCommandsContainer: {
     display: "grid",
     alignItems: "center",
     justifyItems: "center",
     width: "100%",
-    containerType: "size", // Use this container for "@container" queries below this.
+    containerType: "size",
+    padding: tokens.spacingHorizontalS,
     ...cosmosShorthands.borderBottom(),
+    backgroundColor: tokens.colorNeutralBackground1,
   },
   loadingProgressBar: {
-    // Float above the content
     position: "absolute",
     width: "100%",
     height: "2px",
@@ -76,7 +105,7 @@ const useSidebarStyles = makeStyles({
     animationDuration: "3s",
     animationName: {
       "0%": {
-        opacity: ".2", // matches indeterminate bar width
+        opacity: ".2",
       },
       "50%": {
         opacity: "1",
@@ -98,6 +127,12 @@ const useSidebarStyles = makeStyles({
       display: "flex",
     },
   },
+  treeContainer: {
+    flex: 1,
+    overflow: "auto",
+    backgroundColor: tokens.colorNeutralBackground1,
+    color: tokens.colorNeutralForeground1,
+  },
 });
 
 interface GlobalCommandsProps {
@@ -250,6 +285,7 @@ export const SidebarContainer: React.FC<SidebarProps> = ({ explorer }) => {
   const [expandedSize, setExpandedSize] = React.useState(300);
   const hasSidebar = userContext.apiType !== "Postgres" && userContext.apiType !== "VCoreMongo";
   const allotment = useRef<AllotmentHandle>(null);
+  const { isDarkMode } = useTheme();
 
   const expand = useCallback(() => {
     if (!expanded) {
@@ -304,7 +340,7 @@ export const SidebarContainer: React.FC<SidebarProps> = ({ explorer }) => {
         {hasSidebar && (
           // When collapsed, we force the pane to 24 pixels wide and make it non-resizable.
           <Allotment.Pane minSize={24} preferredSize={250}>
-            <CosmosFluentProvider className={mergeClasses(styles.sidebar)}>
+            <CosmosFluentProvider>
               <div className={styles.sidebarContainer}>
                 {loading && (
                   // The Fluent UI progress bar has some issues in reduced-motion environments so we use a simple CSS animation here.
@@ -335,12 +371,11 @@ export const SidebarContainer: React.FC<SidebarProps> = ({ explorer }) => {
                         </button>
                       </div>
                     </div>
-                    <div
-                      className={styles.expandedContent}
-                      style={!hasGlobalCommands ? { gridTemplateRows: "1fr" } : undefined}
-                    >
+                    <div className={styles.expandedContent} style={!hasGlobalCommands ? { gridTemplateRows: "1fr" } : undefined}>
                       {hasGlobalCommands && <GlobalCommands explorer={explorer} />}
-                      <ResourceTree explorer={explorer} />
+                      <div className={styles.treeContainer}>
+                        <ResourceTree explorer={explorer} />
+                      </div>
                     </div>
                   </>
                 ) : (

src/Explorer/SplashScreen/SplashScreen.less

@@ -1,178 +1,178 @@
-@import "../../../less/Common/Constants";
+// @import "../../../less/Common/Constants";
 
-.splashScreenContainer {
-  width: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
+// .splashScreenContainer {
+//   width: 100%;
+//   overflow-y: scroll;
+//   overflow-x: hidden;
 
-  .splashScreen {
-    .flex-display();
-    .flex-direction();
-    text-align: left;
-    margin: auto;
-    padding-left: 21px;
-    padding-right: 16px;
-    max-width: 1168px;
+//   .splashScreen {
+//     .flex-display();
+//     .flex-direction();
+//     text-align: left;
+//     margin: auto;
+//     padding-left: 21px;
+//     padding-right: 16px;
+//     max-width: 1168px;
 
-    > .title {
-      position: relative; // To attach FeaturePanelLauncher as absolute
-      color: @BaseHigh;
-      font-size: 48px;
-      padding-left: 0px;
-      margin: 16px auto;
-      text-align: center;
-    }
+//     > .title {
+//       position: relative; // To attach FeaturePanelLauncher as absolute
+//       color: @BaseHigh;
+//       font-size: 48px;
+//       padding-left: 0px;
+//       margin: 16px auto;
+//       text-align: center;
+//     }
 
-    > .subtitle {
-      color: @BaseHigh;
-      font-size: 18px;
-      padding-left: 0px;
-      margin: 0px auto;
-      text-align: center;
-    }
+//     > .subtitle {
+//       color: @BaseHigh;
+//       font-size: 18px;
+//       padding-left: 0px;
+//       margin: 0px auto;
+//       text-align: center;
+//     }
 
-    .mainButtonsContainer {
-      .flex-display();
-      text-align: center;
-      cursor: pointer;
-      margin: 40px auto;
-      width: 84%;
+//     .mainButtonsContainer {
+//       .flex-display();
+//       text-align: center;
+//       cursor: pointer;
+//       margin: 40px auto;
+//       width: 84%;
 
-      > .mainButton {
-        min-width: 124px;
-        max-width: 296px;
-        padding: 32px 16px;
-        background-color: @BaseLight;
-        border: 1px solid #949494;
-        box-sizing: border-box;
-        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-        border-radius: 4px;
+//       > .mainButton {
+//         min-width: 124px;
+//         max-width: 296px;
+//         padding: 32px 16px;
+//         background-color: @BaseLight;
+//         border: 1px solid #949494;
+//         box-sizing: border-box;
+//         box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+//         border-radius: 4px;
 
-        > .legendContainer {
-          margin-left: 16px;
-          text-align: left;
+//         > .legendContainer {
+//           margin-left: 16px;
+//           text-align: left;
 
-          .legend {
-            font-family: @SemiboldFont;
-            font-size: 18px;
-          }
+//           .legend {
+//             font-family: @SemiboldFont;
+//             font-size: 18px;
+//           }
 
-          .description {
-            font-size: 10px;
-          }
+//           .description {
+//             font-size: 10px;
+//           }
 
-          .newDescription {
-            font-size: 13px;
-          }
-        }
-      }
+//           .newDescription {
+//             font-size: 13px;
+//           }
+//         }
+//       }
 
-      > :nth-child(n + 2) {
-        margin-left: 32px;
-      }
-    }
+//       > :nth-child(n + 2) {
+//         margin-left: 32px;
+//       }
+//     }
 
-    .moreStuffContainer {
-      .flex-display();
-      justify-content: space-between;
+//     .moreStuffContainer {
+//       .flex-display();
+//       justify-content: space-between;
 
-      .moreStuffColumn {
-        flex-grow: 1;
-        flex-basis: 0;
-        min-width: 124px;
-        max-width: 296px;
+//       .moreStuffColumn {
+//         flex-grow: 1;
+//         flex-basis: 0;
+//         min-width: 124px;
+//         max-width: 296px;
 
-        > .title {
-          font-size: 18px;
-          font-family: @SemiboldFont;
-          color: @BaseDark;
-          padding: 0px;
-          margin-bottom: 16px;
-        }
+//         > .title {
+//           font-size: 18px;
+//           font-family: @SemiboldFont;
+//           color: @BaseDark;
+//           padding: 0px;
+//           margin-bottom: 16px;
+//         }
 
-        > ul {
-          list-style: none;
-          padding-left: 0px;
-          margin-bottom: 0px;
+//         > ul {
+//           list-style: none;
+//           padding-left: 0px;
+//           margin-bottom: 0px;
 
-          li {
-            padding: @DefaultSpace;
-            .flex-display();
-            align-items: flex-start;
+//           li {
+//             padding: @DefaultSpace;
+//             .flex-display();
+//             align-items: flex-start;
 
-            > img {
-              margin-right: @DefaultSpace;
-              width: 24px;
-              height: 24px;
-            }
+//             > img {
+//               margin-right: @DefaultSpace;
+//               width: 24px;
+//               height: 24px;
+//             }
 
-            .oneLineContent {
-              margin-top: 4px;
-            }
+//             .oneLineContent {
+//               margin-top: 4px;
+//             }
 
-            .description {
-              font-size: 10px;
-              color: @BaseMediumHigh;
-            }
-          }
-        }
+//             .description {
+//               font-size: 10px;
+//               color: @BaseMediumHigh;
+//             }
+//           }
+//         }
 
-        .tipContainer {
-          padding: 8px 16px;
-          width: 100%;
-          cursor: pointer;
-          .flex-display();
-          .flex-direction();
+//         .tipContainer {
+//           padding: 8px 16px;
+//           width: 100%;
+//           cursor: pointer;
+//           .flex-display();
+//           .flex-direction();
 
-          > .title {
-            color: @BaseDark;
-            padding: 0px;
-            font-size: 12px;
-          }
-          > .description {
-            color: @BaseDark;
-          }
+//           > .title {
+//             color: @BaseDark;
+//             padding: 0px;
+//             font-size: 12px;
+//           }
+//           > .description {
+//             color: @BaseDark;
+//           }
 
-          &:not(:hover):not(:focus) {
-            background-color: @BaseLow;
-          }
-        }
+//           &:not(:hover):not(:focus) {
+//             background-color: @BaseLow;
+//           }
+//         }
 
-        &.commonTasks {
-          li {
-            cursor: pointer;
-          }
-        }
+//         &.commonTasks {
+//           li {
+//             cursor: pointer;
+//           }
+//         }
 
-        &.tipsContainer {
-          li {
-            margin: 2px 0px;
-          }
-        }
-      }
-    }
+//         &.tipsContainer {
+//           li {
+//             margin: 2px 0px;
+//           }
+//         }
+//       }
+//     }
 
-    .focusable {
-      &:hover {
-        .hover();
-      }
+//     .focusable {
+//       &:hover {
+//         .hover();
+//       }
 
-      &:focus {
-        .focus();
-      }
+//       &:focus {
+//         .focus();
+//       }
 
-      &:active {
-        .active();
-      }
-    }
+//       &:active {
+//         .active();
+//       }
+//     }
 
-    .notebookSplashScreenItem {
-      padding: 12px 0 12px 12px;
+//     .notebookSplashScreenItem {
+//       padding: 12px 0 12px 12px;
 
-      .itemText {
-        margin-left: 12px;
-        font-family: @SemiboldFont;
-      }
-    }
-  }
-}
+//       .itemText {
+//         margin-left: 12px;
+//         font-family: @SemiboldFont;
+//       }
+//     }
+//   }
+// }

src/Explorer/SplashScreen/SplashScreen.tsx

@@ -11,6 +11,7 @@ import {
   TeachingBubbleContent,
   Text,
 } from "@fluentui/react";
+import { makeStyles, shorthands } from "@fluentui/react-components";
 import { sendMessage } from "Common/MessageHandler";
 import { MessageTypes } from "Contracts/ExplorerContracts";
 import { TerminalKind } from "Contracts/ViewModels";
@@ -33,8 +34,7 @@ import CollectionIcon from "../../../images/tree-collection.svg";
 import * as Constants from "../../Common/Constants";
 import { userContext } from "../../UserContext";
 import { getCollectionName } from "../../Utils/APITypeUtils";
-import { FeaturePanelLauncher } from "../Controls/FeaturePanel/FeaturePanelLauncher";
-import { DataSamplesUtil } from "../DataSamples/DataSamplesUtil";
+import { useTheme } from "../../hooks/useTheme";
 import Explorer from "../Explorer";
 import * as MostRecentActivity from "../MostRecentActivity/MostRecentActivity";
 import { useNotebook } from "../Notebook/useNotebook";
@@ -55,70 +55,177 @@ export interface SplashScreenProps {
   explorer: Explorer;
 }
 
-export class SplashScreen extends React.Component<SplashScreenProps> {
-  private readonly container: Explorer;
-  private subscriptions: Array<{ dispose: () => void }>;
+const useStyles = makeStyles({
+  splashScreenContainer: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    // justifyContent: "center",
+    minHeight: "100vh",
+    backgroundColor: "var(--colorNeutralBackground1)",
+    color: "var(--colorNeutralForeground1)",
 
-  constructor(props: SplashScreenProps) {
-    super(props);
-    this.container = props.explorer;
-    this.subscriptions = [];
-  }
-
-  public componentWillUnmount(): void {
-    while (this.subscriptions.length) {
-      this.subscriptions.pop().dispose();
+  },
+  splashScreen: {
+    display: "flex",
+    // overflow: "scroll",
+    flexDirection: "column",
+    alignItems: "center",
+    textAlign: "left",
+    // ...shorthands.padding("40px")
+  },
+  title: {
+    fontSize: "48px",
+    fontWeight: "500",
+    margin: "16px auto",
+    color: "var(--colorNeutralForeground1)"
+  },
+  subtitle: {
+    fontSize: "18px",
+    marginBottom: "40px",
+    color: "var(--colorNeutralForeground2)"
+  },
+  cardContainer: {
+    display: "grid",
+    gridTemplateColumns: "repeat(2, 1fr)",
+    gap: "16px",
+    width: "66%",
+    margin: "0 auto",
+    backgroundColor: "var(--colorNeutralBackground1)",
+    color: "var(--colorNeutralForeground1)",
+  },
+  card: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "left",
+    ...shorthands.padding("32px", "16px"),
+    backgroundColor: "var(--colorNeutralBackground1)",
+    color: "var(--colorNeutralForeground1)",
+    border: "1px solid var(--colorNeutralStroke1)",
+    borderRadius: "4px",
+    boxShadow: "var(--shadow4)",
+    cursor: "pointer",
+    minHeight: "150px",
+    "&:hover": {
+      backgroundColor: "var(--colorNeutralBackground1Hover)"
     }
+  },
+  cardContent: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    marginLeft: "16px",
+    textAlign: "left",
+    color: "var(--colorNeutralForeground1)"
+  },
+  cardTitle: {
+    fontSize: "18px",
+    fontWeight: "600",
+    color: "var(--colorNeutralForeground1)",
+    textAlign: "left",
+    marginBottom: "8px"
+  },
+  cardDescription: {
+    fontSize: "13px",
+    color: "var(--colorNeutralForeground2)",
+    textAlign: "left"
+  },
+  moreStuffContainer: {
+    display: "grid",
+    gridTemplateColumns: "repeat(3, 1fr)",
+    gap: "32px",
+    width: "66%",
+    margin: "40px auto",
+  },
+  moreStuffColumn: {
+    display: "flex",
+    flexDirection: "column",
+    // justifyContent:"space-between"
+  },
+  columnTitle: {
+    fontSize: "20px",
+    fontWeight: "600",
+    marginBottom: "16px",
+    color: "var(--colorNeutralForeground1)"
+  },
+  listItem: {
+    marginBottom: "26px",
+  },
+  listItemTitle: {
+    fontSize: "14px",
+    color: "var(--colorBrandForegroundLink)",
+    "&:hover": {
+      color: "var(--colorBrandForegroundLink)"
+    }
+  },
+  listItemSubtitle: {
+    fontSize: "13px",
+    color: "var(--colorNeutralForeground2)"
   }
+});
 
-  public componentDidMount(): void {
-    this.subscriptions.push(
+export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
+  const styles = useStyles();
+  const { isDarkMode } = useTheme();
+  const container = explorer;
+  const subscriptions: Array<{ dispose: () => void }> = [];
+
+  React.useEffect(() => {
+    subscriptions.push(
       {
         dispose: useNotebook.subscribe(
-          () => this.setState({}),
+          () => setState({}),
           (state) => state.isNotebookEnabled,
         ),
       },
-      { dispose: useSelectedNode.subscribe(() => this.setState({})) },
+      { dispose: useSelectedNode.subscribe(() => setState({})) },
       {
         dispose: useCarousel.subscribe(
-          () => this.setState({}),
+          () => setState({}),
           (state) => state.showCoachMark,
         ),
       },
       {
         dispose: usePostgres.subscribe(
-          () => this.setState({}),
+          () => setState({}),
           (state) => state.showPostgreTeachingBubble,
         ),
       },
       {
         dispose: usePostgres.subscribe(
-          () => this.setState({}),
+          () => setState({}),
           (state) => state.showResetPasswordBubble,
         ),
       },
       {
         dispose: useDatabases.subscribe(
-          () => this.setState({}),
+          () => setState({}),
           (state) => state.sampleDataResourceTokenCollection,
         ),
       },
       {
         dispose: useQueryCopilot.subscribe(
-          () => this.setState({}),
+          () => setState({}),
           (state) => state.copilotEnabled,
         ),
       },
     );
-  }
 
-  private clearMostRecent = (): void => {
+    return () => {
+      while (subscriptions.length) {
+        subscriptions.pop().dispose();
+      }
+    };
+  }, []);
+
+  const [state, setState] = React.useState({});
+
+  const clearMostRecent = () => {
     MostRecentActivity.clear(userContext.databaseAccount?.name);
-    this.setState({});
+    setState({});
   };
 
-  private getSplashScreenButtons = (): JSX.Element => {
+  const getSplashScreenButtons = (): JSX.Element => {
     if (
       userContext.apiType === "SQL" &&
       useQueryCopilot.getState().copilotEnabled &&
@@ -132,7 +239,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
               title={"Launch quick start"}
               description={"Launch a quick start tutorial to get started with sample data"}
               onClick={() => {
-                this.container.onNewCollectionClicked({ isQuickstart: true });
+                container.onNewCollectionClicked({ isQuickstart: true });
                 traceOpen(Action.LaunchQuickstart, { apiType: userContext.apiType });
               }}
             />
@@ -141,7 +248,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
               title={`New ${getCollectionName()}`}
               description={"Create a new container for storage and throughput"}
               onClick={() => {
-                this.container.onNewCollectionClicked();
+                container.onNewCollectionClicked();
                 traceOpen(Action.NewContainerHomepage, { apiType: userContext.apiType });
               }}
             />
@@ -177,7 +284,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
       );
     }
 
-    const mainItems = this.createMainItems();
+    const mainItems = createMainItems();
     return (
       <div className="mainButtonsContainer">
         {userContext.apiType === "Postgres" &&
@@ -214,7 +321,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
             className="mainButton focusable"
             key={`${item.title}`}
             onClick={item.onClick}
-            onKeyPress={(event: React.KeyboardEvent) => this.onSplashScreenItemKeyPress(event, item.onClick)}
+            onKeyPress={(event: React.KeyboardEvent) => onSplashScreenItemKeyPress(event, item.onClick)}
             tabIndex={0}
             role="button"
           >
@@ -267,125 +374,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
     );
   };
 
-  public render(): JSX.Element {
-    let title: string;
-    let subtitle: string;
-
-    switch (userContext.apiType) {
-      case "Postgres":
-        title = "Welcome to Azure Cosmos DB for PostgreSQL";
-        subtitle = "Get started with our sample datasets, documentation, and additional tools.";
-        break;
-      case "VCoreMongo":
-        title = "Welcome to Azure Cosmos DB for MongoDB (vCore)";
-        subtitle = "Get started with our sample datasets, documentation, and additional tools.";
-        break;
-      default:
-        title = "Welcome to Azure Cosmos DB";
-        subtitle = "Globally distributed, multi-model database service for any scale";
-    }
-
-    return (
-      <div className="connectExplorerContainer">
-        <form className="connectExplorerFormContainer">
-          <div className="splashScreenContainer">
-            <div className="splashScreen">
-              <h1 className="title" role="heading" aria-label={title}>
-                {title}
-                <FeaturePanelLauncher />
-              </h1>
-              <div className="subtitle">{subtitle}</div>
-              {this.getSplashScreenButtons()}
-              {useCarousel.getState().showCoachMark && (
-                <Coachmark
-                  target="#quickstartDescription"
-                  positioningContainerProps={{ directionalHint: DirectionalHint.rightTopEdge }}
-                  persistentBeak
-                >
-                  <TeachingBubbleContent
-                    headline={`Start with sample ${getCollectionName().toLocaleLowerCase()}`}
-                    hasCloseButton
-                    closeButtonAriaLabel="Close"
-                    primaryButtonProps={{
-                      text: "Get started",
-                      onClick: () => {
-                        useCarousel.getState().setShowCoachMark(false);
-                        this.container.onNewCollectionClicked({ isQuickstart: true });
-                      },
-                    }}
-                    secondaryButtonProps={{
-                      text: "Cancel",
-                      onClick: () => useCarousel.getState().setShowCoachMark(false),
-                    }}
-                    onDismiss={() => useCarousel.getState().setShowCoachMark(false)}
-                  >
-                    You will be guided to create a sample container with sample data, then we will give you a tour of
-                    data explorer. You can also cancel launching this tour and explore yourself
-                  </TeachingBubbleContent>
-                </Coachmark>
-              )}
-              {userContext.apiType === "Postgres" || userContext.apiType === "VCoreMongo" ? (
-                <Stack horizontal style={{ margin: "0 auto", width: "84%" }} tokens={{ childrenGap: 16 }}>
-                  <Stack style={{ width: "33%" }}>
-                    <Text
-                      variant="large"
-                      style={{
-                        marginBottom: 16,
-                        fontFamily: '"Segoe UI Semibold", "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif',
-                      }}
-                    >
-                      Next steps
-                    </Text>
-                    {this.getNextStepItems()}
-                  </Stack>
-                  <Stack style={{ width: "33%" }}>
-                    <Text
-                      variant="large"
-                      style={{
-                        marginBottom: 16,
-                        fontFamily: '"Segoe UI Semibold", "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif',
-                      }}
-                    >
-                      Tips & learn more
-                    </Text>
-                    {this.getTipsAndLearnMoreItems()}
-                  </Stack>
-                  <Stack style={{ width: "33%" }}></Stack>
-                </Stack>
-              ) : (
-                <div className="moreStuffContainer">
-                  <div className="moreStuffColumn commonTasks">
-                    <h2 className="title">Recents</h2>
-                    {this.getRecentItems()}
-                  </div>
-                  <div className="moreStuffColumn">
-                    <h2 className="title">Top 3 things you need to know</h2>
-                    {this.top3Items()}
-                  </div>
-                  <div className="moreStuffColumn tipsContainer">
-                    <h2 className="title">Learning Resources</h2>
-                    {this.getLearningResourceItems()}
-                  </div>
-                </div>
-              )}
-            </div>
-          </div>
-        </form>
-      </div>
-    );
-  }
-
-  /**
-   * This exists to enable unit testing
-   */
-  public createDataSampleUtil(): DataSamplesUtil {
-    return new DataSamplesUtil(this.container);
-  }
-
-  /**
-   * public for testing purposes
-   */
-  public createMainItems(): SplashScreenItem[] {
+  const createMainItems = (): SplashScreenItem[] => {
     const heroes: SplashScreenItem[] = [];
 
     if (
@@ -403,7 +392,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
           if (userContext.apiType === "Postgres" || userContext.apiType === "VCoreMongo") {
             useTabs.getState().openAndActivateReactTab(ReactTabKind.Quickstart);
           } else {
-            this.container.onNewCollectionClicked({ isQuickstart: true });
+            container.onNewCollectionClicked({ isQuickstart: true });
           }
           traceOpen(Action.LaunchQuickstart, { apiType: userContext.apiType });
         },
@@ -411,18 +400,18 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
       heroes.push(launchQuickstartBtn);
     }
 
-    heroes.push(this.getShellCard());
-    heroes.push(this.getThirdCard());
+    heroes.push(getShellCard());
+    heroes.push(getThirdCard());
     return heroes;
-  }
+  };
 
-  private getShellCard() {
+  const getShellCard = (): SplashScreenItem => {
     if (userContext.apiType === "Postgres") {
       return {
         iconSrc: PowerShellIcon,
         title: "PostgreSQL Shell",
-        description: "Create table and interact with data using PostgreSQL’s shell interface",
-        onClick: () => this.container.openNotebookTerminal(TerminalKind.Postgres),
+        description: "Create table and interact with data using PostgreSQL's shell interface",
+        onClick: () => container.openNotebookTerminal(TerminalKind.Postgres),
       };
     }
 
@@ -431,7 +420,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
         iconSrc: PowerShellIcon,
         title: "Mongo Shell",
         description: "Create a collection and interact with data using MongoDB's shell interface",
-        onClick: () => this.container.openNotebookTerminal(TerminalKind.VCoreMongo),
+        onClick: () => container.openNotebookTerminal(TerminalKind.VCoreMongo),
       };
     }
 
@@ -440,13 +429,13 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
       title: `New ${getCollectionName()}`,
       description: "Create a new container for storage and throughput",
       onClick: () => {
-        this.container.onNewCollectionClicked();
+        container.onNewCollectionClicked();
         traceOpen(Action.NewContainerHomepage, { apiType: userContext.apiType });
       },
     };
-  }
+  };
 
-  private getThirdCard() {
+  const getThirdCard = (): SplashScreenItem => {
     let icon = ConnectIcon;
     let title = "Connect";
     let description = "Prefer using your own choice of tooling? Find the connection string you need to connect";
@@ -470,34 +459,34 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
       description: description,
       onClick: onClick,
     };
-  }
+  };
 
-  private decorateOpenCollectionActivity({ databaseId, collectionId }: MostRecentActivity.OpenCollectionItem) {
+  const decorateOpenCollectionActivity = (activity: MostRecentActivity.OpenCollectionItem): SplashScreenItem => {
     return {
       iconSrc: CollectionIcon,
-      title: collectionId,
+      title: activity.collectionId,
       description: getCollectionName(),
       onClick: () => {
-        const collection = useDatabases.getState().findCollection(databaseId, collectionId);
+        const collection = useDatabases.getState().findCollection(activity.databaseId, activity.collectionId);
         collection?.openTab();
       },
     };
-  }
+  };
 
-  private decorateOpenNotebookActivity({ name, path }: MostRecentActivity.OpenNotebookItem) {
+  const decorateOpenNotebookActivity = (activity: MostRecentActivity.OpenNotebookItem): SplashScreenItem => {
     return {
-      info: path,
+      info: activity.path,
       iconSrc: NotebookIcon,
-      title: name,
+      title: activity.name,
       description: "Notebook",
       onClick: () => {
-        const notebookItem = this.container.createNotebookContentItemFile(name, path);
-        notebookItem && this.container.openNotebook(notebookItem);
+        const notebookItem = container.createNotebookContentItemFile(activity.name, activity.path);
+        notebookItem && container.openNotebook(notebookItem);
       },
     };
-  }
+  };
 
-  private createRecentItems(): SplashScreenItem[] {
+  const createRecentItems = (): SplashScreenItem[] => {
     return MostRecentActivity.getItems(userContext.databaseAccount?.name).map((activity) => {
       switch (activity.type) {
         default: {
@@ -505,22 +494,22 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
           throw new Error(`Unknown activity: ${unknownActivity}`);
         }
         case MostRecentActivity.Type.OpenNotebook:
-          return this.decorateOpenNotebookActivity(activity);
+          return decorateOpenNotebookActivity(activity);
 
         case MostRecentActivity.Type.OpenCollection:
-          return this.decorateOpenCollectionActivity(activity);
+          return decorateOpenCollectionActivity(activity);
       }
     });
-  }
+  };
 
-  private onSplashScreenItemKeyPress(event: React.KeyboardEvent, callback: () => void) {
+  const onSplashScreenItemKeyPress = (event: React.KeyboardEvent, callback: () => void) => {
     if (event.charCode === Constants.KeyCodes.Space || event.charCode === Constants.KeyCodes.Enter) {
       callback();
       event.stopPropagation();
     }
-  }
+  };
 
-  private top3Items(): JSX.Element {
+  const top3Items = (): JSX.Element => {
     let items: { link: string; title: string; description: string }[];
     switch (userContext.apiType) {
       case "SQL":
@@ -632,44 +621,54 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
                 href={item.link}
                 target="_blank"
                 style={{ marginRight: 5 }}
+                className={styles.listItemTitle}
               >
                 {item.title}
               </Link>
               <Image src={LinkIcon} alt={item.title} />
             </Stack>
-            <Text>{item.description}</Text>
+            <Text className={styles.listItemSubtitle}>{item.description}</Text>
           </Stack>
         ))}
       </Stack>
     );
-  }
+  };
 
-  private getRecentItems(): JSX.Element {
-    const recentItems = this.createRecentItems()?.filter((item) => item.description !== "Notebook");
+  const getRecentItems = (): JSX.Element => {
+    const recentItems = createRecentItems()?.filter((item) => item.description !== "Notebook");
 
     return (
       <Stack>
         <ul>
           {recentItems.map((item, index) => (
-            <li key={`${item.title}${item.description}${index}`}>
+            <li key={`${item.title}${item.description}${index}`} className={styles.listItem}>
               <Stack style={{ marginBottom: 26 }}>
                 <Stack horizontal>
-                  <Image style={{ marginRight: 8 }} src={item.iconSrc} alt={item.title} />
-                  <Link style={{ fontSize: 14 }} onClick={item.onClick} title={item.info}>
+                  <svg 
+                    width="16" 
+                    height="16" 
+                    viewBox="0 0 20 20" 
+                    xmlns="http://www.w3.org/2000/svg"
+                    style={{ marginRight: 8 }}
+                    fill="currentColor"
+                  >
+                    <path d="M4 4c0-1.1.9-2 2-2h3.59c.4 0 .78.16 1.06.44l3.91 3.91c.28.28.44.67.44 1.06V14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V8h-3.5A1.5 1.5 0 0 1 9 6.5V3H6Zm4 .2v3.3c0 .28.22.5.5.5h3.3L10 3.2ZM17 9a1 1 0 0 0-1-1v6a3 3 0 0 1-3 3H6a1 1 0 0 0 1 1h6.06A3.94 3.94 0 0 0 17 14.06V9Z" />
+                  </svg>
+                  <Link style={{ fontSize: 14 }} onClick={item.onClick} title={item.info} className={styles.listItemTitle}>
                     {item.title}
                   </Link>
                 </Stack>
-                <Text style={{ color: "#605E5C" }}>{item.description}</Text>
+                <Text className={styles.listItemSubtitle}>{item.description}</Text>
               </Stack>
             </li>
           ))}
         </ul>
-        {recentItems.length > 0 && <Link onClick={() => this.clearMostRecent()}>Clear Recents</Link>}
+        {recentItems.length > 0 && <Link onClick={() => clearMostRecent()} className={styles.listItemTitle}>Clear Recents</Link>}
       </Stack>
     );
-  }
+  };
 
-  private getLearningResourceItems(): JSX.Element {
+  const getLearningResourceItems = (): JSX.Element => {
     interface item {
       link: string;
       title: string;
@@ -785,19 +784,20 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
                 href={item.link}
                 target="_blank"
                 style={{ marginRight: 5 }}
+                className={styles.listItemTitle}
               >
                 {item.title}
               </Link>
               <Image src={LinkIcon} alt={item.title} />
             </Stack>
-            <Text>{item.description}</Text>
+            <Text className={styles.listItemSubtitle}>{item.description}</Text>
           </Stack>
         ))}
       </Stack>
     );
-  }
+  };
 
-  private postgresNextStepItems: { link: string; title: string; description: string }[] = [
+  const postgresNextStepItems: { link: string; title: string; description: string }[] = [
     {
       link: "https://go.microsoft.com/fwlink/?linkid=2208312",
       title: "Data Modeling",
@@ -815,7 +815,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
     },
   ];
 
-  private vcoreMongoNextStepItems: { link: string; title: string; description: string }[] = [
+  const vcoreMongoNextStepItems: { link: string; title: string; description: string }[] = [
     {
       link: "https://learn.microsoft.com/en-us/azure/cosmos-db/mongodb/vcore/how-to-migrate-native-tools?tabs=export-import",
       title: "Migrate Data",
@@ -833,27 +833,27 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
     },
   ];
 
-  private getNextStepItems(): JSX.Element {
-    const items = userContext.apiType === "Postgres" ? this.postgresNextStepItems : this.vcoreMongoNextStepItems;
+  const getNextStepItems = (): JSX.Element => {
+    const items = userContext.apiType === "Postgres" ? postgresNextStepItems : vcoreMongoNextStepItems;
 
     return (
       <Stack style={{ minWidth: 124, maxWidth: 296 }}>
         {items.map((item, i) => (
           <Stack key={`nextStep${i}`} style={{ marginBottom: 26 }}>
             <Stack horizontal verticalAlign="center" style={{ fontSize: 14 }}>
-              <Link href={item.link} target="_blank" style={{ marginRight: 5 }}>
+              <Link href={item.link} target="_blank" style={{ marginRight: 5 }} className={styles.listItemTitle}>
                 {item.title}
               </Link>
               <Image src={LinkIcon} />
             </Stack>
-            <Text>{item.description}</Text>
+            <Text className={styles.listItemSubtitle}>{item.description}</Text>
           </Stack>
         ))}
       </Stack>
     );
-  }
+  };
 
-  private postgresLearnMoreItems: { link: string; title: string; description: string }[] = [
+  const postgresLearnMoreItems: { link: string; title: string; description: string }[] = [
     {
       link: "https://go.microsoft.com/fwlink/?linkid=2207226",
       title: "Performance Tuning",
@@ -871,7 +871,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
     },
   ];
 
-  private vcoreMongoLearnMoreItems: { link: string; title: string; description: string }[] = [
+  const vcoreMongoLearnMoreItems: { link: string; title: string; description: string }[] = [
     {
       link: "https://learn.microsoft.com/en-us/azure/cosmos-db/mongodb/vcore/vector-search",
       title: "Vector Search",
@@ -889,23 +889,109 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
     },
   ];
 
-  private getTipsAndLearnMoreItems(): JSX.Element {
-    const items = userContext.apiType === "Postgres" ? this.postgresLearnMoreItems : this.vcoreMongoLearnMoreItems;
+  const getTipsAndLearnMoreItems = (): JSX.Element => {
+    const items = userContext.apiType === "Postgres" ? postgresLearnMoreItems : vcoreMongoLearnMoreItems;
 
     return (
       <Stack style={{ minWidth: 124, maxWidth: 296 }}>
         {items.map((item, i) => (
           <Stack key={`tips${i}`} style={{ marginBottom: 26 }}>
             <Stack horizontal verticalAlign="center" style={{ fontSize: 14 }}>
-              <Link href={item.link} target="_blank" style={{ marginRight: 5 }}>
+              <Link href={item.link} target="_blank" style={{ marginRight: 5 }} className={styles.listItemTitle}>
                 {item.title}
               </Link>
               <Image src={LinkIcon} />
             </Stack>
-            <Text>{item.description}</Text>
+            <Text className={styles.listItemSubtitle}>{item.description}</Text>
           </Stack>
         ))}
       </Stack>
     );
-  }
-}
+  };
+
+  return (
+    <div className={styles.splashScreenContainer}>
+      <div className={styles.splashScreen}>
+        <h1 className={styles.title} role="heading" aria-label="Welcome to Azure Cosmos DB">
+          Welcome to Azure Cosmos DB<span className="activePatch"></span>
+        </h1>
+        <div className={styles.subtitle}>
+          Globally distributed, multi-model database service for any scale
+        </div>
+        {getSplashScreenButtons()}
+        {useCarousel.getState().showCoachMark && (
+          <Coachmark
+            target="#quickstartDescription"
+            positioningContainerProps={{ directionalHint: DirectionalHint.rightTopEdge }}
+            persistentBeak
+          >
+            <TeachingBubbleContent
+              headline={`Start with sample ${getCollectionName().toLocaleLowerCase()}`}
+              hasCloseButton
+              closeButtonAriaLabel="Close"
+              primaryButtonProps={{
+                text: "Get started",
+                onClick: () => {
+                  useCarousel.getState().setShowCoachMark(false);
+                  container.onNewCollectionClicked({ isQuickstart: true });
+                },
+              }}
+              secondaryButtonProps={{
+                text: "Cancel",
+                onClick: () => useCarousel.getState().setShowCoachMark(false),
+              }}
+              onDismiss={() => useCarousel.getState().setShowCoachMark(false)}
+            >
+              You will be guided to create a sample container with sample data, then we will give you a tour of
+              data explorer. You can also cancel launching this tour and explore yourself
+            </TeachingBubbleContent>
+          </Coachmark>
+        )}
+        {userContext.apiType === "Postgres" || userContext.apiType === "VCoreMongo" ? (
+          <Stack horizontal style={{ margin: "0 auto", width: "84%" }} tokens={{ childrenGap: 16 }}>
+            <Stack style={{ width: "33%" }}>
+              <Text
+                variant="large"
+                style={{
+                  marginBottom: 16,
+                  fontFamily: '"Segoe UI Semibold", "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif',
+                }}
+              >
+                Next steps
+              </Text>
+              {getNextStepItems()}
+            </Stack>
+            <Stack style={{ width: "33%" }}>
+              <Text
+                variant="large"
+                style={{
+                  marginBottom: 16,
+                  fontFamily: '"Segoe UI Semibold", "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif',
+                }}
+              >
+                Tips & learn more
+              </Text>
+              {getTipsAndLearnMoreItems()}
+            </Stack>
+            <Stack style={{ width: "33%" }}></Stack>
+          </Stack>
+        ) : (
+          <div className={styles.moreStuffContainer}>
+            <div className={styles.moreStuffColumn}>
+              <h2 className={styles.columnTitle}>Recents</h2>
+              {getRecentItems()}
+            </div>
+            <div className={styles.moreStuffColumn}>
+              <h2 className={styles.columnTitle}>Top 3 things you need to know</h2>
+              {top3Items()}
+            </div>
+            <div className={styles.moreStuffColumn}>
+              <h2 className={styles.columnTitle}>Learning Resources</h2>
+              {getLearningResourceItems()}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

src/Explorer/SplashScreen/SplashScreenButton.tsx

@@ -1,4 +1,5 @@
 import { Stack, Text } from "@fluentui/react";
+import { makeStyles } from "@fluentui/react-components";
 import React from "react";
 import { KeyCodes } from "../../Common/Constants";
 
@@ -9,25 +10,50 @@ interface SplashScreenButtonProps {
   onClick: () => void;
 }
 
+const useStyles = makeStyles({
+  button: {
+    border: "1px solid var(--colorNeutralStroke1)",
+    boxSizing: "border-box",
+    boxShadow: "var(--shadow4)",
+    borderRadius: "4px",
+    padding: "32px 16px",
+    backgroundColor: "var(--colorNeutralBackground1)",
+    color: "var(--colorNeutralForeground1)",
+    width: "100%",
+    minHeight: "150px",
+    cursor: "pointer",
+    "&:hover": {
+      backgroundColor: "var(--colorNeutralBackground1Hover)"
+    }
+  },
+  content: {
+    marginLeft: "16px",
+    textAlign: "left"
+  },
+  title: {
+    fontSize: "18px",
+    fontWeight: "600",
+    color: "var(--colorNeutralForeground1)",
+    marginBottom: "8px"
+  },
+  description: {
+    fontSize: "13px",
+    color: "var(--colorNeutralForeground2)"
+  }
+});
+
 export const SplashScreenButton: React.FC<SplashScreenButtonProps> = ({
   imgSrc,
   title,
   description,
   onClick,
 }: SplashScreenButtonProps): JSX.Element => {
+  const styles = useStyles();
+  
   return (
     <Stack
       horizontal
-      style={{
-        border: "1px solid #949494",
-        boxSizing: "border-box",
-        boxShadow: "0 4px 4px rgba(0, 0, 0, 0.25)",
-        borderRadius: 4,
-        padding: "32px 16px",
-        backgroundColor: "#ffffff",
-        width: "100%",
-        minHeight: 150,
-      }}
+      className={styles.button}
       onClick={onClick}
       onKeyPress={(event: React.KeyboardEvent) => {
         if (event.charCode === KeyCodes.Space || event.charCode === KeyCodes.Enter) {
@@ -41,9 +67,9 @@ export const SplashScreenButton: React.FC<SplashScreenButtonProps> = ({
       <div>
         <img src={imgSrc} alt={title} aria-hidden="true" />
       </div>
-      <Stack style={{ marginLeft: 16 }}>
-        <Text style={{ fontSize: 18, fontWeight: 600 }}>{title}</Text>
-        <Text style={{ fontSize: 13 }}>{description}</Text>
+      <Stack className={styles.content}>
+        <Text className={styles.title}>{title}</Text>
+        <Text className={styles.description}>{description}</Text>
       </Stack>
     </Stack>
   );

src/Explorer/Tabs/QueryTab/IndexAdvisorUtils.tsx

@@ -0,0 +1,114 @@
+import { CircleFilled } from "@fluentui/react-icons";
+import type { IIndexMetric } from "Explorer/Tabs/QueryTab/ResultsView";
+import { useIndexAdvisorStyles } from "Explorer/Tabs/QueryTab/StylesAdvisor";
+import * as React from "react";
+interface IndexObject {
+  index: string;
+  impact: string;
+  section: "Included" | "Not Included" | "Header";
+  composite?: {
+    path: string;
+    order: "ascending" | "descending";
+  }[];
+  path?: string;
+}
+
+export interface IndexMetricsJson {
+  included?: IIndexMetric[];
+  notIncluded?: IIndexMetric[];
+}
+export function parseIndexMetrics(indexMetrics: string | IndexMetricsJson): {
+  included: IIndexMetric[];
+  notIncluded: IIndexMetric[];
+} {
+  // If already JSON, just extract arrays
+  if (typeof indexMetrics === "object" && indexMetrics !== null) {
+    return {
+      included: Array.isArray(indexMetrics.included) ? indexMetrics.included : [],
+      notIncluded: Array.isArray(indexMetrics.notIncluded) ? indexMetrics.notIncluded : [],
+    };
+  }
+
+  // Otherwise, parse as string (current SDK)
+  const included: IIndexMetric[] = [];
+  const notIncluded: IIndexMetric[] = [];
+  const lines = (indexMetrics as string)
+    .split("\n")
+    .map((line) => line.trim())
+    .filter(Boolean);
+  let currentSection = "";
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    if (line.startsWith("Utilized Single Indexes") || line.startsWith("Utilized Composite Indexes")) {
+      currentSection = "included";
+    } else if (line.startsWith("Potential Single Indexes") || line.startsWith("Potential Composite Indexes")) {
+      currentSection = "notIncluded";
+    } else if (line.startsWith("Index Spec:")) {
+      const index = line.replace("Index Spec:", "").trim();
+      const impactLine = lines[i + 1];
+      const impact = impactLine?.includes("Index Impact Score:") ? impactLine.split(":")[1].trim() : "Unknown";
+
+      const isComposite = index.includes(",");
+
+      const sectionMap: Record<string, "Included" | "Not Included"> = {
+        included: "Included",
+        notIncluded: "Not Included",
+      };
+
+      const indexObj: IndexObject = { index, impact, section: sectionMap[currentSection] ?? "Header" };
+      if (isComposite) {
+        indexObj.composite = index.split(",").map((part: string) => {
+          const [path, order] = part.trim().split(/\s+/);
+          return {
+            path: path.trim(),
+            order: order?.toLowerCase() === "desc" ? "descending" : "ascending",
+          };
+        });
+      } else {
+        let path = "/unknown/*";
+        const pathRegex = /\/[^/\s*?]+(?:\/[^/\s*?]+)*(\/\*|\?)/;
+        const match = index.match(pathRegex);
+        if (match) {
+          path = match[0];
+        } else {
+          const simplePathRegex = /\/[^/\s]+/;
+          const simpleMatch = index.match(simplePathRegex);
+          if (simpleMatch) {
+            path = simpleMatch[0] + "/*";
+          }
+        }
+        indexObj.path = path;
+      }
+
+      if (currentSection === "included") {
+        included.push(indexObj);
+      } else if (currentSection === "notIncluded") {
+        notIncluded.push(indexObj);
+      }
+    }
+  }
+  return { included, notIncluded };
+}
+
+export const renderImpactDots = (impact: string): JSX.Element => {
+  const style = useIndexAdvisorStyles();
+  let count = 0;
+
+  if (impact === "High") {
+    count = 3;
+  } else if (impact === "Medium") {
+    count = 2;
+  } else if (impact === "Low") {
+    count = 1;
+  }
+
+  return (
+    <div className={style.indexAdvisorImpactDots}>
+      {Array.from({ length: count }).map((_, i) => (
+        <CircleFilled key={i} className={style.indexAdvisorImpactDot} />
+      ))}
+    </div>
+  );
+};
+
+

src/Explorer/Tabs/QueryTab/QueryResultSection.tsx

@@ -1,4 +1,4 @@
-import { Link } from "@fluentui/react-components";
+import { Link, tokens } from "@fluentui/react-components";
 import QueryError from "Common/QueryError";
 import { IndeterminateProgressBar } from "Explorer/Controls/IndeterminateProgressBar";
 import { MessageBanner } from "Explorer/Controls/MessageBanner";
@@ -29,7 +29,7 @@ const ExecuteQueryCallToAction: React.FC = () => {
         <p>
           <img src={RunQuery} aria-hidden="true" />
         </p>
-        <p>Execute a query to see the results</p>
+        <p style={{ color: tokens.colorNeutralForeground1 }}>Execute a query to see the results</p>
       </div>
     </div>
   );

src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx

@@ -23,9 +23,11 @@ import { Action } from "Shared/Telemetry/TelemetryConstants";
 import { Allotment } from "allotment";
 import { QueryCopilotState, useQueryCopilot } from "hooks/useQueryCopilot";
 import { TabsState, useTabs } from "hooks/useTabs";
+import { monacoTheme } from "hooks/useTheme";
 import React, { Fragment, createRef } from "react";
 import "react-splitter-layout/lib/index.css";
 import { format } from "react-string-format";
+import create from "zustand";
 import QueryCommandIcon from "../../../../images/CopilotCommand.svg";
 import LaunchCopilot from "../../../../images/CopilotTabIcon.svg";
 import DownloadQueryIcon from "../../../../images/DownloadQuery.svg";
@@ -54,6 +56,20 @@ import { SaveQueryPane } from "../../Panes/SaveQueryPane/SaveQueryPane";
 import TabsBase from "../TabsBase";
 import "./QueryTabComponent.less";
 
+export interface QueryMetadataStore {
+  userQuery: string;
+  databaseId: string;
+  containerId: string;
+  setMetadata: (query1: string, db: string, container: string) => void;
+}
+
+export const useQueryMetadataStore = create<QueryMetadataStore>((set) => ({
+  userQuery: "",
+  databaseId: "",
+  containerId: "",
+  setMetadata: (query1, db, container) => set({ userQuery: query1, databaseId: db, containerId: container }),
+}));
+
 enum ToggleState {
   Result,
   QueryMetrics,
@@ -258,6 +274,10 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
   }
 
   public onExecuteQueryClick = async (): Promise<void> => {
+    const query1 = this.state.sqlQueryEditorContent;
+    const db = this.props.collection.databaseId;
+    const container = this.props.collection.id();
+    useQueryMetadataStore.getState().setMetadata(query1, db, container);
     this._iterator = undefined;
 
     setTimeout(async () => {
@@ -756,6 +776,7 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
                 wordWrap={"on"}
                 ariaLabel={"Editing Query"}
                 lineNumbers={"on"}
+                theme={monacoTheme}
                 onContentChanged={(newContent: string) => this.onChangeContent(newContent)}
                 onContentSelected={(selectedContent: string, selection: monaco.Selection) =>
                   this.onSelectedContent(selectedContent, selection)

src/Explorer/Tabs/QueryTab/ResultsView.test.tsx

@@ -0,0 +1,202 @@
+import "@testing-library/jest-dom";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { IndexAdvisorTab } from "Explorer/Tabs/QueryTab/ResultsView";
+import React from "react";
+
+const mockReplace = jest.fn();
+const mockFetchAll = jest.fn();
+const mockRead = jest.fn();
+const mockLogConsoleProgress = jest.fn();
+const mockHandleError = jest.fn();
+
+const indexMetricsString = `
+Utilized Single Indexes
+Index Spec: /foo/?
+Index Impact Score: High
+Potential Single Indexes
+Index Spec: /bar/?
+Index Impact Score: Medium
+Utilized Composite Indexes
+Index Spec: /baz/? DESC, /qux/? ASC
+Index Impact Score: Low
+`;
+mockRead.mockResolvedValue({
+  resource: {
+    indexingPolicy: {
+      automatic: true,
+      indexingMode: "consistent",
+      includedPaths: [{ path: "/*" }, { path: "/foo/?" }],
+      excludedPaths: [],
+    },
+    partitionKey: "pk",
+  },
+});
+mockReplace.mockResolvedValue({
+  resource: {
+    indexingPolicy: {
+      automatic: true,
+      indexingMode: "consistent",
+      includedPaths: [{ path: "/*" }],
+      excludedPaths: [],
+    },
+  },
+});
+
+jest.mock("./QueryTabComponent", () => ({
+  useQueryMetadataStore: () => ({
+    userQuery: "SELECT * FROM c",
+    databaseId: "db1",
+    containerId: "col1",
+  }),
+}));
+jest.mock("Common/CosmosClient", () => ({
+  client: () => ({
+    database: () => ({
+      container: () => ({
+        items: {
+          query: () => ({
+            fetchAll: mockFetchAll.mockResolvedValueOnce({ indexMetrics: indexMetricsString }),
+          }),
+        },
+        read: mockRead,
+        replace: mockReplace,
+      }),
+    }),
+  }),
+}));
+jest.mock("./StylesAdvisor", () => ({
+  useIndexAdvisorStyles: () => ({}),
+}));
+
+jest.mock("../../../Utils/NotificationConsoleUtils", () => ({
+  logConsoleProgress: (...args: unknown[]) => {
+    mockLogConsoleProgress(...args);
+    return () => {};
+  },
+}));
+
+jest.mock("../../../Common/ErrorHandlingUtils", () => {
+  return {
+    handleError: (...args: unknown[]) => mockHandleError(...args),
+  };
+});
+
+test("logs progress message when fetching index metrics", async () => {
+  render(<IndexAdvisorTab />);
+  await waitFor(() => expect(mockLogConsoleProgress).toHaveBeenCalledWith(expect.stringContaining("IndexMetrics")));
+});
+test("renders both Included and Not Included sections after loading", async () => {
+  render(<IndexAdvisorTab />);
+  await waitFor(() => expect(screen.getByText("Included in Current Policy")).toBeInTheDocument());
+  expect(screen.getByText("Not Included in Current Policy")).toBeInTheDocument();
+  expect(screen.getByText("/foo/?")).toBeInTheDocument();
+  expect(screen.getByText("/bar/?")).toBeInTheDocument();
+});
+test("shows update button only when an index is selected", async () => {
+  render(<IndexAdvisorTab />);
+  await waitFor(() => expect(screen.getByText("/bar/?")).toBeInTheDocument());
+  const checkboxes = screen.getAllByRole("checkbox");
+  expect(checkboxes.length).toBeGreaterThan(1);
+  fireEvent.click(checkboxes[1]);
+  expect(screen.getByText(/Update Indexing Policy/)).toBeInTheDocument();
+
+  fireEvent.click(checkboxes[1]);
+  expect(screen.queryByText(/Update Indexing Policy/)).not.toBeInTheDocument();
+});
+test("calls replace when update policy is confirmed", async () => {
+  render(<IndexAdvisorTab />);
+  await waitFor(() => expect(screen.getByText("/bar/?")).toBeInTheDocument());
+  const checkboxes = screen.getAllByRole("checkbox");
+  fireEvent.click(checkboxes[1]);
+  const updateButton = screen.getByText(/Update Indexing Policy/);
+  fireEvent.click(updateButton);
+  await waitFor(() => expect(mockReplace).toHaveBeenCalled());
+});
+
+test("calls replace when update button is clicked", async () => {
+  render(<IndexAdvisorTab />);
+  await waitFor(() => expect(screen.getByText("/bar/?")).toBeInTheDocument());
+  const checkboxes = screen.getAllByRole("checkbox");
+  fireEvent.click(checkboxes[1]); // Select /bar/?
+  fireEvent.click(screen.getByText(/Update Indexing Policy/));
+  await waitFor(() => expect(mockReplace).toHaveBeenCalled());
+});
+
+test("fetches indexing policy via read", async () => {
+  render(<IndexAdvisorTab />);
+  await waitFor(() => {
+    expect(mockRead).toHaveBeenCalled();
+  });
+});
+
+test("selects all indexes when select-all is clicked", async () => {
+  render(<IndexAdvisorTab />);
+  await waitFor(() => expect(screen.getByText("/bar/?")).toBeInTheDocument());
+  const checkboxes = screen.getAllByRole("checkbox");
+
+  fireEvent.click(checkboxes[0]);
+  checkboxes.forEach((cb) => {
+    expect(cb).toBeChecked();
+  });
+});
+
+test("shows spinner while loading and hides after fetchIndexMetrics resolves", async () => {
+  render(<IndexAdvisorTab />);
+  expect(screen.getByRole("progressbar")).toBeInTheDocument();
+  await waitFor(() => expect(screen.queryByRole("progressbar")).not.toBeInTheDocument());
+});
+
+test("calls fetchAll with correct query and options", async () => {
+  render(<IndexAdvisorTab />);
+  await waitFor(() => expect(mockFetchAll).toHaveBeenCalled());
+});
+test("renders IndexAdvisorTab when clicked from ResultsView", async () => {
+  render(<IndexAdvisorTab />);
+  await waitFor(() => expect(screen.getByText("Included in Current Policy")).toBeInTheDocument());
+  expect(screen.getByText("/foo/?")).toBeInTheDocument();
+});
+test("renders index metrics from SDK response", async () => {
+  render(<IndexAdvisorTab />);
+  await waitFor(() => expect(screen.getByText("/foo/?")).toBeInTheDocument());
+  expect(screen.getByText("/bar/?")).toBeInTheDocument();
+  expect(screen.getByText("/baz/? DESC, /qux/? ASC")).toBeInTheDocument();
+});
+
+test("calls handleError if fetchIndexMetrics throws", async () => {
+  mockFetchAll.mockRejectedValueOnce(new Error("fail"));
+  render(<IndexAdvisorTab />);
+  await waitFor(() => expect(mockHandleError).toHaveBeenCalled());
+});
+
+test("calls handleError if fetchIndexMetrics throws2nd", async () => {
+  mockFetchAll.mockRejectedValueOnce(new Error("fail"));
+
+  render(<IndexAdvisorTab />);
+  await waitFor(() => expect(mockHandleError).toHaveBeenCalled());
+  expect(screen.queryByRole("status")).not.toBeInTheDocument();
+});
+
+test("IndexingPolicyStore stores updated policy on componentDidMount", async () => {
+  render(<IndexAdvisorTab />);
+  await waitFor(() => expect(mockRead).toHaveBeenCalled());
+
+  const readResult = await mockRead.mock.results[0].value;
+  const policy = readResult.resource.indexingPolicy;
+
+  expect(policy).toBeDefined();
+  expect(policy.automatic).toBe(true);
+  expect(policy.indexingMode).toBe("consistent");
+  expect(policy.includedPaths).toEqual(expect.arrayContaining([{ path: "/*" }, { path: "/foo/?" }]));
+});
+
+test("refreshCollectionData updates observable and re-renders", async () => {
+  render(<IndexAdvisorTab />);
+  await waitFor(() => expect(screen.getByText("/bar/?")).toBeInTheDocument());
+
+  const checkboxes = screen.getAllByRole("checkbox");
+  fireEvent.click(checkboxes[1]); // Select /bar/?
+  fireEvent.click(screen.getByText(/Update Indexing Policy/));
+
+  await waitFor(() => expect(mockReplace).toHaveBeenCalled());
+  expect(screen.getByText("/bar/?")).toBeInTheDocument();
+});

src/Explorer/Tabs/QueryTab/ResultsView.tsx

@@ -1,5 +1,8 @@
+import type { CompositePath, IndexingPolicy } from "@azure/cosmos";
+import { FontIcon } from "@fluentui/react";
 import {
   Button,
+  Checkbox,
   DataGrid,
   DataGridBody,
   DataGridCell,
@@ -8,28 +11,44 @@ import {
   DataGridRow,
   SelectTabData,
   SelectTabEvent,
+  Spinner,
   Tab,
   TabList,
+  Table,
+  TableBody,
+  TableCell,
   TableColumnDefinition,
+  TableHeader,
+  TableRow,
   createTableColumn,
 } from "@fluentui/react-components";
-import { ArrowDownloadRegular, CopyRegular } from "@fluentui/react-icons";
+import {
+  ArrowDownloadRegular,
+  ChevronDown20Regular,
+  ChevronRight20Regular,
+  CopyRegular
+} from "@fluentui/react-icons";
+import copy from "clipboard-copy";
 import { HttpHeaders } from "Common/Constants";
 import MongoUtility from "Common/MongoUtility";
 import { QueryMetrics } from "Contracts/DataModels";
 import { EditorReact } from "Explorer/Controls/Editor/EditorReact";
-import { IDocument } from "Explorer/Tabs/QueryTab/QueryTabComponent";
+import { parseIndexMetrics, renderImpactDots } from "Explorer/Tabs/QueryTab/IndexAdvisorUtils";
+import { IDocument, useQueryMetadataStore } from "Explorer/Tabs/QueryTab/QueryTabComponent";
 import { useQueryTabStyles } from "Explorer/Tabs/QueryTab/Styles";
+import React, { useCallback, useEffect, useState } from "react";
 import { userContext } from "UserContext";
-import copy from "clipboard-copy";
-import React, { useCallback, useState } from "react";
+import { logConsoleProgress } from "Utils/NotificationConsoleUtils";
+import create from "zustand";
+import { client } from "../../../Common/CosmosClient";
+import { handleError } from "../../../Common/ErrorHandlingUtils";
 import { ResultsViewProps } from "./QueryResultSection";
-
+import { useIndexAdvisorStyles } from "./StylesAdvisor";
 enum ResultsTabs {
   Results = "results",
   QueryStats = "queryStats",
+  IndexAdvisor = "indexadv",
 }
-
 const ResultsTab: React.FC<ResultsViewProps> = ({ queryResults, isMongoDB, executeQueryDocumentsPage }) => {
   const styles = useQueryTabStyles();
   const queryResultsString = queryResults
@@ -355,6 +374,286 @@ const QueryStatsTab: React.FC<Pick<ResultsViewProps, "queryResults">> = ({ query
   );
 };
 
+export interface IIndexMetric {
+  index: string;
+  impact: string;
+  section: "Included" | "Not Included" | "Header";
+  path?: string;
+  composite?: { path: string; order: string }[];
+}
+export const IndexAdvisorTab: React.FC = () => {
+  const style = useIndexAdvisorStyles();
+  const { userQuery, databaseId, containerId } = useQueryMetadataStore();
+  const [loading, setLoading] = useState(true);
+  const [indexMetrics, setIndexMetrics] = useState<string | null>(null);
+  const [showIncluded, setShowIncluded] = useState(true);
+  const [showNotIncluded, setShowNotIncluded] = useState(true);
+  const [selectedIndexes, setSelectedIndexes] = useState<IIndexMetric[]>([]);
+  const [selectAll, setSelectAll] = useState(false);
+  const [updateMessageShown, setUpdateMessageShown] = useState(false);
+  const [included, setIncludedIndexes] = useState<IIndexMetric[]>([]);
+  const [notIncluded, setNotIncludedIndexes] = useState<IIndexMetric[]>([]);
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [justUpdatedPolicy, setJustUpdatedPolicy] = useState(false);
+  useEffect(() => {
+    const fetchIndexMetrics = async () => {
+      const clearMessage = logConsoleProgress(`Querying items with IndexMetrics in container ${containerId}`);
+      try {
+        const querySpec = {
+          query: userQuery,
+        };
+        const sdkResponse = await client()
+          .database(databaseId)
+          .container(containerId)
+          .items.query(querySpec, {
+            populateIndexMetrics: true,
+          })
+          .fetchAll();
+        setIndexMetrics(sdkResponse.indexMetrics);
+      } catch (error) {
+        handleError(error, "queryItemsWithIndexMetrics", `Error querying items from ${containerId}`);
+      } finally {
+        clearMessage();
+        setLoading(false);
+      }
+    };
+    if (userQuery && databaseId && containerId) {
+      fetchIndexMetrics();
+    }
+  }, [userQuery, databaseId, containerId]);
+
+  useEffect(() => {
+    if (!indexMetrics) {
+      return;
+    }
+
+    const { included, notIncluded } = parseIndexMetrics(indexMetrics);
+    setIncludedIndexes(included);
+    setNotIncludedIndexes(notIncluded);
+    if (justUpdatedPolicy) {
+      setJustUpdatedPolicy(false);
+    } else {
+      setUpdateMessageShown(false);
+    }
+  }, [indexMetrics]);
+
+  useEffect(() => {
+    const allSelected =
+      notIncluded.length > 0 && notIncluded.every((item) => selectedIndexes.some((s) => s.index === item.index));
+    setSelectAll(allSelected);
+  }, [selectedIndexes, notIncluded]);
+
+  const handleCheckboxChange = (indexObj: IIndexMetric, checked: boolean) => {
+    if (checked) {
+      setSelectedIndexes((prev) => [...prev, indexObj]);
+    } else {
+      setSelectedIndexes((prev) => prev.filter((item) => item.index !== indexObj.index));
+    }
+  };
+
+  const handleSelectAll = (checked: boolean) => {
+    setSelectAll(checked);
+    setSelectedIndexes(checked ? notIncluded : []);
+  };
+
+  const handleUpdatePolicy = async () => {
+    setIsUpdating(true);
+    try {
+      const containerRef = client().database(databaseId).container(containerId);
+      const { resource: containerDef } = await containerRef.read();
+
+      const newIncludedPaths = selectedIndexes
+        .filter((index) => !index.composite)
+        .map((index) => {
+          return {
+            path: index.path,
+          };
+        });
+
+      const newCompositeIndexes: CompositePath[][] = selectedIndexes
+        .filter((index) => Array.isArray(index.composite))
+        .map(
+          (index) =>
+            (index.composite as { path: string; order: string }[]).map((comp) => ({
+              path: comp.path,
+              order: comp.order === "descending" ? "descending" : "ascending",
+            })) as CompositePath[],
+        );
+
+      const updatedPolicy: IndexingPolicy = {
+        ...containerDef.indexingPolicy,
+        includedPaths: [...(containerDef.indexingPolicy?.includedPaths || []), ...newIncludedPaths],
+        compositeIndexes: [...(containerDef.indexingPolicy?.compositeIndexes || []), ...newCompositeIndexes],
+        automatic: containerDef.indexingPolicy?.automatic ?? true,
+        indexingMode: containerDef.indexingPolicy?.indexingMode ?? "consistent",
+        excludedPaths: containerDef.indexingPolicy?.excludedPaths ?? [],
+      };
+      await containerRef.replace({
+        id: containerId,
+        partitionKey: containerDef.partitionKey,
+        indexingPolicy: updatedPolicy,
+      });
+      useIndexingPolicyStore.getState().setIndexingPolicyFor(containerId, updatedPolicy);
+      const selectedIndexSet = new Set(selectedIndexes.map((s) => s.index));
+      const updatedNotIncluded: typeof notIncluded = [];
+      const newlyIncluded: typeof included = [];
+      for (const item of notIncluded) {
+        if (selectedIndexSet.has(item.index)) {
+          newlyIncluded.push(item);
+        } else {
+          updatedNotIncluded.push(item);
+        }
+      }
+      const newIncluded = [...included, ...newlyIncluded];
+      const newNotIncluded = updatedNotIncluded;
+      setIncludedIndexes(newIncluded);
+      setNotIncludedIndexes(newNotIncluded);
+      setSelectedIndexes([]);
+      setSelectAll(false);
+      setUpdateMessageShown(true);
+      setJustUpdatedPolicy(true);
+    } catch (err) {
+      console.error("Failed to update indexing policy:", err);
+    } finally {
+      setIsUpdating(false);
+    }
+  };
+
+  const renderRow = (item: IIndexMetric, index: number) => {
+    const isHeader = item.section === "Header";
+    const isNotIncluded = item.section === "Not Included";
+
+    return (
+      <TableRow key={index}>
+        <TableCell colSpan={2}>
+          <div className={style.indexAdvisorGrid}>
+            {isNotIncluded ? (
+              <Checkbox
+                checked={selectedIndexes.some((selected) => selected.index === item.index)}
+                onChange={(_, data) => handleCheckboxChange(item, data.checked === true)}
+              />
+            ) : isHeader && item.index === "Not Included in Current Policy" && notIncluded.length > 0 ? (
+              <Checkbox checked={selectAll} onChange={(_, data) => handleSelectAll(data.checked === true)} />
+            ) : (
+              <div className={style.indexAdvisorCheckboxSpacer}></div>
+            )}
+            {isHeader ? (
+              <span
+                style={{ cursor: "pointer" }}
+                onClick={() => {
+                  if (item.index === "Included in Current Policy") {
+                    setShowIncluded(!showIncluded);
+                  } else if (item.index === "Not Included in Current Policy") {
+                    setShowNotIncluded(!showNotIncluded);
+                  }
+                }}
+              >
+                {item.index === "Included in Current Policy" ? (
+                  showIncluded ? (
+                    <ChevronDown20Regular />
+                  ) : (
+                    <ChevronRight20Regular />
+                  )
+                ) : showNotIncluded ? (
+                  <ChevronDown20Regular />
+                ) : (
+                  <ChevronRight20Regular />
+                )}
+              </span>
+            ) : (
+              <div className={style.indexAdvisorChevronSpacer}></div>
+            )}
+            <div className={isHeader ? style.indexAdvisorRowBold : style.indexAdvisorRowNormal}>{item.index}</div>
+            <div className={isHeader ? style.indexAdvisorRowImpactHeader : style.indexAdvisorRowImpact}>
+              {!isHeader && item.impact}
+            </div>
+            <div>{!isHeader && renderImpactDots(item.impact)}</div>
+          </div>
+        </TableCell>
+      </TableRow>
+    );
+  };
+  const indexMetricItems = React.useMemo(() => {
+    const items: IIndexMetric[] = [];
+    items.push({ index: "Not Included in Current Policy", impact: "", section: "Header" });
+    if (showNotIncluded) {
+      notIncluded.forEach((item) => items.push({ ...item, section: "Not Included" }));
+    }
+    items.push({ index: "Included in Current Policy", impact: "", section: "Header" });
+    if (showIncluded) {
+      included.forEach((item) => items.push({ ...item, section: "Included" }));
+    }
+    return items;
+  }, [included, notIncluded, showIncluded, showNotIncluded]);
+
+  if (loading) {
+    return (
+      <div>
+        <Spinner
+          size="small"
+          style={
+            {
+              "--spinner-size": "16px",
+              "--spinner-thickness": "2px",
+              "--spinner-color": "#0078D4",
+            } as React.CSSProperties
+          }
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className={style.indexAdvisorMessage}>
+        {updateMessageShown ? (
+          <>
+            <span className={style.indexAdvisorSuccessIcon}>
+              <FontIcon iconName="CheckMark" style={{ color: "white", fontSize: 12 }} />
+            </span>
+            <span>
+              Your indexing policy has been updated with the new included paths. You may review the changes in Scale &
+              Settings.
+            </span>
+          </>
+        ) : (
+          "Here is an analysis on the indexes utilized for executing the query. Based on the analysis, Cosmos DB recommends adding the selected indexes to your indexing policy to optimize the performance of this particular query."
+        )}
+      </div>
+      <div className={style.indexAdvisorTitle}>Indexes analysis</div>
+      <Table className={style.indexAdvisorTable}>
+        <TableHeader>
+          <TableRow>
+            <TableCell colSpan={2}>
+              <div className={style.indexAdvisorGrid}>
+                <div className={style.indexAdvisorCheckboxSpacer}></div>
+                <div className={style.indexAdvisorChevronSpacer}></div>
+                <div>Index</div>
+                <div>
+                  <span style={{ whiteSpace: "nowrap" }}>Estimated Impact</span>
+                </div>
+              </div>
+            </TableCell>
+          </TableRow>
+        </TableHeader>
+        <TableBody>{indexMetricItems.map(renderRow)}</TableBody>
+      </Table>
+      {selectedIndexes.length > 0 && (
+        <div className={style.indexAdvisorButtonBar}>
+          {isUpdating ? (
+            <div className={style.indexAdvisorButtonSpinner}>
+              <Spinner size="tiny" />{" "}
+            </div>
+          ) : (
+            <button onClick={handleUpdatePolicy} className={style.indexAdvisorButton}>
+              Update Indexing Policy with selected index(es)
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
 export const ResultsView: React.FC<ResultsViewProps> = ({ isMongoDB, queryResults, executeQueryDocumentsPage }) => {
   const styles = useQueryTabStyles();
   const [activeTab, setActiveTab] = useState<ResultsTabs>(ResultsTabs.Results);
@@ -362,7 +661,6 @@ export const ResultsView: React.FC<ResultsViewProps> = ({ isMongoDB, queryResult
   const onTabSelect = useCallback((event: SelectTabEvent, data: SelectTabData) => {
     setActiveTab(data.value as ResultsTabs);
   }, []);
-
   return (
     <div data-test="QueryTab/ResultsPane/ResultsView" className={styles.queryResultsTabPanel}>
       <TabList selectedValue={activeTab} onTabSelect={onTabSelect}>
@@ -380,6 +678,13 @@ export const ResultsView: React.FC<ResultsViewProps> = ({ isMongoDB, queryResult
         >
           Query Stats
         </Tab>
+        <Tab
+          data-test="QueryTab/ResultsPane/ResultsView/IndexAdvisorTab"
+          id={ResultsTabs.IndexAdvisor}
+          value={ResultsTabs.IndexAdvisor}
+        >
+          Index Advisor
+        </Tab>
       </TabList>
       <div className={styles.queryResultsTabContentContainer}>
         {activeTab === ResultsTabs.Results && (
@@ -390,7 +695,23 @@ export const ResultsView: React.FC<ResultsViewProps> = ({ isMongoDB, queryResult
           />
         )}
         {activeTab === ResultsTabs.QueryStats && <QueryStatsTab queryResults={queryResults} />}
+        {activeTab === ResultsTabs.IndexAdvisor && <IndexAdvisorTab />}
       </div>
     </div>
   );
 };
+export interface IndexingPolicyStore {
+  indexingPolicies: { [containerId: string]: IndexingPolicy };
+  setIndexingPolicyFor: (containerId: string, indexingPolicy: IndexingPolicy) => void;
+}
+
+export const useIndexingPolicyStore = create<IndexingPolicyStore>((set) => ({
+  indexingPolicies: {},
+  setIndexingPolicyFor: (containerId, indexingPolicy) =>
+    set((state) => ({
+      indexingPolicies: {
+        ...state.indexingPolicies,
+        [containerId]: { ...indexingPolicy },
+      },
+    })),
+}));

src/Explorer/Tabs/QueryTab/StylesAdvisor.ts

@@ -0,0 +1,95 @@
+import { makeStyles } from "@fluentui/react-components";
+export type IndexAdvisorStyles = ReturnType<typeof useIndexAdvisorStyles>;
+export const useIndexAdvisorStyles = makeStyles({
+  indexAdvisorMessage: {
+    padding: "1rem",
+    fontSize: "1.2rem",
+    display: "flex",
+    alignItems: "center",
+    gap: "0.5rem",
+  },
+  indexAdvisorSuccessIcon: {
+    width: "18px",
+    height: "18px",
+    borderRadius: "50%",
+    backgroundColor: "#107C10",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  indexAdvisorTitle: {
+    padding: "1rem",
+    fontSize: "1.3rem",
+    fontWeight: "bold",
+  },
+  indexAdvisorTable: {
+    display: "block",
+    alignItems: "center",
+    marginBottom: "7rem",
+  },
+  indexAdvisorGrid: {
+    display: "grid",
+    gridTemplateColumns: "30px 30px 1fr 50px 120px",
+    alignItems: "center",
+    gap: "15px",
+    fontWeight: "bold",
+  },
+  indexAdvisorCheckboxSpacer: {
+    width: "18px",
+    height: "18px",
+  },
+  indexAdvisorChevronSpacer: {
+    width: "24px",
+  },
+  indexAdvisorRowBold: {
+    fontWeight: "bold",
+  },
+  indexAdvisorRowNormal: {
+    fontWeight: "normal",
+  },
+  indexAdvisorRowImpactHeader: {
+    fontSize: 0,
+  },
+  indexAdvisorRowImpact: {
+    fontWeight: "normal",
+  },
+  indexAdvisorImpactDot: {
+    color: "#0078D4",
+    fontSize: "12px",
+    display: "inline-flex",
+  },
+  indexAdvisorImpactDots: {
+    display: "flex",
+    alignItems: "center",
+    gap: "4px",
+  },
+  indexAdvisorButtonBar: {
+    padding: "1rem",
+    marginTop: "-7rem",
+    flexWrap: "wrap",
+  },
+  indexAdvisorButtonSpinner: {
+    marginTop: "1rem",
+    minWidth: "320px",
+    minHeight: "40px",
+    display: "flex",
+    alignItems: "left",
+    justifyContent: "left",
+    marginLeft: "10rem",
+  },
+  indexAdvisorButton: {
+    backgroundColor: "#0078D4",
+    color: "white",
+    padding: "8px 16px",
+    border: "none",
+    borderRadius: "4px",
+    cursor: "pointer",
+    marginTop: "1rem",
+    fontSize: "1rem",
+    fontWeight: 500,
+    transition: "background 0.2s",
+    ":hover": {
+      backgroundColor: "#005a9e",
+    },
+  },
+});

src/Explorer/Tabs/QueryTab/useQueryMetadataStore.ts

@@ -0,0 +1,15 @@
+import create from "zustand";
+
+interface QueryMetadataStore {
+  userQuery: string;
+  databaseId: string;
+  containerId: string;
+  setMetadata: (query1: string, db: string, container: string) => void;
+}
+
+export const useQueryMetadataStore = create<QueryMetadataStore>((set) => ({
+  userQuery: "",
+  databaseId: "",
+  containerId: "",
+  setMetadata: (query1, db, container) => set({ userQuery: query1, databaseId: db, containerId: container }),
+}));

src/Explorer/Tabs/Tabs.tsx

@@ -1,3 +1,4 @@
+import { Spinner, SpinnerSize } from "@fluentui/react";
 import { CollectionTabKind } from "Contracts/ViewModels";
 import Explorer from "Explorer/Explorer";
 import { useCommandBar } from "Explorer/Menus/CommandBar/CommandBarComponentAdapter";
@@ -15,8 +16,6 @@ import { userContext } from "UserContext";
 import { useTeachingBubble } from "hooks/useTeachingBubble";
 import ko from "knockout";
 import React, { MutableRefObject, useEffect, useRef, useState } from "react";
-import loadingIcon from "../../../images/circular_loader_black_16x16.gif";
-import errorIcon from "../../../images/close-black.svg";
 import errorQuery from "../../../images/error_no_outline.svg";
 import { useObservable } from "../../hooks/useObservable";
 import { ReactTabKind, useTabs } from "../../hooks/useTabs";
@@ -40,6 +39,14 @@ export const Tabs = ({ explorer }: TabsProps): JSX.Element => {
     });
   }, [setKeyboardHandlers]);
 
+  // Add useEffect to handle context buttons
+  useEffect(() => {
+    if (activeReactTab !== undefined) {
+      // React tabs have no context buttons
+      useCommandBar.getState().setContextButtons([]);
+    }
+  }, [activeReactTab]);
+
   return (
     <div className="tabsManagerContainer">
       <div className="nav-tabs-margin">
@@ -118,7 +125,17 @@ function TabNav({ tab, active, tabKind }: { tab?: Tab; active: boolean; tabKind?
             <span className="statusIconContainer" style={{ width: tabKind === ReactTabKind.Home ? 0 : 18 }}>
               {useObservable(tab?.isExecutionError || ko.observable(false)) && <ErrorIcon tab={tab} active={active} />}
               {isTabExecuting(tab, tabKind) && (
-                <img className="loadingIcon" title="Loading" src={loadingIcon} alt="Loading" />
+                <Spinner 
+                  size={SpinnerSize.small} 
+                  styles={{
+                    circle: {
+                      borderTopColor: "var(--colorNeutralForeground1)",
+                      borderLeftColor: "var(--colorNeutralForeground1)",
+                      borderBottomColor: "var(--colorNeutralForeground1)",
+                      borderRightColor: "var(--colorNeutralBackground1)"
+                    }
+                  }}
+                />
               )}
               {isQueryErrorThrown(tab, tabKind) && (
                 <img
@@ -169,14 +186,11 @@ const CloseButton = ({
     onClick={(event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
       event.stopPropagation();
       tab ? tab.onCloseTabButtonClick() : useTabs.getState().closeReactTab(tabKind);
-      // tabKind === ReactTabKind.QueryCopilot && useQueryCopilot.getState().resetQueryCopilotStates();
     }}
     tabIndex={active ? 0 : undefined}
     onKeyPress={({ nativeEvent: e }) => (tab ? tab.onKeyPressClose(undefined, e) : onKeyPressReactTabClose(e, tabKind))}
   >
-    <span className="tabIcon close-Icon">
-      <img src={errorIcon} title="Close" alt="Close" aria-label="hidden" />
-    </span>
+    <span className="tabIcon close-Icon" />
   </span>
 );
 
@@ -259,10 +273,6 @@ const isQueryErrorThrown = (tab?: Tab, tabKind?: ReactTabKind): boolean => {
 };
 
 const getReactTabContent = (activeReactTab: ReactTabKind, explorer: Explorer): JSX.Element => {
-  // React tabs have no context buttons.
-  useCommandBar.getState().setContextButtons([]);
-
-  // eslint-disable-next-line no-console
   switch (activeReactTab) {
     case ReactTabKind.Connect:
       return userContext.apiType === "VCoreMongo" ? (
@@ -287,6 +297,6 @@ const getReactTabContent = (activeReactTab: ReactTabKind, explorer: Explorer): J
     case ReactTabKind.QueryCopilot:
       return <QueryCopilotTab explorer={explorer} />;
     default:
-      throw Error(`Unsupported tab kind ${ReactTabKind[activeReactTab]}`);
+      throw new Error(`Unsupported tab kind ${ReactTabKind[activeReactTab]}`);
   }
 };

src/Explorer/Tabs/TriggerTabContent.tsx

@@ -1,5 +1,6 @@
 import { TriggerDefinition } from "@azure/cosmos";
-import { Dropdown, IDropdownOption, Label, TextField } from "@fluentui/react";
+import { IDropdownOption, IDropdownStyles, Label, TextField } from "@fluentui/react";
+import { Dropdown } from "@fluentui/react/lib/Dropdown";
 import { KeyboardAction } from "KeyboardShortcuts";
 import { ValidCosmosDbIdDescription, ValidCosmosDbIdInputPattern } from "Utils/ValidationUtils";
 import React, { Component } from "react";
@@ -17,12 +18,24 @@ import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandBu
 import { EditorReact } from "../Controls/Editor/EditorReact";
 import { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter";
 import TriggerTab from "./TriggerTab";
-
 const triggerTypeOptions: IDropdownOption[] = [
   { key: "Pre", text: "Pre" },
   { key: "Post", text: "Post" },
 ];
 
+const dropdownStyles: Partial<IDropdownStyles> = {
+  label: {
+    color: "var(--colorNeutralForeground1)",
+  },
+  dropdown: {
+    width: "100%",
+  },
+  title: {
+    backgroundColor: "var(--colorNeutralBackground1)",
+    color: "var(--colorNeutralForeground1)",
+  },
+};
+
 const triggerOperationOptions: IDropdownOption[] = [
   { key: "All", text: "All" },
   { key: "Create", text: "Create" },
@@ -304,6 +317,23 @@ export class TriggerTabContent extends Component<TriggerTab, ITriggerTabContentS
           value={triggerId}
           readOnly={!isIdEditable}
           onChange={this.handleTriggerIdChange}
+          styles={{
+            root: { width: "40%", marginTop: "10px" },
+            fieldGroup: {
+              backgroundColor: "var(--colorNeutralBackground1)",
+              border: "1px solid var(--colorNeutralStroke1)",
+            },
+            field: {
+              color: "var(--colorNeutralForeground1)",
+            },
+            subComponentStyles: {
+              label: {
+                root: {
+                  color: "var(--colorNeutralForeground1)",
+                },
+              },
+            },
+          }}
         />
         <Dropdown
           placeholder="Trigger Type"
@@ -312,6 +342,7 @@ export class TriggerTabContent extends Component<TriggerTab, ITriggerTabContentS
           selectedKey={triggerType}
           className="trigger-field"
           onChange={(event, selectedKey) => this.handleTriggerTypeOprationChange(event, selectedKey, "triggerType")}
+          styles={dropdownStyles}
         />
         <Dropdown
           placeholder="Trigger Operation"
@@ -322,6 +353,7 @@ export class TriggerTabContent extends Component<TriggerTab, ITriggerTabContentS
           onChange={(event, selectedKey) =>
             this.handleTriggerTypeOprationChange(event, selectedKey, "triggerOperation")
           }
+          styles={dropdownStyles}
         />
         <Label className="trigger-field">Trigger Body</Label>
         <EditorReact

src/Explorer/Tabs/UserDefinedFunctionTabContent.tsx

@@ -1,7 +1,9 @@
 import { UserDefinedFunctionDefinition } from "@azure/cosmos";
 import { Label, TextField } from "@fluentui/react";
+import { FluentProvider, webDarkTheme, webLightTheme } from "@fluentui/react-components";
 import { KeyboardAction } from "KeyboardShortcuts";
 import { ValidCosmosDbIdDescription, ValidCosmosDbIdInputPattern } from "Utils/ValidationUtils";
+import { isDarkMode } from "hooks/useTheme";
 import React, { Component } from "react";
 import DiscardIcon from "../../../images/discard.svg";
 import SaveIcon from "../../../images/save-cosmos.svg";
@@ -16,7 +18,6 @@ import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandBu
 import { EditorReact } from "../Controls/Editor/EditorReact";
 import { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter";
 import UserDefinedFunctionTab from "./UserDefinedFunctionTab";
-
 interface IUserDefinedFunctionTabContentState {
   udfId: string;
   udfBody: string;
@@ -258,23 +259,46 @@ export default class UserDefinedFunctionTabContent extends Component<
 
   render(): JSX.Element {
     const { udfId, udfBody, isUdfIdEditable } = this.state;
+    const currentTheme = isDarkMode ? webDarkTheme : webLightTheme;
     return (
       <div className="tab-pane flexContainer trigger-form" role="tabpanel">
-        <TextField
-          className="trigger-field"
-          label="User Defined Function Id"
-          id="entityTimeId"
-          autoFocus
-          required
-          readOnly={!isUdfIdEditable}
-          type="text"
-          pattern={ValidCosmosDbIdInputPattern.source}
-          title={ValidCosmosDbIdDescription}
-          placeholder="Enter the new user defined function id"
-          size={40}
-          value={udfId}
-          onChange={this.handleUdfIdChange}
-        />
+        <FluentProvider theme={currentTheme}>
+          <TextField
+            className="trigger-field"
+            label="User Defined Function Id"
+            id="entityTimeId"
+            autoFocus
+            required
+            readOnly={!isUdfIdEditable}
+            type="text"
+            pattern={ValidCosmosDbIdInputPattern.source}
+            title={ValidCosmosDbIdDescription}
+            placeholder="Enter the new user defined function id"
+            size={40}
+            value={udfId}
+            onChange={this.handleUdfIdChange}
+            styles={{
+              root: {
+                width: "40%",
+                marginTop: "10px",
+              },
+              fieldGroup: {
+                backgroundColor: "var(--colorNeutralBackground1)",
+                border: "1px solid var(--colorNeutralStroke1)",
+              },
+              field: {
+                color: "var(--colorNeutralForeground2)",
+              },
+              subComponentStyles: {
+                label: {
+                  root: {
+                    color: "var(--colorNeutralForeground1)",
+                  },
+                },
+              },
+            }}
+          />{" "}
+        </FluentProvider>
         <Label className="trigger-field">User Defined Function Body</Label>
         <EditorReact
           language={"javascript"}

src/Explorer/Theme/ThemeUtil.tsx

@@ -4,16 +4,19 @@ import {
   FluentProvider,
   FluentProviderSlots,
   Theme,
+  createDarkTheme,
   createLightTheme,
   makeStyles,
   mergeClasses,
   shorthands,
   themeToTokensObject,
-  webLightTheme,
+  webDarkTheme,
+  webLightTheme
 } from "@fluentui/react-components";
 import { Platform, configContext } from "ConfigContext";
 import React from "react";
 import { appThemeFabricTealBrandRamp } from "../../Platform/Fabric/FabricTheme";
+import { useTheme } from "../../hooks/useTheme";
 
 export const LayoutConstants = {
   rowHeight: 32,
@@ -47,6 +50,7 @@ export const CosmosFluentProvider: React.FC<CosmosFluentProviderProps> = ({ chil
   // As we convert components to Fluent UI 9, if we end up with nested FluentProviders, the inner FluentProvider will be a no-op.
   const { isInFluentProvider } = React.useContext(FluentProviderContext);
   const styles = useDefaultRootStyles();
+  const { isDarkMode } = useTheme();
 
   if (isInFluentProvider) {
     // We're already in a fluent context, don't create another.
@@ -61,7 +65,7 @@ export const CosmosFluentProvider: React.FC<CosmosFluentProviderProps> = ({ chil
   return (
     <FluentProviderContext.Provider value={{ isInFluentProvider: true }}>
       <FluentProvider
-        theme={getPlatformTheme(configContext.platform)}
+        theme={getPlatformTheme(configContext.platform, isDarkMode)}
         className={mergeClasses(styles.fluentProvider, className)}
         {...props}
       >
@@ -114,7 +118,16 @@ const cosmosTheme = {
   sidebarInitialWidth: "300px",
 };
 
-export const tokens = themeToTokensObject({ ...webLightTheme, ...cosmosTheme, ...sizeMappings[LayoutSize.Compact] });
+// Get the current theme tokens based on the root theme
+export const getThemeTokens = (isDarkMode: boolean) => 
+  themeToTokensObject({ 
+    ...(isDarkMode ? webDarkTheme : webLightTheme), 
+    ...cosmosTheme, 
+    ...sizeMappings[LayoutSize.Compact] 
+  });
+
+// Initialize with light theme, will be updated by the provider
+export const tokens = getThemeTokens(false);
 
 export const cosmosShorthands = {
   border: () => shorthands.border("1px", "solid", tokens.colorNeutralStroke2),
@@ -124,11 +137,12 @@ export const cosmosShorthands = {
   borderLeft: () => shorthands.borderLeft("1px", "solid", tokens.colorNeutralStroke2),
 };
 
-export function getPlatformTheme(platform: Platform): CosmosTheme {
+export function getPlatformTheme(platform: Platform, isDarkMode: boolean = false): CosmosTheme {
+  const createTheme = isDarkMode ? createDarkTheme : createLightTheme;
   const baseTheme =
     platform === Platform.Fabric
-      ? createLightTheme(appThemeFabricTealBrandRamp)
-      : createLightTheme(appThemePortalBrandRamp);
+      ? createTheme(appThemeFabricTealBrandRamp)
+      : createTheme(appThemePortalBrandRamp);
 
   return {
     ...baseTheme,

src/Main.tsx

@@ -2,14 +2,16 @@
 import "./ReactDevTools";
 
 // CSS Dependencies
-import { initializeIcons, loadTheme } from "@fluentui/react";
+import { initializeIcons, loadTheme, useTheme } from "@fluentui/react";
+import { FluentProvider, makeStyles, webDarkTheme, webLightTheme } from "@fluentui/react-components";
+import { Platform } from "ConfigContext";
 import { QuickstartCarousel } from "Explorer/Quickstart/QuickstartCarousel";
 import { MongoQuickstartTutorial } from "Explorer/Quickstart/Tutorials/MongoQuickstartTutorial";
 import { SQLQuickstartTutorial } from "Explorer/Quickstart/Tutorials/SQLQuickstartTutorial";
 import "allotment/dist/style.css";
 import "bootstrap/dist/css/bootstrap.css";
 import { useCarousel } from "hooks/useCarousel";
-import React from "react";
+import React, { useEffect } from "react";
 import ReactDOM from "react-dom";
 import "../externals/jquery-ui.min.css";
 import "../externals/jquery-ui.min.js";
@@ -19,7 +21,7 @@ import "../externals/jquery.dataTables.min.css";
 import "../externals/jquery.typeahead.min.css";
 import "../externals/jquery.typeahead.min.js";
 // Image Dependencies
-import { Platform } from "ConfigContext";
+import { SidePanel } from "Explorer/Panes/PanelContainerComponent";
 import { QueryCopilotCarousel } from "Explorer/QueryCopilot/CopilotCarousel";
 import { SidebarContainer } from "Explorer/Sidebar";
 import { KeyboardShortcutRoot } from "KeyboardShortcuts";
@@ -46,6 +48,7 @@ import "./Explorer/Controls/ErrorDisplayComponent/ErrorDisplayComponent.less";
 import "./Explorer/Controls/JsonEditor/JsonEditorComponent.less";
 import "./Explorer/Controls/Notebook/NotebookTerminalComponent.less";
 import "./Explorer/Controls/TreeComponent/treeComponent.less";
+import { ErrorBoundary } from "./Explorer/ErrorBoundary";
 import "./Explorer/Graph/GraphExplorerComponent/graphExplorer.less";
 import "./Explorer/Menus/CommandBar/CommandBarComponent.less";
 import { CommandBar } from "./Explorer/Menus/CommandBar/CommandBarComponentAdapter";
@@ -54,21 +57,32 @@ import "./Explorer/Menus/CommandBar/MemoryTrackerComponent.less";
 import "./Explorer/Menus/NotificationConsole/NotificationConsole.less";
 import { NotificationConsole } from "./Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
 import "./Explorer/Panes/PanelComponent.less";
-import { SidePanel } from "./Explorer/Panes/PanelContainerComponent";
 import "./Explorer/SplashScreen/SplashScreen.less";
 import "./Libs/jquery";
 import { appThemeFabric } from "./Platform/Fabric/FabricTheme";
 import "./Shared/appInsights";
 import { useConfig } from "./hooks/useConfig";
 import { useKnockoutExplorer } from "./hooks/useKnockoutExplorer";
+import { isDarkMode } from "./hooks/useTheme";
+// Initialize icons before React is loaded
+initializeIcons(undefined, { disableWarnings: true });
 
-initializeIcons();
+const useStyles = makeStyles({
+  root: {
+    height: "100vh",
+    width: "100vw",
+    backgroundColor: "var(--colorNeutralBackground1)",
+    color: "var(--colorNeutralForeground1)"
+  }
+});
 
-const App: React.FunctionComponent = () => {
+const App = (): JSX.Element => {
+  const config = useConfig();
   const isCarouselOpen = useCarousel((state) => state.shouldOpen);
   const isCopilotCarouselOpen = useCarousel((state) => state.showCopilotCarousel);
+  const styles = useStyles();
+  const theme = useTheme();
 
-  const config = useConfig();
   if (config?.platform === Platform.Fabric) {
     loadTheme(appThemeFabric);
     import("../less/documentDBFabric.less");
@@ -81,51 +95,111 @@ const App: React.FunctionComponent = () => {
   }
 
   return (
-    <KeyboardShortcutRoot>
-      <div className="flexContainer" aria-hidden="false" data-test="DataExplorerRoot">
-        <div id="divExplorer" className="flexContainer hideOverflows">
-          <div id="freeTierTeachingBubble"> </div>
-          {/* Main Command Bar - Start */}
-          <CommandBar container={explorer} />
-          {/* Collections Tree and Tabs - Begin */}
-          <SidebarContainer explorer={explorer} />
-          {/* Collections Tree and Tabs - End */}
+    <div id="Main" className={styles.root}>
+      <KeyboardShortcutRoot>
+        <div
+          className="flexContainer"
+          style={{ 
+            flex: 1, 
+            display: "flex", 
+            flexDirection: "column",
+            backgroundColor: "var(--colorNeutralBackground1)",
+            color: "var(--colorNeutralForeground1)"
+          }}
+          aria-hidden="false"
+          data-test="DataExplorerRoot"
+        >
           <div
-            className="dataExplorerErrorConsoleContainer"
-            role="contentinfo"
-            aria-label="Notification console"
-            id="explorerNotificationConsole"
+            id="divExplorer"
+            className="flexContainer hideOverflows"
+            style={{ 
+              flex: 1, 
+              display: "flex", 
+              flexDirection: "column",
+              backgroundColor: "var(--colorNeutralBackground1)",
+              color: "var(--colorNeutralForeground1)"
+            }}
           >
-            <NotificationConsole />
+            <div id="freeTierTeachingBubble"> </div>
+            {/* Main Command Bar - Start */}
+            <CommandBar container={explorer} />
+            {/* Collections Tree and Tabs - Begin */}
+            <SidebarContainer explorer={explorer} />
+            {/* Collections Tree and Tabs - End */}
+            <div
+              className="dataExplorerErrorConsoleContainer"
+              role="contentinfo"
+              aria-label="Notification console"
+              id="explorerNotificationConsole"
+              style={{
+                backgroundColor: "var(--colorNeutralBackground1)",
+                color: "var(--colorNeutralForeground1)"
+              }}
+            >
+              <NotificationConsole />
+            </div>
           </div>
+          <SidePanel />
+          <Dialog />
+          {<QuickstartCarousel isOpen={isCarouselOpen} />}
+          {<SQLQuickstartTutorial />}
+          {<MongoQuickstartTutorial />}
+          {<QueryCopilotCarousel isOpen={isCopilotCarouselOpen} explorer={explorer} />}
         </div>
-        <SidePanel />
-        <Dialog />
-        {<QuickstartCarousel isOpen={isCarouselOpen} />}
-        {<SQLQuickstartTutorial />}
-        {<MongoQuickstartTutorial />}
-        {<QueryCopilotCarousel isOpen={isCopilotCarouselOpen} explorer={explorer} />}
-      </div>
-    </KeyboardShortcutRoot>
+      </KeyboardShortcutRoot>
+    </div>
+  );
+};
+
+const Root: React.FC = () => {
+  // Force dark theme
+  const currentTheme = isDarkMode ? webDarkTheme : webLightTheme;
+  
+  // Apply theme to body for Fluent UI v8 components
+  useEffect(() => {
+    if (isDarkMode) {
+      document.body.classList.add("isDarkMode");
+      document.body.style.backgroundColor = "var(--colorNeutralBackground1)";
+      document.body.style.color = "var(--colorNeutralForeground1)";
+      loadTheme(appThemeFabric);
+    } else {
+      document.body.classList.remove("isDarkMode");
+      document.body.style.backgroundColor = "";
+      document.body.style.color = "";
+      loadTheme(appThemeFabric);
+    }
+  }, [isDarkMode]);
+
+  return (
+    <ErrorBoundary>
+      <FluentProvider theme={currentTheme}>
+        <App />
+      </FluentProvider>
+    </ErrorBoundary>
   );
 };
 
 const mainElement = document.getElementById("Main");
-ReactDOM.render(<App />, mainElement);
+if (mainElement) {
+  ReactDOM.render(<Root />, mainElement);
+}
 
 function LoadingExplorer(): JSX.Element {
+  const styles = useStyles();
   return (
-    <div className="splashLoaderContainer">
-      <div className="splashLoaderContentContainer">
-        <p className="connectExplorerContent">
-          <img src={hdeConnectImage} alt="Azure Cosmos DB" />
-        </p>
-        <p className="splashLoaderTitle" id="explorerLoadingStatusTitle">
-          Welcome to Azure Cosmos DB
-        </p>
-        <p className="splashLoaderText" id="explorerLoadingStatusText" role="alert">
-          Connecting...
-        </p>
+    <div className={styles.root}>
+      <div className="splashLoaderContainer">
+        <div className="splashLoaderContentContainer">
+          <p className="connectExplorerContent">
+            <img src={hdeConnectImage} alt="Azure Cosmos DB" />
+          </p>
+          <p className="splashLoaderTitle" id="explorerLoadingStatusTitle">
+            Welcome to Azure Cosmos DB
+          </p>
+          <p className="splashLoaderText" id="explorerLoadingStatusText" role="alert">
+            Connecting...
+          </p>
+        </div>
       </div>
     </div>
   );

src/hooks/useTabs.ts

@@ -66,7 +66,7 @@ export const useTabs: UseStore<TabsState> = create((set, get) => ({
     }
   },
   activateNewTab: (tab: TabsBase): void => {
-    set((state) => ({ openedTabs: [...state.openedTabs, tab], activeTab: tab, activeReactTab: undefined }));
+    set((state) => ({ openedTabs: [...state.openedTabs, tab], activeTab: tab, activeReactTab: undefined as ReactTabKind | undefined }));
     tab.triggerPersistState = get().persistTabsState;
     tab.onActivate();
     get().persistTabsState();
@@ -115,7 +115,7 @@ export const useTabs: UseStore<TabsState> = create((set, get) => ({
       set({ activeTab: undefined, activeReactTab: undefined });
     }
 
-    if (tab.tabId === activeTab.tabId && tabIndex !== -1) {
+    if (activeTab && tab.tabId === activeTab.tabId && tabIndex !== -1) {
       const tabToTheRight = updatedTabs[tabIndex];
       const lastOpenTab = updatedTabs[updatedTabs.length - 1];
       const newActiveTab = tabToTheRight ?? lastOpenTab;

src/hooks/useTheme.tsx

@@ -0,0 +1,65 @@
+import { useFluent } from "@fluentui/react-components";
+import React, { createContext, FC, ReactNode, useEffect, useState } from "react";
+
+interface ThemeContextType {
+  theme: "Light" | "Dark";
+  isDarkMode: boolean;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+interface ThemeProviderProps {
+  children: ReactNode;
+  theme: "Light" | "Dark";
+}
+
+export const CustomThemeProvider: FC<ThemeProviderProps> = ({ children, theme }) => {
+  const isDarkMode = theme === "Dark";
+  return <ThemeContext.Provider value={{ theme, isDarkMode }}>{children}</ThemeContext.Provider>;
+};
+export const isDarkMode = true;
+export const monacoTheme = isDarkMode ? "vs-dark" : "vs";
+
+export const useTheme = () => {
+  const { targetDocument } = useFluent();
+  const context = React.useContext(ThemeContext);
+
+  const [isDarkMode, setIsDarkMode] = useState(() => {
+    // First check if we're in a theme context
+    if (context) {
+      return context.isDarkMode;
+    }
+    // Fallback to checking body class
+    return targetDocument?.body.classList.contains("isDarkMode") ?? true;
+  });
+
+  useEffect(() => {
+    if (!targetDocument) return;
+
+    const checkTheme = () => {
+      // First check if we're in a theme context
+      if (context) {
+        setIsDarkMode(context.isDarkMode);
+        return;
+      }
+      // Fallback to checking body class
+      const hasDarkMode = targetDocument.body.classList.contains("isDarkMode");
+      setIsDarkMode(hasDarkMode);
+    };
+
+    // Initial check
+    checkTheme();
+
+    // Create a MutationObserver to watch for class changes
+    const observer = new MutationObserver((mutations) => {
+      checkTheme();
+    });
+    observer.observe(targetDocument.body, { attributes: true, attributeFilter: ["class"] });
+
+    return () => observer.disconnect();
+  }, [targetDocument, context]);
+
+  return {
+    isDarkMode,
+  };
+};