diff --git a/08. Advance Hooks & React 19/2. Use Context/1. Without Use/App.jsx b/08. Advance Hooks & React 19/2. Use Context/1. Without Use/App.tsx
similarity index 100%
rename from 08. Advance Hooks & React 19/2. Use Context/1. Without Use/App.jsx
rename to 08. Advance Hooks & React 19/2. Use Context/1. Without Use/App.tsx
diff --git a/08. Advance Hooks & React 19/2. Use Context/1. Without Use/components/Card.jsx b/08. Advance Hooks & React 19/2. Use Context/1. Without Use/components/Card.tsx
similarity index 83%
rename from 08. Advance Hooks & React 19/2. Use Context/1. Without Use/components/Card.jsx
rename to 08. Advance Hooks & React 19/2. Use Context/1. Without Use/components/Card.tsx
index bc04570..0fdc24e 100644
--- a/08. Advance Hooks & React 19/2. Use Context/1. Without Use/components/Card.jsx	
+++ b/08. Advance Hooks & React 19/2. Use Context/1. Without Use/components/Card.tsx	
@@ -1,8 +1,11 @@
 import { useContext } from "react";
 import { ThemeContext } from "./Theme";
-
 const Card = () => {
-  const { theme, toggleTheme } = useContext(ThemeContext);
+  const context = useContext(ThemeContext);
+  if(!context)
+    throw new Error("useTheme must be provided within a ThemeProvider")
+
+  const{theme,toggleTheme} =context
 
   return (
     <div
@@ -35,4 +38,4 @@ const Card = () => {
   );
 };
 
-export default Card;
+export default Card;
\ No newline at end of file
diff --git a/08. Advance Hooks & React 19/2. Use Context/1. Without Use/components/Theme.jsx b/08. Advance Hooks & React 19/2. Use Context/1. Without Use/components/Theme.jsx
deleted file mode 100644
index dc55d15..0000000
--- a/08. Advance Hooks & React 19/2. Use Context/1. Without Use/components/Theme.jsx	
+++ /dev/null
@@ -1,28 +0,0 @@
-import { createContext, useState } from "react";
-import Card from "./Card";
-
-export const ThemeContext = createContext();
-
-const ThemeProvider = ({ children }) => {
-  const [theme, setTheme] = useState("light");
-
-  const toggleTheme = () => {
-    setTheme(theme === "light" ? "dark" : "light");
-  };
-
-  return (
-    <ThemeContext.Provider value={{ theme, toggleTheme }}>
-      {children}
-    </ThemeContext.Provider>
-  );
-};
-
-const Theme = () => {
-  return (
-    <ThemeProvider>
-      <Card />
-    </ThemeProvider>
-  );
-};
-
-export default Theme;
diff --git a/08. Advance Hooks & React 19/2. Use Context/1. Without Use/components/Theme.tsx b/08. Advance Hooks & React 19/2. Use Context/1. Without Use/components/Theme.tsx
new file mode 100644
index 0000000..bcddf23
--- /dev/null
+++ b/08. Advance Hooks & React 19/2. Use Context/1. Without Use/components/Theme.tsx	
@@ -0,0 +1,47 @@
+
+import { createContext, ReactNode, useContext, useState } from "react";
+import Card from "./Card";
+
+type Theme = "light" | "dark"
+
+interface ThemeContextType{
+    theme:Theme;
+    toggleTheme:()=>void;
+}
+
+
+export const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+const ThemeProvider:React.FC<{children:ReactNode}> = ({ children }) => {
+  const [theme, setTheme] = useState<Theme>("light");
+
+  const toggleTheme = () => {
+    setTheme((prevTheme)=>prevTheme === "light" ? "dark" : "light");
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+const Theme = () => {
+  return (
+    <ThemeProvider>
+      <Card />
+    </ThemeProvider>
+  );
+};
+
+
+export const useTheme =():ThemeContextType=>{
+    const context =useContext(ThemeContext)
+    if(!context){
+        throw new Error("useTheme must be provided within a ThemeProvider")
+    }
+
+    return context
+}
+
+export default Theme;
diff --git a/08. Advance Hooks & React 19/2. Use Context/2. With Use/App.jsx b/08. Advance Hooks & React 19/2. Use Context/2. With Use/App.tsx
similarity index 100%
rename from 08. Advance Hooks & React 19/2. Use Context/2. With Use/App.jsx
rename to 08. Advance Hooks & React 19/2. Use Context/2. With Use/App.tsx
diff --git a/08. Advance Hooks & React 19/2. Use Context/2. With Use/components/Card.jsx b/08. Advance Hooks & React 19/2. Use Context/2. With Use/components/Card.tsx
similarity index 84%
rename from 08. Advance Hooks & React 19/2. Use Context/2. With Use/components/Card.jsx
rename to 08. Advance Hooks & React 19/2. Use Context/2. With Use/components/Card.tsx
index 1ed5379..bb55375 100644
--- a/08. Advance Hooks & React 19/2. Use Context/2. With Use/components/Card.jsx	
+++ b/08. Advance Hooks & React 19/2. Use Context/2. With Use/components/Card.tsx	
@@ -1,9 +1,11 @@
 import { use } from "react";
 import { ThemeContext } from "./Theme";
-
 const Card = () => {
-  // Now by using react 19, we don't have to use "useContext" we can replace that with "use"
-  const { theme, toggleTheme } = use(ThemeContext);
+  const context = use(ThemeContext);
+  if(!context)
+    throw new Error("useTheme must be provided within a ThemeProvider")
+
+  const{theme,toggleTheme} =context
 
   return (
     <div
@@ -36,4 +38,4 @@ const Card = () => {
   );
 };
 
-export default Card;
+export default Card;
\ No newline at end of file
diff --git a/08. Advance Hooks & React 19/2. Use Context/2. With Use/components/Theme.jsx b/08. Advance Hooks & React 19/2. Use Context/2. With Use/components/Theme.jsx
deleted file mode 100644
index dc55d15..0000000
--- a/08. Advance Hooks & React 19/2. Use Context/2. With Use/components/Theme.jsx	
+++ /dev/null
@@ -1,28 +0,0 @@
-import { createContext, useState } from "react";
-import Card from "./Card";
-
-export const ThemeContext = createContext();
-
-const ThemeProvider = ({ children }) => {
-  const [theme, setTheme] = useState("light");
-
-  const toggleTheme = () => {
-    setTheme(theme === "light" ? "dark" : "light");
-  };
-
-  return (
-    <ThemeContext.Provider value={{ theme, toggleTheme }}>
-      {children}
-    </ThemeContext.Provider>
-  );
-};
-
-const Theme = () => {
-  return (
-    <ThemeProvider>
-      <Card />
-    </ThemeProvider>
-  );
-};
-
-export default Theme;
diff --git a/08. Advance Hooks & React 19/2. Use Context/2. With Use/components/Theme.tsx b/08. Advance Hooks & React 19/2. Use Context/2. With Use/components/Theme.tsx
new file mode 100644
index 0000000..bcddf23
--- /dev/null
+++ b/08. Advance Hooks & React 19/2. Use Context/2. With Use/components/Theme.tsx	
@@ -0,0 +1,47 @@
+
+import { createContext, ReactNode, useContext, useState } from "react";
+import Card from "./Card";
+
+type Theme = "light" | "dark"
+
+interface ThemeContextType{
+    theme:Theme;
+    toggleTheme:()=>void;
+}
+
+
+export const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+const ThemeProvider:React.FC<{children:ReactNode}> = ({ children }) => {
+  const [theme, setTheme] = useState<Theme>("light");
+
+  const toggleTheme = () => {
+    setTheme((prevTheme)=>prevTheme === "light" ? "dark" : "light");
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+const Theme = () => {
+  return (
+    <ThemeProvider>
+      <Card />
+    </ThemeProvider>
+  );
+};
+
+
+export const useTheme =():ThemeContextType=>{
+    const context =useContext(ThemeContext)
+    if(!context){
+        throw new Error("useTheme must be provided within a ThemeProvider")
+    }
+
+    return context
+}
+
+export default Theme;