diff --git a/.gitignore b/.gitignore
index 8b28018..c25b28a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,3 +26,4 @@ public/sample_data
 .env
 src/lib/local_sample_data
 .vercel
+bun.lockb
\ No newline at end of file
diff --git a/bun.lockb b/bun.lockb
index d2b09d5..e433c00 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index ea5b795..04207cd 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
-"scripts": {
+  "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
@@ -30,6 +30,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "d3": "^7.9.0",
+    "danfojs-node": "^1.1.2",
     "express": "^4.19.2",
     "html2canvas": "^1.4.1",
     "joi": "^17.13.1",
diff --git a/src/App.tsx b/src/App.tsx
index 4831e4a..26fa595 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,10 +7,11 @@ import DropZone from './components/DropZone';
 import { Button } from './components/ui/button';
 import { Context } from './Context';
 import { processDataShopData } from './lib/dataProcessingUtils';
+import {filterPromGrad} from "@/lib/GradPromUtils";
 
 function App() {
 
-  const { resetData, setGraphData, setLoading, data, setData, graphData, loading } = useContext(Context)
+  const { resetData, setGraphData, setLoading, setFilteredData, filteredData, data, setData, graphData, loading } = useContext(Context)
   const [showDropZone, setShowDropZone] = useState<boolean>(true)
 
   const handleData = (data: GlobalDataType[]) => {
@@ -22,13 +23,29 @@ function App() {
     setLoading(loading)
   }
 
+  const filterData = (filteredData: GlobalDataType[]) => {
+    const data: GlobalDataType[] = filterPromGrad(filteredData, "PROMOTED")
+    setFilteredData(data)
+    console.log(data)
+  }
+
+  // const handleFilteredData = (filteredData: GlobalDataType[]) => {
+  //     setData(filteredData)
+  //     setShowDropZone(false)
+  //     const graphData: GraphData = processDataShopData(filteredData)
+  //     setGraphData(graphData)
+  // }
+
   useEffect(() => {
     if (data) {
       const graphData: GraphData = processDataShopData(data)
       setGraphData(graphData)
-
     }
-  }, [data])
+    // if (filteredData) {
+    //   const graphData: GraphData = processDataShopData(filteredData)
+    //   setGraphData(graphData)
+    // }
+  }, [data])  //,filteredData
 
   return (
     <>
@@ -75,7 +92,18 @@ function App() {
               </>
             )
           }
+        <div style={{position:"relative"}}>
+            <div style={{position:"absolute", float: "right", top:-260, right:600}}>
+                <Button
 
+                onClick={() => {
+                filterData(data!);
+                setFilteredData(data);
+                // handleFilteredData(filteredData!)
+                }
+                }> Filter Promoted Data </Button>
+            </div>
+        </div>
         </div>
       </div>
     </>
diff --git a/src/Context.tsx b/src/Context.tsx
index 3e03b0f..2f8bc28 100644
--- a/src/Context.tsx
+++ b/src/Context.tsx
@@ -3,6 +3,8 @@ import { GlobalDataType, GraphData } from './lib/types';
 interface ContextInterface {
     data: GlobalDataType[] | null;
     graphData: GraphData | null;
+    filteredData: GlobalDataType[] | null
+    setFilteredData: (filteredData: GlobalDataType[] | null) => void;
     loading: boolean;
     setLoading: (loading: boolean) => void;
     setData: (data: GlobalDataType[] | null) => void;
@@ -13,6 +15,7 @@ interface ContextInterface {
 export const Context = createContext({} as ContextInterface);
 const initialState = {
     data: null,
+    filteredData: null,
     graphData: null,
     loading: false
 }
@@ -22,6 +25,7 @@ interface ProviderProps {
 }
 export const Provider = ({ children }: ProviderProps) => {
     const [data, setData] = useState<GlobalDataType[] | null>(initialState.data)
+    const [filteredData, setFilteredData] = useState<GlobalDataType[] | null>(initialState.filteredData)
     const [graphData, setGraphData] = useState<GraphData | null>(initialState.graphData)
     const [loading, setLoading] = useState<boolean>(initialState.loading)
 
@@ -36,8 +40,10 @@ export const Provider = ({ children }: ProviderProps) => {
         <Context.Provider
             value={{
                 data,
+                filteredData,
                 graphData,
                 loading,
+                setFilteredData,
                 setLoading,
                 setData,
                 setGraphData,
diff --git a/src/lib/GradPromUtils.ts b/src/lib/GradPromUtils.ts
new file mode 100644
index 0000000..2132835
--- /dev/null
+++ b/src/lib/GradPromUtils.ts
@@ -0,0 +1,14 @@
+import {GlobalDataType} from "./types";
+
+
+export function filterPromGrad(data: GlobalDataType[], promOrGrad: "GRADUATED" | "PROMOTED" | "NOT_COMPLETED" | null): GlobalDataType[] {
+    // If no data has been imported into DropZone, do nothing
+    if (data == null) {
+    }
+    if (promOrGrad !== null) {
+        return data.filter(item => item["CF (Workspace Progress Status)"] === promOrGrad);
+    } else {
+        // Return the original data if promOrGrad is null
+        return data;
+    }
+}
\ No newline at end of file