diff --git a/client/src/App.css b/client/src/App.css
index 1daee46063..4b7f857ec6 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -1,49 +1,3 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
-}
-
-.App-header {
-  background-color: #222;
-  height: 70px;
-  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);
-  }
-}
-
-/* Sticky Footer */
-html {
-  position: relative;
-  min-height: 100%;
-}
-
-.footer {
-  /* position: absolute; to fix later */
-  bottom: 0;
-  width: 100%;
-  background-color: #f5f5f5;
-}
-
 /* Component classes */
 .time-caption {
   color: var(--bs-dark);
@@ -60,73 +14,10 @@ html {
   border: 0 !important;
 }
 
-.comment-block {
-  display: inline;
-}
-
-.expanded-reference {
-  border: 1px solid #aaa;
-  border-radius: 15px;
-  padding: 15px;
-  margin-top: 15px;
-  margin-bottom: 15px;
-}
-
-.notebook-comparison {
-  border: 1px solid #ddd;
-  border-radius: 15px;
-  padding: 10px;
-  margin-left: 0px;
-  margin-top: 5px;
-  margin-right: 0px;
-  margin-bottom: 5px;
-}
-
 .image-preview {
   max-width: 100%;
 }
 
-.text-link {
-  background: none;
-  border: none;
-  margin: 0px;
-  padding: 0px;
-  color: blue;
-  cursor: pointer;
-  outline: none;
-}
-
-.text-link input[type="button"]:focus {
-  outline: none;
-}
-
-/* TODO: Try to replace css tooltip by reactstraps tooltip component */
-.simple-tooltip {
-  position: relative;
-  display: inline-block;
-  color: #dd0000;
-}
-
-.simple-tooltip .tooltiptext {
-  visibility: hidden;
-  background-color: #ccc;
-  width: 260px;
-  color: #000000;
-  text-align: center;
-  padding: 5px 10px;
-  border-radius: 6px;
-  position: absolute;
-  z-index: 1;
-}
-
-.simple-tooltip:hover .tooltiptext {
-  visibility: visible;
-}
-
-.deployButton {
-  margin-bottom: 10px;
-}
-
 .bouncer {
   text-align: center;
   margin: 50px auto 25px auto;
@@ -163,25 +54,6 @@ html {
   }
 }
 
-.delay1s {
-  visibility: hidden;
-  opacity: 0;
-  animation: delay1s 2s forwards;
-}
-
-@keyframes delay1s {
-  0%,
-  50% {
-    visibility: visible;
-    opacity: 0;
-  }
-
-  100% {
-    visibility: visible;
-    opacity: 1;
-  }
-}
-
 .renku-markdown code {
   padding: 0.2em 0.4em;
   font-size: 85%;
@@ -209,14 +81,6 @@ html {
   word-break: normal;
 }
 
-.mw-0 {
-  min-width: 0;
-}
-
-.limit-width {
-  max-width: 1140px;
-}
-
 .visually-hidden {
   position: absolute;
   left: -100vw;
diff --git a/client/src/components/commits/Commits.css b/client/src/components/commits/Commits.css
index 732bd23dcc..d3fec560b6 100644
--- a/client/src/components/commits/Commits.css
+++ b/client/src/components/commits/Commits.css
@@ -1,7 +1,7 @@
 .commit-object,
 .commit-date {
-  border-width: 1px 0 0 0;
   padding: 0.5rem;
+  border: 1px solid #e4e7ea;
 }
 
 .commit-object .commit-cut-message {
@@ -17,15 +17,9 @@
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
   background-color: #f5f5f5;
-  border: unset;
-}
-
-.commit-date:first-of-type {
-  border-top: 1px solid #e4e7ea;
 }
 
 .commit-object {
-  border-bottom: 1px solid #e4e7ea;
   line-height: 1.5rem;
 }
 
@@ -36,3 +30,7 @@
 .commit-buttons > .last-item-button-group {
   border-radius: 0 8px 8px 0;
 }
+
+.commit-buttons button code {
+  font-size: 14px !important;
+}
diff --git a/client/src/components/commits/Commits.js b/client/src/components/commits/Commits.js
index 7bb2192de8..9f871a4533 100644
--- a/client/src/components/commits/Commits.js
+++ b/client/src/components/commits/Commits.js
@@ -153,15 +153,14 @@ function SingleCommit(props) {
               className="text-monospace m-auto commit-buttons"
               size="sm"
             >
-              <Button color="rk-background" className="border" disabled>
-                {props.commit.short_id}
-              </Button>
               <Button
-                color="rk-background rounded-0"
-                className="border"
+                color="rk-background"
+                className="border rounded-0 rounded-start"
                 id={idCopyButton}
               >
-                <Clipboard clipboardText={props.commit.id} />
+                <Clipboard clipboardText={props.commit.id}>
+                  <code>{props.commit.short_id}</code>
+                </Clipboard>
               </Button>
               <UncontrolledTooltip placement="top" target={idCopyButton}>
                 Copy commit SHA
diff --git a/client/src/dataset/Dataset.present.js b/client/src/dataset/Dataset.present.js
index 642a04a67b..fdf8abf2dd 100644
--- a/client/src/dataset/Dataset.present.js
+++ b/client/src/dataset/Dataset.present.js
@@ -137,21 +137,21 @@ function DisplayProjects(props) {
         <Table size="sm" borderless>
           <thead>
             <tr>
-              <th className="bg-transparent">Name</th>
-              <th className="bg-transparent text-center">Date Created</th>
-              <th className="bg-transparent text-center">Created By</th>
+              <th>Name</th>
+              <th className="text-center">Date Created</th>
+              <th className="text-center">Created By</th>
             </tr>
           </thead>
           <tbody>
             {props.projects.map((project, index) => (
               <tr data-cy="project-using-dataset" key={project.name + index}>
-                <td className="bg-transparent text-break">
+                <td className="text-break">
                   <Link to={`${props.projectsUrl}/${project.path}`}>
                     {project.path}
                   </Link>
                 </td>
                 {project.created && project.created.dateCreated ? (
-                  <td className="bg-transparent text-center">
+                  <td className="text-center">
                     {toHumanDateTime({
                       datetime: project.created.dateCreated,
                       format: "date",
@@ -159,9 +159,7 @@ function DisplayProjects(props) {
                   </td>
                 ) : null}
                 {project.created && project.created.agent ? (
-                  <td className="bg-transparent text-center">
-                    {project.created.agent.name}
-                  </td>
+                  <td className="text-center">{project.created.agent.name}</td>
                 ) : null}
               </tr>
             ))}
@@ -176,7 +174,7 @@ function DisplayDescription(props) {
   if (!props.description) return null;
 
   return (
-    <Card key="datasetDescription" className="mb-4 my-4">
+    <Card key="datasetDescription" className="mb-4">
       <CardHeader className="bg-white p-3 ps-4">Dataset description</CardHeader>
       <CardBody className="p-4 pt-3 pb-3 lh-lg pb-2">
         {props.insideProject ? (
@@ -234,31 +232,29 @@ function DisplayInfoTable(props) {
       <ExternalLink url={dataset.sameAs} title={dataset.sameAs} role="link" />
     ) : dataset.url && props.insideProject ? (
       <ExternalLink url={dataset.url} title={dataset.url} role="link" />
-    ) : null;
+    ) : (
+      "Not available"
+    );
 
   const authors = getDatasetAuthors(dataset);
+  const authorsText = authors ? authors : "Not available";
+  const authorPluralization = dataset.published?.creator?.length > 1 ? "s" : "";
 
-  // eslint-disable-next-line
   return (
-    <Table className="mb-4 table-borderless" size="sm">
+    <Table className="table-borderless mb-0" size="sm">
       <tbody className="text-rk-text">
+        <tr>
+          <td className="text-dark fw-bold col-auto">
+            Author{authorPluralization}
+          </td>
+          <td>{authorsText}</td>
+        </tr>
         {source ? (
           <tr>
-            <td
-              className="text-dark fw-bold bg-transparent"
-              style={{ width: "120px" }}
-            >
+            <td className="text-dark fw-bold" style={{ width: "120px" }}>
               Source
             </td>
-            <td className="bg-transparent">{source}</td>
-          </tr>
-        ) : null}
-        {dataset.published?.creator?.length >= 3 ? (
-          <tr>
-            <td className="text-dark fw-bold col-auto bg-transparent">
-              Author(s)
-            </td>
-            <td className="bg-transparent">{authors}</td>
+            <td>{source}</td>
           </tr>
         ) : null}
       </tbody>
diff --git a/client/src/file/File.present.js b/client/src/file/File.present.js
index 4f9f213581..8787346205 100644
--- a/client/src/file/File.present.js
+++ b/client/src/file/File.present.js
@@ -72,7 +72,7 @@ class FileCard extends React.Component {
           : this.props.commit.title;
       commitHeader = (
         <ListGroup flush>
-          <ListGroupItem>
+          <ListGroupItem className="border-bottom">
             <div className="d-flex justify-content-between flex-wrap">
               <div>
                 <a
@@ -467,7 +467,7 @@ function NotebookDisplayForm(props) {
     );
 
   return (
-    <ListGroup key="controls" flush className="border-top-0">
+    <ListGroup key="controls" flush className="border-bottom">
       <ListGroupItem>
         <div className="form-check form-switch">
           <Input
diff --git a/client/src/file/FilePreview.tsx b/client/src/file/FilePreview.tsx
index 4185b34ec0..da19727035 100644
--- a/client/src/file/FilePreview.tsx
+++ b/client/src/file/FilePreview.tsx
@@ -199,7 +199,7 @@ function FilePreview(props: FilePreviewProps) {
   // pdf document
   if ("pdf" === fileType) {
     return (
-      <CardBody key="file preview" className="pb-0 bg-white">
+      <CardBody key="file preview" className="pb-0">
         <LazyPDFViewer
           file={`data:application/pdf;base64,${props.file.content}`}
         />
@@ -210,7 +210,7 @@ function FilePreview(props: FilePreviewProps) {
   // Free text
   if ("text" === fileType) {
     return (
-      <CardBody key="file preview" className="pb-0 bg-white">
+      <CardBody key="file preview" className="pb-0">
         <pre className="no-highlight">
           <code>{atobUTF8(props.file.content)}</code>
         </pre>
@@ -222,7 +222,7 @@ function FilePreview(props: FilePreviewProps) {
   if ("md" === fileType) {
     const content = atobUTF8(props.file.content);
     return (
-      <CardBody key="file preview" className="pb-0 bg-white">
+      <CardBody key="file preview" className="pb-0">
         <LazyRenkuMarkdown
           projectPathWithNamespace={props.projectPathWithNamespace}
           filePath={props.file.file_path}
@@ -252,7 +252,7 @@ function FilePreview(props: FilePreviewProps) {
   // Code with syntax highlighting
   if (fileIsCode) {
     return (
-      <CardBody key="file preview" className="pb-0 bg-white">
+      <CardBody key="file preview" className="pb-0">
         <LazyCodePreview
           content={props.file.content}
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -265,7 +265,7 @@ function FilePreview(props: FilePreviewProps) {
   // No extensions
   if ("none" === fileType) {
     return (
-      <CardBody key="file preview" className="pb-0 bg-white">
+      <CardBody key="file preview" className="pb-0">
         <pre className={"hljs bg-white"}>
           <code>{atobUTF8(props.file.content)}</code>
         </pre>
@@ -275,7 +275,7 @@ function FilePreview(props: FilePreviewProps) {
 
   // File extension not supported
   return (
-    <CardBody key="file preview" className="pb-0 bg-white">
+    <CardBody key="file preview" className="pb-0">
       <p>{`Unable to preview file with extension .${getFileExtension()}`}</p>
     </CardBody>
   );
diff --git a/client/src/index.css b/client/src/index.css
deleted file mode 100644
index ea1e941c36..0000000000
--- a/client/src/index.css
+++ /dev/null
@@ -1,4 +0,0 @@
-body {
-  margin: 0;
-  padding: 0;
-}
diff --git a/client/src/index.js b/client/src/index.js
index 7f73edc799..c10b0c2d74 100644
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -7,7 +7,6 @@ import "jquery";
 
 // Use our version of bootstrap, not the one in import 'bootstrap/dist/css/bootstrap.css';
 import "./styles/index.scss";
-import "./index.css";
 
 import App from "./App";
 // Disable service workers for the moment -- see below where registerServiceWorker is called
diff --git a/client/src/project/overview/ProjectOverview.present.js b/client/src/project/overview/ProjectOverview.present.js
index 73f53b234b..5a94d6d8a8 100644
--- a/client/src/project/overview/ProjectOverview.present.js
+++ b/client/src/project/overview/ProjectOverview.present.js
@@ -102,7 +102,7 @@ class OverviewStats extends Component {
         <CardHeader className="bg-white p-3 ps-4">
           Project Statistics
         </CardHeader>
-        <CardBody className="p-4 pt-3 pb-3 lh-lg">
+        <CardBody className="lh-lg">
           <Row>
             <Col>
               {info}
@@ -254,7 +254,7 @@ class OverviewCommits extends Component {
             {buttonGit}
           </div>
         </CardHeader>
-        <CardBody className="p-4 pt-3 pb-3 lh-lg">
+        <CardBody className="lh-lg">
           {body}
           {info}
         </CardBody>
diff --git a/client/src/styles/bootstrap/_custom_bootstrap_variables.scss b/client/src/styles/bootstrap/_custom_bootstrap_variables.scss
index 49f36a120c..d28388de7e 100644
--- a/client/src/styles/bootstrap/_custom_bootstrap_variables.scss
+++ b/client/src/styles/bootstrap/_custom_bootstrap_variables.scss
@@ -38,6 +38,8 @@ $rk-dark-bg: #c5cbcf;
 $rk-danger-shadow: rgba(180, 10, 60, 0.5);
 $rk-table-border: #e4e7ea;
 
+$transparent: rgba(0, 0, 0, 0);
+
 // This will be added to the theme colors in custom_bootstrap
 $rk-colors: (
   "rk-blue": $rk-blue,
@@ -79,20 +81,28 @@ $theme-colors: (
 
 $theme-colors: map-merge($theme-colors, $rk-colors);
 
+$enable-rounded: false;
+$input-bg: $rk-white;
+
 // Table styles
 $table-border-color: $rk-table-border;
+$table-bg: $transparent;
 
-$body-bg: $rk-background-0; //background color
-$body-color: $rk-dark; //text color
-$input-bg: #ffffff;
-
-$enable-rounded: false; //borders in general
+// Body styles
+$body-bg: $rk-background-0;
+$body-color: $rk-dark;
 
 // Box shadow
 $rk-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
 
-// Default card styles
+// Card styles
 $card-bg: $rk-white;
 
 // Font styles
 $font-family-base: "Inter", sans-serif;
+
+// Popover styles
+$popover-bg: $rk-white;
+
+// List styles
+$list-group-bg: $transparent;
diff --git a/client/src/styles/bootstrap_ext/_badge.scss b/client/src/styles/bootstrap_ext/_badge.scss
index 9ddfe4e3bc..d406677066 100644
--- a/client/src/styles/bootstrap_ext/_badge.scss
+++ b/client/src/styles/bootstrap_ext/_badge.scss
@@ -1,8 +1,5 @@
 .badge {
-  font-weight: lighter;
   border-radius: 5px;
-  font-size: 13px;
-  letter-spacing: -0.13px;
   &.bg-warning {
     color: var(--bs-dark);
   }
diff --git a/doc/data_model.md b/doc/data_model.md
deleted file mode 100644
index 3dcfb679ef..0000000000
--- a/doc/data_model.md
+++ /dev/null
@@ -1,100 +0,0 @@
-# Data Model
-
-This document describes the structure of entities and provides guidelines for how entities should be defined.
-
-We looked at the following sources for inspiration:
-
-- https://developer.github.com/v3/issues/#list-issues
-- https://docs.gitlab.com/ce/api/projects.html
-- https://developer.twitter.com/en/docs/tweets/search/api-reference/get-search-tweets
-
-This should be conceptually backend-agnostic, but this document provides a mapping to the GitLab API.
-
-# Guidelines
-
-
-
-# Recurring Keys
-
-## display
-
-Display includes information that is commonly used to display the entity. Almost every entity contains a display field, and these values contained therein are computed from entity metadata and not directly editable, but they fields used to compute the values may vary from entity to entity. 
-
-- title (project:name, issue:title in GitLab)
-- slug (project:path or issue:iid in GitLab)
-- display_id (project:path_with_namespace or issue:tail of web_url in GitLab)
-- short_description (project:description, issue:title in GitLab)
-
-## metadata
-
-Metadata is not a self-contained entity, but it appears as a key in many places. It contains system information about the entity, such as who created the entity, when it was created, etc. Not all keys apppear for all entities, but these are some common ones. 
-
-- author (a User object)
-- created_at
-- updated_at
-- last_activity_at
-- permissions
-- id
-- iid (this is an id that is only unique in the context of the parent entity, but not globablly unique)
-
-## settings
-
-Settings is not a self-contained entity, but appears as a key in many places.
-
-- visibility
-- user_permissions
-- group_permissions
-
-# Entities
-
-## User
-
-- metadata (see above)
-- username
-- name
-- avatar_url
-
-## Project
-
-These are GitLab projects. https://docs.gitlab.com/ce/api/projects.html
-
-- display (see above)
-- metadata (see above)
-- settings (see above)
-- description
-- long_description (Contents of readme file)
-- name
-- namespace
-- forks_count
-- star_count
-- tags
-- issues
-- repository_content (these are computed values based on the content in the repo)
-  - datasets
-  - notebooks
-  - workflows
-  - sources
-  - libraries
-
-## Issue
-
-These are GitLab issues. https://docs.gitlab.com/ce/api/issues.html
-
-- project_id
-- display (see above)
-- metadata (see above)
-- settings (see above)
-- long_description
-- labels
-- notes
-- assignees
-- reactions (issue:award_emoji)
-
-## Contribution
-
-These are GitLab Notes. https://docs.gitlab.com/ce/api/notes.html
-
-- issue_id (noteable_id in GitLab)
-- issue_iid (noteable_iid in GitLab)
-- metadata (see above)
-- body