diff --git a/client/src/components/BuildDetails.js b/client/src/components/BuildDetails.js
new file mode 100644
index 0000000..deef822
--- /dev/null
+++ b/client/src/components/BuildDetails.js
@@ -0,0 +1,47 @@
+import React from 'react';
+class BuildDetails extends React.Component {
+  renderBuild = build => {
+    return (
+      <React.Fragment key={build.buildid}>
+        <div className='col-sm-3'>
+          <a
+            target='_blank'
+            rel='noreferrer noopener'
+            href={`https://build.reactos.org/#builders/${
+              build.builderid
+            }/builds/${build.number}`}
+          >
+            {this.props.builders[build.builderid - 1].name}
+          </a>
+        </div>
+        <div className='col-sm-3'>
+          {build.state_string}
+          {build.state_string === 'build successful' ? (
+            <i className='fa fa-check' />
+          ) : (
+            <i />
+          )}
+        </div>
+        <div className='col-sm-3'>started_at:{build.started_at}</div>
+        <div className='col-sm-3'>complete_at:{build.complete_at}</div>
+      </React.Fragment>
+    );
+  };
+  render() {
+    return this.props.build ? (
+      <React.Fragment>
+        {this.props.build.length > 0 ? (
+          <div className='row'>{this.props.build.map(this.renderBuild)}</div>
+        ) : (
+          <p>
+            <strong>No data Exists</strong>
+          </p>
+        )}
+      </React.Fragment>
+    ) : (
+      <h6>No data Exists</h6>
+    );
+  }
+}
+
+export default BuildDetails;
diff --git a/client/src/components/Commits.js b/client/src/components/Commits.js
index b0dac16..9a32520 100644
--- a/client/src/components/Commits.js
+++ b/client/src/components/Commits.js
@@ -5,98 +5,108 @@ import Branches from './Branches';
 import './styles/Commit.css';
 import CommitsCard from './CommitsCard';
 import Loading from './Loading';
