diff --git a/.gitignore b/.gitignore
index a0c0d7c..53630c5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -138,4 +138,3 @@ $RECYCLE.BIN/
 *.lnk
 
 package-lock.json
-client/src/styles/main.css
diff --git a/client/src/components/PageComponents/Navbar/index.jsx b/client/src/components/PageComponents/Navbar/index.jsx
index 358b2ae..cdc726e 100644
--- a/client/src/components/PageComponents/Navbar/index.jsx
+++ b/client/src/components/PageComponents/Navbar/index.jsx
@@ -37,8 +37,8 @@ class Navbar extends Component {
               />
             </Link>
           </div> */}
-          <div className='navbar-nav'>
-            <a href='/' className='nav-link font-weight-bold'>Sustainable Food Economy and Enterprise Knowledge Base</a>
+          <div className='navbar-nav banner-title'>
+            <a href='/' className='font-weight-bold'>Sustainable Food Economy and Enterprise Knowledge Base</a>
           </div>
 
           <div className="collapse navbar-collapse" id="mobile-nav">
diff --git a/client/src/styles/main.css b/client/src/styles/main.css
new file mode 100644
index 0000000..5a24480
--- /dev/null
+++ b/client/src/styles/main.css
@@ -0,0 +1,334 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif; }
+
+.App {
+  text-align: center; }
+
+.App-logo {
+  animation: App-logo-spin infinite 20s linear;
+  height: 80px; }
+
+.App-header {
+  background-color: #222;
+  height: 150px;
+  padding: 20px;
+  color: white; }
+
+.App-title {
+  font-size: 1.5em; }
+
+.App-intro {
+  font-size: large; }
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg); }
+  to {
+    transform: rotate(360deg); } }
+
+#result-card {
+  display: grid;
+  grid-template-columns: 2% 17% 2% 77% 2%;
+  margin: 0.5em 0em 1em;
+  grid-template-rows: auto;
+  grid-template-areas: " . img . details . "; }
+
+#result-card .img {
+  grid-area: img;
+  background-color: orange; }
+
+#result-card .img img {
+  max-width: 100%; }
+
+#result-card .details {
+  display: grid;
+  grid-area: details;
+  background-color: blue;
+  color: white; }
+
+#result-card .title {
+  font-size: 1.5em; }
+
+#result-card .summary {
+  font-size: 0.9em; }
+
+.navbar {
+  display: grid;
+  grid-template-columns: 20% 80%;
+  grid-template-areas: "logo nav";
+  background-color: #00796B; }
+  @media (max-width: 600px) {
+    .navbar {
+      grid-template-areas: "logo logo";
+      background-color: red; } }
+
+.banner-title a{
+  color: white;
+  font-size: 1.4em;
+}
+
+.banner-title a:hover{
+  color: white;
+  text-decoration:none;
+}
+
+.navbar .logo {
+  grid-area: logo;
+  justify-self: start;
+  align-self: center;
+  margin: 0.5em 0em 0.5em 1.5em; }
+
+.navbar .nav {
+  grid-area: nav;
+  justify-self: end;
+  align-self: center;
+  margin: 0em 0em;
+  padding: 1em; }
+
+.navbar .nav a {
+  text-transform: uppercase;
+  font-size: 1.1em;
+  font-weight: 700;
+  margin: 0em 1em;
+  text-decoration: none; }
+
+.navbar .nav a:link {
+  color: #FFFFFF; }
+
+.navbar .nav a:visited {
+  color: #FFFFFF; }
+
+.navbar .nav a:hover {
+  color: #009688; }
+
+.navbar .nav a:active {
+  color: #009688; }
+
+footer {
+  padding: 2em 0em 3em;
+  background-color: #009688; }
+
+.footer {
+  display: grid;
+  border: none; }
+
+.footer .copyright {
+  justify-self: center; }
+
+.footer p {
+  color: #B2DFDB; }
+
+.footer .links {
+  justify-self: center; }
+
+.footer .links a {
+  text-transform: lowercase;
+  font-size: 0.9em;
+  margin: 0em 1em;
+  text-decoration: none; }
+
+.footer .links a:link,
+.footer .links a:visited {
+  color: #B2DFDB; }
+
+.footer .links a:hover,
+.footer .links a:active {
+  color: #FFFFFF;
+  border-bottom: 3px #FFFFFF dotted; }
+
+.result-page .wrapper {
+  margin: 3rem 0rem;
+  display: grid;
+  grid-template-columns: 20% auto;
+  grid-column-gap: 1em; }
+
+.result-page .filter {
+  background-color: gray; }
+
+.result-page .results {
+  background-color: gainsboro; }
+
+.solution-summary {
+  margin: 0rem 2rem;
+  display: grid;
+  grid-template-columns: 70% 30%;
+  grid-template-areas: "title title"
+ "summary images"; }
+
+.solution-summary .title {
+  margin: 0rem 0rem 0rem;
+  grid-area: title;
+  background-color: #FFFFFF; }
+
+.solution-summary .images {
+  margin: 0rem 0rem 0rem;
+  grid-area: images;
+  background-color: #FFFFFF; }
+
+.solution-summary img {
+  width: 100%;
+  height: auto; }
+
+.each-slide div {
+  background-repeat: no-repeat;
+  background-position: center; }
+
+.solution-summary .summary {
+  align-self: stretch;
+  justify-self: center;
+  grid-area: summary;
+  background-color: #FFFFFF; }
+
+.solution-summary .chart {
+  grid-area: chart;
+  background-color: #FFFFFF; }
+
+.solution-summary .evaluation-radar-chart {
+  grid-area: radar-chart; }
+
+table {
+  border-collapse: collapse; }
+
+table, tbody {
+  width: 90%;
+  table-layout: fixed; }
+
+table, tr, td {
+  border: 0.5px solid #B2DFDB; }
+
+th {
+  text-align: center;
+  padding: 0.8rem;
+  font-size: 1.2rem; }
+
+tr td.item {
+  font-weight: 700; }
+
+tr, td {
+  padding: 0.5rem;
+  text-align: left; }
+
+tr:nth-child(odd) {
+  background-color: #B2DFDB; }
+
+.solution-page .content {
+  margin: 2rem 8rem 2rem; }
+
+.solution-page .container {
+  display: grid;
+  grid-template-columns: 60% 40%;
+  grid-template-areas: "info radar-chart"; }
+
+.solution-page .evaluation-info {
+  margin: 3rem 0rem 0rem;
+  grid-area: info; }
+
+.solution-page .evaluation-radar-chart {
+  grid-area: radar-chart; }
+
+.tabs {
+  margin: 0rem 2rem 3.5rem; }
+
+.tab-list {
+  padding: 0;
+  display: table;
+  border-bottom: 1px solid #BDBDBD;
+  font-size: 1.2em;
+  font-weight: 700;
+  width: 100%; }
+
+.tab-list-item {
+  padding: 0;
+  display: table-cell;
+  text-align: center;
+  list-style: none;
+  margin-bottom: -1px;
+  padding: 0.5rem 2rem; }
+
+.tab-list-active {
+  color: #009688;
+  border: solid #009688;
+  border-width: 0px 0px 5px 0px; }
+
+.form-control,
+.form-control:focus,
+.input-group-addon {
+  border-color: #e1e1e1;
+  border-radius: 0; }
+
+.signup-form {
+  width: 390px;
+  margin: 0 auto;
+  padding: 30px 0; }
+
+.signup-form h2 {
+  color: #636363;
+  margin: 0 0 15px;
+  text-align: center; }
+
+.signup-form .lead {
+  font-size: 14px;
+  margin-bottom: 30px;
+  text-align: center; }
+
+.signup-form form {
+  border-radius: 1px;
+  margin-bottom: 15px;
+  background: #ECFDF9;
+  border: 1px solid #f3f3f3;
+  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
+  padding: 30px; }
+
+.signup-form .form-group {
+  margin-bottom: 20px; }
+
+.signup-form label {
+  font-weight: normal;
+  font-size: 13px; }
+
+.signup-form .form-control {
+  min-height: 38px;
+  box-shadow: none !important;
+  border-width: 0 0 1px 0; }
+
+.signup-form .input-group-addon {
+  max-width: 42px;
+  text-align: center;
+  background: none;
+  border-width: 0 0 1px 0;
+  padding-left: 5px; }
+
+.signup-form .btn {
+  font-size: 16px;
+  font-weight: bold;
+  background: #19aa8d;
+  border-radius: 3px;
+  border: none;
+  min-width: 140px;
+  outline: none !important; }
+
+.signup-form .btn:hover,
+.signup-form .btn:focus {
+  background: #179b81; }
+
+.signup-form a {
+  color: #19aa8d;
+  text-decoration: none; }
+
+.signup-form a:hover {
+  text-decoration: underline; }
+
+.signup-form .fa {
+  font-size: 21px; }
+
+.signup-form .fa-paper-plane {
+  font-size: 17px; }
+
+.signup-form .fa-check {
+  color: #fff;
+  left: 9px;
+  top: 18px;
+  font-size: 7px;
+  position: absolute; }