diff --git a/packages/desktop/package.json b/packages/desktop/package.json
index 30f63d6..844fb0a 100644
--- a/packages/desktop/package.json
+++ b/packages/desktop/package.json
@@ -107,20 +107,27 @@
     "node-loader": "^2.0.0",
     "postcss": "^8.4.12",
     "postcss-loader": "^6.2.1",
+    "sass-loader": "^12.6.0",
     "style-loader": "^3.0.0",
     "tailwindcss": "^3.0.23",
     "ts-loader": "^9.2.2",
-    "typescript": "~4.5.4"
+    "typescript": "~4.5.4",
+    "webpack": "^5.72.0"
   },
   "dependencies": {
-    "@nirvana/core": "*",
+    "@carbon/icons-react": "10.22.0",
     "@emotion/react": "^11.8.2",
     "@emotion/styled": "^11.8.1",
     "@getstation/electron-google-oauth2": "^2.1.0",
     "@mui/icons-material": "^5.5.1",
     "@mui/material": "^5.5.1",
+    "@nirvana/core": "*",
+    "@types/carbon-components-react": "^7.55.1",
     "antd": "^4.19.2",
     "axios": "^0.26.1",
+    "carbon-components": "10.25.0",
+    "carbon-components-react": "7.25.0",
+    "carbon-icons": "7.0.7",
     "electron-squirrel-startup": "^1.0.0",
     "electron-store": "^8.0.1",
     "moment": "^2.29.1",
@@ -132,6 +139,7 @@
     "react-icons": "^4.3.1",
     "react-query": "^3.34.16",
     "recoil": "^0.6.1",
+    "sass": "1.29.0",
     "socket.io-client": "^4.4.1"
   }
 }
diff --git a/packages/desktop/src/app.tsx b/packages/desktop/src/app.tsx
index 1139c81..d4f8e0a 100644
--- a/packages/desktop/src/app.tsx
+++ b/packages/desktop/src/app.tsx
@@ -1,4 +1,5 @@
 import "./index.css";
+import "./carbon.scss";
 
 import * as React from "react";
 import * as ReactDOM from "react-dom";
diff --git a/packages/desktop/src/carbon.scss b/packages/desktop/src/carbon.scss
new file mode 100644
index 0000000..980fc7e
--- /dev/null
+++ b/packages/desktop/src/carbon.scss
@@ -0,0 +1,8 @@
+@import "carbon-components/scss/globals/scss/styles.scss";
+
+// TODO: important, note that if current version of sass in package.json is causing issues, install ^1.29.0
+$body-color: red;
+
+body {
+  color: $body-color !important;
+}
diff --git a/packages/desktop/src/index.css b/packages/desktop/src/index.css
index 6af978b..d9af3c6 100644
--- a/packages/desktop/src/index.css
+++ b/packages/desktop/src/index.css
@@ -1,10 +1,3 @@
-body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
-    Arial, sans-serif;
-
-  @apply text-white;
-}
-
 #root {
   padding: 0 !important;
 }
