diff --git a/src/bin/BinSettings.tsx b/src/bin/BinSettings.tsx
index 345812e..e540b20 100644
--- a/src/bin/BinSettings.tsx
+++ b/src/bin/BinSettings.tsx
@@ -47,10 +47,10 @@ import {
   RadiansToDegrees,
   TriangleOppositeLength
 } from "common/TrigFunctions";
-// import FanPicker from "fans/fanPicker";
+import FanPicker from "fans/fanPicker";
 import { GrainOptions, ToGrainOption } from "grain";
 import GrainDescriber from "grain/GrainDescriber";
-// import GrainTransaction from "grain/GrainTransaction";
+import GrainTransaction from "grain/GrainTransaction";
 import { GetGrainUseOptions, ToGrainUseOption } from "grain/GrainUse";
 import { useMobile, useSnackbar } from "hooks";
 import { clone, cloneDeep } from "lodash";
@@ -450,7 +450,6 @@ export default function BinSettings(props: Props) {
         form.lowTemp = lowTempC;
         form.autoGrainNode = autoTopNode;
         if (form.inventory) form.inventory.inventoryControl = inventoryControl;
-
         binAPI
           .updateBin(bin.key(), form)
           .then(response => {
@@ -473,19 +472,18 @@ export default function BinSettings(props: Props) {
         newBin.settings.inventory.grainBushels = bin.settings.inventory?.grainBushels ?? 0; //but also need to use the old inventory amount so the diff is applied correctly
       }
       return (
-        // <GrainTransaction
-        //   open={grainUpdate}
-        //   mainObject={newBin}
-        //   grainAdjustment={grainDiff}
-        //   close={() => {
-        //     setGrainUpdate(false);
-        //     setGrainDiff(0);
-        //   }}
-        //   callback={() => {
-        //     close(true);
-        //   }}
-        // />
-        null
+        <GrainTransaction
+          open={grainUpdate}
+          mainObject={newBin}
+          grainAdjustment={grainDiff}
+          close={() => {
+            setGrainUpdate(false);
+            setGrainDiff(0);
+          }}
+          callback={() => {
+            close(true);
+          }}
+        />
       );
     }
   };
@@ -839,7 +837,6 @@ export default function BinSettings(props: Props) {
               row
               value={inventoryControl}
               onChange={(_, value) => {
-                console.log(value);
                 setInventoryControl(+value);
               }}>
               <FormControlLabel
@@ -1112,19 +1109,18 @@ export default function BinSettings(props: Props) {
 
   const fanPicker = () => {
     return (
-      // <FanPicker
-      //   updateFan={(fanId: number) => {
-      //     if (fanId !== undefined) {
-      //       //set the fan id in the bin settings form
-      //       form.fanId = fanId;
-      //       //remove the old fan from the bin
-      //       form.fan = null;
-      //     }
-      //   }}
-      //   fanID={form.fanId}
-      //   useCardView
-      // />
-      null
+      <FanPicker
+        updateFan={(fanId: number) => {
+          if (fanId !== undefined) {
+            //set the fan id in the bin settings form
+            form.fanId = fanId;
+            //remove the old fan from the bin
+            form.fan = null;
+          }
+        }}
+        fanID={form.fanId}
+        useCardView
+      />
     );
   };
 
diff --git a/src/component/ComponentForm.tsx b/src/component/ComponentForm.tsx
index 0f477b6..7b7b406 100644
--- a/src/component/ComponentForm.tsx
+++ b/src/component/ComponentForm.tsx
@@ -30,6 +30,7 @@ import {
   extension,
   getMeasurements,
   hasDimensions,
+  hasFan,
   isController,
   isMultiSensor,
   primaryMeasurement
@@ -45,6 +46,7 @@ import { makeStyles } from "@mui/styles";
 import { getDistanceUnit } from "utils";
 import { GrainOptions } from "grain";
 import CompModes from "component/ComponentMode.json";
+import FanPicker from "fans/fanPicker";
 
 const useStyles = makeStyles((theme: Theme) => {
   return ({
@@ -874,8 +876,8 @@ export default function ComponentForm(props: Props) {
           disabled={!canEdit}
         />
         {/* TODO-CS: Change this to have a parameter in the extensions that gets checked rather then checking for the component type */}
-        {/*hasFan(component.type()) && (*/}
-          {/*<FanPicker
+        {hasFan(component.type()) && (
+          <FanPicker
              fanID={component.settings.fanId}
              updateFan={(fanID: number) => {
                component.settings.fanId = fanID;
@@ -890,8 +892,8 @@ export default function ComponentForm(props: Props) {
                  );
                }
              }}
-           /> */}
-        {/* )} */}
+           />
+        )}
         {component.settings.type === quack.ComponentType.COMPONENT_TYPE_GRAIN_CABLE &&
           grainSelect()}
         {component.settings.type === quack.ComponentType.COMPONENT_TYPE_GRAIN_CABLE && (
diff --git a/src/models/Transaction.ts b/src/models/Transaction.ts
new file mode 100644
index 0000000..b5d3804
--- /dev/null
+++ b/src/models/Transaction.ts
@@ -0,0 +1,19 @@
+import { cloneDeep } from "lodash";
+import { pond } from "protobuf-ts/pond";
+import { or } from "utils/types";
+
+export class Transaction {
+  public transaction: pond.Transaction = pond.Transaction.create();
+
+  public static create(pb?: pond.Transaction): Transaction {
+    let my = new Transaction();
+    if (pb) {
+      my.transaction = pond.Transaction.fromObject(cloneDeep(or(pb, {})));
+    }
+    return my;
+  }
+
+  public static any(data: any): Transaction {
+    return Transaction.create(pond.Transaction.fromObject(cloneDeep(data)));
+  }
+}
\ No newline at end of file
diff --git a/src/navigation/Router.tsx b/src/navigation/Router.tsx
index a281c13..5d1e931 100644
--- a/src/navigation/Router.tsx
+++ b/src/navigation/Router.tsx
@@ -18,6 +18,7 @@ import Site from "pages/Site";
 import Heaters from "pages/Heaters";
 import Heater from "pages/Heater";
 import Tasks from "pages/Tasks";
+import Transactions from "pages/Transactions";
 //import Site from "pages/Site";
 
 const DeviceHistory = lazy(() => import("pages/DeviceHistory"));
@@ -301,6 +302,7 @@ export default function Router(props: Props) {
           {/* <Route index element={<Typography>Hello!</Typography>} /> */}
           <Route path="users" element={<Users/>} />
           <Route path="tasks" element={<Tasks />} />
+          <Route path="transactions" element={<Transactions />} />
           
           {/* Map pages */}
           <Route path="visualFarm" element={<FieldMap />} />
diff --git a/src/navigation/SideNavigator.tsx b/src/navigation/SideNavigator.tsx
index a48de00..dad3529 100644
--- a/src/navigation/SideNavigator.tsx
+++ b/src/navigation/SideNavigator.tsx
@@ -1,4 +1,4 @@
-import { ChevronRight, People, Person } from "@mui/icons-material";
+import { ChevronRight, People, Person, SyncAlt } from "@mui/icons-material";
 import ChevronLeft from "@mui/icons-material/ChevronLeft";
 import { 
   darken, 
@@ -307,7 +307,19 @@ export default function SideNavigator(props: Props) {
             <ListItemIcon>
               <TasksIcon />
             </ListItemIcon>
-            {open && <ListItemText primary="Heaters" />}
+            {open && <ListItemText primary="Tasks" />}
+          </ListItemButton>
+        </Tooltip>
+        <Tooltip title="Transactions" placement="right">
+          <ListItemButton
+            id="tour-transactions"
+            onClick={() => goTo("/transactions")}
+            classes={getClasses("/transactions")}
+            >
+            <ListItemIcon>
+              <SyncAlt />
+            </ListItemIcon>
+            {open && <ListItemText primary="Transactions" />}
           </ListItemButton>
         </Tooltip>
       </List>
diff --git a/src/pages/Transactions.tsx b/src/pages/Transactions.tsx
new file mode 100644
index 0000000..1f2a747
--- /dev/null
+++ b/src/pages/Transactions.tsx
@@ -0,0 +1,165 @@
+import { useEffect, useState } from "react";
+import PageContainer from "./PageContainer";
+import { Box, Grid2 as Grid, TextField, Typography } from "@mui/material";
+import { Moment } from "moment";
+import { pond } from "protobuf-ts/pond";
+import SearchSelect, { Option } from "common/SearchSelect";
+import TransactionViewer from "transactions/transactionViewer";
+import { TransactionOptions } from "objects/ObjectDescriber";
+import { GetDefaultDateRange } from "common/time/DateRange";
+import TimeBar from "common/time/TimeBar";
+import { useTransactionAPI } from "providers";
+import { Transaction } from "models/Transaction";
+import { makeStyles } from "@mui/styles";
+
+const useStyles = makeStyles(() => {
+  return ({
+    page: {
+      padding: 10
+    }
+  });
+});
+
+//this page will have the dropdown selectors to set the variables for query
+export default function Transactions() {
+  const classes = useStyles();
+  const defaultDateRange = GetDefaultDateRange();
+  const [startDate, setStartDate] = useState<Moment>(defaultDateRange.start);
+  const [endDate, setEndDate] = useState<Moment>(defaultDateRange.end);
+  //these two variables are the object type
+  const [fromObject, setFromObject] = useState<pond.ObjectType | undefined>(undefined);
+  const [toObject, setToObject] = useState<pond.ObjectType | undefined>(undefined);
+  //these are simply for controlling what is shown in the select boxes
+  const [selectedFromObject, setSelectedFromObject] = useState<Option | null>();
+  const [selectedToObject, setSelectedToObject] = useState<Option | null>();
+  const transactionOptions = TransactionOptions();
+  const transactionAPI = useTransactionAPI();
+  const [isLoading, setIsLoading] = useState(false);
+  const [totalTransactions, setTotalTransactions] = useState<Transaction[]>([]);
+  const [filteredTransactions, setFilteredTransactions] = useState<Transaction[]>([]);
+  const [objectNames, setObjectNames] = useState<Map<string, string>>(new Map());
+  const [fromName, setFromName] = useState("");
+  const [toName, setToName] = useState("");
+
+  const updateDateRange = (newStartDate: any, newEndDate: any) => {
+    let range = GetDefaultDateRange();
+    range.start = newStartDate;
+    range.end = newEndDate;
+    setStartDate(newStartDate);
+    setEndDate(newEndDate);
+  };
+
+  //useEffect to filter the transactions to show based on the dropdown for object and text boxes for name entry
+  useEffect(() => {
+    let temp: Transaction[] = [];
+    totalTransactions.forEach(trans => {
+      if (
+        (!fromObject || trans.transaction.fromObject === fromObject) &&
+        (!toObject || trans.transaction.toObject === toObject) &&
+        (fromName === "" ||
+          objectNames
+            .get(trans.transaction.fromKey)
+            ?.toLowerCase()
+            .includes(fromName.toLowerCase())) &&
+        (toName === "" ||
+          objectNames
+            .get(trans.transaction.toKey)
+            ?.toLowerCase()
+            .includes(toName.toLowerCase()))
+      ) {
+        temp.push(trans);
+      }
+    });
+    setFilteredTransactions(temp);
+  }, [fromObject, toObject, totalTransactions, fromName, toName, objectNames]);
+
+  //useEffect to get the transactions when the timeframe changes
+  useEffect(() => {
+    if (!isLoading) {
+      setIsLoading(true);
+      transactionAPI
+        .transactionPageData(startDate.toISOString(), endDate.toISOString())
+        .then(resp => {
+          setTotalTransactions(
+            resp.data.transactions.map((t: pond.Transaction) => Transaction.create(t))
+          );
+          let tempMap: Map<string, string> = new Map();
+          Object.keys(resp.data.nameMap).forEach(key => {
+            tempMap.set(key, resp.data.nameMap[key]);
+          });
+          setObjectNames(tempMap);
+        })
+        .catch(err => {
+          console.log("There was a problem loading your inventory transactions");
+        })
+        .finally(() => {
+          setIsLoading(false);
+        });
+    }
+  }, [transactionAPI, startDate, endDate]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <PageContainer>
+      <Box className={classes.page}>
+        <TimeBar startDate={startDate} endDate={endDate} updateDateRange={updateDateRange} />
+        <Typography>Type</Typography>
+        <Grid container direction="row" spacing={2} style={{ margin: 10 }}>
+          <Grid>
+            <SearchSelect
+              style={{ width: 175 }}
+              label="From"
+              selected={selectedFromObject}
+              options={transactionOptions}
+              changeSelection={op => {
+                setSelectedFromObject(op);
+                setFromObject(op?.value);
+              }}
+            />
+          </Grid>
+          <Grid>
+            <SearchSelect
+              style={{ width: 175 }}
+              label="To"
+              selected={selectedToObject}
+              options={transactionOptions}
+              changeSelection={op => {
+                setSelectedToObject(op);
+                setToObject(op?.value);
+              }}
+            />
+          </Grid>
+        </Grid>
+        <Typography>Name</Typography>
+        <Grid container direction="row" spacing={2} style={{ margin: 10 }}>
+          <Grid>
+            <TextField
+              label="From"
+              variant="outlined"
+              style={{ width: 175 }}
+              value={fromName}
+              onChange={e => {
+                setFromName(e.target.value);
+              }}
+            />
+          </Grid>
+          <Grid>
+            <TextField
+              label="To"
+              variant="outlined"
+              style={{ width: 175 }}
+              value={toName}
+              onChange={e => {
+                setToName(e.target.value);
+              }}
+            />
+          </Grid>
+        </Grid>
+        <TransactionViewer
+          transactions={filteredTransactions}
+          loading={isLoading}
+          objectNames={objectNames}
+        />
+      </Box>
+    </PageContainer>
+  );
+}
diff --git a/src/transactions/transactionDataDisplay.tsx b/src/transactions/transactionDataDisplay.tsx
new file mode 100644
index 0000000..93eb45c
--- /dev/null
+++ b/src/transactions/transactionDataDisplay.tsx
@@ -0,0 +1,42 @@
+import { Box, Typography } from "@mui/material";
+import GrainDescriber from "grain/GrainDescriber";
+import { Transaction } from "models/Transaction";
+import { pond } from "protobuf-ts/pond";
+import React from "react";
+import { getGrainUnit } from "utils";
+
+interface Props {
+  transaction: Transaction;
+}
+
+export default function TransactionDataDisplay(props: Props) {
+  const { transaction } = props;
+
+  const display = () => {
+    let transactionData = transaction.transaction.transaction;
+    if (transactionData) {
+      if (transactionData.grainTransaction) {
+        let gt = transactionData.grainTransaction;
+        return (
+          <Box>
+            <Typography>
+              Grain:{" "}
+              {gt.grainType === pond.Grain.GRAIN_CUSTOM
+                ? gt.customGrain
+                : GrainDescriber(gt.grainType).name}
+            </Typography>
+            <Typography>Variant: {gt.subtype}</Typography>
+            <Typography>
+              {getGrainUnit() === pond.GrainUnit.GRAIN_UNIT_WEIGHT && gt.bushelsPerTonne > 1
+                ? "Weight: " + gt.bushels / gt.bushelsPerTonne + " mT"
+                : "Bushels: " + gt.bushels}
+            </Typography>
+            <Typography>Message: {gt.message}</Typography>
+          </Box>
+        );
+      }
+    }
+  };
+
+  return <React.Fragment>{display()}</React.Fragment>;
+}
diff --git a/src/transactions/transactionViewer.tsx b/src/transactions/transactionViewer.tsx
new file mode 100644
index 0000000..ef154c7
--- /dev/null
+++ b/src/transactions/transactionViewer.tsx
@@ -0,0 +1,108 @@
+import { Box, Typography } from "@mui/material";
+import ResponsiveTable, { Column } from "common/ResponsiveTable";
+import { cloneDeep } from "lodash";
+//import { getTableIcons } from "common/ResponsiveTable";
+//import MaterialTable, { Column, MTableToolbar } from "material-table";
+import { Transaction } from "models/Transaction";
+import moment from "moment";
+import ObjectDescriber from "objects/ObjectDescriber";
+import React, { useEffect, useState } from "react";
+import TransactionDataDisplay from "./transactionDataDisplay";
+
+interface Props {
+  transactions: Transaction[];
+  loading?: boolean;
+  objectNames?: Map<string, string>;
+}
+
+export default function TransactionViewer(props: Props) {
+  const { transactions, loading, objectNames } = props;
+  const [displayedRows, setDisplayedRows] = useState<Transaction[]>([])
+  const [tablePage, setTablePage] = useState(0)
+  const [pageSize, setPageSize] = useState(10)
+
+  useEffect(()=>{
+    // let rows: Transaction[] = []
+    // transactions.forEach((transaction, index) => {
+    //   if (index >= tablePage * pageSize && index < (tablePage + 1) * pageSize){
+    //     rows.push(transaction)
+    //   }
+    // })
+    let clone: Transaction[] = cloneDeep(transactions)
+    let rows = clone.splice(tablePage * pageSize, pageSize)
+    console.log(transactions)
+    console.log(rows)
+    setDisplayedRows(rows)
+  },[transactions, tablePage, pageSize])
+
+  const columns: Column<Transaction>[] = [
+    {
+      title: "Date",
+      render: row => {
+        return (
+          <Box padding={2}>
+            <Typography>{moment(row.transaction.timestamp).format("YYYY-MM-DD")}</Typography>
+          </Box>
+        );
+      }
+    },
+    {
+      title: "From",
+      render: row => {
+        return (
+          <Box padding={2}>
+            <Typography>{ObjectDescriber(row.transaction.fromObject).name}</Typography>
+            <Typography>
+              {objectNames ? objectNames.get(row.transaction.fromKey) : row.transaction.fromKey}
+            </Typography>
+          </Box>
+        );
+      }
+    },
+    {
+      title: "To",
+      render: row => {
+        return (
+          <Box padding={2}>
+            <Typography>{ObjectDescriber(row.transaction.toObject).name}</Typography>
+            <Typography>
+              {objectNames ? objectNames.get(row.transaction.toKey) : row.transaction.toKey}
+            </Typography>
+          </Box>
+        );
+      }
+    },
+    {
+      title: "Transaction",
+      render: row => {
+        return (
+          <Box padding={2}> 
+            <TransactionDataDisplay transaction={row} />
+          </Box>
+        );
+      }
+    }
+  ];
+
+  const handleChange = (event: any) => {
+    setPageSize(event.target.value);
+  };
+
+  const myTable = () => {
+    return (
+      <ResponsiveTable<Transaction>
+        isLoading={loading}
+        title={"Inventory Transactions"}
+        page={tablePage}
+        columns={columns}
+        pageSize={pageSize}
+        rows={displayedRows}
+        total={transactions.length}
+        setPage={page => setTablePage(page)}
+        handleRowsPerPageChange={handleChange}
+      />
+    )
+  };
+
+  return <Box>{myTable()}</Box>;
+}