diff --git a/public/css/style.css b/public/css/style.css
index 3ae8150..a6e95cc 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -328,22 +328,24 @@ header .intro-text {
   left: 50%;
 }
 #crates i.fa {
-  font-size: 42px;
-  width: 120px;
-  height: 120px;
-  padding: 40px 0;
-  background: linear-gradient(to right, #6372ff 0%, #5ca9fb 100%);
-  border-radius: 50%;
+  font-size: 35px;
+  width: 80px;
+  height: 15px;
   color: #fff;
-  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.05);
 }
-#crates h3 {
-  font-weight: 500;
+
+#crates i.fa:hover {
+  color: #000000;
+}
+
+#crates h4 {
+  font-weight: 400;
   padding: 5px 0;
   color: #fff;
 }
 #crates p {
   color: rgba(255, 255, 255, 0.75);
+  padding: 5px 0;
 }
 #crates .crate-desc {
   margin-bottom: 40px;
diff --git a/src/components/crates.jsx b/src/components/crates.jsx
index 9609fc9..42a8766 100644
--- a/src/components/crates.jsx
+++ b/src/components/crates.jsx
@@ -17,22 +17,46 @@ export const Crates = (props) => {
     }
   }
 
+  const githubClick = (crate) => {
+    //go to crate.url
+    console.log(crate);
+    if (crate.index) {
+      window.location.href = "#"+crate.url;
+    }
+    else {
+      //open a new tab
+      window.open(crate.github_url, "_blank");
+    }
+  }
+
   return (
     <div id="crates" className="text-center">
       <div className="container">
         <div className="section-title">
-          <h2>Our Crates</h2>
+          <h2>Our Data packages</h2>
         </div>
-        <div className="row">
+        <div className="row" style={{padding:"20px"}}>
           {props.data
             ? props.data.map((d, i) => (
-                <div key={`${d.name}-${i}`} className={`col-md-${12/props.data.length < 4 ? 4 : 12/props.data.length} cratecard`} onClick={() => crateClick(d)}>
+                <div key={`${d.name}-${i}`} className="col-md-12" >
                   {" "}
-                  <i className={d.icon}></i>
-                  <div className="service-desc">
-                    <h3>{d.name}</h3>
+                  <div className="col-md-2">
+                    <h4>{d.name}</h4>
+                  </div>
+                  <div className="col-md-8">
                     <p>{d.text}</p>
                   </div>
+                  <div className="col-md-1" onClick={() => githubClick(d)}>
+                    <i className="fa fa-github"></i>
+                  </div>
+                  {
+                    d.crateurl ?
+                    <div className="col-md-1" onClick={() => crateClick(d)}>
+                      <i className="fa fa-archive"></i>
+                    </div>
+                    :
+                  <></>
+                  }
                 </div>
               ))
             : "loading"}
diff --git a/src/components/navigation.jsx b/src/components/navigation.jsx
index 5f81de2..7ef260d 100644
--- a/src/components/navigation.jsx
+++ b/src/components/navigation.jsx
@@ -111,7 +111,7 @@ export const Navigation = (props) => {
                   data-placement="bottom" 
                   title="Research Object Crates (https://www.researchobject.org/ro-crate/): a way to package file-based research data so they are linked, grouped, described, and semantically annotated. In our Github spaces, each repository can also be a RO-Crate."
                   >
-                    RO-Crates
+                    Data
                   </a>
                 </li>
               ) : (
diff --git a/src/data/project_crates.json b/src/data/project_crates.json
index 4f56f5d..df684eb 100644
--- a/src/data/project_crates.json
+++ b/src/data/project_crates.json
@@ -3,6 +3,7 @@
       "icon": "fa fa-archive",
       "name": "Lorem ipsum dolor",
       "url" : "http://www.google.com",
+      "crateurl": "https://w3id.org/ro/crate/1",
       "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
     },
     {
@@ -20,30 +21,35 @@
       "icon": "fa fa-cart-arrow-down",
       "name": "Consectetur adipiscing",
       "url" : "http://www.google.com",
+      "crateurl": "https://w3id.org/ro/crate/1",
       "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed dapibus leo nec ornare diam sedasd commodo nibh ante facilisis bibendum dolor feugiat at."
     },
     {
       "icon": "fa fa-cloud-download",
       "name": "Lorem ipsum dolor",
       "url" : "http://www.google.com",
+      "crateurl": "https://w3id.org/ro/crate/1",
       "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed dapibus leo nec ornare diam sedasd commodo nibh ante facilisis bibendum dolor feugiat at."
     },
     {
       "icon": "fa fa-language",
       "name": "Consectetur adipiscing",
       "url" : "http://www.google.com",
+      "crateurl": "https://w3id.org/ro/crate/1",
       "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed dapibus leo nec ornare diam sedasd commodo nibh ante facilisis bibendum dolor feugiat at."
     },
     {
       "icon": "fa fa-plane",
       "name": "Lorem ipsum dolor",
       "url" : "http://www.google.com",
+      "crateurl": "https://w3id.org/ro/crate/1",
       "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed dapibus leo nec ornare diam sedasd commodo nibh ante facilisis bibendum dolor feugiat at."
     },
     {
       "icon": "fa fa-pie-chart",
       "name": "Consectetur adipiscing",
       "url" : "http://www.google.com",
+      "crateurl": "https://w3id.org/ro/crate/1",
       "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed dapibus leo nec ornare diam sedasd commodo nibh ante facilisis bibendum dolor feugiat at."
     }
 ]
\ No newline at end of file