-
 class Commits extends React.Component {
- componentDidMount() {
-  this.props.loadCommits();
-  this.props.loadBuildSets();
- }
- renderCommits = commit => {
-  return (
-   <div className='panel-margin' key={commit.sha}>
-    <CommitsCard {...commit} />
-   </div>
-  );
- };
+  componentDidMount() {
+    this.props.loadCommits();
+    this.props.loadBuildSets();
+  }
 
- render() {
-  return (
-   <div className='container margin'>
-    <Branches />
-    <h6>Current Branch:{this.props.branch}</h6>
-    <h3>Latest Commits</h3>
-    {this.props.isLoading.load ? (
-     <Loading
-      text={`Fetching latest Commits of ${this.props.branch} for you...`}
-     />
-    ) : (
-     <div>
-      <div>{this.props.commits.map(this.renderCommits)}</div>
-      {this.props.error ? (
-       <div className='error'>
-        Unexpected Error occured. Kindly Reload the page
-        <br />
-        Err:{this.props.error}
-       </div>
-      ) : (
-       <div>
-        <button
-         type='button'
-         onClick={() => {
-          this.props.loadCommits(this.props.page.prev);
-         }}
-         className='btn btn-primary '
-         disabled={this.props.page.prev === null || this.props.error !== null}
-        >
-         <i className='fa fa-caret-left' aria-hidden='true' />
-         Previous Page{' '}
-        </button>{' '}
-        <button
-         type='button'
-         onClick={() => {
-          this.props.loadCommits(this.props.page.next);
-         }}
-         className='btn btn-primary'
-         disabled={this.props.page.next === null || this.props.error !== null}
-        >
-         Next Page{'	'}
-         <i className='fa fa-caret-right' aria-hidden='true' />
-        </button>
-        <footer className='blockquote-footer'>
-         Page {this.props.page.next - 1}
-        </footer>
-        <div className='footer-blockquote' />
-       </div>
-      )}
-     </div>
-    )}
-   </div>
-  );
- }
+  renderCommits = commit => {
+    return (
+      <div className='panel-margin' key={commit.sha}>
+        <CommitsCard
+          {...commit}
+          builds={this.props.build[commit.sha]}
+          builders={this.props.builders}
+        />
+      </div>
+    );
+  };
+
+  render() {
+    return (
+      <div className='container margin'>
+        <Branches />
+        <h6>Current Branch:{this.props.branch}</h6>
+        <h3>Latest Commits</h3>
+        {this.props.isLoading.load ? (
+          <Loading
+            text={`Fetching latest Commits of ${this.props.branch} for you...`}
+          />
+        ) : (
+          <div>
+            <div>{this.props.commits.map(this.renderCommits)}</div>
+            {this.props.error ? (
+              <div className='error'>
+                Unexpected Error occured. Kindly Reload the page
+                <br />
+                Err:{this.props.error}
+              </div>
+            ) : (
+              <div>
+                <button
+                  type='button'
+                  onClick={() => {
+                    this.props.loadCommits(this.props.page.prev);
+                  }}
+                  className='btn btn-primary '
+                  disabled={
+                    this.props.page.prev === null || this.props.error !== null
+                  }
+                >
+                  <i className='fa fa-caret-left' aria-hidden='true' />
+                  Previous Page{' '}
+                </button>{' '}
+                <button
+                  type='button'
+                  onClick={() => {
+                    this.props.loadCommits(this.props.page.next);
+                  }}
+                  className='btn btn-primary'
+                  disabled={
+                    this.props.page.next === null || this.props.error !== null
+                  }
+                >
+                  Next Page{'	'}
+                  <i className='fa fa-caret-right' aria-hidden='true' />
+                </button>
+                <footer className='blockquote-footer'>
+                  Page {this.props.page.next - 1}
+                </footer>
+                <div className='footer-blockquote' />
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  }
 }
 
 const mapStateToProps = ({
- isLoading,
- commits,
- error,
- branch,
- page,
- build
+  isLoading,
+  commits,
+  builders,
+  error,
+  branch,
+  page,
+  build
 }) => ({
- isLoading,
- commits,
- error,
- branch,
- page,
- build
+  isLoading,
+  commits,
+  builders,
+  error,
+  branch,
+  page,
+  build
 });
 
 const mapDispatchToProps = dispatch => ({
- loadBuildSets: () => dispatch(loadBuildSets()),
- loadCommits: next => dispatch(loadCommits(next))
+  loadBuildSets: () => dispatch(loadBuildSets()),
+  loadCommits: next => dispatch(loadCommits(next))
 });
 
 export default connect(
- mapStateToProps,
- mapDispatchToProps
+  mapStateToProps,
+  mapDispatchToProps
 )(Commits);
diff --git a/client/src/components/CommitsCard.js b/client/src/components/CommitsCard.js
index 452e30d..e326057 100644
--- a/client/src/components/CommitsCard.js
+++ b/client/src/components/CommitsCard.js
@@ -1,85 +1,92 @@
 import React from 'react';
 import { UncontrolledCollapse, CardBody, Card, CardHeader } from 'reactstrap';
+import BuildDetails from './BuildDetails';
+
 function CommitsCard(props) {
- let tog = 'toggler' + props.sha;
- let committerDate = new Date(props.commit.committer.date);
- let authorDate = new Date(props.commit.author.date);
- let author = encodeURIComponent(props.commit.author.name);
- let committer = encodeURIComponent(props.commit.committer.name);
- return (
-  <Card>
-   <CardHeader className='new' type='button' id={tog}>
-    <div className='row'>
-     <div className='col-sm'>{props.sha.substring(0, 7)}</div>
-     <div className='col-sm'>{props.commit.committer.name}</div>
-     <div className='col-sm'>{committerDate.toLocaleString()}</div>
-     <div className='col-sm'>{props.commit.message.substring(0, 17)}...</div>
-    </div>
-   </CardHeader>
-   <UncontrolledCollapse toggler={tog}>
-    <CardBody className='indent'>
-     <div>
-      <p>
-       <strong>commit: </strong>{' '}
-       <a
-        target='_blank'
-        rel='noreferrer noopener'
-        href={props.commit.html_url}
-       >
-        {props.sha}
-       </a>
-      </p>
-      <p>
-       <strong>Commit Msg:</strong> {props.commit.message}
-      </p>
-     </div>
-     <div className='row'>
-      <div className='col-sm'>
-       <strong>Author: </strong>
-       <a
-        target='_blank'
-        rel='noreferrer noopener'
-        href={`https://git.reactos.org/?p=reactos.git;a=search;s=${author};st=author`}
-       >
-        {props.commit.author.name}
-       </a>
-      </div>
-      <div className='col-sm'>
-       <strong>Author Date: </strong>
-       {authorDate.toLocaleString()}
-      </div>
-      <div className='col-sm'>
-       <strong>Author Email: </strong>
-       <a href={`mailto:${props.commit.author.email}`} target='_top'>
-        {props.commit.author.email}
-       </a>
-      </div>
-     </div>
-     <div className='row'>
-      <div className='col-sm'>
-       <strong>Committer: </strong>
-       <a
-        target='_blank'
-        rel='noreferrer noopener'
-        href={`https://git.reactos.org/?p=reactos.git;a=search;s=${committer};st=committer`}
-       >
-        {props.commit.committer.name}
-       </a>
-      </div>
-      <div className='col-sm'>
-       <strong>Committer Date: </strong>
-       {committerDate.toLocaleString()}
-      </div>
-      <div className='col-sm'>
-       <strong>Committer Email: </strong>
-       <a href={`mailto:${props.commit.committer.email}`} target='_top'>
-        {props.commit.committer.email}
-       </a>
-      </div>
-     </div>
-    </CardBody>
-   </UncontrolledCollapse>
-  </Card>
- );
+  let tog = 'toggler' + props.sha;
+  let committerDate = new Date(props.commit.committer.date);
+  let authorDate = new Date(props.commit.author.date);
+  let author = encodeURIComponent(props.commit.author.name);
+  let committer = encodeURIComponent(props.commit.committer.name);
+  return (
+    <Card>
+      <CardHeader className='new' type='button' id={tog}>
+        <div className='row'>
+          <div className='col-sm'>{props.sha.substring(0, 7)}</div>
+          <div className='col-sm'>{props.commit.committer.name}</div>
+          <div className='col-sm'>{committerDate.toLocaleString()}</div>
+          <div className='col-sm'>
+            {props.commit.message.substring(0, 17)}...
+          </div>
+        </div>
+      </CardHeader>
+      <UncontrolledCollapse toggler={tog}>
+        <CardBody className='indent'>
+          <div>
+            <p>
+              <strong>commit: </strong>{' '}
+              <a
+                target='_blank'
+                rel='noreferrer noopener'
+                href={props.commit.html_url}
+              >
+                {props.sha}
+              </a>
+            </p>
+            <p>
+              <strong>Commit Msg:</strong> {props.commit.message}
+            </p>
+          </div>
+          <div className='row'>
+            <div className='col-sm'>
+              <strong>Author: </strong>
+              <a
+                target='_blank'
+                rel='noreferrer noopener'
+                href={`https://git.reactos.org/?p=reactos.git;a=search;s=${author};st=author`}
+              >
+                {props.commit.author.name}
+              </a>
+            </div>
+            <div className='col-sm'>
+              <strong>Author Date: </strong>
+              {authorDate.toLocaleString()}
+            </div>
+            <div className='col-sm'>
+              <strong>Author Email: </strong>
+              <a href={`mailto:${props.commit.author.email}`} target='_top'>
+                {props.commit.author.email}
+              </a>
+            </div>
+          </div>
+          <div className='row'>
+            <div className='col-sm'>
+              <strong>Committer: </strong>
+              <a
+                target='_blank'
+                rel='noreferrer noopener'
+                href={`https://git.reactos.org/?p=reactos.git;a=search;s=${committer};st=committer`}
+              >
+                {props.commit.committer.name}
+              </a>
+            </div>
+            <div className='col-sm'>
+              <strong>Committer Date: </strong>
+              {committerDate.toLocaleString()}
+            </div>
+            <div className='col-sm'>
+              <strong>Committer Email: </strong>
+              <a href={`mailto:${props.commit.committer.email}`} target='_top'>
+                {props.commit.committer.email}
+              </a>
+            </div>
+          </div>
+          <h5>Build Details:</h5>
+          <hr />
+          <BuildDetails build={props.builds} builders={props.builders} />
+        </CardBody>
+      </UncontrolledCollapse>
+    </Card>
+  );
 }
 export default CommitsCard;
diff --git a/client/src/redux/api/index.js b/client/src/redux/api/index.js
index 37b6498..a8ad627 100644
--- a/client/src/redux/api/index.js
+++ b/client/src/redux/api/index.js
@@ -17,12 +17,14 @@ export const fetchBuildSets = async () => {
 };
 
 export const fetchBuildReq = async str => {
-  const response = await fetch(`/api/buildreq?${str}`);
-  const data = await response.json();
-  if (response.status >= 400) {
-    throw new Error(data.errors);
+  if (str) {
+    const response = await fetch(`/api/buildreq?${str}`);
+    const data = await response.json();
+    if (response.status >= 400) {
+      throw new Error(data.errors);
+    }
+    return data.buildrequests;
   }
-  return data.buildrequests;
 };
 
 export const fetchBuilds = async str => {