diff --git a/packages/desktop/src/overlay/index.tsx b/packages/desktop/src/overlay/index.tsx
index 169c4bc..774225a 100644
--- a/packages/desktop/src/overlay/index.tsx
+++ b/packages/desktop/src/overlay/index.tsx
@@ -1,10 +1,16 @@
+import "../index.css";
+import "../carbon.scss";
+
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 
+import { Button } from "carbon-components-react";
+
 function render() {
   ReactDOM.render(
     <div>
       this is the overlay for video streams and conversations to be passed in
+      <Button>yoo carbone what's up</Button>
     </div>,
     document.getElementById("root")
   );
diff --git a/packages/desktop/src/pages/Home/header/index.tsx b/packages/desktop/src/pages/Home/header/index.tsx
index a703557..fcc426e 100644
--- a/packages/desktop/src/pages/Home/header/index.tsx
+++ b/packages/desktop/src/pages/Home/header/index.tsx
@@ -30,29 +30,29 @@ export default function Header() {
 
   const [userVideo, setUserVideo] = useState<any>(null);
 
-  useEffect(() => {
-    navigator.mediaDevices
-      .getUserMedia({ video: true, audio: true })
-      .then((localMediaStream: any) => {
-        console.log(localMediaStream);
+  // useEffect(() => {
+  //   navigator.mediaDevices
+  //     .getUserMedia({ video: true, audio: true })
+  //     .then((localMediaStream: any) => {
+  //       console.log(localMediaStream);
 
-        setUserVideo(localMediaStream);
+  //       setUserVideo(localMediaStream);
 
-        var video = document.querySelector("video");
-        video.srcObject = localMediaStream;
-        video.onloadedmetadata = function (e) {
-          video.play();
-        };
+  //       var video = document.querySelector("video");
+  //       video.srcObject = localMediaStream;
+  //       video.onloadedmetadata = function (e) {
+  //         video.play();
+  //       };
 
-        setTimeout(() => {
-          localMediaStream.getTracks().forEach((track: any) => {
-            track.stop();
-          });
+  //       setTimeout(() => {
+  //         localMediaStream.getTracks().forEach((track: any) => {
+  //           track.stop();
+  //         });
 
-          video.srcObject = null;
-        }, 2000);
-      });
-  }, []);
+  //         video.srcObject = null;
+  //       }, 2000);
+  //     });
+  // }, []);
 
   const handleClick = (event: any) => {
     setAnchorEl(event.currentTarget);
@@ -95,7 +95,7 @@ export default function Header() {
     <>
       <GlobalHotKeys handlers={handlers} keyMap={keyMap}></GlobalHotKeys>
 
-      <video height="400" width="430" autoPlay />
+      <video height="400" width="430" autoPlay muted />
 
       <div className="flex flex-row items-center bg-zinc-800 h-20 px-5">
         <Logo type={LogoType.small} className="scale-[0.4]" />
diff --git a/packages/desktop/webpack.main.config.js b/packages/desktop/webpack.main.config.js
index 159d712..0cd2a85 100644
--- a/packages/desktop/webpack.main.config.js
+++ b/packages/desktop/webpack.main.config.js
@@ -9,6 +9,15 @@ module.exports = {
     rules: require("./webpack.rules"),
   },
   resolve: {
-    extensions: [".js", ".ts", ".jsx", ".tsx", ".css", ".json"],
+    extensions: [
+      ".js",
+      ".ts",
+      ".jsx",
+      ".tsx",
+      ".css",
+      ".json",
+      ".scss",
+      ".sass",
+    ],
   },
 };
diff --git a/packages/desktop/webpack.renderer.config.js b/packages/desktop/webpack.renderer.config.js
index 7338e9b..ffac119 100644
--- a/packages/desktop/webpack.renderer.config.js
+++ b/packages/desktop/webpack.renderer.config.js
@@ -25,6 +25,6 @@ module.exports = {
   },
   plugins: plugins,
   resolve: {
-    extensions: [".js", ".ts", ".jsx", ".tsx", ".css"],
+    extensions: [".js", ".ts", ".jsx", ".tsx", ".css", ".scss", ".sass"],
   },
 };
diff --git a/packages/desktop/webpack.rules.js b/packages/desktop/webpack.rules.js
index 4b4ccf2..a4347ce 100644
--- a/packages/desktop/webpack.rules.js
+++ b/packages/desktop/webpack.rules.js
@@ -29,4 +29,15 @@ module.exports = [
       },
     },
   },
+  {
+    test: /\.s[ac]ss$/i,
+    use: [
+      // Creates `style` nodes from JS strings
+      "style-loader",
+      // Translates CSS into CommonJS
+      "css-loader",
+      // Compiles Sass to CSS
+      "sass-loader",
+    ],
+  },
 ];
