diff --git a/client/src/scenes/DoorLockCharges/index.js b/client/src/scenes/DoorLockCharges/index.js
index 9e533bf..52020ee 100644
--- a/client/src/scenes/DoorLockCharges/index.js
+++ b/client/src/scenes/DoorLockCharges/index.js
@@ -1,16 +1,41 @@
 import React, { Component } from 'react';
 
+import { Container, Form } from "semantic-ui-react";
+
 import MainMenu from '../../components/MainMenu';
 
 class DoorLockCharges extends Component {
 
     render () {
         return (
-            <div>
+            <Container>
                 <MainMenu/>
                 <h3>Door Lock Charges</h3>
                 <hr/>
-            </div>
+                <Form>
+                    <Form.Group widths="equal">
+                        <Form.Input
+                            fluid
+                            required
+                            label="Start date"
+                            type="date"
+                        />
+                        <Form.Input
+                            fluid
+                            required
+                            label="End date"
+                            type="date"
+                        />
+                    </Form.Group>
+                    <Form.Input
+                        fluid
+                        required
+                        label="Select DLock file"
+                        type="file"
+                    />
+                    <Form.Button>Generate Report</Form.Button>
+                </Form>
+            </Container>
         );
     }
 }