diff --git a/vre-panel/components/Footer.tsx b/vre-panel/components/Footer.tsx
index 2ba157d..bc44be1 100644
--- a/vre-panel/components/Footer.tsx
+++ b/vre-panel/components/Footer.tsx
@@ -5,7 +5,7 @@ const Footer: React.FC = () => {
 
   return (
     <div className="flex flex-col w-full items-center mb-2">
-      <p className="text-xs text-gray-700">
+      <p className="text-xs text-onSurface">
         Powered by NaaVRE / LifeWatch ERIC VLIC (
           <Link
             href="/about"
diff --git a/vre-panel/components/VLAbAssets.tsx b/vre-panel/components/VLAbAssets.tsx
index 0dd7fb8..db8524c 100644
--- a/vre-panel/components/VLAbAssets.tsx
+++ b/vre-panel/components/VLAbAssets.tsx
@@ -43,7 +43,7 @@ const VLabAssets: React.FC<Props> = ({slug, isAuthenticated, token}) => {
                   <button
                     className={clsx(
                       "py-1 px-8 max-h-16",
-                      selected ? "bg-gray-500 text-white" : "text-gray-500 hover:text-black",
+                      selected ? "bg-secondary text-onSecondary" : "bg-surface text-primaryMuted hover:text-black",
                     )}
                   >
                     {tab.title}
diff --git a/vre-panel/components/VLabAssets/DataProducts.tsx b/vre-panel/components/VLabAssets/DataProducts.tsx
index 76ea54e..6698022 100644
--- a/vre-panel/components/VLabAssets/DataProducts.tsx
+++ b/vre-panel/components/VLabAssets/DataProducts.tsx
@@ -51,7 +51,7 @@ const DataProducts: React.FC<Props> = ({slug, isAuthenticated, token}) => {
   return (
     <div>
       <button type="button"
-              className="bg-blue-400 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded cursor-pointer"
+              className="bg-primary hover:bg-primaryDark text-white font-bold py-2 px-4 rounded cursor-pointer"
               onClick={() => Promise.all([fetchAssets()])}>
         <svg xmlns="http://www.w3.org/2000/svg" className={clsx("h-5", "w-5", loadingAssets && "animate-spin")}
              viewBox="0 0 20 20" fill="currentColor">
@@ -70,16 +70,16 @@ const DataProducts: React.FC<Props> = ({slug, isAuthenticated, token}) => {
         <table className="table-auto bg-white mt-5">
           <thead>
           <tr>
-            <th className="bg-blue-200 border text-left px-4 py-2">Title</th>
-            <th className="bg-blue-200 border text-left px-4 py-2">Description</th>
+            <th className="bg-primaryContainer border text-left px-4 py-2">Title</th>
+            <th className="bg-primaryContainer border text-left px-4 py-2">Description</th>
           </tr>
           </thead>
           <tbody>
           {assets.map((dataProduct) => {
             return (
-              <tr key={dataProduct['uuid']} className="odd:bg-gray-100">
+              <tr key={dataProduct['uuid']} className="odd:bg-surfaceContainer">
                 <td className={"border py-2 px-4 text-left"}>
-                  <a className="underline text-blue-600 hover:text-blue-800 visited:text-purple-600"
+                  <a className="text-primary hover:underline"
                      target="blank"
                      href={dataProduct['data_url']}>
                     {dataProduct['title']}
diff --git a/vre-panel/components/VLabAssets/WorkflowRuns.tsx b/vre-panel/components/VLabAssets/WorkflowRuns.tsx
index 217bf25..c8902e5 100644
--- a/vre-panel/components/VLabAssets/WorkflowRuns.tsx
+++ b/vre-panel/components/VLabAssets/WorkflowRuns.tsx
@@ -52,7 +52,7 @@ const WorkflowRuns: React.FC<Props> = ({slug, isAuthenticated, token}) => {
   return (
     <div>
       <button type="button"
-              className="bg-blue-400 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded cursor-pointer"
+              className="bg-primary hover:bg-primaryDark text-white font-bold py-2 px-4 rounded cursor-pointer"
               onClick={() => Promise.all([fetchAssets()])}>
         <svg xmlns="http://www.w3.org/2000/svg" className={clsx("h-5", "w-5", loadingAssets && "animate-spin")}
              viewBox="0 0 20 20" fill="currentColor">
@@ -72,18 +72,18 @@ const WorkflowRuns: React.FC<Props> = ({slug, isAuthenticated, token}) => {
         <table className="table-auto bg-white mt-5">
           <thead>
           <tr>
-            <th className="bg-blue-200 border text-left px-4 py-2">Name</th>
-            <th className="bg-blue-200 border text-left px-4 py-2">Status</th>
-            <th className="bg-blue-200 border text-left px-4 py-2">Progress</th>
+            <th className="bg-primaryContainer border text-left px-4 py-2">Name</th>
+            <th className="bg-primaryContainer border text-left px-4 py-2">Status</th>
+            <th className="bg-primaryContainer border text-left px-4 py-2">Progress</th>
           </tr>
           </thead>
           {slug != null ? (
             <tbody>
             {assets.map((workflow) => {
               return (
-                <tr key={workflow['argo_id']} className="odd:bg-gray-100">
+                <tr key={workflow['argo_id']} className="odd:bg-surfaceContainer">
                   <td className={"border text-left py-2 px-4"}>
-                    {/*<a className="underline text-blue-600 hover:text-blue-800 visited:text-purple-600"*/}
+                    {/*<a className="text-primary hover:underline"*/}
                     {/*   target="blank"*/}
                     {/*   href={workflow['argo_url']}>*/}
                     {/*  {workflow['argo_id']}*/}
diff --git a/vre-panel/components/VLabDescription.tsx b/vre-panel/components/VLabDescription.tsx
index 1926acf..07827a6 100644
--- a/vre-panel/components/VLabDescription.tsx
+++ b/vre-panel/components/VLabDescription.tsx
@@ -58,7 +58,7 @@ const VLabDescription: React.FC<Props> = ({slug, isAuthenticated, token}) => {
         <>
           <p className="text-4xl font-sans">{vlab.title}</p>
           <a target="blank" href={vlab.endpoint}>
-            <button className="bg-blue-400 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded mt-5">
+            <button className="bg-primary hover:bg-primaryDark text-onPrimary font-bold py-2 px-4 rounded mt-5">
               Launch
             </button>
           </a>
diff --git a/vre-panel/pages/index.tsx b/vre-panel/pages/index.tsx
index 7bb7e75..377baf6 100644
--- a/vre-panel/pages/index.tsx
+++ b/vre-panel/pages/index.tsx
@@ -41,24 +41,24 @@ const VLabs = ({}) => {
   }, []);
 
   return (
-    <div className="min-h-screen flex flex-col mx-auto bg-gradient-to-b from-sky-200 to-orange-300">
+    <div className="min-h-screen flex flex-col mx-auto bg-surfaceContainer">
       <Nav/>
       <div className="grow">
         <div className="container mx-auto space-y-10 py-10">
-          <div className="max-w-full rounded shadow-lg bg-white p-8">
-            <h1 className="text-2xl text-gray-800 mb-8">
+          <div className="max-w-full rounded shadow-lg bg-surface p-8">
+            <h1 className="text-2xl text-onSurface mb-8">
               {paasConfigLoading ? (
                 <span className="animate-pulse">
-                  <span className="inline-block min-h-[1em] w-3/12 flex-auto cursor-wait bg-current align-middle opacity-50"></span>
+                  <span className="inline-block min-h-[1em] w-3/12 flex-auto cursor-wait bg-onSurface align-middle opacity-50"></span>
                 </span>
               ) : (
                 paasConfig.title
               )}
             </h1>
-            <p className="text-l text-gray-800">
+            <p className="text-l text-onSurface">
               {paasConfigLoading ? (
                 <span className="animate-pulse">
-                  <span className="inline-block min-h-[1em] w-full flex-auto cursor-wait bg-current align-middle opacity-50"></span>
+                  <span className="inline-block min-h-[1em] w-full flex-auto cursor-wait bg-onSurface align-middle opacity-50"></span>
                 </span>
               ) : (
                 paasConfig.description
@@ -69,7 +69,7 @@ const VLabs = ({}) => {
                 <p className="mt-4">
                   <a
                     href={paasConfig.documentation_url}
-                    className="text-blue-800 hover:underline"
+                    className="text-primary hover:underline"
                   >
                     Documentation
                   </a>
@@ -79,17 +79,17 @@ const VLabs = ({}) => {
           </div>
           <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10'>
             {vlabsLoading ? (
-              <div className="rounded overflow-hidden shadow-lg bg-white animate">
+              <div className="rounded overflow-hidden shadow-lg bg-surface animate">
                 <div>
                   <img className="w-35 h-30 object-cover" src={`${publicRuntimeConfig.staticFolder}/HP-VRES.png`}/>
-                  <div className="font-bold text-l mb-2 bg-gray-300 text-white p-5">
+                  <div className="font-bold text-l mb-2 bg-primaryMuted text-onPrimary p-5">
                     <p className="animate-pulse">
-                      <span className="inline-block min-h-[1em] w-6/12 flex-auto cursor-wait bg-current align-middle opacity-50"></span>
+                      <span className="inline-block min-h-[1em] w-6/12 flex-auto cursor-wait bg-onPrimary align-middle opacity-50"></span>
                     </p>
                   </div>
                   <div className="px-3 py-2">
-                    <p className="text-gray-700 text-base truncate animate-pulse ...">
-                      <span className="inline-block min-h-[0.6em] w-6/12 flex-auto cursor-wait bg-current align-middle opacity-50"></span>
+                    <p className="text-base truncate animate-pulse ...">
+                      <span className="inline-block min-h-[0.6em] w-6/12 flex-auto cursor-wait bg-onSurface align-middle opacity-50"></span>
                     </p>
                   </div>
                 </div>
@@ -98,7 +98,7 @@ const VLabs = ({}) => {
                 vlabs.length > 0 ? (
                   vlabs.map((vlab: any) => {
                     return (
-                      <div key={getSlug(vlab.title)} className="rounded overflow-hidden shadow-lg bg-white">
+                      <div key={getSlug(vlab.title)} className="rounded overflow-hidden shadow-lg bg-surface">
                         <Link
                           href={{
                             pathname: '/vlabs/[slug]',
@@ -107,9 +107,9 @@ const VLabs = ({}) => {
                         >
                           <div>
                             <img className="w-35 h-30 object-cover" src={`${publicRuntimeConfig.staticFolder}/HP-VRES.png`}/>
-                            <div className="font-bold text-l mb-2 bg-blue-500 text-white p-5">{vlab.title}</div>
+                            <div className="font-bold text-l mb-2 bg-primary text-onPrimary p-5">{vlab.title}</div>
                             <div className="px-3 py-2">
-                              <p className="text-gray-700 line-clamp-2">
+                              <p className="text-onSurface line-clamp-2">
                                 {vlab.description}
                               </p>
                             </div>
@@ -119,7 +119,7 @@ const VLabs = ({}) => {
                     );
                   })
                 ) : (
-                  <div className="rounded overflow-hidden shadow-lg bg-white p-5">
+                  <div className="rounded overflow-hidden shadow-lg bg-surface p-5">
                     No virtual labs found
                   </div>
                 )
diff --git a/vre-panel/pages/vlabs/[slug].tsx b/vre-panel/pages/vlabs/[slug].tsx
index 44b6614..7a3bc90 100644
--- a/vre-panel/pages/vlabs/[slug].tsx
+++ b/vre-panel/pages/vlabs/[slug].tsx
@@ -19,14 +19,14 @@ const VLabDetails: React.FC<VLabDetailsProps> = ({token}) => {
   const {slug} = router.query;
 
   return (
-    <div className="min-h-screen flex flex-col mx-auto bg-gradient-to-b from-sky-200 to-orange-300">
+    <div className="min-h-screen flex flex-col mx-auto bg-surfaceContainer">
       <Nav/>
       <div className="grow">
         <div className="container mx-auto py-10 space-y-4 gap-4">
-          <div className="rounded shadow-lg bg-white p-8">
+          <div className="rounded shadow-lg bg-surface p-8">
             <VLabDescription slug={slug} isAuthenticated={isAuthenticated} token={token}/>
           </div>
-          <div className="rounded shadow-lg bg-white p-8">
+          <div className="rounded shadow-lg bg-surface p-8">
             <VLAbAssets slug={slug} isAuthenticated={isAuthenticated} token={token}/>
           </div>
         </div>
diff --git a/vre-panel/tailwind.config.js b/vre-panel/tailwind.config.js
index f202796..c20a4ac 100644
--- a/vre-panel/tailwind.config.js
+++ b/vre-panel/tailwind.config.js
@@ -3,6 +3,22 @@ module.exports = {
   content: [],
   theme: {
     extend: {
+      colors: {
+        primaryMuted: '#666666',
+        primary: '#0f4e8a',
+        primaryDark: '#00194B',
+        onPrimary: '#ffffff',
+        primaryContainer: '#9AC4FF',
+        onPrimaryContainer: '#000000',
+        secondary: '#EA5B2D',
+        onSecondary: '#ffffff',
+        secondaryContainer: '#FFBD85',
+        onSecondaryContainer: '#000000',
+        surface: '#ffffff',
+        onSurface: '#333333',
+        surfaceContainer: '#f2f2f2',
+        onSurfaceContainer: '#000000',
+      },
       fontFamily: {
         sans: ['Titillium Web', 'sans-serif'],
       },
diff --git a/vre-panel/templates/Nav.tsx b/vre-panel/templates/Nav.tsx
index 2cfb225..8ba070e 100644
--- a/vre-panel/templates/Nav.tsx
+++ b/vre-panel/templates/Nav.tsx
@@ -14,8 +14,8 @@ const Nav = () => {
     const {paasConfig, paasConfigLoading} = useContext(PaasConfigContext)
 
     return (
-        <header className="top-0 z-30 w-full px-2 py-4 bg-white sm:px-4 shadow-lg">
-            <nav className="bg-white border-gray-200 h-10 px-2 sm:px-4 rounded dark:bg-gray-800">
+        <header className="top-0 z-30 w-full px-2 py-4 bg-surface sm:px-4 shadow-lg">
+            <nav className="bg-surface border-gray-200 h-10 px-2 sm:px-4 rounded">
                 <div className="container flex flex-wrap justify-between items-center mx-auto">
                     <Link href='/' className="flex items-center">
                         {paasConfigLoading || (
@@ -47,10 +47,10 @@ const Nav = () => {
                                             >
                                                 <Menu.Items
                                                     static
-                                                    className="absolute right-0 w-56 mt-2 origin-top-right bg-white border border-gray-200 divide-y divide-gray-100 rounded-md shadow-lg outline-none"
+                                                    className="absolute right-0 w-56 mt-2 origin-top-right bg-surface border border-gray-200 divide-y divide-gray-100 rounded-md shadow-lg outline-none"
                                                 >
-                                                    <div className="px-4 py-3 bg-orange-100">
-                                                        <p className="text-sm font-medium leading-5 text-gray-900 truncate">
+                                                    <div className="px-4 py-3 bg-primary text-onPrimary">
+                                                        <p className="text-sm font-medium leading-5 truncate">
                                                             {session?.user?.name}
                                                         </p>
                                                     </div>
@@ -76,7 +76,7 @@ const Nav = () => {
                                 </Menu>
                             ) : (
                                 <div>
-                                    <button onClick={() => signIn()} className="bg-blue-300 hover:bg-blue-400 text-white font-bold py-2 px-4 rounded">
+                                    <button onClick={() => signIn()} className="bg-primary hover:bg-primaryDark text-onPrimary font-bold py-2 px-4 rounded">
                                         Sign In
                                     </button>
                                 </div>