UI fixes

src/app/agents/page.tsx

@@ -46,24 +46,25 @@ export default function AgentsPage() {
       </div>
 
       {/* Active Agents */}
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
         {activeAgents.map((agent) => (
           <Link
             href={`/agents/${agent.id}`}
             key={agent.id}
-            className="group relative bg-card hover:bg-muted transition-colors duration-200 rounded-lg overflow-hidden"
+            className="group flex items-center p-4 bg-card hover:bg-muted transition-colors duration-200 rounded-lg"
           >
-            <div className="aspect-[4/3] relative">
+            <div className="relative w-16 h-16 flex-shrink-0">
               <Image
                 src={agent.image_url || "/placeholder-agent.png"}
                 alt={agent.name}
                 fill
+                className="rounded-full object-cover"
                 unoptimized={true}
-                className="object-cover w-full h-full"
+                sizes="64px"
               />
             </div>
-            <div className="p-4">
-              <h3 className="font-medium text-lg">{agent.name}</h3>
+            <div className="ml-4 flex-grow">
+              <h3 className="font-medium text-base">{agent.name}</h3>
               <p className="text-sm text-muted-foreground mt-1 line-clamp-2">
                 {agent.goal || agent.role}
               </p>
@@ -80,25 +81,26 @@ export default function AgentsPage() {
               Archived Agents
             </h2>
           </div>
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
             {archivedAgents.map((agent) => (
               <Link
                 href={`/agents/${agent.id}`}
                 key={agent.id}
-                className="group relative bg-card hover:bg-muted transition-colors duration-200 rounded-lg overflow-hidden opacity-75 hover:opacity-100"
+                className="group flex items-center p-4 bg-card hover:bg-muted transition-colors duration-200 rounded-lg opacity-75 hover:opacity-100"
               >
-                <div className="aspect-[4/3] relative grayscale group-hover:grayscale-0 transition-all duration-200">
+                <div className="relative w-16 h-16 flex-shrink-0">
                   <Image
                     src={agent.image_url || "/placeholder-agent.png"}
                     alt={agent.name}
                     fill
+                    className="rounded-full object-cover grayscale group-hover:grayscale-0 transition-all duration-200"
                     unoptimized={true}
-                    className="object-cover w-full h-full"
+                    sizes="64px"
                   />
                 </div>
-                <div className="p-4">
-                  <div className="flex items-center gap-2 mb-2">
-                    <h3 className="font-medium text-lg">{agent.name}</h3>
+                <div className="ml-4 flex-grow">
+                  <div className="flex items-center gap-2">
+                    <h3 className="font-medium text-base">{agent.name}</h3>
                     <span className="px-2 py-0.5 rounded text-xs font-medium bg-zinc-800/40 text-zinc-400">
                       Archived
                     </span>

src/app/application-layout.tsx

@@ -6,7 +6,7 @@ import { usePathname } from "next/navigation";
 import { cn } from "@/lib/utils";
 import {
   Users,
-  MessageSquare,
+  // MessageSquare,
   Boxes,
   Menu,
   Wallet,
@@ -26,10 +26,12 @@ interface ApplicationLayoutProps {
 }
 
 const navigation = [
-  { name: "Chat", href: "/chat", icon: MessageSquare },
-  { name: "Agents", href: "/agents", icon: Users },
-  { name: "DAOs", href: "/daos", icon: Boxes },
+  // COMMENTING THIS OUT SINCE WE NO LONGER NEED IT.....
+  // { id: "chat", name: "Chat", href: "/chat", icon: MessageSquare },
+  { id: "agents", name: "Agents", href: "/agents", icon: Users },
+  { id: "daos", name: "DAOs", href: "/daos", icon: Boxes },
   {
+    id: "profile",
     name: "Profile",
     href: "/profile",
     icon: ({ className }: { className?: string }) => (
@@ -82,15 +84,20 @@ export default function ApplicationLayout({
             width={20}
             height={20}
           />
-          <span className="text-lg font-medium text-white">AIBTCDEV</span>
+          <Image
+            src="/logos/aibtcdev-primary-logo-white-wide-1000px.png"
+            alt="AIBTCDEV"
+            width={150}
+            height={300}
+          />
         </div>
         <Button
           variant="ghost"
           size="sm"
           onClick={() => setRightPanelOpen(!rightPanelOpen)}
           className="text-zinc-400"
         >
-          <Wallet className="h-5 w-5" />
+          <Wallet className="h-5 w-5" /> Wallet
         </Button>
       </div>
 
@@ -118,7 +125,12 @@ export default function ApplicationLayout({
                 width={20}
                 height={20}
               />
-              <span className="text-lg font-medium text-white">AIBTCDEV</span>
+              <Image
+                src="/logos/aibtcdev-primary-logo-white-wide-1000px.png"
+                alt="AIBTCDEV"
+                width={150}
+                height={300}
+              />
             </div>
             <Button
               variant="ghost"
@@ -138,8 +150,9 @@ export default function ApplicationLayout({
                   const isActive = pathname === item.href;
                   return (
                     <Link
-                      key={item.name}
+                      key={item.id}
                       href={item.href}
+                      id={item.id}
                       className={cn(
                         "flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg transition-colors",
                         isActive
@@ -175,7 +188,7 @@ export default function ApplicationLayout({
 
         {/* Main Content */}
         <main className="flex-1 min-w-0 relative">
-          <div id="step1"></div>
+          <div></div>
           <ScrollArea className="h-screen w-full">{children}</ScrollArea>
         </main>
 

src/components/agents/agent-form.tsx

@@ -193,23 +193,23 @@ export function AgentForm({
                 : "Select tools"}
             </Button>
           </DialogTrigger>
-          <DialogContent className="sm:max-w-2xl h-[80vh] flex flex-col p-0 bg-zinc-950 border-zinc-800/40">
+          <DialogContent className="sm:max-w-[90vw] md:max-w-[600px] lg:max-w-[900px] w-full h-[80vh] flex flex-col p-0 bg-zinc-950 border-zinc-800/40 overflow-hidden">
             <DialogHeader className="px-4 py-3 border-b border-zinc-800/40">
               <DialogTitle className="text-sm font-medium">
                 Select Tools
               </DialogTitle>
             </DialogHeader>
             <div className="flex-grow min-h-0">
-              <ScrollArea className="h-full">
+              <ScrollArea className="h-full w-full max-w-full">
                 <div className="px-4">
                   <div className="sticky top-0 bg-zinc-950 pt-4 pb-2 z-10">
                     <div className="flex items-center space-x-2">
-                      <Search className="w-4 h-4 text-zinc-500" />
+                      <Search className="w-4 h-4 text-zinc-500 absolute left-3 top-1/2 transform -translate-y-1/2" />
                       <Input
                         placeholder="Search tools..."
                         value={searchTerm}
                         onChange={(e) => setSearchTerm(e.target.value)}
-                        className="h-8 bg-black/20 border-zinc-800/40 text-sm"
+                        className="h-8 bg-black/20 border-zinc-800/40 text-sm pl-9 w-full"
                       />
                     </div>
                   </div>
@@ -226,21 +226,22 @@ export function AgentForm({
                         {tools.map((tool) => (
                           <div
                             key={tool.id}
-                            className="flex items-start space-x-2 p-2 hover:bg-white/5 rounded-lg"
+                            className="flex flex-col sm:flex-row items-start space-y-2 sm:space-y-0 sm:space-x-2 p-2 hover:bg-white/5 rounded-lg"
                           >
                             <Checkbox
                               id={tool.id}
                               checked={selectedTools.includes(tool.id)}
                               onCheckedChange={() => handleToolToggle(tool.id)}
+                              className="mt-1"
                             />
-                            <div className="flex flex-col">
+                            <div className="flex-1 min-w-0">
                               <label
                                 htmlFor={tool.id}
                                 className="text-sm font-medium text-zinc-300 leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                               >
                                 {tool.name}
                               </label>
-                              <p className="text-xs text-zinc-500 mt-1">
+                              <p className="text-xs text-zinc-500 mt-1 break-words">
                                 {tool.description}
                               </p>
                             </div>

src/components/chat/chat-window.tsx

@@ -23,6 +23,8 @@ import { cn } from "@/lib/utils";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { AgentSelector } from "./agent-selector";
 import { useAgents } from "@/hooks/use-agents";
+import { CreateThreadButton } from "../threads/CreateThreadButton";
+import { StartGuide } from "../reusables/StartGuide";
 
 export function ChatWindow() {
   const {
@@ -139,9 +141,8 @@ export function ChatWindow() {
           </div>
           <h3 className="text-lg font-semibold">Create Your First AI Agent</h3>
           <p className="text-sm text-muted-foreground">
-            To start chatting, you will need to create at least one AI agent.
-            Agents are AI assistants that you can customize with specific roles
-            and capabilities.
+            To start chatting, you will need to create at an AI agent. Customize
+            it with roles, backstory and capabilities.
           </p>
           <Button
             onClick={() => (window.location.href = "/agents")}
@@ -157,22 +158,23 @@ export function ChatWindow() {
   if (!activeThreadId) {
     return (
       <div className="flex items-center justify-center h-[calc(100vh-4rem)] backdrop-blur-sm">
-        <div className="text-center space-y-2.5 p-4 -mt-20">
-          <p className="text-lg font-medium text-muted-foreground">
-            Select a Thread
-          </p>
-          <p className="text-sm text-muted-foreground/60">
-            Choose a thread from the sidebar to start chatting
-          </p>
+        <div className="text-center space-y-4 p-4 sm:p-6 lg:p-8 -mt-20">
+          {/* Adjust button size and spacing for different screen sizes */}
+          <div className="flex justify-center gap-3" id="step3">
+            <CreateThreadButton />
+            <div className="md:block hidden">
+              <StartGuide />
+            </div>
+          </div>
         </div>
       </div>
     );
   }
 
   return (
-    <div className="flex-1 flex flex-col relative h-full w-full min-w-0 max-w-full">
-      {/* Header - Fixed at top */}
-      <div className="sticky top-0 z-20 flex items-center justify-between px-2 md:px-4 h-14 border-b border-border/10 min-w-0 bg-background/80 backdrop-blur-sm w-full">
+    <div className="flex flex-col relative h-[94dvh] md:h-[100dvh] w-full min-w-0 max-w-full">
+      {/* Header */}
+      <div className="sticky top-0  flex items-center justify-between px-2 md:px-4 h-14 border-b border-border/10 min-w-0 bg-background/80 backdrop-blur-sm w-full">
         <div className="flex items-center gap-2 overflow-hidden min-w-0 flex-1">
           {!isConnected && (
             <Loader2 className="h-3.5 w-3.5 animate-spin text-muted-foreground flex-shrink-0" />
@@ -252,13 +254,13 @@ export function ChatWindow() {
         </div>
       </div>
 
-      {/* Delete Confirmation Dialog */}
+      {/* Delete Dialog */}
       <Dialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
         <DialogContent className="sm:max-w-[425px]">
           <DialogHeader>
-            <DialogTitle>Clear Thread Messages</DialogTitle>
+            <DialogTitle>Clear Chat Messages</DialogTitle>
             <DialogDescription>
-              Are you sure you want to clear all messages in this thread? This
+              Are you sure you want to clear all messages in this chat? This
               action cannot be undone.
             </DialogDescription>
           </DialogHeader>
@@ -277,9 +279,9 @@ export function ChatWindow() {
         </DialogContent>
       </Dialog>
 
-      {/* Message List - Scrollable area */}
+      {/* Message List */}
       <div className="flex-1 overflow-hidden w-full min-w-0 max-w-full">
-        <ScrollArea className="h-[calc(100vh-8rem)] w-full">
+        <ScrollArea className="h-full w-full pb-4">
           <div className="flex flex-col justify-end min-h-full w-full max-w-full">
             {chatError && (
               <Alert
@@ -294,8 +296,8 @@ export function ChatWindow() {
         </ScrollArea>
       </div>
 
-      {/* Input - Fixed at bottom */}
-      <div className="sticky bottom-0 border-t border-border/10 bg-background/80 backdrop-blur-sm w-full min-w-0">
+      {/* Input */}
+      <div className="sticky bottom-0 border-t border-border/10 bg-background/80 backdrop-blur-sm w-full min-w-0 pb-safe">
         <ChatInput
           selectedAgentId={selectedAgentId}
           onAgentSelect={setSelectedAgent}

src/components/home/home.tsx

@@ -2,32 +2,47 @@
 
 import React from "react";
 import dynamic from "next/dynamic";
+import Image from "next/image";
 
-// Dynamically import SignIn component with ssr: false
 const SignIn = dynamic(() => import("../auth/auth-stacks"), {
   ssr: false,
 });
 
 export default function Home() {
   return (
-    <div className="min-h-screen flex items-center justify-center bg-zinc-900">
-      <div className="w-full max-w-md p-8 space-y-6 bg-zinc-800 rounded-2xl shadow-2xl border border-zinc-700">
+    <div className="min-h-screen flex items-center justify-center bg-zinc-900 px-4 sm:px-6 lg:px-8">
+      <div className="w-full max-w-md p-4 sm:p-8 space-y-4 sm:space-y-6 bg-zinc-800 rounded-xl sm:rounded-2xl shadow-2xl border border-zinc-700">
         <div className="text-center space-y-3">
-          <h1 className="text-3xl font-medium tracking-tight text-white">
-            <span className="font-bold bg-gradient-to-r from-orange-500 to-orange-400 text-transparent bg-clip-text">
-              AIBTCDEV
-            </span>
-          </h1>
-          <p className="text-zinc-400 text-sm">
+          <div className="flex items-center justify-center gap-2 ">
+            {/* Avatar logo */}
+            <Image
+              alt="AIBTC.DEV"
+              src={"/logos/aibtcdev-avatar-250px.png"}
+              height={50}
+              width={50}
+              priority
+              className="rounded-full"
+            />
+            {/* Text logo - made larger */}
+            <Image
+              alt="AIBTC.DEV"
+              src={"/logos/aibtcdev-primary-logo-white-wide-1000px.png"}
+              height={100}
+              width={300}
+              priority
+              className="w-64 sm:w-80 h-auto object-contain"
+            />
+          </div>
+          <p className="text-zinc-400 text-xs sm:text-sm">
             Connect your wallet to get started
           </p>
         </div>
 
         <div className="space-y-4">
           <SignIn />
 
-          <p className="text-center text-xs text-zinc-400 mt-4">
-            By connecting your wallet, you agree to our{" "}
+          <p className="text-center text-xs text-zinc-400 mt-4 px-2 sm:px-0">
+            By connecting your wallet, you agree to the{" "}
             <a href="#" className="text-orange-500 hover:text-orange-400">
               Terms of Service
             </a>{" "}