diff --git a/cypress/component/AuthDialog.cy.tsx b/cypress/component/AuthDialog.cy.tsx
index d501de9a..59bde208 100644
--- a/cypress/component/AuthDialog.cy.tsx
+++ b/cypress/component/AuthDialog.cy.tsx
@@ -6,7 +6,7 @@ const props = {
   onClose: () => {},
 };
 
-describe('ContinuousField', () => {
+describe('AuthDialog', () => {
   it('Displays a MUI dialog with the title and "sing in with google" button', () => {
     cy.mount(
       <GoogleOAuthProvider clientId="mock-client-id">
diff --git a/cypress/component/ResultCard.cy.tsx b/cypress/component/ResultCard.cy.tsx
index c583c4a2..3bb8e563 100644
--- a/cypress/component/ResultCard.cy.tsx
+++ b/cypress/component/ResultCard.cy.tsx
@@ -41,12 +41,13 @@ describe('ResultCard', () => {
     cy.get('[data-cy="card-some uuid"]').should('contain', '5 subjects match / 10 total subjects');
     cy.get('[data-cy="card-some uuid-checkbox"] input').should('be.checked');
     cy.get('[data-cy="card-some uuid"] button')
+      .eq(1)
       .should('contain', 'ASL')
-      .should('have.class', 'bg-zinc-800');
+      .should('have.css', 'background-color', 'rgb(113, 113, 122)');
     cy.get('[data-cy="card-some uuid"] button')
       .eq(2)
       .should('contain', 'DWI')
-      .should('have.class', 'bg-red-700');
+      .should('have.css', 'background-color', 'rgb(205, 92, 92)');
 
     cy.get('[data-cy="card-some uuid-available-pipelines-button"]').trigger('mouseover', {
       force: true,
diff --git a/cypress/component/SmallScreenSizeDialog.cy.tsx b/cypress/component/SmallScreenSizeDialog.cy.tsx
new file mode 100644
index 00000000..24869be3
--- /dev/null
+++ b/cypress/component/SmallScreenSizeDialog.cy.tsx
@@ -0,0 +1,18 @@
+import SmallScreenSizeDialog from '../../src/components/SmallScreenSizeDialog';
+
+const props = {
+  onClose: () => {},
+};
+
+describe('SmallScreenSizeDialog', () => {
+  it('Displays a MUI dialog with the title and "sing in with google" button', () => {
+    cy.mount(<SmallScreenSizeDialog open onClose={props.onClose} />);
+    cy.get('[data-cy="small-screen-size-dialog"]').should('be.visible');
+    cy.get('[data-cy="small-screen-size-dialog"]').should('contain', 'Unsupported Screen Size');
+    cy.get('[data-cy="small-screen-size-dialog"]').should(
+      'contain',
+      'not optimized for use on smaller screens'
+    );
+    cy.get('[data-cy="close-small-screen-size-dialog-button"]').should('be.visible');
+  });
+});
diff --git a/cypress/e2e/Alert.cy.ts b/cypress/e2e/Feedback.cy.ts
similarity index 86%
rename from cypress/e2e/Alert.cy.ts
rename to cypress/e2e/Feedback.cy.ts
index 9c3ec5e3..2ba028bf 100644
--- a/cypress/e2e/Alert.cy.ts
+++ b/cypress/e2e/Feedback.cy.ts
@@ -5,7 +5,7 @@ import {
   nodeOptions,
 } from '../fixtures/mocked-responses';
 
-describe('Alert', () => {
+describe('Feedback', () => {
   it('Correctly displays and dismisses the alert', () => {
     cy.intercept(
       {
@@ -71,4 +71,11 @@ describe('Alert', () => {
     cy.get('[data-cy="openneuro-alert"]').find('[data-testid="CloseIcon"]').click();
     cy.get('[data-cy="openneuro-alert"]').should('not.exist');
   });
+  it.only('Displays and closes small screen size dialog', () => {
+    cy.viewport(766, 500);
+    cy.visit('/');
+    cy.get('[data-cy="small-screen-size-dialog"]').should('be.visible');
+    cy.get('[data-cy="close-small-screen-size-dialog-button"]').click();
+    cy.get('[data-cy="small-screen-size-dialog"]').should('not.exist');
+  });
 });
diff --git a/src/App.tsx b/src/App.tsx
index 1b87d6d5..1a2b98d4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import axios, { AxiosResponse } from 'axios';
 import { Alert, Grow, IconButton } from '@mui/material';
+import useMediaQuery from '@mui/material/useMediaQuery';
 import CloseIcon from '@mui/icons-material/Close';
 import { SnackbarKey, SnackbarProvider, closeSnackbar, enqueueSnackbar } from 'notistack';
 import { jwtDecode } from 'jwt-decode';
@@ -24,9 +25,15 @@ import ResultContainer from './components/ResultContainer';
 import Navbar from './components/Navbar';
 import AuthDialog from './components/AuthDialog';
 import ChatbotFeature from './components/Chatbot';
+import SmallScreenSizeDialog from './components/SmallScreenSizeDialog';
 import './App.css';
+import logo from './assets/logo.png';
 
 function App() {
+  // Screen is considered small if the width is less than 768px (according to tailwind docs)
+  const [isScreenSizeSmall, setIsScreenSizeSmall] = useState<boolean>(
+    useMediaQuery('(max-width: 767px)')
+  );
   const [diagnosisOptions, setDiagnosisOptions] = useState<AttributeOption[]>([]);
   const [assessmentOptions, setAssessmentOptions] = useState<AttributeOption[]>([]);
   const [availableNodes, setAvailableNodes] = useState<NodeOption[]>([
@@ -427,15 +434,14 @@ function App() {
 
   return (
     <>
-      <div>
-        {enableAuth && (
-          <AuthDialog
-            open={openAuthDialog}
-            onAuth={(credential) => login(credential)}
-            onClose={() => setOpenAuthDialog(false)}
-          />
-        )}
-      </div>
+      {enableAuth && (
+        <AuthDialog
+          open={openAuthDialog}
+          onAuth={(credential) => login(credential)}
+          onClose={() => setOpenAuthDialog(false)}
+        />
+      )}
+      <SmallScreenSizeDialog open={isScreenSizeSmall} onClose={() => setIsScreenSizeSmall(false)} />
       <SnackbarProvider
         autoHideDuration={6000}
         anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
@@ -476,10 +482,11 @@ function App() {
         </>
       )}
 
-      <div>{enableChatbot && <ChatbotFeature setResult={setResult} />}</div>
+      {enableChatbot && <ChatbotFeature setResult={setResult} />}
 
-      <div className="grid grid-cols-4 gap-4">
-        <div>
+      <div className="flex flex-wrap gap-3">
+        {/* 380px is currently the smallest width for the query form without dropdowns being affected */}
+        <div className="min-w-[380px] max-w-sm flex-1">
           <QueryForm
             availableNodes={availableNodes}
             diagnosisOptions={diagnosisOptions}
@@ -508,8 +515,18 @@ function App() {
             onSubmitQuery={() => submitQuery()}
           />
         </div>
-        <div className={loading ? 'col-span-3 animate-pulse' : 'col-span-3'}>
-          <ResultContainer response={sortedResults || null} />
+        <div
+          className={
+            loading
+              ? 'flex flex-1 animate-pulse items-center justify-center'
+              : 'min-w-[600px] flex-1'
+          }
+        >
+          {loading ? (
+            <img src={logo} alt="Logo" className="max-h-20 animate-bounce" />
+          ) : (
+            <ResultContainer response={sortedResults || null} />
+          )}
         </div>
       </div>
     </>
diff --git a/src/assets/logo.png b/src/assets/logo.png
new file mode 100644
index 00000000..8f691efa
Binary files /dev/null and b/src/assets/logo.png differ
diff --git a/src/components/AuthDialog.tsx b/src/components/AuthDialog.tsx
index 66877e10..111c355b 100644
--- a/src/components/AuthDialog.tsx
+++ b/src/components/AuthDialog.tsx
@@ -3,8 +3,6 @@ import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 import DialogActions from '@mui/material/DialogActions';
 import Button from '@mui/material/Button';
-import useMediaQuery from '@mui/material/useMediaQuery';
-import { useTheme } from '@mui/material/styles';
 import { GoogleLogin } from '@react-oauth/google';
 
 function AuthDialog({
@@ -16,11 +14,8 @@ function AuthDialog({
   onAuth: (credential: string | undefined) => void;
   onClose: () => void;
 }) {
-  const theme = useTheme();
-  const fullScreen = useMediaQuery(theme.breakpoints.down('md'));
-
   return (
-    <Dialog fullScreen={fullScreen} open={open} onClose={onClose} data-cy="auth-dialog">
+    <Dialog open={open} onClose={onClose} data-cy="auth-dialog">
       <DialogTitle>
         You must log in to a trusted identity provider in order to query all available nodes!
       </DialogTitle>
diff --git a/src/components/CategoricalField.tsx b/src/components/CategoricalField.tsx
index c01334a9..a39404bd 100644
--- a/src/components/CategoricalField.tsx
+++ b/src/components/CategoricalField.tsx
@@ -21,7 +21,6 @@ function CategoricalField({
           {...params}
           label={label}
           placeholder="Select an option"
-          className="w-full"
         />
       )}
       multiple={multiple}
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 83246a55..205a5692 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -16,6 +16,7 @@ import Logout from '@mui/icons-material/Logout';
 import Login from '@mui/icons-material/Login';
 import Avatar from '@mui/material/Avatar';
 import { enableAuth } from '../utils/constants';
+import logo from '../assets/logo.png';
 
 function Navbar({
   isLoggedIn,
@@ -58,11 +59,7 @@ function Navbar({
     <Toolbar className="my-4" data-cy="navbar">
       <div className="flex w-full items-center justify-between">
         <div className="flex items-center">
-          <img
-            src="https://raw.githubusercontent.com/neurobagel/documentation/main/docs/imgs/logo/neurobagel_logo.png"
-            alt="Logo"
-            height="60"
-          />
+          <img src={logo} alt="Logo" height="60" />
           <div className="ml-4">
             <Badge badgeContent={latestReleaseTag}>
               <Typography variant="h5">Neurobagel Query</Typography>
diff --git a/src/components/QueryForm.tsx b/src/components/QueryForm.tsx
index ca21f6fd..8c6cfd10 100644
--- a/src/components/QueryForm.tsx
+++ b/src/components/QueryForm.tsx
@@ -92,8 +92,8 @@ function QueryForm({
     minNumImagingSessionsHelperText !== '';
 
   return (
-    <div className="grid grid-cols-2 grid-rows-12 gap-2">
-      <div className="col-span-2">
+    <div className="flex flex-col gap-2">
+      <div>
         <CategoricalField
           label="Neurobagel graph"
           options={availableNodes.map((n) => ({
@@ -105,14 +105,14 @@ function QueryForm({
           inputValue={selectedNode}
         />
       </div>
-      <div className="row-start-2">
+      <div>
         <ContinuousField
           helperText={minAgeExceedsMaxAge ? '' : minAgeHelperText}
           label="Minimum age"
           onFieldChange={updateContinuousQueryParams}
         />
       </div>
-      <div className="row-start-2">
+      <div>
         <ContinuousField
           helperText={minAgeExceedsMaxAge ? '' : maxAgeHelperText}
           label="Maximum age"
@@ -120,13 +120,13 @@ function QueryForm({
         />
       </div>
       {minAgeExceedsMaxAge && (
-        <div className="col-span-2">
+        <div>
           <FormHelperText error>
             Value of maximum age must be greater than or equal to value of minimum age
           </FormHelperText>
         </div>
       )}
-      <div className="col-span-2">
+      <div>
         <CategoricalField
           label="Sex"
           options={Object.entries(sexes).map(([key, value]) => ({
@@ -137,9 +137,9 @@ function QueryForm({
           inputValue={sex}
         />
       </div>
-      <div className="col-span-2 row-start-4">
-        <div className="grid grid-cols-12 items-center gap-4">
-          <div className="col-span-9">
+      <div>
+        <div className="flex flex-row items-center gap-3">
+          <div className="flex-1">
             <CategoricalField
               label="Diagnosis"
               options={diagnosisOptions.map((d) => ({
@@ -151,7 +151,7 @@ function QueryForm({
               disabled={isControl}
             />
           </div>
-          <div>
+          <div className="flex-1">
             <FormControlLabel
               data-cy="healthy-control-checkbox"
               control={<Checkbox name="healthyControl" />}
@@ -161,21 +161,21 @@ function QueryForm({
           </div>
         </div>
       </div>
-      <div className="col-span-2 row-start-5">
+      <div>
         <ContinuousField
           helperText={minNumImagingSessionsHelperText}
           label="Minimum number of imaging sessions"
           onFieldChange={updateContinuousQueryParams}
         />
       </div>
-      <div className="col-span-2 row-start-6">
+      <div>
         <ContinuousField
           helperText={minNumPhenotypicSessionsHelperText}
           label="Minimum number of phenotypic sessions"
           onFieldChange={updateContinuousQueryParams}
         />
       </div>
-      <div className="col-span-2 row-start-7">
+      <div>
         <CategoricalField
           label="Assessment tool"
           options={assessmentOptions.map((a) => ({ label: a.Label, id: a.TermURL }))}
@@ -183,7 +183,7 @@ function QueryForm({
           inputValue={assessmentTool}
         />
       </div>
-      <div className="col-span-2 row-start-8">
+      <div>
         <CategoricalField
           label="Imaging modality"
           options={Object.entries(modalities).map(([, value]) => ({
@@ -194,7 +194,7 @@ function QueryForm({
           inputValue={imagingModality}
         />
       </div>
-      <div className="col-span-2 row-start-9">
+      <div>
         <CategoricalField
           label="Pipeline name"
           options={Object.keys(pipelines).map((pipelineURI) => ({
@@ -211,7 +211,7 @@ function QueryForm({
           title={<Typography variant="body1">Please select a pipeline name</Typography>}
           placement="right"
         >
-          <div className="col-span-2 row-start-10">
+          <div>
             <CategoricalField
               label="Pipeline version"
               options={[]}
@@ -222,7 +222,7 @@ function QueryForm({
           </div>
         </Tooltip>
       ) : (
-        <div className="col-span-2 row-start-10">
+        <div>
           <CategoricalField
             label="Pipeline version"
             options={Object.values(pipelines[(pipelineName as FieldInputOption).id]).map((v) => ({
@@ -235,7 +235,7 @@ function QueryForm({
         </div>
       )}
 
-      <div className={pipelineName ? 'col-span-2 row-start-11' : 'row-start-11'}>
+      <div>
         <Button
           data-cy="submit-query-button"
           disabled={disableSubmit}
diff --git a/src/components/ResultCard.tsx b/src/components/ResultCard.tsx
index 3284f6b1..3ae74309 100644
--- a/src/components/ResultCard.tsx
+++ b/src/components/ResultCard.tsx
@@ -35,22 +35,24 @@ const ResultCard = memo(
   }) => (
     <Card data-cy={`card-${datasetUUID}`}>
       <CardContent>
-        <div className="grid grid-cols-12 items-center gap-2">
-          <div className="col-end-1">
-            <Checkbox
-              data-cy={`card-${datasetUUID}-checkbox`}
-              checked={checked}
-              onChange={() => onCheckboxChange(datasetUUID)}
-            />
+        <div className="grid grid-cols-3 items-center">
+          <div className="flex flex-row items-center">
+            <div>
+              <Checkbox
+                data-cy={`card-${datasetUUID}-checkbox`}
+                checked={checked}
+                onChange={() => onCheckboxChange(datasetUUID)}
+              />
+            </div>
+            <div>
+              <Typography variant="h5">{datasetName}</Typography>
+              <Typography variant="subtitle1">from {nodeName}</Typography>
+              <Typography variant="subtitle2">
+                {numMatchingSubjects} subjects match / {datasetTotalSubjects} total subjects
+              </Typography>
+            </div>
           </div>
-          <div className="col-span-6 col-start-1">
-            <Typography variant="h5">{datasetName}</Typography>
-            <Typography variant="subtitle1">from {nodeName}</Typography>
-            <Typography variant="subtitle2">
-              {numMatchingSubjects} subjects match / {datasetTotalSubjects} total subjects
-            </Typography>
-          </div>
-          <div className="col-span-2 col-start-7">
+          <div className="justify-self-center">
             {Object.entries(pipelines).length === 0 ? (
               <Button
                 data-cy={`card-${datasetUUID}-available-pipelines-button`}
@@ -89,13 +91,20 @@ const ResultCard = memo(
               </Tooltip>
             )}
           </div>
-          <div className="col-span-2 col-start-11 justify-self-end">
+          <div className="justify-self-end">
             <ButtonGroup>
               {imageModals.sort().map((modal) => (
                 <Button
                   key={modal}
                   variant="contained"
-                  className={`${modalities[modal].bgColor} shadow-none hover:bg-gray-400 hover:shadow-none`}
+                  disableElevation
+                  sx={{
+                    backgroundColor: modalities[modal].bgColor,
+                    '&:hover': {
+                      backgroundColor: modalities[modal].bgColor,
+                      cursor: 'default',
+                    },
+                  }}
                 >
                   {modalities[modal].name}
                 </Button>
diff --git a/src/components/ResultContainer.tsx b/src/components/ResultContainer.tsx
index b94e4f5e..de181496 100644
--- a/src/components/ResultContainer.tsx
+++ b/src/components/ResultContainer.tsx
@@ -207,24 +207,26 @@ function ResultContainer({ response }: { response: QueryResponse | null }) {
 
     return (
       <>
-        <div>
-          <FormControlLabel
-            data-cy="select-all-checkbox"
-            label="Select all datasets"
-            control={
-              <Checkbox
-                onChange={(event) => handleSelectAll(event.target.checked)}
-                checked={selectAll}
-              />
-            }
-          />
-        </div>
-        <div className="col-end-5 justify-self-end">
-          <Typography variant="body1" data-cy="summary-stats">
-            {summaryStats}
-          </Typography>
+        <div className="flex flex-row items-baseline justify-between">
+          <div>
+            <FormControlLabel
+              data-cy="select-all-checkbox"
+              label="Select all datasets"
+              control={
+                <Checkbox
+                  onChange={(event) => handleSelectAll(event.target.checked)}
+                  checked={selectAll}
+                />
+              }
+            />
+          </div>
+          <div>
+            <Typography variant="body1" data-cy="summary-stats">
+              {summaryStats}
+            </Typography>
+          </div>
         </div>
-        <div className="col-span-4 h-[70vh] space-y-2 overflow-auto">
+        <div className="h-[70vh] space-y-1 overflow-auto">
           {response.responses.map((item) => (
             <ResultCard
               key={item.dataset_uuid}
@@ -240,37 +242,36 @@ function ResultContainer({ response }: { response: QueryResponse | null }) {
             />
           ))}
         </div>
-        <div className="col-span-1">
-          <Button
-            variant="contained"
-            data-cy="how-to-get-data-dialog-button"
-            onClick={() => setOpenDialog(true)}
-          >
-            How to get data
-          </Button>
-          <GetDataDialog open={openDialog} onClose={() => setOpenDialog(false)} />
-        </div>
-        <div className="col-span-3 space-x-2 justify-self-end">
-          <DownloadResultButton
-            identifier="participant-level"
-            disabled={download.length === 0}
-            handleClick={(identifier) => downloadResults(identifier)}
-          />
-          <DownloadResultButton
-            identifier="dataset-level"
-            disabled={download.length === 0}
-            handleClick={(identifier) => downloadResults(identifier)}
-          />
+        <div className="mt-[2px] flex flex-row flex-wrap justify-between">
+          <div>
+            <Button
+              variant="contained"
+              data-cy="how-to-get-data-dialog-button"
+              onClick={() => setOpenDialog(true)}
+            >
+              How to get data
+            </Button>
+            <GetDataDialog open={openDialog} onClose={() => setOpenDialog(false)} />
+          </div>
+          <div className="space-x-1">
+            <DownloadResultButton
+              identifier="participant-level"
+              disabled={download.length === 0}
+              handleClick={(identifier) => downloadResults(identifier)}
+            />
+            <DownloadResultButton
+              identifier="dataset-level"
+              disabled={download.length === 0}
+              handleClick={(identifier) => downloadResults(identifier)}
+            />
+          </div>
         </div>
       </>
     );
   }
 
   return (
-    <div className="grid grid-cols-4 grid-rows-2" data-cy="result-container">
-      <div className="col-span-4">
-        <Typography variant="h5">Results</Typography>
-      </div>
+    <div className="flex flex-col" data-cy="result-container">
       {renderResults()}
     </div>
   );
diff --git a/src/components/SmallScreenSizeDialog.tsx b/src/components/SmallScreenSizeDialog.tsx
new file mode 100644
index 00000000..d52cf3d4
--- /dev/null
+++ b/src/components/SmallScreenSizeDialog.tsx
@@ -0,0 +1,33 @@
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  DialogActions,
+  DialogContentText,
+} from '@mui/material';
+import WarningIcon from '@mui/icons-material/Warning';
+
+function SmallScreenSizeDialog({ open, onClose }: { open: boolean; onClose: () => void }) {
+  return (
+    <Dialog open={open} onClose={onClose} data-cy="small-screen-size-dialog">
+      <DialogTitle className="flex flex-row gap-x-1">
+        <WarningIcon color="warning" /> Unsupported Screen Size!
+      </DialogTitle>
+      <DialogContent>
+        <DialogContentText>
+          We&apos;re sorry, but the Query Tool is not optimized for use on smaller screens. For the
+          best experience, please access this tool on a device with a larger screen, such as a
+          tablet, laptop, or desktop computer. Thank you for your understanding!
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose} data-cy="close-small-screen-size-dialog-button">
+          Continue
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+export default SmallScreenSizeDialog;
diff --git a/src/main.tsx b/src/main.tsx
index 27eb04e4..12eccf5a 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
-import { StyledEngineProvider } from '@mui/material/styles';
+import { StyledEngineProvider, ThemeProvider } from '@mui/material/styles';
 import { GoogleOAuthProvider } from '@react-oauth/google';
 import App from './App';
 import { appBasePath, enableAuth, clientID } from './utils/constants';
 import './index.css';
+import theme from './theme';
 
 const router = createBrowserRouter([
   {
@@ -18,7 +19,9 @@ const app = (
   <React.StrictMode>
     {/* CSS injection order for MUI and tailwind: https://mui.com/material-ui/guides/interoperability/#tailwind-css */}
     <StyledEngineProvider injectFirst>
-      <RouterProvider router={router} />
+      <ThemeProvider theme={theme}>
+        <RouterProvider router={router} />
+      </ThemeProvider>
     </StyledEngineProvider>
   </React.StrictMode>
 );
diff --git a/src/theme.ts b/src/theme.ts
new file mode 100644
index 00000000..7c34b2bf
--- /dev/null
+++ b/src/theme.ts
@@ -0,0 +1,21 @@
+import { createTheme } from '@mui/material';
+
+const NBTheme = createTheme({
+  palette: {
+    primary: {
+      light: '#F5A89B',
+      main: '#D9748D',
+      dark: '#A8556F',
+      contrastText: '#FFFFFF',
+    },
+  },
+  components: {
+    MuiButton: {
+      defaultProps: {
+        sx: { textTransform: 'none' },
+      },
+    },
+  },
+});
+
+export default NBTheme;
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index 06be5be5..d641f9ae 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -35,36 +35,36 @@ export const modalities: {
     label: 'Arterial Spin Labeling',
     TermURL: 'nidm:ArterialSpinLabeling',
     name: 'ASL',
-    bgColor: 'bg-zinc-800',
+    bgColor: 'rgb(113, 113, 122)',
   },
   'http://purl.org/nidash/nidm#DiffusionWeighted': {
     label: 'Diffusion Weighted',
     TermURL: 'nidm:DiffusionWeighted',
     name: 'DWI',
-    bgColor: 'bg-red-700',
+    bgColor: 'rgb(205, 92, 92)',
   },
   'http://purl.org/nidash/nidm#EEG': {
     label: 'Electroencephalogram',
     TermURL: 'nidm:EEG',
     name: 'EEG',
-    bgColor: 'bg-rose-300',
+    bgColor: 'rgb(253, 164, 164)',
   },
   'http://purl.org/nidash/nidm#FlowWeighted': {
     label: 'Flow Weighted',
     TermURL: 'nidm:FlowWeighted',
     name: 'Flow',
-    bgColor: 'bg-sky-700',
+    bgColor: 'rgb(70, 130, 180)',
   },
   'http://purl.org/nidash/nidm#T1Weighted': {
     label: 'T1 Weighted',
     TermURL: 'nidm:T1Weighted',
     name: 'T1',
-    bgColor: 'bg-yellow-500',
+    bgColor: 'rgb(189, 183, 107)',
   },
   'http://purl.org/nidash/nidm#T2Weighted': {
     label: 'T2 Weighted',
     TermURL: 'nidm:T2Weighted',
     name: 'T2',
-    bgColor: 'bg-green-600',
+    bgColor: 'rgb(143, 188, 143)',
   },
 };
diff --git a/tailwind.config.js b/tailwind.config.js
index 07517aba..c652f132 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,14 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
-  theme: {
-    extend: {
-      gridTemplateRows: {
-        9: 'repeat(9, auto)',
-        10: 'repeat(10, auto)',
-      },
-    },
-  },
   plugins: [],
   corePlugins: {
     preflight: false,