diff --git a/package.json b/package.json
index cfaaf61c..1d7e7bb5 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.5",
   "description": "UI elements for building a frontend for conda-store",
   "scripts": {
-    "build": "tsc --build",
+    "build": "REACT_APP_VERSION=$npm_package_version tsc --build",
     "build:watch": "tsc --build --watch",
     "clean": "rimraf coverage lib storybook-static types .env  *.tsbuildinfo",
     "clean:slate": "yarn run clean && rimraf node_modules",
@@ -11,7 +11,7 @@
     "eslint:check": "eslint . --ext .ts,.tsx",
     "prepare": "yarnpkg run build && husky install",
     "prepublishOnly": "yarnpkg run clean && yarnpkg run webpack:prod",
-    "start": "webpack server --history-api-fallback",
+    "start": "REACT_APP_VERSION=$npm_package_version webpack server --history-api-fallback",
     "start:chromium": "webpack serve --open 'chromium'",
     "start:prod": "NODE_ENV=production webpack serve",
     "storybook": "start-storybook -p 6006",
@@ -19,9 +19,9 @@
     "test": "jest --coverage",
     "report": "open ./coverage/lcov-report/index.html",
     "watch": "npm-run-all -p *:watch",
-    "webpack": "webpack --color",
-    "webpack:prod": "NODE_ENV=production webpack --color",
-    "webpack:watch": "webpack --color --watch"
+    "webpack": "REACT_APP_VERSION=$npm_package_version webpack --color",
+    "webpack:prod": "REACT_APP_VERSION=$npm_package_version NODE_ENV=production webpack --color",
+    "webpack:watch": "REACT_APP_VERSION=$npm_package_version webpack --color --watch"
   },
   "keywords": [
     "conda-store"
diff --git a/src/App.tsx b/src/App.tsx
index 987933d3..dae49ed7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -12,7 +12,7 @@ import {
   prefGlobal
 } from "./preferences";
 import { store } from "./store";
-import { theme } from "./theme";
+import { condaStoreTheme, grayscaleTheme } from "./theme";
 
 import "../style/index.css";
 
@@ -78,7 +78,13 @@ export class App<
   render(): React.ReactNode {
     return (
       <PrefContext.Provider value={this.state.pref}>
-        <ThemeProvider theme={theme}>
+        <ThemeProvider
+          theme={
+            this.state.pref.styleType === "grayscale"
+              ? grayscaleTheme
+              : condaStoreTheme
+          }
+        >
           <Provider store={store}>
             <AppRouter />
           </Provider>
diff --git a/src/colors.tsx b/src/colors.tsx
new file mode 100644
index 00000000..f6e97ea7
--- /dev/null
+++ b/src/colors.tsx
@@ -0,0 +1,48 @@
+export const green = {
+  50: "#D6EEDC",
+  100: "#ADDCBA",
+  200: "#85CB97",
+  300: "#5CB975",
+  400: "#36AB55",
+  500: "#298642",
+  600: "#206532",
+  700: "#144321",
+  800: "#0A2210",
+  900: "#051108"
+};
+
+export const gray = {
+  50: "#F7F8F8",
+  100: "#E1E3E4",
+  200: "#C3C7CB",
+  300: "#A6ACB2",
+  400: "#90969C",
+  500: "#5B5F63",
+  600: "#44474A",
+  700: "#3C3C3B",
+  800: "#242628",
+  900: "#1A1C1D"
+};
+
+export const purple = {
+  50: "#E7E0F0",
+  100: "#D0C0E5",
+  200: "#B9A1DA",
+  300: "#A78BD0",
+  400: "#8966C2",
+  500: "#6643A8",
+  600: "#55309D",
+  700: "#3B216E",
+  800: "#2F1957",
+  900: "#231240"
+};
+
+export const red = "#D72D47";
+
+export const orange = "#F66A0A";
+
+export const blue = "#276BE9";
+
+export const white = "#FFFFFF";
+
+export const black = "#000000";
diff --git a/src/components/BlockContainerEditMode.tsx b/src/components/BlockContainerEditMode.tsx
index b12f5dc6..814ec744 100644
--- a/src/components/BlockContainerEditMode.tsx
+++ b/src/components/BlockContainerEditMode.tsx
@@ -1,8 +1,9 @@
 import React from "react";
 import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid";
 import Typography from "@mui/material/Typography";
-import Switch from "@mui/material/Switch";
-import FormControlLabel from "@mui/material/FormControlLabel";
+import { CodeIcon } from "../components";
+import { StyledSwitch } from "../styles";
 
 interface IBlockContainerProps {
   title: string;
@@ -43,21 +44,46 @@ export const BlockContainerEditMode = ({
           >
             {title}
           </Typography>
-          <FormControlLabel
-            control={
-              <Switch
+          <Grid
+            component="label"
+            container
+            spacing={1}
+            justifyContent={"center"}
+            sx={{ width: "auto" }}
+          >
+            <Grid item sx={{ alignSelf: "baseline" }}>
+              <Typography
+                data-testid="block-container-title"
+                sx={{
+                  fontSize: "14px",
+                  color: "#333",
+                  fontWeight: isEditMode ? "400" : "600"
+                }}
+              >
+                GUI
+              </Typography>
+            </Grid>
+            <Grid item sx={{ alignSelf: "baseline" }}>
+              <StyledSwitch
                 checked={isEditMode}
                 onClick={e => onToggleEditMode(!isEditMode)}
+                icon={<CodeIcon />}
+                checkedIcon={<CodeIcon />}
               />
-            }
-            label={
-              <Typography sx={{ fontSize: "13px", color: "#333" }}>
-                {isEditMode
-                  ? "Switch to Standard View"
-                  : "Switch to YAML Editor"}
+            </Grid>
+            <Grid item sx={{ alignSelf: "baseline" }}>
+              <Typography
+                data-testid="block-container-title"
+                sx={{
+                  fontSize: "14px",
+                  color: "#333",
+                  fontWeight: isEditMode ? "600" : "400"
+                }}
+              >
+                YAML
               </Typography>
-            }
-          />
+            </Grid>
+          </Grid>
         </Box>
       </Box>
       <Box
diff --git a/src/components/ConstraintSelect.tsx b/src/components/ConstraintSelect.tsx
index 8bdaf6df..bfbace4d 100644
--- a/src/components/ConstraintSelect.tsx
+++ b/src/components/ConstraintSelect.tsx
@@ -1,7 +1,6 @@
 import Select from "@mui/material/Select";
 import MenuItem from "@mui/material/MenuItem";
 import React from "react";
-import { getStylesForStyleType } from "../utils/helpers";
 
 interface IConstraintSelectProps {
   /**
@@ -18,19 +17,6 @@ export const ConstraintSelect = ({
   const constraints = ["=", ">", "<", ">=", "<="];
   const selectedConstraint = constraint === "==" ? "=" : constraint;
 
-  const inputStyles = getStylesForStyleType(
-    {
-      padding: "7px 9px !important",
-      backgroundColor: "#ECECEC",
-      borderRadius: "0px"
-    },
-    {
-      padding: "7px 9px !important",
-      backgroundColor: "#fff",
-      borderRadius: "0px"
-    }
-  );
-
   return (
     <Select
       defaultValue={selectedConstraint}
@@ -44,8 +30,16 @@ export const ConstraintSelect = ({
         borderRadius: "0px",
         width: "44px"
       }}
+      notched={false}
       inputProps={{
-        sx: inputStyles,
+        sx: {
+          padding: "7px 9px !important",
+          borderRadius: "0px",
+          "&::placeholder": {
+            fontSize: "14px",
+            fontWeight: 400
+          }
+        },
         "data-testid": "ConstraintSelectTest"
       }}
     >
diff --git a/src/components/Dialog.tsx b/src/components/Dialog.tsx
index 57fe3738..819cdb3e 100644
--- a/src/components/Dialog.tsx
+++ b/src/components/Dialog.tsx
@@ -45,14 +45,7 @@ export const AlertDialog = ({
         </DialogContentText>
       </DialogContent>
       <DialogActions>
-        <StyledButtonPrimary
-          sx={{
-            backgroundColor: "#b1b3b5"
-          }}
-          onClick={closeAction}
-        >
-          Cancel
-        </StyledButtonPrimary>
+        <StyledButtonPrimary onClick={closeAction}>Cancel</StyledButtonPrimary>
         <StyledButtonPrimary onClick={() => confirmAction()}>
           Delete
         </StyledButtonPrimary>
diff --git a/src/components/VersionSelect.tsx b/src/components/VersionSelect.tsx
index 2d8d30e5..85f5b189 100644
--- a/src/components/VersionSelect.tsx
+++ b/src/components/VersionSelect.tsx
@@ -43,19 +43,6 @@ export const VersionSelect = ({
 
   const [triggerQuery] = useLazyGetPackageVersionSuggestionsQuery();
 
-  const inputStyles = getStylesForStyleType(
-    {
-      padding: "7px 9px !important",
-      backgroundColor: "#ECECEC",
-      borderRadius: "0px"
-    },
-    {
-      padding: "7px 9px !important",
-      backgroundColor: "#fff",
-      borderRadius: "0px"
-    }
-  );
-
   const iconStyles = getStylesForStyleType(
     {
       backgroundColor: "#ECECEC",
@@ -165,13 +152,18 @@ export const VersionSelect = ({
         </IconButton>
       )}
       MenuProps={{ PaperProps: { sx: { maxHeight: 200 } } }}
+      notched={false}
       sx={{
         borderRadius: "0px",
         width: "110px",
         border: "none"
       }}
       inputProps={{
-        sx: inputStyles,
+        sx: {
+          padding: "7px 9px !important",
+          backgroundColor: palette.common.white,
+          borderRadius: "0px"
+        },
         "data-testid": "VersionSelectTest"
       }}
     >
diff --git a/src/components/icons/ArrowIcon.tsx b/src/components/icons/ArrowIcon.tsx
index 1bbec799..dc5f8e11 100644
--- a/src/components/icons/ArrowIcon.tsx
+++ b/src/components/icons/ArrowIcon.tsx
@@ -1,6 +1,8 @@
 import * as React from "react";
+import { useTheme } from "@mui/material/styles";
 
 export const ArrowIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  const theme = useTheme();
   return (
     <svg
       width={7}
@@ -10,7 +12,10 @@ export const ArrowIcon = (props: React.SVGProps<SVGSVGElement>) => {
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <path d="M0 12.82l6.29-6.41L0 0v12.82z" fill="#5F6368" />
+      <path
+        d="M0 12.82l6.29-6.41L0 0v12.82z"
+        fill={theme.palette.secondary.dark}
+      />
     </svg>
   );
 };
diff --git a/src/components/icons/BookIcon.tsx b/src/components/icons/BookIcon.tsx
new file mode 100644
index 00000000..9779d67d
--- /dev/null
+++ b/src/components/icons/BookIcon.tsx
@@ -0,0 +1,52 @@
+import * as React from "react";
+import { useTheme } from "@mui/material/styles";
+
+export const BookIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  const theme = useTheme();
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={16}
+      height={16}
+      viewBox="0 0 16 16"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M8 4.3335V12.3335"
+        stroke={theme.palette.secondary.main}
+        strokeLinecap="round"
+      />
+      <path
+        d="M13.667 4.3335V12.3335"
+        stroke={theme.palette.secondary.main}
+        strokeLinecap="round"
+      />
+      <path
+        d="M2.33301 4.3335V12.3335"
+        stroke={theme.palette.secondary.main}
+        strokeLinecap="round"
+      />
+      <path
+        d="M13.6667 12.3333C13.6667 12.3333 13 11 10.6667 11C8.33333 11 8 12.3333 8 12.3333"
+        stroke={theme.palette.secondary.main}
+        strokeLinecap="round"
+      />
+      <path
+        d="M2.33333 12.3333C2.33333 12.3333 3 11 5.33333 11C7.66667 11 8 12.3333 8 12.3333"
+        stroke={theme.palette.secondary.main}
+        strokeLinecap="round"
+      />
+      <path
+        d="M13.6667 4.33333C13.6667 4.33333 13 3 10.6667 3C8.33333 3 8 4.33333 8 4.33333"
+        stroke={theme.palette.secondary.main}
+        strokeLinecap="round"
+      />
+      <path
+        d="M2.33333 4.33333C2.33333 4.33333 3 3 5.33333 3C7.66667 3 8 4.33333 8 4.33333"
+        stroke={theme.palette.secondary.main}
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+};
diff --git a/src/components/icons/ChannelIcon.tsx b/src/components/icons/ChannelIcon.tsx
index e11f916b..426bc6bd 100644
--- a/src/components/icons/ChannelIcon.tsx
+++ b/src/components/icons/ChannelIcon.tsx
@@ -1,6 +1,8 @@
 import * as React from "react";
+import { useTheme } from "@mui/material/styles";
 
-export const ChannelIcon = ({ color }: any) => {
+export const ChannelIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  const theme = useTheme();
   return (
     <svg
       width={12}
@@ -9,10 +11,11 @@ export const ChannelIcon = ({ color }: any) => {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       style={{ marginRight: "10px", marginLeft: "5px" }}
+      {...props}
     >
       <path
         d="M3.95 0H1.17A1.17 1.17 0 000 1.17v6.26C0 8.076.524 8.6 1.17 8.6h2.78a1.17 1.17 0 001.17-1.17V1.17A1.17 1.17 0 003.95 0zM3.95 10.07H1.17A1.17 1.17 0 000 11.24v1.96c0 .646.524 1.17 1.17 1.17h2.78a1.17 1.17 0 001.17-1.17v-1.96a1.17 1.17 0 00-1.17-1.17zM7.76 14.38h2.78a1.17 1.17 0 001.17-1.17V6.95a1.17 1.17 0 00-1.17-1.17H7.76a1.17 1.17 0 00-1.17 1.17v6.26c0 .646.524 1.17 1.17 1.17zM7.76 4.31h2.78a1.17 1.17 0 001.17-1.17V1.18A1.17 1.17 0 0010.54.01H7.76a1.17 1.17 0 00-1.17 1.17v1.96c0 .646.524 1.17 1.17 1.17z"
-        fill={color}
+        fill={theme.palette.primary.main}
       />
     </svg>
   );
diff --git a/src/components/icons/CodeIcon.tsx b/src/components/icons/CodeIcon.tsx
new file mode 100644
index 00000000..6dfce25b
--- /dev/null
+++ b/src/components/icons/CodeIcon.tsx
@@ -0,0 +1,20 @@
+import * as React from "react";
+import { useTheme } from "@mui/material/styles";
+
+export const CodeIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  const theme = useTheme();
+  return (
+    <svg
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="m8 18l-6-6l6-6l1.425 1.425l-4.6 4.6L9.4 16.6L8 18Zm8 0l-1.425-1.425l4.6-4.6L14.6 7.4L16 6l6 6l-6 6Z"
+        fill={theme.palette.primary.contrastText}
+      />
+    </svg>
+  );
+};
diff --git a/src/components/icons/CondaLogo.tsx b/src/components/icons/CondaLogo.tsx
index 02e76df7..9606fc38 100644
--- a/src/components/icons/CondaLogo.tsx
+++ b/src/components/icons/CondaLogo.tsx
@@ -11,8 +11,8 @@ export const CondaLogo = (props: React.SVGProps<SVGSVGElement>) => {
 
   return (
     <svg
-      width={233}
-      height={266}
+      width="inherit"
+      height="inherit"
       viewBox="0 0 233 266"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
@@ -21,17 +21,14 @@ export const CondaLogo = (props: React.SVGProps<SVGSVGElement>) => {
       <path
         d="M104.02 145.337c-29.376-16.22-58.646-32.615-87.987-48.905-9.366-5.2-15.938-1.338-15.95 9.33-.035 16.783-.011 33.566-.011 50.36 0 16.783.117 33.578-.07 50.361-.06 5.727 1.947 9.424 7.205 12.064 29.693 14.929 59.257 30.116 88.89 45.162 8.122 4.119 14.648.035 14.648-9.166.035-32.627-.071-65.242.094-97.869.035-5.469-2.16-8.767-6.819-11.337z"
         fill={isGrayscaleStyleType ? colorTheme.gray[0] : colorTheme.green[0]}
-        fillOpacity={0.4}
       />
       <path
         d="M128.877 145.337c29.376-16.22 58.646-32.615 87.987-48.905 9.365-5.2 15.937-1.338 15.949 9.33.035 16.783.012 33.566.012 50.36 0 16.783-.117 33.578.07 50.361.059 5.727-1.948 9.424-7.206 12.064-29.692 14.929-59.256 30.116-88.89 45.162-8.122 4.119-14.647.035-14.647-9.166-.035-32.627.07-65.242-.094-97.869-.035-5.469 2.16-8.767 6.819-11.337zM174.25 15.487h-18.203v10.035h18.203s-3.134-3.556-3.333-4.695c-.2-1.138 3.333-5.34 3.333-5.34z"
         fill={isGrayscaleStyleType ? colorTheme.gray[1] : colorTheme.green[1]}
-        fillOpacity={0.4}
       />
       <path
         d="M153.312 58.289c-1.526-1.96-4.178-4.002-7.957-6.103-3.779-2.1-7.054-3.709-9.812-4.8-2.769-1.092-7.053-2.723-12.863-4.906-5.668-2.183-9.776-4.107-12.323-5.774-2.546-1.667-3.814-3.52-3.814-5.563 0-2.617 1.091-4.612 3.274-5.997 2.089-1.326 4.39-1.995 6.89-2.054v-.082c10.374.692 22.557 1.901 32.626 2.5 1.808.105 2.183-.376 2.078-2.066-.751-12.37-10.129-20.515-22.346-22.534a50.123 50.123 0 00-3.462-.422c-7.429-.939-12.406-.282-14.096-.012-8.438.892-15.62 3.732-21.547 8.532-7.277 5.892-10.903 13.556-10.903 23.003 0 9.307 2.875 16.537 8.614 21.7 5.74 5.165 13.767 9.484 24.095 12.981 7.417 2.324 12.499 4.296 15.269 5.892 2.758 1.596 4.142 3.568 4.142 5.891 0 2.618-1.161 4.73-3.497 6.326-2.324 1.596-5.528 2.394-9.6 2.394a41.42 41.42 0 01-5.141-.328c-11.29-.822-19.834-2.054-31.124-2.934-1.55-.118-1.948.234-1.925 1.76.188 11.913 9.26 21.196 21.102 22.827 2.171.294 7.699 1.385 12.358 1.432 1.491.094 2.993.141 4.518.141 13.521 0 23.802-3.052 30.855-9.154 7.054-6.103 10.575-14.096 10.575-23.99 0-4.06-.623-7.698-1.855-10.902-1.22-3.216-2.605-5.798-4.131-7.758zM131.494 7.647c2.653.13 4.589 2.242 4.472 4.87-.118 2.641-2.254 4.578-4.894 4.46-2.606-.117-4.624-2.3-4.519-4.882.118-2.57 2.336-4.565 4.941-4.448z"
         fill={isGrayscaleStyleType ? colorTheme.gray[0] : colorTheme.green[0]}
-        fillOpacity={0.4}
       />
     </svg>
   );
diff --git a/src/components/icons/DeleteIconAlt.tsx b/src/components/icons/DeleteIconAlt.tsx
index d2306d69..133e80ab 100644
--- a/src/components/icons/DeleteIconAlt.tsx
+++ b/src/components/icons/DeleteIconAlt.tsx
@@ -1,6 +1,8 @@
 import * as React from "react";
+import { useTheme } from "@mui/material/styles";
 
 export const DeleteIconAlt = (props: React.SVGProps<SVGSVGElement>) => {
+  const theme = useTheme();
   return (
     <svg
       width={14}
@@ -12,13 +14,13 @@ export const DeleteIconAlt = (props: React.SVGProps<SVGSVGElement>) => {
     >
       <path
         d="M5.088 1h4.094M5.088 1h4.094M1 1.819h12.232M5.48 5.09v6.55M8.755 5.09v6.55"
-        stroke="#333"
+        stroke={theme.palette.primary.main}
         strokeLinecap="square"
       />
       <path
         clipRule="evenodd"
         d="M2.243 2.004v11.688c.072.595.338.892.798.892h8.188c.57.056.855-.242.855-.892V2.004H2.243z"
-        stroke="#333"
+        stroke={theme.palette.primary.main}
       />
     </svg>
   );
diff --git a/src/components/icons/GroupIconAlt.tsx b/src/components/icons/GroupIconAlt.tsx
index 4f2a3ff2..2aa343c4 100644
--- a/src/components/icons/GroupIconAlt.tsx
+++ b/src/components/icons/GroupIconAlt.tsx
@@ -1,41 +1,45 @@
 import * as React from "react";
+import { useTheme } from "@mui/material/styles";
 
 export const GroupIconAlt = (props: React.SVGProps<SVGSVGElement>) => {
+  const theme = useTheme();
   return (
     <svg
-      width={27}
-      height={22}
-      viewBox="0 0 27 22"
-      fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
       {...props}
     >
+      <circle
+        cx="12"
+        cy="8"
+        r="2.5"
+        stroke={theme.palette.secondary[500]}
+        strokeLinecap="round"
+      />
+      <path
+        d="M13.7679 6.5C13.9657 6.15743 14.2607 5.88121 14.6154 5.70625C14.9702 5.5313 15.3689 5.46548 15.7611 5.51711C16.1532 5.56874 16.5213 5.73551 16.8187 5.99632C17.1161 6.25713 17.3295 6.60028 17.4319 6.98236C17.5342 7.36445 17.521 7.76831 17.3939 8.14288C17.2667 8.51745 17.0313 8.8459 16.7175 9.08671C16.4037 9.32751 16.0255 9.46985 15.6308 9.49572C15.2361 9.52159 14.8426 9.42983 14.5 9.23205"
+        stroke={theme.palette.secondary[500]}
+      />
+      <path
+        d="M10.2321 6.5C10.0343 6.15743 9.73935 5.88121 9.38458 5.70625C9.02981 5.5313 8.63113 5.46548 8.23895 5.51711C7.84677 5.56874 7.47871 5.73551 7.18131 5.99632C6.88391 6.25713 6.67053 6.60028 6.56815 6.98236C6.46577 7.36445 6.47899 7.76831 6.60614 8.14288C6.73329 8.51745 6.96866 8.8459 7.28248 9.08671C7.5963 9.32751 7.97448 9.46985 8.36919 9.49572C8.76391 9.52159 9.15743 9.42983 9.5 9.23205"
+        stroke={theme.palette.secondary[500]}
+      />
+      <path
+        d="M12 12.5C16.0802 12.5 17.1335 15.8022 17.4054 17.507C17.4924 18.0524 17.0523 18.5 16.5 18.5H7.5C6.94771 18.5 6.50763 18.0524 6.59461 17.507C6.86649 15.8022 7.91976 12.5 12 12.5Z"
+        stroke={theme.palette.secondary[500]}
+        strokeLinecap="round"
+      />
       <path
-        d="M13.092 7.547a3.773 3.773 0 100-7.547 3.773 3.773 0 000 7.547z"
-        fill=" #333"
+        d="M19.2964 15.4162L18.8113 15.5377L19.2964 15.4162ZM13.0869 12.5859L12.7177 12.2488L12.0972 12.9283L13.0049 13.0791L13.0869 12.5859ZM17.1811 16.5L16.7008 16.639L16.8053 17H17.1811V16.5ZM15.4998 12C16.5275 12 17.2493 12.5027 17.7781 13.2069C18.3175 13.9253 18.6343 14.8306 18.8113 15.5377L19.7814 15.2948C19.5902 14.5315 19.2327 13.4787 18.5778 12.6065C17.9124 11.7203 16.92 11 15.4998 11V12ZM13.4562 12.923C13.9565 12.375 14.6105 12 15.4998 12V11C14.2826 11 13.3734 11.5306 12.7177 12.2488L13.4562 12.923ZM13.0049 13.0791C15.3055 13.4614 16.2788 15.1801 16.7008 16.639L17.6614 16.361C17.1903 14.7326 16.0188 12.5663 13.1689 12.0927L13.0049 13.0791ZM18.3948 16H17.1811V17H18.3948V16ZM18.8113 15.5377C18.8651 15.7526 18.7073 16 18.3948 16V17C19.2655 17 20.015 16.2277 19.7814 15.2948L18.8113 15.5377Z"
+        fill={theme.palette.secondary[500]}
       />
       <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M21.757 21.614c0-.515-2.155-10.294-8.08-10.294-5.926 0-8.081 9.78-8.081 10.294 0 .515 16.16.515 16.16 0z"
-        fill=" #333"
+        d="M10.913 12.5859L10.995 13.0791L11.9027 12.9283L11.2823 12.2488L10.913 12.5859ZM4.70355 15.4162L5.18857 15.5377L4.70355 15.4162ZM6.8188 16.5V17H7.19465L7.2991 16.639L6.8188 16.5ZM8.50011 12C9.38944 12 10.0434 12.375 10.5438 12.923L11.2823 12.2488C10.6266 11.5306 9.71735 11 8.50011 11V12ZM5.18857 15.5377C5.36566 14.8306 5.6824 13.9253 6.22179 13.2069C6.7506 12.5027 7.47238 12 8.50011 12V11C7.07993 11 6.08755 11.7203 5.42211 12.6065C4.76725 13.4787 4.40968 14.5315 4.21853 15.2948L5.18857 15.5377ZM5.6051 16C5.29259 16 5.13477 15.7526 5.18857 15.5377L4.21853 15.2948C3.9849 16.2277 4.73436 17 5.6051 17V16ZM6.8188 16H5.6051V17H6.8188V16ZM7.2991 16.639C7.72116 15.1801 8.69448 13.4614 10.995 13.0791L10.831 12.0927C7.98113 12.5663 6.80962 14.7326 6.3385 16.361L7.2991 16.639Z"
+        fill={theme.palette.secondary[500]}
       />
-      <g opacity={0.72} fill=" #333">
-        <path d="M21.27 11.53a2.886 2.886 0 100-5.771 2.886 2.886 0 000 5.77z" />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M26.532 21.63c0-.361-1.374-7.215-5.155-7.215S16.22 21.27 16.22 21.63c0 .361 10.311.361 10.311 0z"
-        />
-      </g>
-      <g opacity={0.72} fill=" #333">
-        <path d="M5.05 11.53a2.886 2.886 0 100-5.771 2.886 2.886 0 000 5.77z" />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M10.312 21.63c0-.361-1.375-7.215-5.156-7.215C1.375 14.415 0 21.27 0 21.63c0 .361 10.312.361 10.312 0z"
-        />
-      </g>
     </svg>
   );
 };
diff --git a/src/components/icons/SearchIconAlt.tsx b/src/components/icons/SearchIconAlt.tsx
index 89ded201..0763f4b7 100644
--- a/src/components/icons/SearchIconAlt.tsx
+++ b/src/components/icons/SearchIconAlt.tsx
@@ -1,6 +1,8 @@
 import * as React from "react";
+import { useTheme } from "@mui/material/styles";
 
 export const SearchIconAlt = (props: React.SVGProps<SVGSVGElement>) => {
+  const theme = useTheme();
   return (
     <svg
       width={18}
@@ -12,7 +14,7 @@ export const SearchIconAlt = (props: React.SVGProps<SVGSVGElement>) => {
     >
       <path
         d="M13.09 12.64L17.53 17M7.77 15A7.06 7.06 0 10.66 7.94 7.08 7.08 0 007.77 15v0z"
-        stroke="#BCBFC4"
+        stroke={theme.palette.primary.main}
         strokeMiterlimit={10}
       />
     </svg>
diff --git a/src/components/icons/SquareIconAlt.tsx b/src/components/icons/SquareIconAlt.tsx
deleted file mode 100644
index 812b5ec1..00000000
--- a/src/components/icons/SquareIconAlt.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from "react";
-
-export const SquareIconAlt = (props: React.SVGProps<SVGSVGElement>) => {
-  return (
-    <svg
-      width={13}
-      height={13}
-      viewBox="0 0 13 13"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        d="M12.42 1H1v11.42h11.42V1z"
-        fill="#fff"
-        stroke="#333"
-        strokeMiterlimit={10}
-        strokeLinecap="round"
-      />
-    </svg>
-  );
-};
diff --git a/src/components/icons/UploadIcon.tsx b/src/components/icons/UploadIcon.tsx
index dfbd77b2..340a8eac 100644
--- a/src/components/icons/UploadIcon.tsx
+++ b/src/components/icons/UploadIcon.tsx
@@ -1,6 +1,8 @@
 import * as React from "react";
+import { useTheme } from "@mui/material/styles";
 
 export const UploadIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  const theme = useTheme();
   return (
     <svg
       width={12}
@@ -12,7 +14,7 @@ export const UploadIcon = (props: React.SVGProps<SVGSVGElement>) => {
     >
       <path
         d="M5.998 10.817V1m0 .09L2.343 4.745M5.998 1.09l3.656 3.655M10.907 14.688H1"
-        stroke="#333"
+        stroke={theme.palette.primary.main}
         strokeLinecap="round"
         strokeLinejoin="round"
       />
diff --git a/src/components/icons/index.tsx b/src/components/icons/index.tsx
index 9b514b3b..d0eca1f3 100644
--- a/src/components/icons/index.tsx
+++ b/src/components/icons/index.tsx
@@ -2,7 +2,8 @@ export * from "./CondaLogo";
 export * from "./GroupIconAlt";
 export * from "./ArrowIcon";
 export * from "./SearchIconAlt";
-export * from "./SquareIconAlt";
 export * from "./DeleteIconAlt";
 export * from "./UploadIcon";
 export * from "./ChannelIcon";
+export * from "./CodeIcon";
+export * from "./BookIcon";
diff --git a/src/features/artifacts/components/ArtifactsItem.tsx b/src/features/artifacts/components/ArtifactsItem.tsx
index e08ad121..c29b0ce6 100644
--- a/src/features/artifacts/components/ArtifactsItem.tsx
+++ b/src/features/artifacts/components/ArtifactsItem.tsx
@@ -1,6 +1,8 @@
 import Box from "@mui/material/Box";
 import Link from "@mui/material/Link";
 import React from "react";
+import OpenInNewIcon from "@mui/icons-material/OpenInNew";
+import { useTheme } from "@mui/material/styles";
 
 import { Artifact } from "../../../common/models";
 import { PrefContext } from "../../../preferences";
@@ -19,13 +21,36 @@ export const ArtifactItem = ({ artifact }: IArtifactsProps) => {
     ? pref.apiUrl
     : `${window.location.origin}${pref.apiUrl}`;
   const route = new URL(artifact.route, url).toString();
+  const theme = useTheme();
 
   return (
-    <Box sx={{ display: "flex", alignItems: "center" }}>
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-around",
+        "&:hover": {
+          borderBottom: "1px solid"
+        },
+        "&:focus": {
+          borderBottom: `1px solid ${theme.palette.primary.main}`,
+          backgroundColor: theme.palette.primary[50],
+          color: theme.palette.primary[600]
+        }
+      }}
+    >
+      <OpenInNewIcon />
       <Link
         href={route}
+        color="secondary"
         underline="none"
-        sx={{ color: "#333", fontSize: "13px" }}
+        sx={{
+          fontSize: "14px",
+          marginLeft: "5px",
+          "&:focus": {
+            color: theme.palette.primary[600]
+          }
+        }}
         target="_blank"
       >
         {artifact.name}
diff --git a/src/features/channels/components/ChannelsEdit.tsx b/src/features/channels/components/ChannelsEdit.tsx
index 9369cbcc..7f61169f 100644
--- a/src/features/channels/components/ChannelsEdit.tsx
+++ b/src/features/channels/components/ChannelsEdit.tsx
@@ -127,7 +127,7 @@ const BaseChannelsEdit = ({
       </DragDropContext>
       <AccordionDetails
         sx={{
-          border: `1px solid ${palette.primary.main}`,
+          border: `1px solid ${palette.secondary.light}`,
           borderTop: "0px",
           borderRadius: "0px",
           padding: "15px 21px",
@@ -138,7 +138,6 @@ const BaseChannelsEdit = ({
         <StyledButtonPrimary
           variant="contained"
           onClick={() => setIsAdding(true)}
-          isalttype="true"
         >
           + Add Channel
         </StyledButtonPrimary>
diff --git a/src/features/channels/components/ChannelsEditItem.tsx b/src/features/channels/components/ChannelsEditItem.tsx
index 6dd1a817..ffcb7933 100644
--- a/src/features/channels/components/ChannelsEditItem.tsx
+++ b/src/features/channels/components/ChannelsEditItem.tsx
@@ -3,6 +3,7 @@ import TextField from "@mui/material/TextField";
 import Typography from "@mui/material/Typography";
 import React, { memo, useState } from "react";
 import { ChannelIcon, DeleteIconAlt } from "../../../components";
+import useTheme from "@mui/material/styles/useTheme";
 
 import { StyledIconButton } from "../../../styles";
 import {
@@ -28,6 +29,7 @@ const BaseChannelsEditItem = ({
 }: IChannelsEditItemProps) => {
   const [name, setName] = useState(channelName);
   const [isEditing, setIsEditing] = useState(false);
+  const { palette } = useTheme();
 
   const dragIcon = getIconForStyleType(
     <ChannelIcon color="#C4C7CC" />,
@@ -77,7 +79,7 @@ const BaseChannelsEditItem = ({
             onClick={() => setIsEditing(true)}
             sx={{ "&:hover": { cursor: "pointer" } }}
           >
-            <Typography sx={{ fontSize: "13px", color: "#333" }}>
+            <Typography sx={{ fontSize: "13px", color: palette.common.black }}>
               {channelName}
             </Typography>
           </Box>
diff --git a/src/features/environmentCreate/components/CreateEnvironmentPackages.tsx b/src/features/environmentCreate/components/CreateEnvironmentPackages.tsx
index fb97ad42..761a6a84 100644
--- a/src/features/environmentCreate/components/CreateEnvironmentPackages.tsx
+++ b/src/features/environmentCreate/components/CreateEnvironmentPackages.tsx
@@ -111,7 +111,7 @@ export const CreateEnvironmentPackages = ({
       </StyledAccordionDetails>
       <AccordionDetails
         sx={{
-          border: `1px solid ${palette.primary.main}`,
+          border: `1px solid ${palette.secondary.light}`,
           borderTop: "0px",
           borderRadius: "0px 0px 5px 5px",
           padding: "15px 21px",
@@ -122,7 +122,6 @@ export const CreateEnvironmentPackages = ({
         <StyledButtonPrimary
           variant="contained"
           onClick={() => setIsAdding(true)}
-          isalttype="true"
         >
           + Add Package
         </StyledButtonPrimary>
diff --git a/src/features/environmentCreate/components/Specification/SpecificationCreate.tsx b/src/features/environmentCreate/components/Specification/SpecificationCreate.tsx
index 4ac578a3..0c895edd 100644
--- a/src/features/environmentCreate/components/Specification/SpecificationCreate.tsx
+++ b/src/features/environmentCreate/components/Specification/SpecificationCreate.tsx
@@ -125,11 +125,7 @@ export const SpecificationCreate = ({ onCreateEnvironment }: any) => {
             marginBottom: "10px"
           }}
         >
-          <StyledButtonPrimary
-            sx={buttonStyles}
-            onClick={handleSubmit}
-            isalttype="true"
-          >
+          <StyledButtonPrimary sx={buttonStyles} onClick={handleSubmit}>
             Create
           </StyledButtonPrimary>
         </Box>
diff --git a/src/features/environmentDetails/components/EnvironmentDetailsHeader.tsx b/src/features/environmentDetails/components/EnvironmentDetailsHeader.tsx
index 24333d65..64df9ef4 100644
--- a/src/features/environmentDetails/components/EnvironmentDetailsHeader.tsx
+++ b/src/features/environmentDetails/components/EnvironmentDetailsHeader.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import TextField from "@mui/material/TextField";
+import useTheme from "@mui/material/styles/useTheme";
 import { StyledButtonPrimary } from "../../../styles";
 import { useAppDispatch, useAppSelector } from "../../../hooks";
 import {
@@ -26,6 +27,7 @@ export const EnvironmentDetailsHeader = ({
 }: IEnvironmentDetailsHeaderProps) => {
   const { mode } = useAppSelector(state => state.environmentDetails);
   const dispatch = useAppDispatch();
+  const { palette } = useTheme();
 
   return (
     <Box
@@ -39,7 +41,13 @@ export const EnvironmentDetailsHeader = ({
       {(mode === EnvironmentDetailsModes.READ ||
         mode === EnvironmentDetailsModes.EDIT) && (
         <>
-          <Typography sx={{ fontSize: "16px", color: "#333", fontWeight: 600 }}>
+          <Typography
+            sx={{
+              fontSize: "16px",
+              color: palette.common.black,
+              fontWeight: 600
+            }}
+          >
             {envName}
           </Typography>
           {mode === EnvironmentDetailsModes.READ && (
@@ -61,17 +69,17 @@ export const EnvironmentDetailsHeader = ({
             autoFocus
             placeholder="Environment name"
             sx={{
-              backgroundColor: "#EBECEE",
+              backgroundColor: palette.grey[100],
               minWidth: "450px",
               "&:hover fieldset": {
-                borderColor: "gray"
+                borderColor: palette.secondary.main
               }
             }}
             inputProps={{
               style: {
                 padding: "8px 15px",
                 fontSize: "15px",
-                color: "#333"
+                color: palette.common.black
               }
             }}
             onChange={e => onUpdateName(e.target.value)}
diff --git a/src/features/environmentDetails/components/Specification/SpecificationEdit.tsx b/src/features/environmentDetails/components/Specification/SpecificationEdit.tsx
index bc69eaab..49c4db35 100644
--- a/src/features/environmentDetails/components/Specification/SpecificationEdit.tsx
+++ b/src/features/environmentDetails/components/Specification/SpecificationEdit.tsx
@@ -215,7 +215,6 @@ export const SpecificationEdit = ({
           <StyledButtonPrimary
             sx={{ padding: "5px 48px" }}
             onClick={onCancelEdition}
-            isalttype="true"
           >
             Cancel
           </StyledButtonPrimary>
@@ -223,7 +222,6 @@ export const SpecificationEdit = ({
             sx={{ padding: "5px 48px" }}
             onClick={onEditEnvironment}
             disabled={!envIsUpdated}
-            isalttype="true"
           >
             Save
           </StyledButtonPrimary>
diff --git a/src/features/environments/components/Environment.tsx b/src/features/environments/components/Environment.tsx
index 3ecf18ac..1f35642b 100644
--- a/src/features/environments/components/Environment.tsx
+++ b/src/features/environments/components/Environment.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 import CircleIcon from "@mui/icons-material/Circle";
 import ListItemIcon from "@mui/material/ListItemIcon";
+import Button from "@mui/material/Button";
 import { Environment as EnvironmentModel } from "../../../common/models";
-import { StyledIconButton } from "../../../styles";
-import { getStylesForStyleType } from "../../../utils/helpers";
+import { useTheme } from "@mui/material/styles";
 
 interface IEnvironmentProps {
   /**
@@ -22,37 +22,51 @@ export const Environment = ({
   selectedEnvironmentId
 }: IEnvironmentProps) => {
   const isSelected = selectedEnvironmentId === environment.id;
-
-  const circleIconStyles = getStylesForStyleType(
-    { width: "9px", height: "9px", color: isSelected ? "#333" : "#5f6367" },
-    { width: "9px", height: "9px", color: isSelected ? "#33A852" : "#B9D9BD" }
-  );
-
-  const buttonStyles = getStylesForStyleType(
-    {
-      textTransform: "none",
-      fontSize: "13px",
-      fontWeight: isSelected ? 600 : 400,
-      color: "#333"
-    },
-    {
-      textTransform: "none",
-      fontSize: "13px",
-      fontWeight: isSelected ? 600 : 400,
-      color: isSelected ? "#33A852" : "#333"
-    }
-  );
+  const theme = useTheme();
 
   return (
     <>
       <ListItemIcon
-        sx={{ width: "5px", minWidth: "auto", marginRight: "12px" }}
+        sx={{
+          width: "5px",
+          minWidth: "auto",
+          marginRight: "12px"
+        }}
       >
-        <CircleIcon sx={circleIconStyles} />
+        <CircleIcon
+          sx={{
+            width: "5px",
+            height: "5px",
+            color: isSelected
+              ? theme.palette.primary.main
+              : theme.palette.common.black
+          }}
+        />
       </ListItemIcon>
-      <StyledIconButton sx={buttonStyles} onClick={onClick}>
+      <Button
+        onClick={onClick}
+        sx={{
+          color: isSelected
+            ? theme.palette.primary.main
+            : theme.palette.common.black,
+          backgroundColor: isSelected ? theme.palette.primary[50] : "none",
+          borderRadius: "0px",
+          padding: "0px",
+          minWidth: "auto",
+          textTransform: "none",
+          fontSize: "13px",
+          fontWeight: isSelected ? 600 : 400,
+          textDecoration: isSelected ? "underline" : "none",
+          textUnderlineOffset: "0.3em",
+          ":hover": {
+            boxShadow: "none",
+            textDecoration: "underline",
+            textUnderlineOffset: "0.3em"
+          }
+        }}
+      >
         {environment.name}
-      </StyledIconButton>
+      </Button>
     </>
   );
 };
diff --git a/src/features/environments/components/EnvironmentDropdown.tsx b/src/features/environments/components/EnvironmentDropdown.tsx
index 0f21716b..5fa5d8a8 100644
--- a/src/features/environments/components/EnvironmentDropdown.tsx
+++ b/src/features/environments/components/EnvironmentDropdown.tsx
@@ -2,12 +2,12 @@ import React, { useState } from "react";
 import Accordion from "@mui/material/Accordion";
 import AddIcon from "@mui/icons-material/Add";
 import Tooltip from "@mui/material/Tooltip";
-import IconButton from "@mui/material/IconButton";
 import Typography from "@mui/material/Typography";
 import Box from "@mui/material/Box";
 import AccordionDetails from "@mui/material/AccordionDetails";
 import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
+import useTheme from "@mui/material/styles/useTheme";
 import { Environment } from "./Environment";
 import { INamespaceEnvironments } from "../../../common/interfaces";
 import {
@@ -20,12 +20,7 @@ import {
   toggleNewEnvironmentView
 } from "../../../features/tabs";
 import { useAppDispatch, useAppSelector } from "../../../hooks";
-import { StyledAccordionSummary } from "../../../styles";
-import { getStylesForStyleType } from "../../../utils/helpers";
-import {
-  environmentAddIconGrayscaleStyles,
-  environmentAddIconGreenAccentStyles
-} from "../styles";
+import { StyledAccordionSummary, StyledIconButton } from "../../../styles";
 import { ArrowIcon } from "../../../components";
 
 interface IEnvironmentDropdownProps {
@@ -41,11 +36,7 @@ export const EnvironmentDropdown = ({
   const { selectedEnvironment } = useAppSelector(state => state.tabs);
   const [isExpanded, setIsExpanded] = useState(false);
   const dispatch = useAppDispatch();
-
-  const addIconStyles = getStylesForStyleType(
-    environmentAddIconGrayscaleStyles,
-    environmentAddIconGreenAccentStyles
-  );
+  const { palette } = useTheme();
 
   const onCreateNewEnvironmentTab = (
     event: React.SyntheticEvent,
@@ -79,7 +70,7 @@ export const EnvironmentDropdown = ({
         sx={{
           flexDirection: "row-reverse",
           border: "none",
-          paddingRight: 0
+          paddingRight: "1px"
         }}
         expandIcon={<ArrowIcon />}
       >
@@ -96,7 +87,7 @@ export const EnvironmentDropdown = ({
             sx={{
               fontWeight: 600,
               fontSize: "14px",
-              color: " #333"
+              color: palette.common.black
             }}
           >
             {namespace}
@@ -108,14 +99,12 @@ export const EnvironmentDropdown = ({
                 : `You do not have permission to create an environment in the ${namespace} namespace`
             }
           >
-            <IconButton onClick={e => onCreateNewEnvironmentTab(e, namespace)}>
-              <AddIcon
-                sx={{
-                  ...addIconStyles,
-                  ...(!canCreate && { color: "#e5e5e5" })
-                }}
-              />
-            </IconButton>
+            <StyledIconButton
+              onClick={e => onCreateNewEnvironmentTab(e, namespace)}
+              disabled={!canCreate}
+            >
+              <AddIcon />
+            </StyledIconButton>
           </Tooltip>
         </Box>
       </StyledAccordionSummary>
diff --git a/src/features/environments/components/Environments.tsx b/src/features/environments/components/Environments.tsx
index c6de60f5..a5c1f11f 100644
--- a/src/features/environments/components/Environments.tsx
+++ b/src/features/environments/components/Environments.tsx
@@ -1,5 +1,8 @@
 import React, { memo, useEffect, useReducer } from "react";
 import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import Link from "@mui/material/Link";
+import useTheme from "@mui/material/styles/useTheme";
 import { EnvironmentsList } from "./EnvironmentsList";
 import { debounce } from "lodash";
 import { EnvironmentsSearch } from "./EnvironmentsSearch";
@@ -14,13 +17,13 @@ import {
   initialState as NInitialState,
   namespacesReducer
 } from "../../../features/namespaces/reducer";
-import { CondaLogo } from "../../../components";
 import {
   isNamespaceListed,
   checkMyPrimaryNamespace,
   namespacesPermissionsMapper
 } from "../../../utils/helpers/namespaces";
 import { Namespace } from "../../../common/models";
+import { BookIcon } from "../../../components";
 
 export interface IBaseEnvironments {
   refreshEnvironments: boolean;
@@ -32,6 +35,8 @@ const BaseEnvironments = ({
   onUpdateRefreshEnvironments
 }: IBaseEnvironments) => {
   const size = 100;
+  const { palette } = useTheme();
+  const version: string = process.env.REACT_APP_VERSION as string;
   const [state, dispatch] = useReducer(environmentsReducer, initialState);
   const [stateN, dispatchN] = useReducer(namespacesReducer, NInitialState);
 
@@ -153,18 +158,21 @@ const BaseEnvironments = ({
     <Box
       sx={{
         width: "100%",
-        position: "relative",
-        borderRight: "1px solid #E0E0E0"
+        borderRight: `1px solid ${palette.secondary.light}`,
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "space-between"
       }}
     >
-      <Box>
+      <Box sx={{ borderBottom: `1px solid ${palette.secondary.light}` }}>
         <EnvironmentsSearch onChange={e => handleChange(e.target.value)} />
       </Box>
       <Box
         sx={{
-          position: "relative",
           zIndex: "1",
-          paddingTop: "15px"
+          paddingTop: "15px",
+          flex: 4,
+          overflowY: "auto"
         }}
       >
         {state.data && (
@@ -178,15 +186,64 @@ const BaseEnvironments = ({
         )}
       </Box>
       <Box
+        bgcolor={palette.common.white}
         sx={{
-          position: "absolute",
-          width: "100%",
-          textAlign: "center",
-          bottom: "20px",
-          zIndex: "0"
+          bottom: 5,
+          padding: "3px 12px",
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          backgroundColor: palette.common.white
         }}
       >
-        <CondaLogo />
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            "&:hover": {
+              borderBottom: "1px solid"
+            },
+            "&:focus": {
+              borderBottom: `1px solid ${palette.primary.main}`,
+              backgroundColor: palette.primary[50],
+              color: palette.primary[600]
+            }
+          }}
+        >
+          <BookIcon></BookIcon>
+          <Link
+            href={"https://conda.store/en/latest/"}
+            color="secondary"
+            underline="none"
+            sx={{
+              color: palette.secondary.main,
+              fontWeight: 400,
+              fontSize: "14px",
+              marginLeft: "5px"
+            }}
+            target="_blank"
+          >
+            <Typography
+              sx={{
+                color: palette.secondary.main,
+                fontWeight: 400,
+                fontSize: "14px"
+              }}
+            >
+              Read the docs!
+            </Typography>
+          </Link>
+        </Box>
+        <Typography
+          sx={{
+            color: palette.secondary.main,
+            fontWeight: 400,
+            fontSize: "14px",
+            marginRight: "5px"
+          }}
+        >
+          Version: {version}
+        </Typography>
       </Box>
     </Box>
   );
diff --git a/src/features/environments/components/EnvironmentsList.tsx b/src/features/environments/components/EnvironmentsList.tsx
index aebb291b..022901d0 100644
--- a/src/features/environments/components/EnvironmentsList.tsx
+++ b/src/features/environments/components/EnvironmentsList.tsx
@@ -2,16 +2,17 @@ import Box from "@mui/material/Box";
 import CircularProgress from "@mui/material/CircularProgress";
 import Typography from "@mui/material/Typography";
 import React, { useEffect, useMemo, useRef } from "react";
+import useTheme from "@mui/material/styles/useTheme";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { INamespaceEnvironments } from "../../../common/interfaces";
 import { Environment, Namespace } from "../../../common/models";
-import { GroupIconAlt } from "../../../components";
 import { StyledScrollContainer } from "../../../styles";
 import {
   getMyPrimaryNamespace,
   getSharedNamespaces,
   namespaceMapper
 } from "../../../utils/helpers/namespaces";
+import { GroupIconAlt } from "../../../components";
 import { EnvironmentDropdown } from "./EnvironmentDropdown";
 
 interface IEnvironmentsListProps {
@@ -37,6 +38,7 @@ export const EnvironmentsList = ({
   search
 }: IEnvironmentsListProps) => {
   const scrollRef = useRef<HTMLDivElement | null>(null);
+  const { palette } = useTheme();
 
   const { primaryNamespace, sharedNamespaces } = useMemo(() => {
     // Group existing environments by namespace...
@@ -56,11 +58,7 @@ export const EnvironmentsList = ({
   }, [search]);
 
   return (
-    <StyledScrollContainer
-      sx={{ height: "calc(100vh - 130px)" }}
-      id="environmentsScroll"
-      ref={scrollRef}
-    >
+    <StyledScrollContainer id="environmentsScroll" ref={scrollRef}>
       <InfiniteScroll
         scrollableTarget="environmentsScroll"
         style={{ overflow: "hidden", paddingBottom: "25px" }}
@@ -80,7 +78,12 @@ export const EnvironmentsList = ({
         }
       >
         {primaryNamespace && (
-          <Box sx={{ minHeight: "50px", margin: "-5px 0 5px 0px" }}>
+          <Box
+            sx={{
+              minHeight: "50px",
+              margin: "-5px 0 5px 0px"
+            }}
+          >
             <EnvironmentDropdown data={primaryNamespace} />
           </Box>
         )}
@@ -88,21 +91,21 @@ export const EnvironmentsList = ({
           sx={{
             display: "flex",
             alignItems: "center",
-            margin: "0 0 5px 12px"
+            margin: "0 0 5px 12px",
+            paddingTop: "20px"
           }}
         >
+          <GroupIconAlt style={{ marginRight: "10px", width: "27" }} />
           <Typography
             sx={{
-              textTransform: "uppercase",
               fontWeight: 600,
               marginRight: "10px",
-              fontSize: "13px",
-              color: " #333"
+              fontSize: "15px",
+              color: palette.grey[700]
             }}
           >
-            Shared environments
+            Shared Environments
           </Typography>
-          <GroupIconAlt style={{ marginLeft: "10px", scale: ".8" }} />
         </Box>
         {sharedNamespaces &&
           sharedNamespaces.map((namespace: INamespaceEnvironments) => (
diff --git a/src/features/environments/components/EnvironmentsSearch.tsx b/src/features/environments/components/EnvironmentsSearch.tsx
index 86a3320c..447d650e 100644
--- a/src/features/environments/components/EnvironmentsSearch.tsx
+++ b/src/features/environments/components/EnvironmentsSearch.tsx
@@ -2,10 +2,11 @@ import Typography from "@mui/material/Typography";
 import OutlinedInput from "@mui/material/OutlinedInput";
 import Box from "@mui/material/Box";
 import InputAdornment from "@mui/material/InputAdornment";
+import useTheme from "@mui/material/styles/useTheme";
 import React from "react";
 
 import { PrefContext } from "../../../preferences";
-import { SearchIconAlt } from "../../../components";
+import { SearchIconAlt, CondaLogo } from "../../../components";
 import { AuthButton } from "../../auth";
 
 interface IEnvironmentsSearchProps {
@@ -17,6 +18,7 @@ interface IEnvironmentsSearchProps {
 
 export const EnvironmentsSearch = ({ onChange }: IEnvironmentsSearchProps) => {
   const prefs = React.useContext(PrefContext);
+  const { palette } = useTheme();
   const showAuthButton = prefs.showAuthButton;
   const isCookieAuthMethod = prefs.authMethod === "cookie";
   let authButton;
@@ -32,23 +34,34 @@ export const EnvironmentsSearch = ({ onChange }: IEnvironmentsSearchProps) => {
         position: "relative"
       }}
     >
+      <Box
+        sx={{
+          position: "absolute",
+          top: 14,
+          height: 35,
+          width: "auto"
+        }}
+      >
+        <CondaLogo transform="0.5"></CondaLogo>
+      </Box>
+      {authButton}
       <Typography
         data-testid="env-search-title"
         sx={{
           marginBottom: "14px",
           textAlign: "left",
-          color: " #333",
+          color: palette.common.black,
           fontWeight: 600,
           fontSize: "14px",
-          marginTop: "40px"
+          marginTop: "55px"
         }}
       >
         Package Manager
       </Typography>
-      {authButton}
       <OutlinedInput
         onChange={onChange}
         size="small"
+        notched={false}
         endAdornment={
           <InputAdornment position="end">
             <SearchIconAlt style={{ marginRight: "5px" }} />
diff --git a/src/features/environments/styles/environmentAddIconStyles.ts b/src/features/environments/styles/environmentAddIconStyles.ts
deleted file mode 100644
index ff4bfa7a..00000000
--- a/src/features/environments/styles/environmentAddIconStyles.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export const environmentAddIconGrayscaleStyles = {
-  width: "15px",
-  height: "15px",
-  color: "#2B2B2B"
-};
-
-export const environmentAddIconGreenAccentStyles = {
-  width: "18px",
-  height: "18px",
-  color: "#33A852"
-};
diff --git a/src/features/environments/styles/index.ts b/src/features/environments/styles/index.ts
index f8a88138..cc9b79a2 100644
--- a/src/features/environments/styles/index.ts
+++ b/src/features/environments/styles/index.ts
@@ -1,2 +1 @@
 export * from "./environmentSearchTitleStyles";
-export * from "./environmentAddIconStyles";
diff --git a/src/features/metadata/components/BuildDropdown.tsx b/src/features/metadata/components/BuildDropdown.tsx
index 21710ed6..b8d8f485 100644
--- a/src/features/metadata/components/BuildDropdown.tsx
+++ b/src/features/metadata/components/BuildDropdown.tsx
@@ -6,7 +6,6 @@ import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import IconButton from "@mui/material/IconButton";
 import { useAppDispatch } from "../../../hooks";
 import { currentBuildIdChanged } from "..";
-import { getStylesForStyleType } from "../../../utils/helpers";
 
 interface IBuildProps {
   /**
@@ -27,29 +26,6 @@ export const Build = ({ builds, selectedBuildId }: IBuildProps) => {
   const { palette } = useTheme();
   const [open, setOpen] = useState(false);
 
-  const selectStyles = getStylesForStyleType(
-    {
-      borderRadius: "0px",
-      marginBottom: "10px"
-    },
-    {
-      borderRadius: "0px",
-      marginBottom: "10px",
-      backgroundColor: open ? "#A8DAB5" : "initial"
-    }
-  );
-
-  const paperProps = getStylesForStyleType(
-    {},
-    {
-      backgroundColor: "#A8DAB5",
-      padding: "0px",
-      boxShadow: "none",
-      borderRadius: "0px",
-      border: "1px solid #BCBFC4"
-    }
-  ) as React.CSSProperties;
-
   const handleChange = (e: SelectChangeEvent<any>) => {
     const newCurrentBuild = builds.find(
       build => build.id === Number(e.target.value)
@@ -65,10 +41,20 @@ export const Build = ({ builds, selectedBuildId }: IBuildProps) => {
       open={open}
       onClose={() => setOpen(false)}
       onOpen={() => setOpen(true)}
-      sx={selectStyles}
+      sx={{
+        borderRadius: "0px",
+        marginBottom: "10px",
+        backgroundColor: open ? palette.primary[50] : "initial"
+      }}
       MenuProps={{
         PaperProps: {
-          style: paperProps
+          style: {
+            backgroundColor: palette.primary[50],
+            padding: "0px",
+            boxShadow: "none",
+            borderRadius: "0px",
+            border: `1px solid  ${palette.secondary.light}`
+          }
         },
         MenuListProps: {
           style: {
@@ -96,7 +82,7 @@ export const Build = ({ builds, selectedBuildId }: IBuildProps) => {
         sx: {
           padding: "7px 9px !important",
           fontSize: "13px",
-          background: "#FFF"
+          background: palette.common.white
         }
       }}
     >
diff --git a/src/features/metadata/components/Description.tsx b/src/features/metadata/components/Description.tsx
index 86fbffb3..33649722 100644
--- a/src/features/metadata/components/Description.tsx
+++ b/src/features/metadata/components/Description.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import Box from "@mui/material/Box";
 import TextField from "@mui/material/TextField";
+import useTheme from "@mui/material/styles/useTheme";
 import { StyledMetadataItem } from "../../../styles/StyledMetadataItem";
 import { EnvironmentDetailsModes } from "../../../features/environmentDetails";
 
@@ -18,6 +19,8 @@ export const Description = ({
   description,
   onChangeDescription
 }: IDescriptionProps) => {
+  const { palette } = useTheme();
+
   return (
     <Box>
       {mode === EnvironmentDetailsModes.READ && description && (
@@ -39,7 +42,7 @@ export const Description = ({
               value={description}
               placeholder="Enter here the description of your environment"
               sx={{
-                backgroundColor: "#F1F1F1",
+                backgroundColor: palette.grey[100],
                 width: "100%",
                 marginBottom: "10px"
               }}
diff --git a/src/features/metadata/components/EnvMetadata.tsx b/src/features/metadata/components/EnvMetadata.tsx
index 0b417cb3..d978a1bb 100644
--- a/src/features/metadata/components/EnvMetadata.tsx
+++ b/src/features/metadata/components/EnvMetadata.tsx
@@ -87,7 +87,6 @@ export const EnvMetadata = ({
             <StyledButtonPrimary
               variant="contained"
               onClick={() => defaultEnvironmentChanged(newCurrentBuild)}
-              isalttype="true"
               disabled={specificationDidChange()}
             >
               Change environment version
diff --git a/src/features/requestedPackages/components/AddRequestedPackage.tsx b/src/features/requestedPackages/components/AddRequestedPackage.tsx
index ebac6d24..2f757b09 100644
--- a/src/features/requestedPackages/components/AddRequestedPackage.tsx
+++ b/src/features/requestedPackages/components/AddRequestedPackage.tsx
@@ -7,6 +7,7 @@ import { useLazyGetPackageSuggestionsQuery } from "../requestedPackagesApiSlice"
 import { debounce } from "lodash";
 import { matchSorter } from "match-sorter";
 import { CircularProgress } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import {
   ActionTypes,
   initialState,
@@ -31,6 +32,7 @@ export const AddRequestedPackage = ({
   isCreating
 }: IAddRequestedPackageProps) => {
   const size = 100;
+  const theme = useTheme();
   const [state, dispatch] = useReducer(requestedPackagesReducer, initialState);
 
   const [triggerQuery] = useLazyGetPackageSuggestionsQuery();
@@ -128,7 +130,7 @@ export const AddRequestedPackage = ({
         <Autocomplete
           freeSolo
           selectOnFocus
-          sx={{ width: "140px" }}
+          sx={{ width: "140px", color: theme.palette.secondary.main }}
           options={uniquePackageNamesList}
           onChange={(event, value) => handleSubmit(value)}
           ListboxProps={{
@@ -147,6 +149,7 @@ export const AddRequestedPackage = ({
               autoFocus
               {...params}
               size="small"
+              sx={{ borderColor: theme.palette.secondary.main }}
               InputProps={{
                 ...params.InputProps,
                 endAdornment: (
diff --git a/src/features/requestedPackages/components/RequestedPackagesEdit.tsx b/src/features/requestedPackages/components/RequestedPackagesEdit.tsx
index f6627891..cd3d983f 100644
--- a/src/features/requestedPackages/components/RequestedPackagesEdit.tsx
+++ b/src/features/requestedPackages/components/RequestedPackagesEdit.tsx
@@ -132,7 +132,7 @@ export const RequestedPackagesEdit = ({
       </StyledAccordionDetails>
       <AccordionDetails
         sx={{
-          border: `1px solid ${palette.primary.main}`,
+          border: `1px solid ${palette.secondary.light}`,
           borderTop: "0px",
           borderRadius: "0px",
           padding: "15px 21px",
@@ -142,7 +142,6 @@ export const RequestedPackagesEdit = ({
       >
         <StyledButtonPrimary
           variant="contained"
-          isalttype="true"
           onClick={() => setIsAdding(true)}
         >
           + Add Package
diff --git a/src/index.tsx b/src/index.tsx
index 6d5d9c40..da383373 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,4 +1,5 @@
 export * from "./App";
 export { IPreferences } from "./preferences";
 export { store } from "./store";
-export { theme, themeDecorator } from "./theme";
+export { grayscaleTheme, condaStoreTheme, themeDecorator } from "./theme";
+export * from "./colors";
diff --git a/src/styles/StyledAccordionDetails.tsx b/src/styles/StyledAccordionDetails.tsx
index f074bc12..156ecc16 100644
--- a/src/styles/StyledAccordionDetails.tsx
+++ b/src/styles/StyledAccordionDetails.tsx
@@ -12,7 +12,7 @@ export const StyledAccordionDetails = styled(AccordionDetails, {
   }) => ({
     border:
       styleType === "grayscale"
-        ? `1px solid ${palette.primary.main}`
+        ? `1px solid ${palette.secondary.light}`
         : "1px solid #BCBFC4",
     borderTop: "none",
     borderRadius: styleType === "grayscale" ? "0px 0px 5px 5px" : "Opx",
diff --git a/src/styles/StyledAccordionSummary.tsx b/src/styles/StyledAccordionSummary.tsx
index a6d94ff7..e67731da 100644
--- a/src/styles/StyledAccordionSummary.tsx
+++ b/src/styles/StyledAccordionSummary.tsx
@@ -15,7 +15,7 @@ export const StyledAccordionSummary = styled(AccordionSummary, {
     height: 40,
     border:
       styleType === "grayscale"
-        ? `1px solid ${palette.primary.main}`
+        ? `1px solid ${palette.secondary.light}`
         : "1px solid #BCBFC4",
     borderRadius: styleType === "grayscale" ? "5px" : "0px",
     "&.Mui-expanded": {
diff --git a/src/styles/StyledButtonPrimary.tsx b/src/styles/StyledButtonPrimary.tsx
index 5e0b1888..d939ad6a 100644
--- a/src/styles/StyledButtonPrimary.tsx
+++ b/src/styles/StyledButtonPrimary.tsx
@@ -1,32 +1,35 @@
 import Button from "@mui/material/Button";
 import { styled } from "@mui/system";
-import React from "react";
-import { PrefContext } from "../preferences";
 
 export const StyledButtonPrimary = styled(Button, {
   shouldForwardProp: prop => prop !== "styleType"
-})<{ styleType?: string; isalttype?: string }>(
-  ({
-    theme: { palette },
-    styleType = React.useContext(PrefContext).styleType,
-    isalttype = "false"
-  }) => ({
-    padding: isalttype === "true" ? "3px 18px" : "3px 35px",
-    border: styleType === "grayscale" ? "none" : "1px solid #33A852",
-    fontSize: "13px",
-    color: "#fff",
-    textTransform: "none",
-    backgroundColor: styleType === "grayscale" ? "#5F6368" : "#33A852",
+})<{ styleType?: string }>(({ theme: { palette } }) => ({
+  padding: "4px 12px 4px 12px",
+  border: palette.primary.main,
+  fontSize: "14px",
+  color: palette.primary.contrastText,
+  textTransform: "none",
+  backgroundColor: palette.primary.main,
+  boxShadow: "none",
+  borderRadius: "4px",
+  gap: "6px",
+  ":hover": {
     boxShadow: "none",
-    borderRadius: isalttype === "true" ? "2px" : "5px",
-    ":hover": {
-      boxShadow: "none",
-      color: styleType === "grayscale" ? "#fff" : "#33A852",
-      backgroundColor: styleType === "grayscale" ? "#3C4043" : "#fff"
-    },
-    "&:disabled": {
-      backgroundColor: "#dddcdc",
-      border: "none"
-    }
-  })
-);
+    color: palette.primary.contrastText,
+    backgroundColor: palette.primary.dark,
+    textDecoration: "underline",
+    textUnderlineOffset: "0.3em"
+  },
+  "&:focus": {
+    outlineColor: palette.primary.main,
+    outlineStyle: "auto",
+    outlineOffset: "4px",
+    outlineWidth: "medium",
+    transition: "none"
+  },
+  "&:disabled": {
+    backgroundColor: palette.secondary[100],
+    border: "none",
+    color: palette.secondary.light
+  }
+}));
diff --git a/src/styles/StyledIconButton.tsx b/src/styles/StyledIconButton.tsx
index 3ea2af8a..11016a07 100644
--- a/src/styles/StyledIconButton.tsx
+++ b/src/styles/StyledIconButton.tsx
@@ -2,7 +2,25 @@ import Button from "@mui/material/Button";
 import { styled } from "@mui/system";
 
 export const StyledIconButton = styled(Button)(({ theme }) => ({
-  color: "#000",
+  color: theme.palette.primary.main,
+  borderRadius: "0px",
   padding: "0px",
-  minWidth: "auto"
+  minWidth: "auto",
+  ":hover": {
+    boxShadow: "none",
+    color: theme.palette.primary.main,
+    backgroundColor: theme.palette.primary[50]
+  },
+  "&:focus": {
+    outlineColor: theme.palette.primary.main,
+    backgroundColor: theme.palette.primary[50],
+    outlineStyle: "auto",
+    outlineWidth: "medium",
+    transition: "none"
+  },
+  "&:disabled": {
+    backgroundColor: theme.palette.secondary[100],
+    border: "none",
+    color: theme.palette.secondary[300]
+  }
 }));
diff --git a/src/styles/StyledList.tsx b/src/styles/StyledList.tsx
index 77cea43c..73bcdf18 100644
--- a/src/styles/StyledList.tsx
+++ b/src/styles/StyledList.tsx
@@ -2,7 +2,7 @@ import Box from "@mui/material/Box";
 import { styled } from "@mui/system";
 
 export const StyledBox = styled(Box)(({ theme: { palette } }) => ({
-  border: `1px solid ${palette.primary.main}`,
+  border: `1px solid ${palette.secondary.light}`,
   borderTop: "none",
   borderRadius: "0px 0px 5px 5px",
   overflowY: "scroll"
diff --git a/src/styles/StyledListItem.tsx b/src/styles/StyledListItem.tsx
new file mode 100644
index 00000000..23c6bae5
--- /dev/null
+++ b/src/styles/StyledListItem.tsx
@@ -0,0 +1,14 @@
+import Button from "@mui/material/Button";
+import { styled } from "@mui/system";
+
+export const StyledListItem = styled(Button)(({ theme }) => ({
+  color: theme.palette.common.black,
+  borderRadius: "0px",
+  padding: "0px",
+  minWidth: "auto",
+  ":hover": {
+    boxShadow: "none",
+    textDecoration: "underline",
+    textUnderlineOffset: "0.3em"
+  }
+}));
diff --git a/src/styles/StyledScrollContainer.tsx b/src/styles/StyledScrollContainer.tsx
index f834ccc3..0573b722 100644
--- a/src/styles/StyledScrollContainer.tsx
+++ b/src/styles/StyledScrollContainer.tsx
@@ -14,7 +14,7 @@ export const StyledScrollContainer = styled(Box, {
     backgroundColor: "transparent"
   },
   "&::-webkit-scrollbar-thumb": {
-    backgroundColor: "#DADCE0",
+    backgroundColor: palette.secondary.light,
     borderRadius: "5px",
     border: "none"
   }
diff --git a/src/styles/StyledSwitchButton.tsx b/src/styles/StyledSwitchButton.tsx
new file mode 100644
index 00000000..9335ca82
--- /dev/null
+++ b/src/styles/StyledSwitchButton.tsx
@@ -0,0 +1,44 @@
+import Switch from "@mui/material/Switch";
+// import { switchClasses } from "@material-ui/core/Switch";
+import { styled } from "@mui/system";
+
+export const StyledSwitch = styled(Switch, {
+  shouldForwardProp: prop => prop !== "styleType"
+})<{ styleType?: string }>(({ theme: { palette } }) => ({
+  width: 62,
+  "& .MuiSwitch-switchBase": {
+    padding: "1px",
+    margin: "6px",
+    backgroundColor: palette.primary.main,
+    "&.Mui-checked": {
+      backgroundColor: palette.primary.main,
+      "& + .MuiSwitch-track": {
+        opacity: 1,
+        backgroundColor: palette.secondary.light
+      },
+      ":hover": {
+        boxShadow: `0px 0px 10px ${palette.primary.light}`,
+        backgroundColor: palette.primary.main
+      },
+      ":focus": {
+        boxShadow: `0px 0px 10px ${palette.primary.light}`,
+        backgroundColor: palette.primary.main
+      }
+    },
+    ":hover": {
+      boxShadow: `0px 0px 10px ${palette.primary.light}`,
+      backgroundColor: palette.primary.main
+    },
+    ":focus": {
+      boxShadow: `0px 0px 10px ${palette.primary.light}`,
+      backgroundColor: palette.primary.main
+    }
+  },
+  "& .MuiSwitch-thumb": {
+    backgroundColor: palette.primary.main
+  },
+  "& .MuiSwitch-track": {
+    opacity: 1,
+    backgroundColor: palette.secondary.light
+  }
+}));
diff --git a/src/styles/index.tsx b/src/styles/index.tsx
index 53beee46..e16a568f 100644
--- a/src/styles/index.tsx
+++ b/src/styles/index.tsx
@@ -11,3 +11,5 @@ export * from "./StyledTab";
 export * from "./StyledTabs";
 export * from "./StyledBox";
 export * from "./StyledMetadataItem";
+export * from "./StyledSwitchButton";
+export * from "./StyledListItem";
diff --git a/src/theme.tsx b/src/theme.tsx
index fb2dca9b..eb650d28 100644
--- a/src/theme.tsx
+++ b/src/theme.tsx
@@ -1,20 +1,154 @@
+/* eslint-disable @typescript-eslint/naming-convention */
 import { createTheme, ThemeProvider } from "@mui/material";
+import { PaletteColorOptions } from "@mui/material/styles";
 import React from "react";
 
-export const theme = createTheme({
+import { green, purple, gray, white, red, orange, blue, black } from "./colors";
+
+declare module "@mui/material/styles" {
+  interface Palette {
+    accent: PaletteColor;
+  }
+
+  interface PaletteOptions {
+    accent?: PaletteColorOptions;
+  }
+
+  interface PaletteColor {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+  }
+
+  interface SimplePaletteColorOptions {
+    50?: string;
+    100?: string;
+    200?: string;
+    300?: string;
+    400?: string;
+    500?: string;
+    600?: string;
+    700?: string;
+    800?: string;
+    900?: string;
+  }
+}
+
+const baseTheme = createTheme({
   typography: {
     fontFamily: '"Inter", sans-serif'
   },
+  components: {
+    MuiButtonBase: {
+      defaultProps: {
+        disableRipple: true
+      }
+    }
+  }
+});
+
+export const grayscaleTheme = createTheme(baseTheme, {
   palette: {
     primary: {
-      main: "#C4C4C4"
+      main: "#C4C4C4",
+      contrastText: white
     },
     secondary: {
-      main: "#7E7E7E"
+      main: "#7E7E7E",
+      contrastText: white
+    }
+  }
+});
+
+export const condaStoreTheme = createTheme(baseTheme, {
+  palette: {
+    accent: baseTheme.palette.augmentColor({
+      color: {
+        light: purple[300],
+        main: purple[500],
+        dark: purple[700],
+        contrastText: white,
+        50: purple[50],
+        100: purple[100],
+        200: purple[200],
+        300: purple[300],
+        400: purple[400],
+        500: purple[500],
+        600: purple[600],
+        700: purple[700],
+        800: purple[800],
+        900: purple[900]
+      },
+      name: "accent"
+    }),
+    primary: baseTheme.palette.augmentColor({
+      color: {
+        light: green[300],
+        main: green[500],
+        dark: green[700],
+        contrastText: white,
+        50: green[50],
+        100: green[100],
+        200: green[200],
+        300: green[300],
+        400: green[400],
+        500: green[500],
+        600: green[600],
+        700: green[700],
+        800: green[800],
+        900: green[900]
+      },
+      name: "primary"
+    }),
+    secondary: baseTheme.palette.augmentColor({
+      color: {
+        light: gray[300],
+        main: gray[500],
+        dark: gray[700],
+        contrastText: white,
+        50: gray[50],
+        100: gray[100],
+        200: gray[200],
+        300: gray[300],
+        400: gray[400],
+        500: gray[500],
+        600: gray[600],
+        700: gray[700],
+        800: gray[800],
+        900: gray[900]
+      },
+      name: "secondary"
+    }),
+    warning: {
+      main: orange,
+      contrastText: white
+    },
+    error: {
+      main: red,
+      contrastText: white
+    },
+    info: {
+      main: blue,
+      contrastText: white
+    },
+    success: {
+      main: green[500],
+      contrastText: white
+    },
+    common: {
+      black: black,
+      white: white
     }
   }
 });
 
 export const themeDecorator = (func: any) => (
-  <ThemeProvider theme={theme}>{func()}</ThemeProvider>
+  <ThemeProvider theme={condaStoreTheme}>{func()}</ThemeProvider>
 );
diff --git a/webpack.config.js b/webpack.config.js
index 76d3c3e7..26d04039 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -8,6 +8,7 @@ const HtmlWebpackPlugin = require("html-webpack-plugin");
 const path = require("path");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const Dotenv = require("dotenv-webpack");
+const webpack = require("webpack");
 
 // const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
 // To improve build times for large projects enable fork-ts-checker-webpack-plugin
@@ -56,7 +57,8 @@ const basicConfig = {
       title: "conda-store"
     }),
     new MiniCssExtractPlugin(),
-    new Dotenv()
+    new Dotenv(),
+    new webpack.EnvironmentPlugin(['REACT_APP_VERSION'])
   ],
 
   mode: isProd ? "production" : "development",