diff --git a/backend/apps/journals/migrations/0005_auto_20210331_1613.py b/backend/apps/journals/migrations/0005_auto_20210331_1613.py
new file mode 100644
index 0000000..914f6ae
--- /dev/null
+++ b/backend/apps/journals/migrations/0005_auto_20210331_1613.py
@@ -0,0 +1,23 @@
+# Generated by Django 3.1.6 on 2021-03-31 20:13
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('journals', '0004_journal_user'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='journal',
+            name='comment',
+            field=models.CharField(max_length=255, null=True, verbose_name='comment'),
+        ),
+        migrations.AlterField(
+            model_name='journal',
+            name='user',
+            field=models.IntegerField(null=True, verbose_name='user'),
+        ),
+    ]
diff --git a/backend/apps/journals/models.py b/backend/apps/journals/models.py
index 7600572..a39eee0 100644
--- a/backend/apps/journals/models.py
+++ b/backend/apps/journals/models.py
@@ -4,12 +4,13 @@
 class Journal(models.Model):
     status = models.IntegerField(verbose_name='status', default=True)
     coa = models.IntegerField(verbose_name='coa', null=True)
-    user = models.IntegerField(verbose_name='coa', null=True)
+    user = models.IntegerField(verbose_name='user', null=True)
     debit = models.FloatField(verbose_name="debit", default=0.00, null=True)
     credit = models.FloatField(verbose_name="credit", default=0.00, null=True)
     amount = models.FloatField(verbose_name="amount", default=0.00, null=True)
     date = models.DateField(verbose_name='date', auto_now_add=True, null=True)
     source = models.CharField(verbose_name='source', max_length=255, null=True)
+    comment = models.CharField(verbose_name='comment', max_length=255, null=True)
 
     def __str__(self):
         return self.name
diff --git a/frontend/src/components/JournalModal.js b/frontend/src/components/JournalModal.js
new file mode 100644
index 0000000..f2a2bdc
--- /dev/null
+++ b/frontend/src/components/JournalModal.js
@@ -0,0 +1,146 @@
+import React, { Component } from "react";
+import {
+    Button,
+    Modal,
+    ModalHeader,
+    ModalBody,
+    ModalFooter,
+    Form,
+    FormGroup,
+    Input,
+    Label,
+} from "reactstrap";
+import { Header, Table, Checkbox, Dropdown } from 'semantic-ui-react'
+import API from '../api'
+
+
+export default class JournalModal extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            activeItem: this.props.activeItem,
+            isAdd: this.props.isAdd,
+            coas: this.props.coas
+        }
+    }
+
+    isAddModal = () => {
+        if (this.state.isAdd) {
+            return (
+                <ModalHeader>New Journal Entry</ModalHeader>
+            )
+        }
+        return (
+            <ModalHeader>Edit Journal Entry</ModalHeader>
+        )
+    }
+
+    handleChange = (e) => {
+        let { name, value } = e.target;
+
+        if (e.target.type === "checkbox") {
+            value = e.target.checked;
+        }
+
+        const activeItem = { ...this.state.activeItem, [name]: value };
+        this.setState({ activeItem });
+    };
+
+    render() {
+        const { onSave } = this.props;
+
+        return (
+            <Modal isOpen={true}>
+                {this.isAddModal()}
+                <ModalBody>
+                    <Form>
+                        <FormGroup>
+                            <Label for="account-name">Status</Label>
+                            <Input
+                                type="select"
+                                id="entry-status"
+                                name="status"
+                                value={this.state.activeItem.status}
+                                onChange={this.handleChange}
+                            >
+                                <option value={1}>Approved</option>
+                                <option value={2}>Pending</option>
+                                <option value={3}>Rejected</option>
+                            </Input>
+                        </FormGroup>
+                        <FormGroup>
+                            <Label for="account-number">COA</Label>
+                            <Input
+                                type="select"
+                                id="entry-coa"
+                                name="coa"
+                                value={Number.parseInt(this.state.activeItem.coa)}
+                                onChange={this.handleChange}
+                            >
+                                {this.state.coas.map(coa => (<option value={coa.id}>{coa.name}</option>))}
+                            </Input>
+                        </FormGroup>
+                        <FormGroup>
+                            <Label for="account-description">Debit</Label>
+                            <Input
+                                type="text"
+                                id="entry-debit"
+                                name="debit"
+                                value={this.state.activeItem.debit}
+                                onChange={this.handleChange}
+                                placeholder={0.00}
+                            />
+                        </FormGroup>
+                        <FormGroup>
+                            <Label for="account-normalSide">Credit</Label>
+                            <Input
+                                type="text"
+                                id="entry-credit"
+                                name="credit"
+                                value={this.state.activeItem.credit}
+                                onChange={this.handleChange}
+                                placeholder={0.00}
+                            />
+                        </FormGroup>
+                        <FormGroup>
+                            <Label for="account-category">Amount</Label>
+                            <Input
+                                type="text"
+                                id="entry-amount"
+                                name="amount"
+                                value={this.state.activeItem.amount}
+                                onChange={this.handleChange}
+                                placeholder={0.00}
+                            />
+                        </FormGroup>
+                        <FormGroup>
+                            <Label for="account-subcategory">Source</Label>
+                            <Input
+                                type="text"
+                                id="entry-source"
+                                name="source"
+                                value={this.state.activeItem.source}
+                                onChange={this.handleChange}
+                                placeholder="Enter Source"
+                            />
+                        </FormGroup>
+                        <FormGroup>
+                            <Label for="account-subcategory">Comment</Label>
+                            <Input
+                                type="text"
+                                id="entry-comment"
+                                name="comment"
+                                value={this.state.activeItem.comment}
+                                onChange={this.handleChange}
+                                placeholder="Enter Comment"
+                            />
+                        </FormGroup>
+                    </Form>
+                </ModalBody>
+                <ModalFooter>
+                    <Button color="success" onClick={() => onSave(this.state.activeItem)}>Save</Button>
+                </ModalFooter>
+            </Modal>
+        )
+    }
+}
\ No newline at end of file
diff --git a/frontend/src/components/JournalTable.js b/frontend/src/components/JournalTable.js
index 73dbd4f..605ad82 100644
--- a/frontend/src/components/JournalTable.js
+++ b/frontend/src/components/JournalTable.js
@@ -1,26 +1,49 @@
 import React, { useState, useEffect } from 'react'
 import API from '../api'
