diff --git a/client/src/components/App.css b/client/src/components/App.css
index 8f4af77c..97b845f6 100644
--- a/client/src/components/App.css
+++ b/client/src/components/App.css
@@ -7,3 +7,46 @@
   padding: var(--m) var(--m);
   margin: auto;
 }
+/* 
+#root {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: var(--m) var(--m);
+  text-align: left;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+} */
diff --git a/client/src/components/App.jsx b/client/src/components/App.jsx
index b3549e79..b036f08d 100644
--- a/client/src/components/App.jsx
+++ b/client/src/components/App.jsx
@@ -9,6 +9,10 @@ import { get, post } from "../utilities";
 import { Outlet } from "react-router-dom";
 
 // to use styles, import the necessary CSS files
+
+// import "../utilities.css";
+//import "./App.css";
+
 import "../utilities.css";
 import "./App.css";
 import "../index.css";
diff --git a/client/src/components/modules/Chat.css b/client/src/components/modules/Chat.css
index 25d8de59..c69df7c9 100644
--- a/client/src/components/modules/Chat.css
+++ b/client/src/components/modules/Chat.css
@@ -1,3 +1,6 @@
+/* @tailwind base;
+@tailwind components;
+@tailwind utilities; */
 /*@tailwind base;
 @tailwind components;
 @tailwind utilities;*/
diff --git a/client/src/index.css b/client/src/index.css
index 295e147f..b3be1b2f 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -180,6 +180,10 @@ form {
 
 /* @layer utilities {
   .border-border {
+    border: 1px solid black; 
+  }
+  .bg-background {
+    background-color: #f0f0f0; 
     border: 1px solid black;
   }
   .bg-background {
@@ -189,4 +193,5 @@ form {
   .text-foreground {
     color: #333333;
   }
-} */
+} 
+}*/
diff --git a/client/src/tailwind.css b/client/src/tailwind.css
index 215a711f..78ee6782 100644
--- a/client/src/tailwind.css
+++ b/client/src/tailwind.css
@@ -1,20 +1,21 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities; 
 
 @layer utilities {
   .border-border {
-    border: 2px solid black; /* Or your intended style */
+    border: 2px solid black;
   }
   .bg-background {
-    background-color: #f0f0f0; /* Or your intended background color */
-  }
-
+      background-color: #f0f0f0; 
+    }
+  
   .text-foreground {
-    color: #333333; /* Or your intended text color */
+      color: #333333; 
   }
 }
 
+
 .bg-red-500 {
   background-color: #ef4444;
 }
diff --git a/client/src/utilities.css b/client/src/utilities.css
index 093d247a..9af934f4 100644
--- a/client/src/utilities.css
+++ b/client/src/utilities.css
@@ -16,10 +16,11 @@
 
 @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,600");
 
+/* @tailwind base;
 /*@tailwind base;
 @tailwind components;
-@tailwind utilities;
-
+@tailwind utilities; */
+/* 
 :root {
   --primary: #396dff;
   --primary--dim: #6987db;
@@ -91,4 +92,4 @@ form {
 .u-link:hover {
   color: var(--primary--dim);
 }
-*/
+ */