diff --git a/src/components/ChatWindow.tsx b/src/components/ChatWindow.tsx
index 2141641..a7c1b09 100644
--- a/src/components/ChatWindow.tsx
+++ b/src/components/ChatWindow.tsx
@@ -84,13 +84,13 @@ const ChatMessage = ({ message }: { message: Message }) => {
 const getMessageIcon = (message: Message) => {
   switch (message.type) {
     case "goal":
-      return <FaStar />;
+      return <FaStar className="text-yellow-400" />;
     case "task":
-      return <FaListAlt />;
+      return <FaListAlt className="text-gray-300" />;
     case "thinking":
-      return <FaBrain className="mt-[0.1em]" />;
+      return <FaBrain className="mt-[0.1em] text-pink-400" />;
     case "action":
-      return <FaPlayCircle />;
+      return <FaPlayCircle className="text-green-500" />;
   }
 };
 
diff --git a/src/components/DottedGridBackground.tsx b/src/components/DottedGridBackground.tsx
index e63e94f..c0ca6b7 100644
--- a/src/components/DottedGridBackground.tsx
+++ b/src/components/DottedGridBackground.tsx
@@ -2,16 +2,19 @@ import React from "react";
 
 interface DottedGridBackgroundProps {
   children: React.ReactNode;
-  className?: string
+  className?: string;
 }
-const DottedGridBackground = ({ children, className }: DottedGridBackgroundProps) => {
+
+const DottedGridBackground = ({
+  children,
+  className,
+}: DottedGridBackgroundProps) => {
   return (
-    <div
-      className={`${className ? className + " " : ""} background`}
-    >
+    <div className={`${className ? className + " " : ""} background`}>
+      <div className="lower-gradient" />
       {children}
     </div>
   );
 };
 
-export default DottedGridBackground;
\ No newline at end of file
+export default DottedGridBackground;
diff --git a/src/components/Drawer.tsx b/src/components/Drawer.tsx
index fad4b05..33ffb8d 100644
--- a/src/components/Drawer.tsx
+++ b/src/components/Drawer.tsx
@@ -5,8 +5,8 @@ import { BiPlus } from "react-icons/bi";
 const Drawer = () => {
   return (
     <div
-      id="drawer-example"
-      className="z-50 m-0 hidden h-screen w-72 flex-col gap-2 border-b-[1px] border-b-white/10 bg-[#101010]/50 p-0 p-3 font-mono text-white backdrop-blur-sm md:flex"
+      id="drawer"
+      className="z-50 m-0 hidden h-screen w-72 flex-col gap-2 bg-zinc-900 p-3 font-mono text-white shadow-3xl md:flex"
     >
       <NewAgent />
       <DrawerItem icon={<FaRobot />} text="HustleGPT" />
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 9a30ffc..06f3f5d 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -48,10 +48,10 @@ const Home: NextPage = () => {
               className="relative flex flex-col items-center font-mono"
             >
               <div className="flex flex-row items-start shadow-2xl">
-                <span className="text-4xl font-bold text-[#C0C0C0] sm:text-6xl xs:text-5xl">
+                <span className="text-4xl font-bold text-[#C0C0C0] xs:text-5xl sm:text-6xl">
                   Agent
                 </span>
-                <span className="text-4xl font-bold text-white sm:text-6xl xs:text-5xl">
+                <span className="text-4xl font-bold text-white xs:text-5xl sm:text-6xl">
                   GPT
                 </span>
                 <PopIn delay={0.5}>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index c48189d..e4fa7ee 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -3,9 +3,26 @@
 @tailwind utilities;
 
 .background {
-    background-image: radial-gradient(circle, rgba(58, 58, 58, 0.75) 2px, transparent 0px);
-    background-size: 30px 30px;
-    background-position: 0 0, 15px 15px;
+  background-image: radial-gradient(
+    circle,
+    rgba(58, 58, 58, 0.75) 2px,
+    transparent 0px
+  );
+  background-size: 30px 30px;
+  background-position: 0 0, 15px 15px;
+}
+
+.lower-gradient {
+  background-image: linear-gradient(
+    to top,
+    rgba(255, 255, 255, 0.01),
+    rgba(255, 255, 255, 0)
+  );
+  height: 20vh;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
 }
 
 /* Customize website's scrollbar like Mac OS
@@ -13,25 +30,25 @@ Not supports in Firefox and IE */
 
 /* total width */
 div::-webkit-scrollbar {
-    border-radius: 16px;
-    background-color: #464649;
-    width: 16px;
+  border-radius: 16px;
+  background-color: #464649;
+  width: 16px;
 }
 
 /* background of the scrollbar except button or resizer */
 div::-webkit-scrollbar-track {
-    border-radius: 16px;
-    background-color: #464649;
+  border-radius: 16px;
+  background-color: #464649;
 }
 
 /* scrollbar itself */
 div::-webkit-scrollbar-thumb {
-    background-color: #babac0;
-    border-radius: 16px;
-    border: 2px solid #464649;
+  background-color: #babac0;
+  border-radius: 16px;
+  border: 2px solid #464649;
 }
 
 /* set button(top and bottom of the scrollbar) */
 div::-webkit-scrollbar-button {
-    display: none;
-}
\ No newline at end of file
+  display: none;
+}
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 682befb..8e7db72 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -13,7 +13,11 @@ module.exports = {
 
       ...defaultTheme.screens
     },
-    extend: {}
+    extend: {
+      boxShadow: {
+        "3xl": "0 40px 70px -15px rgba(0, 0, 0, 0.40)" // Customize the shadow value according to your preferences.
+      }
+    }
   },
   plugins: []
 };