diff --git a/back-end/app/dependencies.py b/back-end/app/dependencies.py
new file mode 100644
index 0000000..e69de29
diff --git a/back-end/app/main.py b/back-end/app/main.py
index 2f90c82..d567a3c 100644
--- a/back-end/app/main.py
+++ b/back-end/app/main.py
@@ -1,7 +1,10 @@
 from fastapi import FastAPI
+from routers import vehicleInformation
 
 app = FastAPI()
 
+app.include_router(vehicleInformation.router)
+
 @app.get("/")
 async def root():
     return {"message": "Hello World!"}
\ No newline at end of file
diff --git a/back-end/app/routers/__init__.py b/back-end/app/routers/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/back-end/app/routers/vehicleInformation.py b/back-end/app/routers/vehicleInformation.py
new file mode 100644
index 0000000..4f4aa8e
--- /dev/null
+++ b/back-end/app/routers/vehicleInformation.py
@@ -0,0 +1,9 @@
+from fastapi import APIRouter
+
+router = APIRouter(
+    prefix="/vehicle"
+)
+
+@router.get('/{vehicleId}/vin')
+async def get_vehicle_vin(vehicleId: str):
+    return ""
\ No newline at end of file
diff --git a/front-end/src/components/FleetManager-Components/FuelPurchases.js b/front-end/src/components/FleetManager-Components/FuelPurchases.js
index 6257b9e..ad39ea5 100644
--- a/front-end/src/components/FleetManager-Components/FuelPurchases.js
+++ b/front-end/src/components/FleetManager-Components/FuelPurchases.js
@@ -9,7 +9,7 @@ export default class FuelPurchases extends Component {
 
         this.state = {
             expanded: false,
-            showModal: true
+            showModal: true,
         }
     }
 
@@ -43,68 +43,92 @@ export default class FuelPurchases extends Component {
 
                 {
                     (this.state.showModal)
-                    ? (
-                        <>
-                          <div
-                            className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none"
-                          >
-                            <div className="relative w-auto my-6 mx-auto min-w-1/2 max-w-3xl">
-                              {/*content*/}
-                              <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
-                                {/*header*/}
-                                <div className="flex items-start justify-between p-5 border-b border-solid border-blueGray-200 rounded-t">
-                                  <h3 className="text-3xl font-semibold">
-                                    Add Fuel Purchase
-                                  </h3>
-                                  <button
-                                    className="p-1 ml-auto bg-transparent border-0 text-black opacity-5 float-right text-3xl leading-none font-semibold outline-none focus:outline-none"
-                                    onClick={() => this.setShowModal(false)}
-                                  >
-                                    <span className="bg-transparent text-black opacity-5 h-6 w-6 text-2xl block outline-none focus:outline-none">
-                                      <FontAwesomeIcon icon={faClose} />
-                                    </span>
-                                  </button>
-                                </div>
-                                {/*body*/}
-                                <div className="relative p-6 flex-auto">
-                                  <div className="flex flex-col">
-                                    <input type="date"/>
-                                    <div>Date</div>
-                                  </div>
-                                  <div className="flex flex-col">
-                                    <input type="number" step="0.001" className="border" />
-                                    Fuel Purchased
-                                  </div>
-                                  <div className="flex flex-col">
-                                    <input type="number" step="0.01" className="border" />
-                                    Total Cost
-                                  </div>
-                                </div>
-                                {/*footer*/}
-                                <div className="flex items-center justify-end p-6 border-t border-solid border-blueGray-200 rounded-b">
-                                  <button
-                                    className="text-red-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
-                                    type="button"
-                                    onClick={() => this.setShowModal(false)}
-                                  >
-                                    Close
-                                  </button>
-                                  <button
-                                    className="bg-emerald-500 text-white active:bg-emerald-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
-                                    type="button"
-                                    onClick={() => this.setShowModal(false)}
-                                  >
-                                    Add
-                                  </button>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                          <div className="opacity-25 fixed inset-0 z-40 bg-black"></div>
-                        </>
-                      ) : null
+                    ? <FuelPurchaseModal setShowModal={this.setShowModal} /> : null
                 }
             </>
         )
     }
-}
\ No newline at end of file
+}
+
+class FuelPurchaseModal extends Component {
+
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      date: '',
+      amount: 0.000,
+      cost: 0.00
+    }
+  }
+
+  handleChange = (event) => {
+    this.setState({
+      [event.target.id]: event.target.value
+    })
+  }
+
+  render() {
+
+    return (
+      <>
+        <div
+          className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none"
+        >
+          <div className="relative w-auto my-6 mx-auto min-w-1/2 max-w-3xl">
+            {/*content*/}
+            <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
+              {/*header*/}
+              <div className="flex items-start justify-between p-5 border-b border-solid border-blueGray-200 rounded-t">
+                <h3 className="text-3xl font-semibold">
+                  Add Fuel Purchase
+                </h3>
+                <button
+                  className="p-1 ml-auto bg-transparent border-0 text-black opacity-5 float-right text-3xl leading-none font-semibold outline-none focus:outline-none"
+                  onClick={() => this.setShowModal(false)}
+                >
+                  <span className="bg-transparent text-black opacity-5 h-6 w-6 text-2xl block outline-none focus:outline-none">
+                    <FontAwesomeIcon icon={faClose} />
+                  </span>
+                </button>
+              </div>
+              {/*body*/}
+              <div className="relative p-6 flex-auto">
+                <div className="flex flex-col">
+                  <input className="border" id="date" type="date" value={this.state.date} onChange={this.handleChange}/>
+                  <div>Date</div>
+                </div>
+                <div className="flex flex-col">
+                  <input id="amount" type="number" step="0.001" className="border" value={this.state.amount} onChange={this.handleChange}/>
+                  Fuel Purchased
+                </div>
+                <div className="flex flex-col">
+                  <input id="cost" type="number" step="0.01" className="border" value={this.state.cost} onChange={this.handleChange}/>
+                  Total Cost
+                </div>
+              </div>
+              {/*footer*/}
+              <div className="flex items-center justify-end p-6 border-t border-solid border-blueGray-200 rounded-b">
+                <button
+                  className="text-red-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
+                  type="button"
+                  onClick={() => this.props.setShowModal(false)}
+                >
+                  Close
+                </button>
+                <button
+                  className="bg-emerald-500 text-white active:bg-emerald-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
+                  type="button"
+                  onClick={() => this.props.setShowModal(false)}
+                >
+                  Add
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="opacity-25 fixed inset-0 z-40 bg-black"></div>
+      </>
+    )
+  }
+} 
\ No newline at end of file