-import { Header, Table, Button, Checkbox, Input } from 'semantic-ui-react'
+import { Header, Table, Button, Checkbox, Dropdown  } from 'semantic-ui-react'
+import JouralModal from '../components/JournalModal'
+import JournalModal from '../components/JournalModal';
 
 export default function LogTable() {
     const [journalList, setJournalList] = useState(null);
     const [selectedJournals, setSelectedJournals] = useState([]);
+    const [tableRows, setTableRows] = useState();
     const [coaList, setCoaList] = useState(null);
 
+    const [activeItem, setActiveItem] = useState({
+        status: 2,
+        coa: 1,
+        user: "",
+        debit: 0.00,
+        credit: 0.00,
+        amount: 0.00,
+        source: "",
+        comment: "",
+    });
+    const [modal, setModal] = useState(false);
+    const [toggle, setToggle] = useState(true);
+    const [isAdd, setIsAdd] = useState(false);
+
     useEffect(async () => {
         const journals = await API.get('/api/journals/admin/').then(res => res.data);
         const coas = await API.get('/api/coa/admin/').then(res => res.data);
         setCoaList(coas);
         setJournalList(journals);
-    }, [setJournalList, setCoaList]);
+        setTableRows(renderTableRows(journals, coas));
+    }, [setTableRows, setJournalList, setCoaList]);
 
     const getCoaInfo = (coas, coaID) => {
         return coas.filter(coa => coa["id"] == coaID)[0]["name"]
     }
 
     const refreshItems = async () => {
-        const journals = await API.get('/api/journals/admin/').then(res => res.data);
-        setJournalList(journals);
+        let i = 2;
+        while (i != 0) {
+            const journals = await API.get('/api/journals/admin/').then(res => res.data);
+            const coas = await API.get('/api/coa/admin/').then(res => res.data);
+            setTableRows(renderTableRows(journals, coas));
+            i--;
+        }
     }
 
     const handleRowsSelected = (eve, e, item) => {
@@ -30,15 +53,111 @@ export default function LogTable() {
             setSelectedJournals(selectedJournals.filter((el) => el.id != item.id))
     }
 
-    const deleteSelectedRows = () => {
-        for (let journal in selectedJournals) {
-            API.delete(`/api/journals/admin/${selectedJournals[journal].id}/`).then(res => res.data);
+    const verifyIsCheked = (journalList, item) => {
+        let arr = journalList.filter((el) => el.id == item.id);
+        if (arr.length == 0)
+            return false;
+        else 
+            return true;
+    }
+
+    const handleSubmit = async (item) => {
+        setModal(!modal)
+        setIsAdd(true);
+
+        if (selectedJournals != null || selectedJournals[0] != undefined) {
+            handleEditAccount(item)
         }
+
+        API.post(`/api/journals/admin/`, item).then(res => res.data);
+        refreshItems();
         setSelectedJournals([]);
-        renderTableRows(journalList, coaList)
-        window.location.replace('/apps/journals');
     }
 
+    const handleEditAccount = (item) => {
+        setIsAdd(false);
+        setActiveItem(selectedJournals[0])
+    }
+
+    const deleteSelectedRows = async (journals) => {
+        for (let entry in journals) {
+            API.delete(`/api/journals/admin/${journals[entry].id}/`).then(res => res.data);
+        }
+        refreshItems();
+    }
+
+    const handleChange = async (e, item) => {
+        item.status = Number.parseInt(e.value)
+        await API.put(`/api/journals/admin/${item.id}/`, item).then(res => res.data);
+        refreshItems();
+    }
+
+    const mapValueToStatus = (value) => {
+        switch (value) {
+            case "Approved":
+                return 1
+            case "Pending":
+                return 2
+            case "Rejected":
+                return 3
+            default:
+                return "Unknown"
+        }
+    }
+
+    const mapStatusToValue = (status) => {
+        switch(Number.parseInt(status)) {
+            case 1:
+                return "Approved"
+            case 2:
+                return "Pending"
+            case 3: 
+                return "Rejected"
+            default:
+                return "Unknown"
+        }
+    }
+    
+    const handleAddItem = () => {
+        setActiveItem({
+            status: 1,
+            coa: 1,
+            user: 1,
+            debit: 0.00,
+            credit: 0.00,
+            amount: 0.00,
+            source: "",
+            comment: "",
+        });
+        toggleModal(true);
+        setIsAdd(true);
+    }
+
+    const toggleModal = (state) => {
+        setModal(state)
+    }
+
+    const statusOptions = [
+        {
+            key: 'Approved',
+            text: 'Approved',
+            value: '1',
+            icon: 'check',
+        },
+        {
+            key: 'Pending',
+            text: 'Pending',
+            value: '2',
+            icon: 'history',
+        },
+        {
+            key: 'Rejected',
+            text: 'Rejected',
+            value: '3',
+            icon: 'stop circle outline',
+        },
+    ]
+
     const renderTableRows = (list, coas) => {
         if (list == null) {
 
@@ -47,13 +166,19 @@ export default function LogTable() {
                 return (
                     <Table.Row>
                         <Table.Cell collapsing>
-                            <Checkbox name="selected" onClick={(eve, e) => handleRowsSelected(eve, e, log)} />
+                            <Checkbox defaultChecked={false} name="selected" onChange={(eve, e) => handleRowsSelected(eve, e, log)} />
                         </Table.Cell>
                         <Table.Cell>
                             <Header as='h4'>{log["date"]}</Header>
                         </Table.Cell>
                         <Table.Cell>
-                            <Header as='h4'>{log["status"]}</Header>
+                            <Dropdown
+                                placeholder={mapStatusToValue(log["status"])}
+                                fluid
+                                selection
+                                options={statusOptions}
+                                onChange={(event, e) => handleChange(e, log)}
+                            />
                         </Table.Cell>
                         <Table.Cell>
                             <Header as='h4'>{getCoaInfo(coas, log["coa"])}</Header>
@@ -70,6 +195,9 @@ export default function LogTable() {
                         <Table.Cell>
                             <Header as='h4'>{(log["source"] != null ? log["source"] : "Unknown")}</Header>
                         </Table.Cell>
+                        <Table.Cell>
+                            <Header as='h4'>{(log["comment"] != null ? log["comment"] : "N/A")}</Header>
+                        </Table.Cell>
                     </Table.Row>
                 )
             });
@@ -79,9 +207,9 @@ export default function LogTable() {
     return (
         <div>
             <div>
-                <Button color='green'>Add</Button>
-                <Button color='blue'>Edit</Button>
-                <Button color='red' onClick={() => deleteSelectedRows()}>Delete</Button>
+                <Button color='green' onClick={() => handleAddItem()}>Add</Button>
+                <Button color='blue' onClick={() => handleAddItem(selectedJournals[0])}>Edit</Button>
+                <Button color='red' onClick={() => deleteSelectedRows(selectedJournals)}>Delete</Button>
             </div>
             <Table cell padded style={{ width: "100%" }}>
                 <Table.Header>
@@ -94,12 +222,21 @@ export default function LogTable() {
                         <Table.HeaderCell>Credit</Table.HeaderCell>
                         <Table.HeaderCell>Amount</Table.HeaderCell>
                         <Table.HeaderCell>Source</Table.HeaderCell>
+                        <Table.HeaderCell>Comment</Table.HeaderCell>
                     </Table.Row>
                 </Table.Header>
                 <Table.Body>
-                    {renderTableRows(journalList, coaList)}
+                    {tableRows}
                 </Table.Body>
             </Table>
-        </div >
+            { modal ? (
+                <JournalModal
+                    activeItem={activeItem}
+                    onSave={handleSubmit}
+                    isAdd={isAdd}
+                    coas={coaList}
+                />
+            ) : null}
+        </div>
     )
 }
diff --git a/frontend/src/components/TitleBar.js b/frontend/src/components/TitleBar.js
index ddb035e..f890aef 100644
--- a/frontend/src/components/TitleBar.js
+++ b/frontend/src/components/TitleBar.js
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { Container, Divider, Button } from 'semantic-ui-react';
+import { Container, Divider, Button, Icon } from 'semantic-ui-react';
 import '../css/components/TitleBar.css'
 
 export default function TitleBar(props) {
@@ -13,6 +13,7 @@ export default function TitleBar(props) {
         <Container className="view-title-bar">
             <div className="title-bar-menu">
                 <h2>{header}</h2>
+                <Icon as="a" name="check"/>
                 <Button color='teal' onClick={() => window.location.replace('/apps/journals')}>Journals</Button>
             </div>
             <Divider />