diff --git a/packages/web/pages/index.tsx b/packages/web/pages/index.tsx
index d99ee8f..8328025 100644
--- a/packages/web/pages/index.tsx
+++ b/packages/web/pages/index.tsx
@@ -1,6 +1,7 @@
 import { BsApple, BsWindows } from "react-icons/bs";
 import { FaPeopleCarry, FaRunning } from "react-icons/fa";
 
+import { Button } from "carbon-components-react";
 import Footer from "../components/footer";
 import Header from "../components/header";
 import { MdOutlineNaturePeople } from "react-icons/md";
@@ -21,6 +22,8 @@ const Home: NextPage = () => {
               for remote startups.
             </span>
 
+            <Button>yoo carbon what's up</Button>
+
             <span className="text-zinc-400 text-lg md:text-xl mt-5 text-center md:text-left">
               The <span className="text-nirvanaTeal">{"'less is more'"}</span>{" "}
               approach. Skip zoom scheduling, <br></br> slack notifications, and
diff --git a/yarn.lock b/yarn.lock
index af3f3da..49ec131 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5427,7 +5427,7 @@ kind-of@^6.0.2:
   resolved "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
 
-klona@^2.0.5:
+klona@^2.0.4, klona@^2.0.5:
   version "2.0.5"
   resolved "https://registry.npmjs.org/klona/-/klona-2.0.5.tgz"
   integrity sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==
@@ -7736,6 +7736,14 @@ saslprep@^1.0.3:
   dependencies:
     sparse-bitfield "^3.0.3"
 
+sass-loader@^12.6.0:
+  version "12.6.0"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-12.6.0.tgz#5148362c8e2cdd4b950f3c63ac5d16dbfed37bcb"
+  integrity sha512-oLTaH0YCtX4cfnJZxKSLAyglED0naiYfNG1iXfU5w1LNZ+ukoA5DtyDIN5zmKVZwYNJP4KRc5Y3hkWga+7tYfA==
+  dependencies:
+    klona "^2.0.4"
+    neo-async "^2.6.2"
+
 sass@1.29.0:
   version "1.29.0"
   resolved "https://registry.yarnpkg.com/sass/-/sass-1.29.0.tgz#ec4e1842c146d8ea9258c28c141b8c2b7c6ab7f1"
@@ -8983,6 +8991,36 @@ webpack@^5.37.0:
     watchpack "^2.3.1"
     webpack-sources "^3.2.3"
 
+webpack@^5.72.0:
+  version "5.72.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.72.0.tgz#f8bc40d9c6bb489a4b7a8a685101d6022b8b6e28"
+  integrity sha512-qmSmbspI0Qo5ld49htys8GY9XhS9CGqFoHTsOVAnjBdg0Zn79y135R+k4IR4rKK6+eKaabMhJwiVB7xw0SJu5w==
+  dependencies:
+    "@types/eslint-scope" "^3.7.3"
+    "@types/estree" "^0.0.51"
+    "@webassemblyjs/ast" "1.11.1"
+    "@webassemblyjs/wasm-edit" "1.11.1"
+    "@webassemblyjs/wasm-parser" "1.11.1"
+    acorn "^8.4.1"
+    acorn-import-assertions "^1.7.6"
+    browserslist "^4.14.5"
+    chrome-trace-event "^1.0.2"
+    enhanced-resolve "^5.9.2"
+    es-module-lexer "^0.9.0"
+    eslint-scope "5.1.1"
+    events "^3.2.0"
+    glob-to-regexp "^0.4.1"
+    graceful-fs "^4.2.9"
+    json-parse-better-errors "^1.0.2"
+    loader-runner "^4.2.0"
+    mime-types "^2.1.27"
+    neo-async "^2.6.2"
+    schema-utils "^3.1.0"
+    tapable "^2.1.1"
+    terser-webpack-plugin "^5.1.3"
+    watchpack "^2.3.1"
+    webpack-sources "^3.2.3"
+
 websocket-driver@>=0.5.1, websocket-driver@^0.7.4:
   version "0.7.4"
   resolved "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz"