bunch of mui work...will take time and then will get faster and will provide easier changing and all

packages/desktop/src/app.tsx

@@ -1,11 +1,15 @@
 import { Button, createTheme, ThemeProvider, Typography } from '@mui/material';
 import * as React from 'react';
 
-import ReactDOM from "react-dom/client";
+import ReactDOM from 'react-dom/client';
+import Terminal from './components/Terminal';
 
 const theme = createTheme({
-  typography:{
-    fontFamily: ['IBM Plex Sans', 'sans-serif'].join(',')
+  typography: {
+    fontFamily: ['IBM Plex Sans', 'sans-serif'].join(','),
+    overline: {
+      letterSpacing: 2,
+    },
   },
   palette: {
     primary: {
@@ -23,20 +27,19 @@ const theme = createTheme({
         disableRipple: true, // No more ripple, on the whole application 💣!
       },
     },
+    MuiAvatar: {
+      defaultProps: {
+        variant: 'rounded',
+      },
+    },
   },
 });
 
-
-
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
-
 root.render(
-    <React.StrictMode>
-      <ThemeProvider theme={theme}>
-
-<Typography>hahaha</Typography>
-    
-      <Button>Yooo</Button>
-      </ThemeProvider>
-    </React.StrictMode>
-  );
+  <React.StrictMode>
+    <ThemeProvider theme={theme}>
+      <Terminal />
+    </ThemeProvider>
+  </React.StrictMode>,
+);