diff --git a/IV-Portal-Cavendish/package-lock.json b/IV-Portal-Cavendish/package-lock.json
index 5610b03066c3d71084df93f4c110062df65293cc..155da202592c5a9ccf648c16039f8eff65776011 100644
--- a/IV-Portal-Cavendish/package-lock.json
+++ b/IV-Portal-Cavendish/package-lock.json
@@ -23,6 +23,7 @@
         "react-dropzone": "^11.5.1",
         "react-scripts": "5.0.0",
         "react-use-measure": "^2.1.1",
+        "rgb-hex": "^4.0.1",
         "web-vitals": "^2.1.4"
       }
     },
@@ -13944,6 +13945,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rgb-hex": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/rgb-hex/-/rgb-hex-4.0.1.tgz",
+      "integrity": "sha512-HcNmN4252k7YgL1tlMatonEAJQlDrc1lt6UPjMO6xFD/DO6gX+NJz4EKRRZ9/I9nYUzVel6zhTJ5y3wdfSgJEQ==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -26300,6 +26312,11 @@
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw=="
     },
+    "rgb-hex": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/rgb-hex/-/rgb-hex-4.0.1.tgz",
+      "integrity": "sha512-HcNmN4252k7YgL1tlMatonEAJQlDrc1lt6UPjMO6xFD/DO6gX+NJz4EKRRZ9/I9nYUzVel6zhTJ5y3wdfSgJEQ=="
+    },
     "rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
diff --git a/IV-Portal-Cavendish/package.json b/IV-Portal-Cavendish/package.json
index 5ebb7becd86d6b3eca8692b83277d826229f6670..3e43cd1fb678888d7d6d378eebc4237e7c9827d2 100644
--- a/IV-Portal-Cavendish/package.json
+++ b/IV-Portal-Cavendish/package.json
@@ -18,6 +18,7 @@
     "react-dropzone": "^11.5.1",
     "react-scripts": "5.0.0",
     "react-use-measure": "^2.1.1",
+    "rgb-hex": "^4.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
diff --git a/IV-Portal-Cavendish/src/App.js b/IV-Portal-Cavendish/src/App.js
index b5849455c1dc4e1a7f8fea97759d31136138c6b9..a4b7272609ab7c23879f568ae8be695eab0cd176 100644
--- a/IV-Portal-Cavendish/src/App.js
+++ b/IV-Portal-Cavendish/src/App.js
@@ -21,6 +21,7 @@ import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import { Chip } from '@mui/material';
 
 import InfoIcon from '@mui/icons-material/Info';
+import grad from './grad';
 
 const env = new Env();
 
@@ -88,19 +89,37 @@ export default function App() {
     const done = state === "done";
 
     return (
-      <Box m={3}>
-        <Card style={{ background: 'lightblue' }}>
-          <CardContent>
-            <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
-              Credential Application
-            </Typography>
-            <Typography sx={{ mb: 1.5 }} color="text.secondary">{legalName}</Typography>
-            <Typography variant="body2">
-              Username: {userName} <br />
-              Employer: {employer} <br />
-              Instagram: {instagramHandle}
-            </Typography>
-          </CardContent>
+      <Box m={3} borderRadius={4}
+        sx={{
+          width: 420,
+          height: 180,
+          background: grad(137, 189, 238),
+          '&:hover': {
+            backgroundColor: 'white',
+            opacity: [1.0, 1.0, 1.0],
+          },
+        }}
+      >
+        <Box m={1}>
+          <Stack direction="row">
+            <Stack>
+              <Box m={1}>
+                <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
+                  Credential Application
+                </Typography>
+              </Box>
+              <Box m={1}>
+                <Typography sx={{ mb: 0.5 }} color="text.secondary">{legalName}</Typography>
+              </Box>
+            </Stack>
+            <Box ml={5} mt={1}>
+              <Typography variant="body2">
+                Username: {userName} <br />
+                Employer: {employer} <br />
+                Instagram: {instagramHandle}
+              </Typography>
+            </Box>
+          </Stack>
           <CardActions>
             {proposal_received && <Chip style={{ borderColor: 'transparent' }} variant="outlined" icon={<InfoIcon style={{ color: 'green' }} />} label="New application"></Chip>}
             {proposal_received && <Button size="small" onClick={() => sendOffer(cred_ex_id)}>Send Offer</Button>}
@@ -119,7 +138,7 @@ export default function App() {
             {credential_issued && <Chip style={{ borderColor: 'transparent' }} variant="outlined" icon={<CheckCircleIcon style={{ color: 'green' }} />} label="Credential issued successfully"></Chip>}
             {done && <Chip style={{ borderColor: 'transparent' }} variant="outlined" icon={<CheckCircleIcon style={{ color: 'green' }} />} label="Credential issued successfully"></Chip>}
           </CardActions>
-        </Card >
+        </Box>
       </Box>);
   }
 
diff --git a/IV-Portal-Cavendish/src/grad.js b/IV-Portal-Cavendish/src/grad.js
new file mode 100644
index 0000000000000000000000000000000000000000..3d9baf001a2b461e046b14b9180cc725d2c7c6c5
--- /dev/null
+++ b/IV-Portal-Cavendish/src/grad.js
@@ -0,0 +1,10 @@
+import rgb from 'rgb-hex';
+
+export default function grad(r, g, b) {
+    if (!r) {
+        r = 189;
+        g = 189;
+        b = 189;
+    }
+    return "linear-gradient(to bottom, #" + rgb(r, g, b) + " 45%, #" + rgb(0.9 * r, 0.9 * g, 0.9 * b) + " 45%)";
+}
diff --git a/IV-Portal-Franklin/package-lock.json b/IV-Portal-Franklin/package-lock.json
index 9eb0223937542b0e3f14741cfd8bc17c693f1896..015843d139f9f5fc9092cd4fbceb6e95c054391f 100644
--- a/IV-Portal-Franklin/package-lock.json
+++ b/IV-Portal-Franklin/package-lock.json
@@ -25,6 +25,7 @@
         "react-dropzone": "^11.5.1",
         "react-scripts": "5.0.0",
         "react-use-measure": "^2.1.1",
+        "rgb-hex": "^4.0.1",
         "web-vitals": "^2.1.4"
       }
     },
@@ -13956,6 +13957,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rgb-hex": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/rgb-hex/-/rgb-hex-4.0.1.tgz",
+      "integrity": "sha512-HcNmN4252k7YgL1tlMatonEAJQlDrc1lt6UPjMO6xFD/DO6gX+NJz4EKRRZ9/I9nYUzVel6zhTJ5y3wdfSgJEQ==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -26322,6 +26334,11 @@
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw=="
     },
+    "rgb-hex": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/rgb-hex/-/rgb-hex-4.0.1.tgz",
+      "integrity": "sha512-HcNmN4252k7YgL1tlMatonEAJQlDrc1lt6UPjMO6xFD/DO6gX+NJz4EKRRZ9/I9nYUzVel6zhTJ5y3wdfSgJEQ=="
+    },
     "rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
diff --git a/IV-Portal-Franklin/package.json b/IV-Portal-Franklin/package.json
index 441a4cb4a673915c27a1ddb413d76710c9a0433f..76678659b7ce80ac6879ed43227c6ba57768bda1 100644
--- a/IV-Portal-Franklin/package.json
+++ b/IV-Portal-Franklin/package.json
@@ -20,6 +20,7 @@
     "react-dropzone": "^11.5.1",
     "react-scripts": "5.0.0",
     "react-use-measure": "^2.1.1",
+    "rgb-hex": "^4.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
diff --git a/IV-Portal-Franklin/src/App.js b/IV-Portal-Franklin/src/App.js
index aef9dfbb90575477d7ccc043c28bbcf9adf75f37..28a02a1099ce6e11b0373d68d77124459f37a434 100644
--- a/IV-Portal-Franklin/src/App.js
+++ b/IV-Portal-Franklin/src/App.js
@@ -30,6 +30,7 @@ import * as SSIFileServerHelper from 'ssi-lib/FileServerHelper';
 import { ImageListItem } from '@mui/material';
 
 import * as Certs from 'ssi-lib/Certificates';
+import grad from "./grad"
 
 const env = new Env();
 
@@ -285,28 +286,51 @@ export default function App() {
     // }
 
     return (
-      <Box m={3}>
-        <Card style={{ background: 'lightblue' }}>
-          {image_url &&
-            <CardMedia
-              component="img"
-              height="140"
-              image={image_url}
-              alt="unknown image"
-            />}
-          <CardContent>
+      <Box m={3} borderRadius={4}
+        sx={{
+          width: 420,
+          height: 400,
+          background: grad(137, 189, 238),
+          '&:hover': {
+            backgroundColor: 'white',
+            opacity: [1.0, 1.0, 1.0],
+          },
+        }}
+      >
+        <Box m={1}>
+          <Stack mb={3}>
+            <Box mt={1}>
+              {image_url &&
+                <CardMedia
+                  component="img"
+                  height="140"
+                  image={image_url}
+                  alt="unknown image"
+                  style={{
+                    borderRadius: '3%',
+                  }}
+                />}
+            </Box>
             <Typography sx={{ fontSize: 24 }} color="text.secondary" gutterBottom>
               {presentation ? "Presentation" : (credential ? "Credential Request" : "Unknown")}
             </Typography>
             <Typography variant="body2">
               Geolocation: {geolocation} <br />
-              Image Hash: {imgHash} <br />
+            </Typography>
+            <Typography variant="body2">
+              Image Hash: {imgHash?.substring(0, 30)}... <br />
+            </Typography>
+            <Typography variant="body2">
               Timestamp: {imgTimestamp} <br />
+            </Typography>
+            <Typography variant="body2">
               URL: {imgUrl} <br />
+            </Typography>
+            <Typography variant="body2">
               Mac Address: {macAddress} <br />
             </Typography>
-          </CardContent>
-        </Card >
+          </Stack>
+        </Box>
       </Box>);
   }
 
diff --git a/IV-Portal-Franklin/src/grad.js b/IV-Portal-Franklin/src/grad.js
new file mode 100644
index 0000000000000000000000000000000000000000..3d9baf001a2b461e046b14b9180cc725d2c7c6c5
--- /dev/null
+++ b/IV-Portal-Franklin/src/grad.js
@@ -0,0 +1,10 @@
+import rgb from 'rgb-hex';
+
+export default function grad(r, g, b) {
+    if (!r) {
+        r = 189;
+        g = 189;
+        b = 189;
+    }
+    return "linear-gradient(to bottom, #" + rgb(r, g, b) + " 45%, #" + rgb(0.9 * r, 0.9 * g, 0.9 * b) + " 45%)";
+}
diff --git a/IV-Portal-Thoday/package-lock.json b/IV-Portal-Thoday/package-lock.json
index 5610b03066c3d71084df93f4c110062df65293cc..155da202592c5a9ccf648c16039f8eff65776011 100644
--- a/IV-Portal-Thoday/package-lock.json
+++ b/IV-Portal-Thoday/package-lock.json
@@ -23,6 +23,7 @@
         "react-dropzone": "^11.5.1",
         "react-scripts": "5.0.0",
         "react-use-measure": "^2.1.1",
+        "rgb-hex": "^4.0.1",
         "web-vitals": "^2.1.4"
       }
     },
@@ -13944,6 +13945,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rgb-hex": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/rgb-hex/-/rgb-hex-4.0.1.tgz",
+      "integrity": "sha512-HcNmN4252k7YgL1tlMatonEAJQlDrc1lt6UPjMO6xFD/DO6gX+NJz4EKRRZ9/I9nYUzVel6zhTJ5y3wdfSgJEQ==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -26300,6 +26312,11 @@
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw=="
     },
+    "rgb-hex": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/rgb-hex/-/rgb-hex-4.0.1.tgz",
+      "integrity": "sha512-HcNmN4252k7YgL1tlMatonEAJQlDrc1lt6UPjMO6xFD/DO6gX+NJz4EKRRZ9/I9nYUzVel6zhTJ5y3wdfSgJEQ=="
+    },
     "rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
diff --git a/IV-Portal-Thoday/package.json b/IV-Portal-Thoday/package.json
index 5ebb7becd86d6b3eca8692b83277d826229f6670..3e43cd1fb678888d7d6d378eebc4237e7c9827d2 100644
--- a/IV-Portal-Thoday/package.json
+++ b/IV-Portal-Thoday/package.json
@@ -18,6 +18,7 @@
     "react-dropzone": "^11.5.1",
     "react-scripts": "5.0.0",
     "react-use-measure": "^2.1.1",
+    "rgb-hex": "^4.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
diff --git a/IV-Portal-Thoday/src/App.js b/IV-Portal-Thoday/src/App.js
index 8db3e19d46e726db65aa0f56274d2a9459158a72..6f5ffe1d4eaacfada7211cf5dd433878ef5d95dd 100644
--- a/IV-Portal-Thoday/src/App.js
+++ b/IV-Portal-Thoday/src/App.js
@@ -24,6 +24,7 @@ import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import { Chip } from '@mui/material';
 
 import InfoIcon from '@mui/icons-material/Info';
+import grad from './grad';
 
 const env = new Env();
 
@@ -155,27 +156,50 @@ export default function App() {
     }
 
     return (
-      <Box m={3}>
-        <Card style={{ background: 'lightblue' }}>
-          {image_url &&
-            <CardMedia
-              component="img"
-              height="140"
-              image={image_url}
-              alt="unknown image"
-            />}
-          <CardContent>
-            <Typography sx={{ fontSize: 24 }} color="text.secondary" gutterBottom>
+      <Box m={3} borderRadius={4}
+        sx={{
+          width: 420,
+          height: 400,
+          background: grad(137, 189, 238),
+          '&:hover': {
+            backgroundColor: 'white',
+            opacity: [1.0, 1.0, 1.0],
+          },
+        }}
+      >
+        <Box m={1}>
+          <Stack mb={3}>
+            <Box mt={1}>
+              {image_url &&
+                <CardMedia mt={2}
+                  component="img"
+                  height="140"
+                  image={image_url}
+                  alt="unknown image"
+                  style={{
+                    borderRadius: '3%',
+                  }}
+                />}
+            </Box>
+            <Typography mb={2} sx={{ fontSize: 24 }} color="text.secondary" gutterBottom>
               {presentation ? "Presentation" : (credential ? "Credential Request" : "Unknown")}
             </Typography>
             <Typography variant="body2">
               Geolocation: {geolocation} <br />
-              Image Hash: {imgHash} <br />
+            </Typography>
+            <Typography variant="body2">
+              Image Hash: {imgHash?.substring(0, 30)}... <br />
+            </Typography>
+            <Typography variant="body2">
               Timestamp: {imgTimestamp} <br />
+            </Typography>
+            <Typography variant="body2">
               URL: {imgUrl} <br />
+            </Typography>
+            <Typography variant="body2">
               Mac Address: {macAddress} <br />
             </Typography>
-          </CardContent>
+          </Stack>
           <CardActions>
             {presentation && proposal_received && <Chip style={{ borderColor: 'transparent' }} variant="outlined" icon={<InfoIcon style={{ color: 'green' }} />} label="New Presentation"></Chip>}
             {presentation && proposal_received && <Button size="small" onClick={
@@ -214,7 +238,7 @@ export default function App() {
             {credential_issued && <Chip style={{ borderColor: 'transparent' }} variant="outlined" icon={<CheckCircleIcon style={{ color: 'green' }} />} label="Credential issued successfully"></Chip>}
             {done && <Chip style={{ borderColor: 'transparent' }} variant="outlined" icon={<CheckCircleIcon style={{ color: 'green' }} />} label="Credential issued successfully"></Chip>}
           </CardActions>
-        </Card >
+        </Box>
       </Box>);
   }
 
diff --git a/IV-Portal-Thoday/src/grad.js b/IV-Portal-Thoday/src/grad.js
new file mode 100644
index 0000000000000000000000000000000000000000..3d9baf001a2b461e046b14b9180cc725d2c7c6c5
--- /dev/null
+++ b/IV-Portal-Thoday/src/grad.js
@@ -0,0 +1,10 @@
+import rgb from 'rgb-hex';
+
+export default function grad(r, g, b) {
+    if (!r) {
+        r = 189;
+        g = 189;
+        b = 189;
+    }
+    return "linear-gradient(to bottom, #" + rgb(r, g, b) + " 45%, #" + rgb(0.9 * r, 0.9 * g, 0.9 * b) + " 45%)";
+}