diff --git a/apps/docs/docs/learn/06-recipes/01-contexual-styles.mdx b/apps/docs/docs/learn/06-recipes/01-contexual-styles.mdx
index f3597f8a..c94ec56f 100644
--- a/apps/docs/docs/learn/06-recipes/01-contexual-styles.mdx
+++ b/apps/docs/docs/learn/06-recipes/01-contexual-styles.mdx
@@ -3,7 +3,7 @@
 #
 # This source code is licensed under the MIT license found in the
 # LICENSE file in the root directory of this source tree.
-sidebar_position: 5
+sidebar_position: 6
 ---
 
 import Tabs from '@theme/Tabs';
@@ -12,34 +12,83 @@ import TabItem from '@theme/TabItem';
 
 # Contextual styles
 
-Contextual styles are an effective way to dynamically adapt styles based on a component's state or its environment. Here are some approaches to achieve this:
+Contextual styles are an effective way to dynamically adapt styles based on a component's state
+or its environment. Here are some approaches to achieve this:
 
 ### Using Context
 
-Context can help reduce prop-drilling by sharing state across components. For example, you can manage the open or closed state of a sidebar using React Context and conditionally apply styles:
+Context can help reduce prop-drilling by sharing state across components.
+For example, you can manage the open or closed state of a sidebar using React Context
+and conditionally apply styles:
+
+## Defining context and styles
+This file sets up the `SidebarContext` and defines the styles for the sidebar in one place.
+The context provides a way to share the open/closed state, and the styles determine
+the appearance of the sidebar based on that state.
 
 ```tsx
-import { createContext, useContext } from 'react';
+import { createContext } from 'react';
 import * as stylex from '@stylexjs/stylex';
 
 const SidebarContext = createContext(false);
 
 const styles = stylex.create({
   sidebarOpen: {
-    width: '250px',
+    width: '250',
   },
   sidebarClosed: {
-    width: '50px',
+    width: '50',
   },
 });
 
-function Sidebar({ children }) {
+export { SidebarContext, styles };
+```
+## Building the sidebar component
+The `Sidebar` component uses the `SidebarContext` to determine its open or closed state
+and conditionally applies the appropriate styles.
+
+```tsx
+import React, { useContext } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import { SidebarContext, styles } from './SidebarContext';
+
+
+function Sidebar({ children }: { children: React.ReactNode }) {
   const isOpen = useContext(SidebarContext);
+
   return (
     <div {...stylex.props(isOpen ? styles.sidebarOpen : styles.sidebarClosed)}>
       {children}
     </div>
   );
 }
+
+export default Sidebar;
+```
+## Using the sidebar in a parent component
+The `App` component manages the sidebar's open/closed state and provides it to
+ child components through `SidebarContext.Provider`. A button toggles the sidebar state dynamically.
+
+```tsx
+import React, { useState } from 'react';
+import SidebarContext from './SidebarContext';
+import Sidebar from './Sidebar';
+
+function App() {
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+
+  return (
+    <SidebarContext.Provider value={isSidebarOpen}>
+      <button onClick={() => setIsSidebarOpen(!isSidebarOpen)}>
+        Toggle Sidebar
+      </button>
+      <Sidebar>
+        <p>Sidebar Content</p>
+      </Sidebar>
+    </SidebarContext.Provider>
+  );
+}
+
+export default App;
 ```
 
diff --git a/apps/docs/docs/learn/06-recipes/03-descendant styles.mdx b/apps/docs/docs/learn/06-recipes/03-descendant styles.mdx
index 01a2a452..294b4823 100644
--- a/apps/docs/docs/learn/06-recipes/03-descendant styles.mdx	
+++ b/apps/docs/docs/learn/06-recipes/03-descendant styles.mdx	
@@ -1,3 +1,14 @@
+---
+# Copyright (c) Meta Platforms, Inc. and affiliates.
+#
+# This source code is licensed under the MIT license found in the
+# LICENSE file in the root directory of this source tree.
+sidebar_position: 7
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 # Descendant styles
 
 ## Hover-Dependent Descendant Styles