From 661b821f37e141cd8b832ec0af07fb7649f0f5d4 Mon Sep 17 00:00:00 2001
From: "Rodrigo Rodriguez (Pragmatismo)" <me@rodrigorodriguez.com>
Date: Sun, 30 Mar 2025 19:28:28 -0300
Subject: [PATCH] refactor: update component exports to named exports and
 enhance UI structure

---
 .gitignore                                    |    1 +
 a.sh                                          | 1131 -----------------
 src/dashboard/components/DateRangePicker.tsx  |   82 +-
 src/dashboard/components/MainNav.tsx          |   40 +-
 src/dashboard/components/Overview.tsx         |   90 +-
 src/dashboard/components/RecentSales.tsx      |   29 +-
 src/dashboard/components/Search.tsx           |   36 +-
 src/dashboard/components/TeamSwitcher.tsx     |  114 +-
 src/dashboard/components/UserNav.tsx          |   78 +-
 src/dashboard/index.tsx                       |  113 +-
 src/drive/components/FileBrowser.tsx          |   17 +-
 src/drive/components/FileOperations.tsx       |    7 +-
 src/drive/components/FileTree.tsx             |   12 +-
 src/drive/index.tsx                           |   12 +-
 src/mail/components/account-switcher.tsx      |  118 +-
 src/mail/components/mail-display.tsx          |  368 +-----
 src/mail/components/mail-list.tsx             |  185 +--
 src/mail/components/mail.tsx                  |  194 +--
 src/mail/components/nav.tsx                   |  104 +-
 src/mail/data.tsx                             |  258 +---
 src/mail/index.tsx                            |   52 +-
 src/mail/use-mail.ts                          |   44 +-
 src/sync/page.tsx                             |    4 +-
 src/tasks/components/DataTable.tsx            |  104 +-
 src/tasks/components/DataTablePagination.tsx  |  114 +-
 src/tasks/components/DataTableToolbar.tsx     |  106 +-
 src/tasks/components/UserNav.tsx              |   37 +-
 src/tasks/index.tsx                           |   45 +-
 src/templates/components/album-artwork.tsx    |   57 +-
 src/templates/components/menu.tsx             |   42 +-
 .../components/podcast-empty-placeholder.tsx  |   54 +-
 src/templates/components/sidebar.tsx          |  107 +-
 src/templates/index.tsx                       |  104 +-
 33 files changed, 792 insertions(+), 3067 deletions(-)
 delete mode 100755 a.sh

diff --git a/.gitignore b/.gitignore
index a547bf3..b64a01a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+output.sh
\ No newline at end of file
diff --git a/a.sh b/a.sh
deleted file mode 100755
index 3f3ab8a..0000000
--- a/a.sh
+++ /dev/null
@@ -1,1131 +0,0 @@
-#!/bin/bash
-
-# Create the full directory structure
-mkdir -p my-tauri-app/src/chat/{components,lib,providers,styles,types}
-mkdir -p my-tauri-app/src/chat/components/{chat,projector,selector,ui}
-mkdir -p my-tauri-app/src/styles
-
-# Create all files with React+HTML equivalents
-cat > my-tauri-app/src/chat/components/chat/chat-header.tsx << 'EOL'
-import React from 'react';
-import { useChat } from '../../providers/chat-provider';
-import '../../styles/chat.css';
-
-export function ChatHeader() {
-  const { instance } = useChat();
-
-  return (
-    <div className="chat-header">
-      <div className="header-content">
-        <h2 className="header-title">
-          {instance?.name || 'Chat'}
-        </h2>
-        <span className="header-subtitle">Online</span>
-      </div>
-      
-      <button className="header-button">
-        <svg className="icon" viewBox="0 0 24 24">
-          <path d="M12 10a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm14 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/>
-        </svg>
-      </button>
-    </div>
-  );
-}
-EOL
-
-cat > my-tauri-app/src/chat/components/chat/chat-input.tsx << 'EOL'
-import React from 'react';
-import { EmojiPicker } from '../ui/emoji-picker';
-import { useChat } from '../../providers/chat-provider';
-import { useSound } from '../../providers/sound-provider';
-import '../../styles/chat.css';
-
-export function ChatInput() {
-  const [message, setMessage] = React.useState('');
-  const [showEmoji, setShowEmoji] = React.useState(false);
-  const { sendActivity } = useChat();
-  const { playSound } = useSound();
-
-  const handleSend = () => {
-    if (!message.trim()) return;
-    playSound('send');
-    sendActivity({
-      type: 'message',
-      text: message.trim(),
-    });
-    setMessage('');
-  };
-
-  const handleEmojiSelect = (emoji: string) => {
-    playSound('click');
-    setMessage(prev => prev + emoji);
-  };
-
-  return (
-    <>
-      <div className="input-container">
-        <button className="icon-button" onClick={() => playSound('click')}>
-          <svg className="icon" viewBox="0 0 24 24">
-            <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/>
-          </svg>
-        </button>
-
-        <button className="icon-button" onClick={() => setShowEmoji(true)}>
-          <svg className="icon" viewBox="0 0 24 24">
-            <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zM8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01"/>
-          </svg>
-        </button>
-        
-        <textarea
-          value={message}
-          onChange={(e) => setMessage(e.target.value)}
-          className="chat-input"
-          placeholder="Type a message..."
-        />
-        
-        {message.trim().length > 0 ? (
-          <button className="send-button" onClick={handleSend}>
-            <svg className="icon" viewBox="0 0 24 24">
-              <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/>
-            </svg>
-          </button>
-        ) : (
-          <button className="icon-button" onClick={() => playSound('click')}>
-            <svg className="icon" viewBox="0 0 24 24">
-              <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2M12 19v4"/>
-            </svg>
-          </button>
-        )}
-      </div>
-
-      <EmojiPicker
-        visible={showEmoji}
-        onClose={() => {
-          playSound('click');
-          setShowEmoji(false);
-        }}
-        onEmojiSelect={handleEmojiSelect}
-      />
-    </>
-  );
-}
-EOL
-
-cat > my-tauri-app/src/chat/components/chat/chat-window.tsx << 'EOL'
-import React from 'react';
-import { MessageList } from './message-list';
-import { ChatInput } from './chat-input';
-import { ChatHeader } from './chat-header';
-import { useChat } from '../../providers/chat-provider';
-import { Message } from '../../types';
-import '../../styles/chat.css';
-
-export function ChatWindow() {
-  const { line } = useChat();
-  const [messages, setMessages] = React.useState<Message[]>([]);
-
-  React.useEffect(() => {
-    if (!line) return;
-
-    const subscription = line.activity$.subscribe((activity: any) => {
-      if (activity.type === 'message') {
-        setMessages(prev => [...prev, activity as Message]);
-      }
-    });
-
-    return () => subscription.unsubscribe();
-  }, [line]);
-
-  return (
-    <div className="chat-window">
-      <ChatHeader />
-      <MessageList messages={messages} />
-      <ChatInput />
-    </div>
-  );
-}
-EOL
-
-cat > my-tauri-app/src/chat/components/chat/message-list.tsx << 'EOL'
-import React from 'react';
-import { useChat } from '../../providers/chat-provider';
-import { useSound } from '../../providers/sound-provider';
-import { Message } from '../../types';
-import '../../styles/chat.css';
-
-interface MessageListProps {
-  messages: Message[];
-}
-
-export function MessageList({ messages }: MessageListProps) {
-  const scrollRef = React.useRef<HTMLDivElement>(null);
-  const { user } = useChat();
-  const { playSound } = useSound();
-  const prevMessagesLength = React.useRef(messages.length);
-
-  React.useEffect(() => {
-    if (messages.length > prevMessagesLength.current) {
-      const lastMessage = messages[messages.length - 1];
-      if (lastMessage.from.id !== user.id) {
-        playSound('receive');
-      }
-      scrollRef.current?.scrollIntoView({ behavior: 'smooth' });
-    }
-    prevMessagesLength.current = messages.length;
-  }, [messages]);
-
-  return (
-    <div className="message-list" ref={scrollRef}>
-      {messages.map((message, index) => (
-        <div
-          key={`${message.id}-${index}`}
-          className={`message-container ${
-            message.from.id === user.id ? 'user-message' : 'bot-message'
-          }`}
-        >
-          <p className="message-text">{message.text}</p>
-          <span className="message-time">
-            {new Date(message.timestamp).toLocaleTimeString()}
-          </span>
-        </div>
-      ))}
-    </div>
-  );
-}
-EOL
-
-cat > my-tauri-app/src/chat/components/chat-layout.tsx << 'EOL'
-import React from 'react';
-import { PersonSelector } from './selector/person-selector';
-import { ProjectorView } from './projector/projector-view';
-import { ChatWindow } from './chat/chat-window';
-import '../../styles/layout.css';
-
-export function ChatLayout() {
-  return (
-    <div className="chat-layout">
-      <div className="sidebar">
-        <PersonSelector />
-      </div>
-      <div className="main-content">
-        <div className="projector">
-          <ProjectorView />
-        </div>
-        <div className="chat-area">
-          <ChatWindow />
-        </div>
-      </div>
-    </div>
-  );
-}
-EOL
-
-cat > my-tauri-app/src/chat/components/projector/image-viewer.tsx << 'EOL'
-import React from 'react';
-import '../../styles/projector.css';
-
-interface ImageViewerProps {
-  url: string;
-}
-
-export function ImageViewer({ url }: ImageViewerProps) {
-  return (
-    <div className="image-container">
-      <img src={url} className="projector-image" alt="Projected content" />
-    </div>
-  );
-}
-EOL
-
-cat > my-tauri-app/src/chat/components/projector/markdown-viewer.tsx << 'EOL'
-import React from 'react';
-import ReactMarkdown from 'react-markdown';
-import '../../styles/projector.css';
-
-interface MarkdownViewerProps {
-  content: string;
-}
-
-export function MarkdownViewer({ content }: MarkdownViewerProps) {
-  return (
-    <div className="markdown-container">
-      <ReactMarkdown>{content}</ReactMarkdown>
-    </div>
-  );
-}
-EOL
-
-cat > my-tauri-app/src/chat/components/projector/projector-view.tsx << 'EOL'
-import React from 'react';
-import { VideoPlayer } from './video-player';
-import { ImageViewer } from './image-viewer';
-import { MarkdownViewer } from './markdown-viewer';
-import { useChat } from '../../providers/chat-provider';
-import '../../styles/projector.css';
-
-export function ProjectorView() {
-  const { line } = useChat();
-  const [content, setContent] = React.useState<any>(null);
-
-  React.useEffect(() => {
-    if (!line) return;
-
-    const subscription = line.activity$
-      .subscribe((activity: any) => {
-        if (activity.type === 'event' && activity.name === 'project') {
-          setContent(activity.value);
-        }
-      });
-
-    return () => subscription.unsubscribe();
-  }, [line]);
-
-  const renderContent = () => {
-    if (!content) return null;
-
-    switch (content.type) {
-      case 'video':
-        return <VideoPlayer url={content.url} />;
-      case 'image':
-        return <ImageViewer url={content.url} />;
-      case 'markdown':
-        return <MarkdownViewer content={content.text} />;
-      default:
-        return null;
-    }
-  };
-
-  return (
-    <div className="projector-container">
-      {renderContent()}
-    </div>
-  );
-}
-EOL
-
-cat > my-tauri-app/src/chat/components/projector/video-player.tsx << 'EOL'
-import React from 'react';
-import '../../styles/projector.css';
-
-interface VideoPlayerProps {
-  url: string;
-}
-
-export function VideoPlayer({ url }: VideoPlayerProps) {
-  return (
-    <div className="video-container">
-      <video controls src={url} className="projector-video" />
-    </div>
-  );
-}
-EOL
-
-cat > my-tauri-app/src/chat/components/selector/person-selector.tsx << 'EOL'
-import React from 'react';
-import { useChat } from '../../providers/chat-provider';
-import '../../styles/selector.css';
-
-export function PersonSelector() {
-  const [search, setSearch] = React.useState('');
-  const { instance } = useChat();
-
-  return (
-    <div className="selector-container">
-      <div className="selector-header">
-        {instance?.logo && (
-          <img src={instance.logo} className="selector-logo" alt="Logo" />
-        )}
-      </div>
-      
-      <div className="search-container">
-        <svg className="search-icon" viewBox="0 0 24 24">
-          <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
-        </svg>
-        <input
-          value={search}
-          onChange={(e) => setSearch(e.target.value)}
-          className="search-input"
-          placeholder="Search conversations..."
-        />
-      </div>
-
-      <div className="selector-list">
-        {['FAQ', 'Support', 'Sales'].map((item) => (
-          <div key={item} className="selector-item">
-            <div className="selector-avatar">
-              <span>{item[0]}</span>
-            </div>
-            <div className="item-content">
-              <h3 className="item-title">{item}</h3>
-              <p className="item-subtitle">Start a conversation</p>
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-EOL
-
-cat > my-tauri-app/src/chat/components/sound-initializer.tsx << 'EOL'
-import React, { useEffect, useState } from 'react';
-import { soundAssets } from '../../../public/sounds/manifest';
-import { cacheAssets } from '../lib/asset-loader';
-
-export function SoundInitializer({ children }: { children: React.ReactNode }) {
-  const [isReady, setIsReady] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    const initializeSounds = async () => {
-      try {
-        await cacheAssets(Object.values(soundAssets));
-        setIsReady(true);
-      } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to initialize sounds');
-      }
-    };
-
-    initializeSounds();
-  }, []);
-
-  if (error) {
-    return (
-      <div className="error-container">
-        <p className="error-text">Error: {error}</p>
-      </div>
-    );
-  }
-
-  if (!isReady) {
-    return (
-      <div className="loading-container">
-        <p>Loading sounds...</p>
-      </div>
-    );
-  }
-
-  return <>{children}</>;
-}
-EOL
-
-cat > my-tauri-app/src/chat/components/ui/emoji-picker.tsx << 'EOL'
-import React from 'react';
-import '../../styles/ui.css';
-
-const EMOJI_CATEGORIES = {
-  "😀 🎮": ["😀", "😎", "🤖", "👾", "🎮", "✨", "🚀", "💫"],
-  "🌟 💫": ["⭐", "🌟", "💫", "✨", "⚡", "💥", "🔥", "🌈"],
-  "🤖 🎯": ["🤖", "🎯", "🎲", "🎮", "🕹️", "👾", "💻", "⌨️"]
-};
-
-export function EmojiPicker({ visible, onClose, onEmojiSelect }: {
-  visible: boolean;
-  onClose: () => void;
-  onEmojiSelect: (emoji: string) => void;
-}) {
-  if (!visible) return null;
-
-  return (
-    <div className="emoji-picker-modal">
-      <div className="emoji-picker-header">
-        <h3>Select Emoji</h3>
-        <button onClick={onClose} className="close-button">
-          <svg viewBox="0 0 24 24">
-            <path d="M18 6L6 18M6 6l12 12"/>
-          </svg>
-        </button>
-      </div>
-      
-      <div className="emoji-picker-content">
-        {Object.entries(EMOJI_CATEGORIES).map(([category, emojis]) => (
-          <div key={category} className="emoji-category">
-            <h4 className="category-title">{category}</h4>
-            <div className="emoji-grid">
-              {emojis.map(emoji => (
-                <button
-                  key={emoji}
-                  className="emoji-button"
-                  onClick={() => {
-                    onEmojiSelect(emoji);
-                    onClose();
-                  }}
-                >
-                  {emoji}
-                </button>
-              ))}
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-EOL
-
-cat > my-tauri-app/src/chat/components/ui/settings-panel.tsx << 'EOL'
-import React from 'react';
-import { useSound } from '../../providers/sound-provider';
-import '../../styles/ui.css';
-
-export function SettingsPanel() {
-  const [theme, setTheme] = React.useState('dark');
-  const [sound, setSound] = React.useState(true);
-  const [powerMode, setPowerMode] = React.useState(false);
-  const { setEnabled, playSound } = useSound();
-
-  const handleSoundToggle = (value: boolean) => {
-    setSound(value);
-    setEnabled(value);
-    if (value) {
-      playSound('success');
-    }
-  };
-
-  const handleThemeChange = () => {
-    playSound('click');
-    setTheme(theme === 'dark' ? 'light' : 'dark');
-  };
-
-  const handlePowerMode = (value: boolean) => {
-    playSound(value ? 'success' : 'click');
-    setPowerMode(value);
-  };
-
-  return (
-    <div className="settings-panel">
-      <div className="settings-option">
-        {sound ? (
-          <svg className="icon" viewBox="0 0 24 24">
-            <path d="M3 15a1 1 0 011-1h2.83a1 1 0 00.8-.4l1.12-1.5a1 1 0 01.8-.4h3.55a1 1 0 00.8-.4l1.12-1.5a1 1 0 01.8-.4H19a1 1 0 011 1v6a1 1 0 01-1 1h-2.83a1 1 0 00-.8-.4l-1.12-1.5a1 1 0 00-.8-.4H9.72a1 1 0 01-.8-.4l-1.12-1.5a1 1 0 00-.8-.4H4a1 1 0 01-1-1v-2zM12 6a1 1 0 011-1h6a1 1 0 011 1v3"/>
-          </svg>
-        ) : (
-          <svg className="icon" viewBox="0 0 24 24">
-            <path d="M3 15a1 1 0 011-1h2.83a1 1 0 00.8-.4l1.12-1.5a1 1 0 01.8-.4h3.55a1 1 0 00.8-.4l1.12-1.5a1 1 0 01.8-.4H19a1 1 0 011 1v6a1 1 0 01-1 1h-2.83a1 1 0 00-.8-.4l-1.12-1.5a1 1 0 00-.8-.4H9.72a1 1 0 01-.8-.4l-1.12-1.5a1 1 0 00-.8-.4H4a1 1 0 01-1-1v-2zM12 6a1 1 0 011-1h6a1 1 0 011 1v3M3 3l18 18"/>
-          </svg>
-        )}
-        <span className="option-text">Sound Effects</span>
-        <label className="switch">
-          <input 
-            type="checkbox" 
-            checked={sound}
-            onChange={(e) => handleSoundToggle(e.target.checked)}
-          />
-          <span className="slider"></span>
-        </label>
-      </div>
-    </div>
-  );
-}
-EOL
-
-cat > my-tauri-app/src/chat/index.tsx << 'EOL'
-import React from 'react';
-import { ChatProvider } from './providers/chat-provider';
-import { ChatLayout } from './components/chat-layout';
-import { SoundInitializer } from './components/sound-initializer';
-import { SoundProvider } from './providers/sound-provider';
-
-export function Chat() {
-  return (
-    <SoundInitializer>
-      <SoundProvider>
-        <ChatProvider>
-          <ChatLayout />
-        </ChatProvider>
-      </SoundProvider>
-    </SoundInitializer>
-  );
-}
-EOL
-
-cat > my-tauri-app/src/chat/lib/utils.ts << 'EOL'
-export function formatTimestamp(date: Date): string {
-  return new Intl.DateTimeFormat('en-US', {
-    hour: '2-digit',
-    minute: '2-digit',
-  }).format(date);
-}
-
-export function cn(...classes: string[]): string {
-  return classes.filter(Boolean).join(' ');
-}
-
-export function generateId(): string {
-  return Math.random().toString(36).slice(2);
-}
-EOL
-
-cat > my-tauri-app/src/chat/providers/chat-provider.tsx << 'EOL'
-import React, { createContext, useContext, useState, useEffect } from 'react';
-import { invoke } from '@tauri-apps/api/tauri';
-import { User, ChatInstance } from '../types';
-
-interface ChatContextType {
-  line: any;
-  user: User;
-  instance: ChatInstance | null;
-  sendActivity: (activity: any) => void;
-  selectedVoice: any;
-  setVoice: (voice: any) => void;
-}
-
-const ChatContext = createContext<ChatContextType | undefined>(undefined);
-
-export function ChatProvider({ children }: { children: React.ReactNode }) {
-  const [line, setLine] = useState<any>(null);
-  const [instance, setInstance] = useState<ChatInstance | null>(null);
-  const [selectedVoice, setSelectedVoice] = useState(null);
-  const [user] = useState<User>({
-    id: `user_${Math.random().toString(36).slice(2)}`,
-    name: 'You'
-  });
-  
-  useEffect(() => {
-    const initializeChat = async () => {
-      try {
-        const botId = window.location.pathname.split('/')[1] || 'default';
-        const instanceData = await invoke('get_chat_instance', { botId });
-        setInstance(instanceData as ChatInstance);
-        
-        // Initialize DirectLine or other chat service
-        const directLine = { 
-          activity$: { subscribe: () => {} },
-          postActivity: () => ({ subscribe: () => {} })
-        };
-        setLine(directLine);
-      } catch (error) {
-        console.error('Failed to initialize chat:', error);
-      }
-    };
-
-    initializeChat();
-  }, []);
-
-  const sendActivity = async (activity: any) => {
-    try {
-      await invoke('send_chat_activity', {
-        activity: {
-          ...activity,
-          from: user,
-          timestamp: new Date().toISOString()
-        }
-      });
-      line?.postActivity(activity).subscribe();
-    } catch (error) {
-      console.error('Failed to send activity:', error);
-    }
-  };
-
-  const setVoice = (voice: any) => {
-    setSelectedVoice(voice);
-  };
-
-  return (
-    <ChatContext.Provider value={{ line, user, instance, sendActivity, selectedVoice, setVoice }}>
-      {children}
-    </ChatContext.Provider>
-  );
-}
-
-export function useChat() {
-  const context = useContext(ChatContext);
-  if (!context) {
-    throw new Error('useChat must be used within ChatProvider');
-  }
-  return context;
-}
-EOL
-
-cat > my-tauri-app/src/chat/providers/sound-provider.tsx << 'EOL'
-import React, { createContext, useContext, useCallback } from 'react';
-import { invoke } from '@tauri-apps/api/tauri';
-
-interface SoundContextType {
-  playSound: (sound: string) => void;
-  setEnabled: (enabled: boolean) => void;
-}
-
-const SoundContext = createContext<SoundContextType | undefined>(undefined);
-
-export function SoundProvider({ children }: { children: React.ReactNode }) {
-  const [enabled, setEnabled] = React.useState(true);
-
-  const playSound = useCallback(async (sound: string) => {
-    if (!enabled) return;
-    try {
-      await invoke('play_sound', { sound });
-    } catch (error) {
-      console.error('Failed to play sound:', error);
-    }
-  }, [enabled]);
-
-  return (
-    <SoundContext.Provider value={{ playSound, setEnabled }}>
-      {children}
-    </SoundContext.Provider>
-  );
-}
-
-export function useSound() {
-  const context = React.useContext(SoundContext);
-  if (!context) {
-    throw new Error('useSound must be used within SoundProvider');
-  }
-  return context;
-}
-EOL
-
-cat > my-tauri-app/src/chat/types/index.ts << 'EOL'
-export interface Message {
-  id: string;
-  type: 'message' | 'event';
-  text?: string;
-  timestamp: string;
-  from: User;
-  attachments?: Attachment[];
-}
-
-export interface User {
-  id: string;
-  name: string;
-  avatar?: string;
-}
-
-export interface Attachment {
-  type: 'image' | 'video' | 'document';
-  url: string;
-  thumbnailUrl?: string;
-}
-
-export interface ChatInstance {
-  id: string;
-  name: string;
-  logo?: string;
-  botId: string;
-  webchatToken: string;
-}
-EOL
-
-# Create CSS files
-cat > my-tauri-app/src/styles/chat.css << 'EOL'
-.chat-window {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  background-color: #111;
-}
-
-.chat-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1rem;
-  background-color: #111;
-  border-bottom: 1px solid #333;
-}
-
-.header-content {
-  display: flex;
-  flex-direction: column;
-}
-
-.header-title {
-  color: white;
-  font-size: 1.25rem;
-  font-weight: bold;
-  margin: 0;
-}
-
-.header-subtitle {
-  color: #00f3ff;
-  font-size: 0.875rem;
-  margin-top: 0.25rem;
-}
-
-.message-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 1rem;
-}
-
-.message-container {
-  max-width: 70%;
-  margin-bottom: 0.5rem;
-  padding: 0.75rem;
-  border-radius: 0.75rem;
-}
-
-.user-message {
-  align-self: flex-end;
-  background-color: rgba(0, 243, 255, 0.1);
-  border: 1px solid #00f3ff;
-}
-
-.bot-message {
-  align-self: flex-start;
-  background-color: rgba(191, 0, 255, 0.1);
-  border: 1px solid #bf00ff;
-}
-
-.message-text {
-  color: white;
-  margin: 0;
-}
-
-.message-time {
-  color: #666;
-  font-size: 0.75rem;
-  margin-top: 0.25rem;
-}
-
-.input-container {
-  display: flex;
-  align-items: center;
-  padding: 1rem;
-  border-top: 1px solid #333;
-  background-color: #111;
-}
-
-.chat-input {
-  flex: 1;
-  min-height: 2.5rem;
-  max-height: 6rem;
-  padding: 0.5rem 1rem;
-  margin: 0 0.5rem;
-  background-color: #1a1a1a;
-  color: white;
-  border: 1px solid #333;
-  border-radius: 1.25rem;
-  resize: none;
-}
-
-.icon-button {
-  background: none;
-  border: none;
-  color: #00f3ff;
-  cursor: pointer;
-  padding: 0.5rem;
-}
-
-.send-button {
-  background-color: rgba(0, 243, 255, 0.1);
-  border: 1px solid #00f3ff;
-  border-radius: 50%;
-  padding: 0.5rem;
-  cursor: pointer;
-}
-
-.icon {
-  width: 1.5rem;
-  height: 1.5rem;
-  fill: currentColor;
-}
-EOL
-
-cat > my-tauri-app/src/styles/layout.css << 'EOL'
-.chat-layout {
-  display: flex;
-  height: 100vh;
-  background-color: #111;
-}
-
-.sidebar {
-  width: 18rem;
-  border-right: 1px solid #333;
-}
-
-.main-content {
-  flex: 1;
-  display: flex;
-}
-
-.projector {
-  width: 40%;
-  border-right: 1px solid #333;
-}
-
-.chat-area {
-  flex: 1;
-}
-EOL
-
-cat > my-tauri-app/src/styles/projector.css << 'EOL'
-.projector-container {
-  height: 100%;
-  padding: 1rem;
-  background-color: #111;
-}
-
-.image-container, .video-container {
-  width: 100%;
-  height: 100%;
-  background-color: #111;
-  border-radius: 0.5rem;
-  overflow: hidden;
-}
-
-.projector-image, .projector-video {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-
-.markdown-container {
-  height: 100%;
-  padding: 1rem;
-  color: white;
-  background-color: #111;
-  border-radius: 0.5rem;
-  overflow-y: auto;
-}
-
-.markdown-container h1, 
-.markdown-container h2, 
-.markdown-container h3 {
-  color: #00f3ff;
-}
-
-.markdown-container a {
-  color: #00f3ff;
-  text-decoration: none;
-}
-
-.markdown-container pre {
-  background-color: #1a1a1a;
-  padding: 1rem;
-  border-radius: 0.25rem;
-}
-EOL
-
-cat > my-tauri-app/src/styles/selector.css << 'EOL'
-.selector-container {
-  height: 100%;
-  background-color: #111;
-}
-
-.selector-header {
-  padding: 1rem;
-  border-bottom: 1px solid #333;
-}
-
-.selector-logo {
-  height: 2.5rem;
-}
-
-.search-container {
-  display: flex;
-  align-items: center;
-  padding: 0.75rem;
-  border-bottom: 1px solid #333;
-}
-
-.search-icon {
-  width: 1.25rem;
-  height: 1.25rem;
-  margin-right: 0.5rem;
-  color: #00f3ff;
-}
-
-.search-input {
-  flex: 1;
-  background: none;
-  border: none;
-  color: white;
-  font-size: 1rem;
-}
-
-.search-input::placeholder {
-  color: #666;
-}
-
-.selector-list {
-  height: calc(100% - 7rem);
-  overflow-y: auto;
-}
-
-.selector-item {
-  display: flex;
-  padding: 1rem;
-  border-bottom: 1px solid #333;
-  cursor: pointer;
-}
-
-.selector-item:hover {
-  background-color: #1a1a1a;
-}
-
-.selector-avatar {
-  width: 3rem;
-  height: 3rem;
-  border-radius: 50%;
-  background-color: #1a1a1a;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid #00f3ff;
-  color: #00f3ff;
-  font-size: 1.25rem;
-  font-weight: bold;
-}
-
-.item-content {
-  margin-left: 1rem;
-  flex: 1;
-}
-
-.item-title {
-  color: white;
-  font-size: 1rem;
-  font-weight: bold;
-  margin: 0;
-}
-
-.item-subtitle {
-  color: #666;
-  font-size: 0.875rem;
-  margin-top: 0.25rem;
-}
-EOL
-
-cat > my-tauri-app/src/styles/ui.css << 'EOL'
-.emoji-picker-modal {
-  position: fixed;
-  bottom: 5rem;
-  right: 2rem;
-  width: 20rem;
-  max-height: 25rem;
-  background-color: rgba(0, 0, 0, 0.95);
-  border: 1px solid #00f3ff;
-  border-radius: 0.75rem;
-  box-shadow: 0 0 1rem rgba(0, 243, 255, 0.5);
-  z-index: 1000;
-  overflow: hidden;
-}
-
-.emoji-picker-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1rem;
-  border-bottom: 1px solid rgba(0, 243, 255, 0.2);
-}
-
-.emoji-picker-header h3 {
-  color: #00f3ff;
-  margin: 0;
-}
-
-.close-button {
-  background: none;
-  border: none;
-  color: #00f3ff;
-  cursor: pointer;
-}
-
-.emoji-picker-content {
-  padding: 1rem;
-  overflow-y: auto;
-  max-height: calc(25rem - 3.5rem);
-}
-
-.emoji-category {
-  margin-bottom: 1.5rem;
-}
-
-.category-title {
-  color: #bf00ff;
-  font-size: 0.875rem;
-  margin-bottom: 0.75rem;
-}
-
-.emoji-grid {
-  display: grid;
-  grid-template-columns: repeat(8, 1fr);
-  gap: 0.5rem;
-}
-
-.emoji-button {
-  background: none;
-  border: none;
-  font-size: 1.5rem;
-  cursor: pointer;
-  padding: 0.25rem;
-  border-radius: 0.25rem;
-}
-
-.emoji-button:hover {
-  background-color: rgba(0, 243, 255, 0.1);
-}
-
-.settings-panel {
-  background-color: #111;
-  padding: 1rem;
-  border-radius: 0.5rem;
-  border: 1px solid #333;
-}
-
-.settings-option {
-  display: flex;
-  align-items: center;
-  padding: 0.75rem;
-  margin-bottom: 0.5rem;
-  background-color: #1a1a1a;
-  border-radius: 0.5rem;
-  border: 1px solid #333;
-}
-
-.option-text {
-  flex: 1;
-  color: white;
-  margin-left: 0.75rem;
-}
-
-.switch {
-  position: relative;
-  display: inline-block;
-  width: 3rem;
-  height: 1.5rem;
-}
-
-.switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: #333;
-  transition: .4s;
-  border-radius: 1.5rem;
-}
-
-.slider:before {
-  position: absolute;
-  content: "";
-  height: 1.1rem;
-  width: 1.1rem;
-  left: 0.2rem;
-  bottom: 0.2rem;
-  background-color: #666;
-  transition: .4s;
-  border-radius: 50%;
-}
-
-input:checked + .slider {
-  background-color: rgba(0, 243, 255, 0.2);
-}
-
-input:checked + .slider:before {
-  transform: translateX(1.5rem);
-  background-color: #00f3ff;
-}
-EOL
-
-echo "All files have been created with React + Tauri compatible versions!"
\ No newline at end of file
diff --git a/src/dashboard/components/DateRangePicker.tsx b/src/dashboard/components/DateRangePicker.tsx
index b0a900e..332d84a 100644
--- a/src/dashboard/components/DateRangePicker.tsx
+++ b/src/dashboard/components/DateRangePicker.tsx
@@ -1,63 +1,33 @@
 import React, { useState } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
-import DateTimePicker from '@react-native-community/datetimepicker';
+import { format } from 'date-fns';
 
 export function CalendarDateRangePicker() {
-  const [dateRange, setDateRange] = useState({ startDate: new Date(), endDate: new Date() });
-  const [showStartPicker, setShowStartPicker] = useState(false);
-  const [showEndPicker, setShowEndPicker] = useState(false);
-
-  const onChangeStart = (event, selectedDate) => {
-    setShowStartPicker(false);
-    if (selectedDate) {
-      setDateRange(prev => ({ ...prev, startDate: selectedDate }));
-    }
-  };
-
-  const onChangeEnd = (event, selectedDate) => {
-    setShowEndPicker(false);
-    if (selectedDate) {
-      setDateRange(prev => ({ ...prev, endDate: selectedDate }));
-    }
-  };
+  const [dateRange, setDateRange] = useState({ 
+    startDate: new Date(), 
+    endDate: new Date() 
+  });
 
   return (
-    <View style={styles.container}>
-      <TouchableOpacity onPress={() => setShowStartPicker(true)} style={styles.button}>
-        <Text>Start: {dateRange.startDate.toLocaleDateString()}</Text>
-      </TouchableOpacity>
-      <TouchableOpacity onPress={() => setShowEndPicker(true)} style={styles.button}>
-        <Text>End: {dateRange.endDate.toLocaleDateString()}</Text>
-      </TouchableOpacity>
-      {showStartPicker && (
-        <DateTimePicker
-          value={dateRange.startDate}
-          mode="date"
-          display="default"
-          onChange={onChangeStart}
-        />
-      )}
-      {showEndPicker && (
-        <DateTimePicker
-          value={dateRange.endDate}
-          mode="date"
-          display="default"
-          onChange={onChangeEnd}
-        />
-      )}
-    </View>
+    <div className="flex items-center gap-2">
+      <button 
+        className="px-3 py-1 border rounded"
+        onClick={() => {
+          const date = new Date(prompt("Enter start date (YYYY-MM-DD)") || dateRange.startDate);
+          setDateRange(prev => ({ ...prev, startDate: date }));
+        }}
+      >
+        Start: {format(dateRange.startDate, 'MMM dd, yyyy')}
+      </button>
+      <span>to</span>
+      <button 
+        className="px-3 py-1 border rounded"
+        onClick={() => {
+          const date = new Date(prompt("Enter end date (YYYY-MM-DD)") || dateRange.endDate);
+          setDateRange(prev => ({ ...prev, endDate: date }));
+        }}
+      >
+        End: {format(dateRange.endDate, 'MMM dd, yyyy')}
+      </button>
+    </div>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginVertical: 10,
-  },
-  button: {
-    padding: 10,
-    backgroundColor: '#f0f0f0',
-    borderRadius: 5,
-  },
-});
diff --git a/src/dashboard/components/MainNav.tsx b/src/dashboard/components/MainNav.tsx
index 410fb89..ff21c97 100644
--- a/src/dashboard/components/MainNav.tsx
+++ b/src/dashboard/components/MainNav.tsx
@@ -1,36 +1,16 @@
 import React from 'react';
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
 
 export function MainNav() {
   return (
-    <View style={styles.container}>
-      <TouchableOpacity style={styles.navItem}>
-        <Text style={styles.navText}>Overview</Text>
-      </TouchableOpacity>
-      <TouchableOpacity style={styles.navItem}>
-        <Text style={styles.navText}>Customers</Text>
-      </TouchableOpacity>
-      <TouchableOpacity style={styles.navItem}>
-        <Text style={styles.navText}>Products</Text>
-      </TouchableOpacity>
-      <TouchableOpacity style={styles.navItem}>
-        <Text style={styles.navText}>Settings</Text>
-      </TouchableOpacity>
-    </View>
+    <nav className="flex space-x-4">
+      {['Overview', 'Customers', 'Products', 'Settings'].map((item) => (
+        <button
+          key={item}
+          className="px-3 py-2 text-sm font-medium hover:text-primary"
+        >
+          {item}
+        </button>
+      ))}
+    </nav>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    alignItems: 'center',
-    paddingVertical: 10,
-  },
-  navItem: {
-    padding: 10,
-  },
-  navText: {
-    fontSize: 16,
-  },
-});
diff --git a/src/dashboard/components/Overview.tsx b/src/dashboard/components/Overview.tsx
index 425e947..682ef0e 100644
--- a/src/dashboard/components/Overview.tsx
+++ b/src/dashboard/components/Overview.tsx
@@ -1,60 +1,50 @@
 import React from 'react';
-import { View, Dimensions, StyleSheet } from 'react-native';
-import { BarChart } from 'react-native-chart-kit';
+import { Bar } from 'react-chartjs-2';
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+} from 'chart.js';
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend
+);
 
 const data = {
   labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
-  datasets: [
-    {
-      data: [
-        Math.random() * 100,
-        Math.random() * 100,
-        Math.random() * 100,
-        Math.random() * 100,
-        Math.random() * 100,
-        Math.random() * 100,
-        Math.random() * 100,
-        Math.random() * 100,
-        Math.random() * 100,
-        Math.random() * 100,
-        Math.random() * 100,
-        Math.random() * 100
-      ]
-    }
-  ]
+  datasets: [{
+    label: 'Revenue',
+    data: Array(12).fill(0).map(() => Math.random() * 100),
+    backgroundColor: 'rgba(0, 119, 255, 0.5)',
+  }]
+};
+
+const options = {
+  responsive: true,
+  plugins: {
+    legend: {
+      position: 'top' as const,
+    },
+    title: {
+      display: true,
+      text: 'Monthly Revenue',
+    },
+  },
 };
 
 export function Overview() {
   return (
-    <View style={styles.container}>
-      <BarChart
-        data={data}
-        width={Dimensions.get("window").width - 40}
-        height={220}
-        yAxisLabel="$"
-        chartConfig={{
-          backgroundColor: "#ffffff",
-          backgroundGradientFrom: "#ffffff",
-          backgroundGradientTo: "#ffffff",
-          decimalPlaces: 2,
-          color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
-          style: {
-            borderRadius: 16
-          }
-        }}
-        style={{
-          marginVertical: 8,
-          borderRadius: 16
-        }}
-      />
-    </View>
+    <div className="p-4 border rounded-lg">
+      <Bar options={options} data={data} />
+    </div>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginTop: 10,
-  },
-});
diff --git a/src/dashboard/components/RecentSales.tsx b/src/dashboard/components/RecentSales.tsx
index 6498155..597e923 100644
--- a/src/dashboard/components/RecentSales.tsx
+++ b/src/dashboard/components/RecentSales.tsx
@@ -1,6 +1,4 @@
 import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
-import { Avatar, ListItem } from 'react-native-elements';
 
 const salesData = [
   { name: "Olivia Martin", email: "olivia.martin@email.com", amount: "+$1,999.00" },
@@ -12,20 +10,21 @@ const salesData = [
 
 export function RecentSales() {
   return (
-    <View>
+    <div className="space-y-4">
       {salesData.map((item, index) => (
-        <ListItem key={index} bottomDivider>
-          <Avatar
-            rounded
-            source={{ uri: `https://i.pravatar.cc/150?u=${item.email}` }}
-          />
-          <ListItem.Content>
-            <ListItem.Title>{item.name}</ListItem.Title>
-            <ListItem.Subtitle>{item.email}</ListItem.Subtitle>
-          </ListItem.Content>
-          <Text>{item.amount}</Text>
-        </ListItem>
+        <div key={index} className="flex items-center justify-between p-2 border-b">
+          <div className="flex items-center space-x-3">
+            <div className="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center">
+              {item.name[0]}
+            </div>
+            <div>
+              <p className="font-medium">{item.name}</p>
+              <p className="text-sm text-gray-500">{item.email}</p>
+            </div>
+          </div>
+          <span className="font-medium">{item.amount}</span>
+        </div>
       ))}
-    </View>
+    </div>
   );
 }
diff --git a/src/dashboard/components/Search.tsx b/src/dashboard/components/Search.tsx
index 1e061e4..d62c468 100644
--- a/src/dashboard/components/Search.tsx
+++ b/src/dashboard/components/Search.tsx
@@ -1,31 +1,21 @@
 import React from 'react';
-import { View, StyleSheet } from 'react-native';
-import { Input } from 'react-native-elements';
 
 export function Search() {
   return (
-    <View style={styles.container}>
-      <Input
+    <div className="relative max-w-md">
+      <input
+        type="text"
         placeholder="Search..."
-        containerStyle={styles.inputContainer}
-        inputContainerStyle={styles.inputInnerContainer}
+        className="w-full pl-8 pr-4 py-2 rounded-full border focus:outline-none focus:ring-2 focus:ring-blue-500"
       />
-    </View>
+      <svg
+        className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-400"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+      </svg>
+    </div>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    width: '100%',
-    maxWidth: 300,
-  },
-  inputContainer: {
-    paddingHorizontal: 0,
-  },
-  inputInnerContainer: {
-    borderBottomWidth: 0,
-    backgroundColor: '#f0f0f0',
-    borderRadius: 20,
-    paddingHorizontal: 15,
-  },
-});
diff --git a/src/dashboard/components/TeamSwitcher.tsx b/src/dashboard/components/TeamSwitcher.tsx
index f966042..c53b020 100644
--- a/src/dashboard/components/TeamSwitcher.tsx
+++ b/src/dashboard/components/TeamSwitcher.tsx
@@ -1,6 +1,4 @@
 import React, { useState } from 'react';
-import { View, Text, TouchableOpacity, Modal, StyleSheet } from 'react-native';
-import { Avatar, Button, Input } from 'react-native-elements';
 
 const groups = [
   {
@@ -24,57 +22,83 @@ export function TeamSwitcher() {
   const [selectedTeam, setSelectedTeam] = useState(groups[0].teams[0]);
 
   return (
-    <View>
-      <TouchableOpacity onPress={() => setOpen(true)}>
-        <Avatar
-          rounded
-          source={{ uri: `https://avatar.vercel.sh/${selectedTeam.value}.png` }}
-        />
-        <Text>{selectedTeam.label}</Text>
-      </TouchableOpacity>
-      <Modal visible={open} animationType="slide">
-        <View style={styles.modal}>
-          <Input placeholder="Search team..." />
+    <div className="relative">
+      <button 
+        onClick={() => setOpen(true)}
+        className="flex items-center space-x-2"
+      >
+        <div className="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center">
+          {selectedTeam.label[0]}
+        </div>
+        <span>{selectedTeam.label}</span>
+      </button>
+
+      {open && (
+        <div className="absolute z-10 mt-2 w-56 bg-white rounded-md shadow-lg">
+          <div className="p-2">
+            <input 
+              type="text" 
+              placeholder="Search team..." 
+              className="w-full p-2 border rounded"
+            />
+          </div>
           {groups.map((group) => (
-            <View key={group.label}>
-              <Text style={styles.groupLabel}>{group.label}</Text>
+            <div key={group.label} className="py-1">
+              <p className="px-3 py-1 text-sm font-medium text-gray-500">{group.label}</p>
               {group.teams.map((team) => (
-                <TouchableOpacity
+                <button
                   key={team.value}
-                  onPress={() => {
+                  onClick={() => {
                     setSelectedTeam(team);
                     setOpen(false);
                   }}
+                  className="w-full text-left px-3 py-2 hover:bg-gray-100"
                 >
-                  <Text>{team.label}</Text>
-                </TouchableOpacity>
+                  {team.label}
+                </button>
               ))}
-            </View>
+            </div>
           ))}
-          <Button title="Create Team" onPress={() => setShowNewTeamDialog(true)} />
-          <Button title="Close" onPress={() => setOpen(false)} />
-        </View>
-      </Modal>
-      <Modal visible={showNewTeamDialog} animationType="slide">
-        <View style={styles.modal}>
-          <Text>Create team</Text>
-          <Input placeholder="Team name" />
-          <Button title="Create" onPress={() => setShowNewTeamDialog(false)} />
-          <Button title="Cancel" onPress={() => setShowNewTeamDialog(false)} />
-        </View>
-      </Modal>
-    </View>
+          <div className="border-t p-2">
+            <button 
+              onClick={() => {
+                setOpen(false);
+                setShowNewTeamDialog(true);
+              }}
+              className="w-full p-2 text-left hover:bg-gray-100"
+            >
+              Create Team
+            </button>
+          </div>
+        </div>
+      )}
+
+      {showNewTeamDialog && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
+          <div className="bg-white p-4 rounded-md">
+            <h3 className="text-lg font-medium mb-4">Create team</h3>
+            <input 
+              type="text" 
+              placeholder="Team name" 
+              className="w-full p-2 border rounded mb-4"
+            />
+            <div className="flex justify-end space-x-2">
+              <button 
+                onClick={() => setShowNewTeamDialog(false)}
+                className="px-4 py-2 border rounded"
+              >
+                Cancel
+              </button>
+              <button 
+                onClick={() => setShowNewTeamDialog(false)}
+                className="px-4 py-2 bg-blue-500 text-white rounded"
+              >
+                Create
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
   );
 }
-
-const styles = StyleSheet.create({
-  modal: {
-    flex: 1,
-    justifyContent: 'center',
-    padding: 20,
-  },
-  groupLabel: {
-    fontWeight: 'bold',
-    marginTop: 10,
-  },
-});
diff --git a/src/dashboard/components/UserNav.tsx b/src/dashboard/components/UserNav.tsx
index db519e4..d8052ac 100644
--- a/src/dashboard/components/UserNav.tsx
+++ b/src/dashboard/components/UserNav.tsx
@@ -1,57 +1,33 @@
-import React from 'react';
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
-import { Avatar, Overlay } from 'react-native-elements';
+import React, { useState } from 'react';
 
 export function UserNav() {
-  const [visible, setVisible] = React.useState(false);
-
-  const toggleOverlay = () => {
-    setVisible(!visible);
-  };
+  const [open, setOpen] = useState(false);
 
   return (
-    <View>
-      <TouchableOpacity onPress={toggleOverlay}>
-        <Avatar
-          rounded
-          source={{ uri: 'https://i.pravatar.cc/150?u=a042581f4e29026704d' }}
-        />
-      </TouchableOpacity>
-      <Overlay isVisible={visible} onBackdropPress={toggleOverlay}>
-        <View>
-          <Text style={styles.overlayText}>shadcn</Text>
-          <Text style={styles.overlaySubtext}>m@example.com</Text>
-          <TouchableOpacity style={styles.overlayButton}>
-            <Text>Profile</Text>
-          </TouchableOpacity>
-          <TouchableOpacity style={styles.overlayButton}>
-            <Text>Billing</Text>
-          </TouchableOpacity>
-          <TouchableOpacity style={styles.overlayButton}>
-            <Text>Settings</Text>
-          </TouchableOpacity>
-          <TouchableOpacity style={styles.overlayButton}>
-            <Text>New Team</Text>
-          </TouchableOpacity>
-          <TouchableOpacity style={styles.overlayButton}>
-            <Text>Log out</Text>
-          </TouchableOpacity>
-        </View>
-      </Overlay>
-    </View>
+    <div className="relative">
+      <button 
+        onClick={() => setOpen(!open)}
+        className="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center"
+      >
+        U
+      </button>
+
+      {open && (
+        <div className="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10">
+          <div className="p-2 border-b">
+            <p className="font-medium">shadcn</p>
+            <p className="text-sm text-gray-500">m@example.com</p>
+          </div>
+          {['Profile', 'Billing', 'Settings', 'New Team', 'Log out'].map((item) => (
+            <button
+              key={item}
+              className="w-full text-left px-3 py-2 hover:bg-gray-100"
+            >
+              {item}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
   );
 }
-
-const styles = StyleSheet.create({
-  overlayText: {
-    fontSize: 18,
-    fontWeight: 'bold',
-  },
-  overlaySubtext: {
-    fontSize: 14,
-    color: 'gray',
-  },
-  overlayButton: {
-    paddingVertical: 10,
-  },
-});
diff --git a/src/dashboard/index.tsx b/src/dashboard/index.tsx
index eb0dd0e..6c54156 100644
--- a/src/dashboard/index.tsx
+++ b/src/dashboard/index.tsx
@@ -1,6 +1,4 @@
 import React from 'react';
-import { View, Text, ScrollView, StyleSheet } from 'react-native';
-import { Button, Card } from 'react-native-elements';
 import { TeamSwitcher } from './components/TeamSwitcher';
 import { MainNav } from './components/MainNav';
 import { Search } from './components/Search';
@@ -11,71 +9,56 @@ import { RecentSales } from './components/RecentSales';
 
 export default function DashboardScreen() {
   return (
-    <ScrollView style={styles.container}>
-      <View style={styles.header}>
-        <TeamSwitcher />
-        <MainNav />
-        <View style={styles.rightHeader}>
-          <Search />
-          <UserNav />
-        </View>
-      </View>
-      <View style={styles.content}>
-        <View style={styles.titleRow}>
-          <Text style={styles.title}>Dashboard</Text>
-          <View style={styles.actions}>
+    <div className="min-h-screen bg-gray-50">
+      <header className="bg-white border-b">
+        <div className="container flex items-center justify-between h-16 px-4">
+          <TeamSwitcher />
+          <MainNav />
+          <div className="flex items-center space-x-4">
+            <Search />
+            <UserNav />
+          </div>
+        </div>
+      </header>
+
+      <main className="container p-4 space-y-4">
+        <div className="flex items-center justify-between">
+          <h1 className="text-2xl font-bold">Dashboard</h1>
+          <div className="flex items-center space-x-2">
             <CalendarDateRangePicker />
-            <Button title="Download" />
-          </View>
-        </View>
-        <View style={styles.cards}>
-          <Card>
-            <Card.Title>Total Revenue</Card.Title>
-            <Text style={styles.cardValue}>$45,231.89</Text>
-            <Text style={styles.cardSubtext}>+20.1% from last month</Text>
-          </Card>
-          <Card>
-            <Card.Title>Subscriptions</Card.Title>
-            <Text style={styles.cardValue}>+2350</Text>
-            <Text style={styles.cardSubtext}>+180.1% from last month</Text>
-          </Card>
-          <Card>
-            <Card.Title>Sales</Card.Title>
-            <Text style={styles.cardValue}>+12,234</Text>
-            <Text style={styles.cardSubtext}>+19% from last month</Text>
-          </Card>
-          <Card>
-            <Card.Title>Active Now</Card.Title>
-            <Text style={styles.cardValue}>+573</Text>
-            <Text style={styles.cardSubtext}>+201 since last hour</Text>
-          </Card>
-        </View>
-        <View style={styles.charts}>
-          <Card>
-            <Card.Title>Overview</Card.Title>
+            <button className="px-4 py-2 bg-blue-500 text-white rounded">
+              Download
+            </button>
+          </div>
+        </div>
+
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+          {[
+            { title: "Total Revenue", value: "$45,231.89", subtext: "+20.1% from last month" },
+            { title: "Subscriptions", value: "+2350", subtext: "+180.1% from last month" },
+            { title: "Sales", value: "+12,234", subtext: "+19% from last month" },
+            { title: "Active Now", value: "+573", subtext: "+201 since last hour" },
+          ].map((card, index) => (
+            <div key={index} className="p-6 bg-white border rounded-lg">
+              <h3 className="text-sm font-medium text-gray-500">{card.title}</h3>
+              <p className="text-2xl font-bold mt-1">{card.value}</p>
+              <p className="text-xs text-gray-500 mt-1">{card.subtext}</p>
+            </div>
+          ))}
+        </div>
+
+        <div className="grid gap-4 md:grid-cols-2">
+          <div className="p-6 bg-white border rounded-lg">
+            <h3 className="text-lg font-medium mb-4">Overview</h3>
             <Overview />
-          </Card>
-          <Card>
-            <Card.Title>Recent Sales</Card.Title>
-            <Text>You made 265 sales this month.</Text>
+          </div>
+          <div className="p-6 bg-white border rounded-lg space-y-4">
+            <h3 className="text-lg font-medium">Recent Sales</h3>
+            <p>You made 265 sales this month.</p>
             <RecentSales />
-          </Card>
-        </View>
-      </View>
-    </ScrollView>
+          </div>
+        </div>
+      </main>
+    </div>
   );
 }
-
-const styles = StyleSheet.create({
-  container: { flex: 1, backgroundColor:'white' },
-  header: { flexDirection: 'row', padding: 16, alignItems: 'center' },
-  rightHeader: { flexDirection: 'row', marginLeft: 'auto' },
-  content: { padding: 16 },
-  titleRow: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 },
-  title: { fontSize: 24, fontWeight: 'bold' },
-  actions: { flexDirection: 'row' },
-  cards: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between' },
-  charts: { marginTop: 16 },
-  cardValue: { fontSize: 20, fontWeight: 'bold' },
-  cardSubtext: { fontSize: 12, color: 'gray' },
-});
diff --git a/src/drive/components/FileBrowser.tsx b/src/drive/components/FileBrowser.tsx
index e86349b..c3d3c4b 100644
--- a/src/drive/components/FileBrowser.tsx
+++ b/src/drive/components/FileBrowser.tsx
@@ -7,7 +7,12 @@ interface FileItem {
   is_dir: boolean;
 }
 
-const FileBrowser = ({ path }: { path: string }) => {
+interface FileBrowserProps {
+  path: string;
+  onFileSelect?: (path: string) => void;
+}
+
+export function FileBrowser({ path, onFileSelect }: FileBrowserProps) {
   const [files, setFiles] = useState<FileItem[]>([]);
   const [loading, setLoading] = useState(false);
 
@@ -34,7 +39,11 @@ const FileBrowser = ({ path }: { path: string }) => {
       ) : (
         <ul className="space-y-1">
           {files.map((file) => (
-            <li key={file.path} className="p-2 hover:bg-gray-100 rounded">
+            <li 
+              key={file.path} 
+              className={`p-2 hover:bg-gray-100 rounded cursor-pointer ${file.is_dir ? 'font-medium' : ''}`}
+              onClick={() => onFileSelect && onFileSelect(file.path)}
+            >
               {file.is_dir ? '📁' : '📄'} {file.name}
             </li>
           ))}
@@ -42,6 +51,4 @@ const FileBrowser = ({ path }: { path: string }) => {
       )}
     </div>
   );
-};
-
-export default FileBrowser;
+}
diff --git a/src/drive/components/FileOperations.tsx b/src/drive/components/FileOperations.tsx
index 78677fb..03ee390 100644
--- a/src/drive/components/FileOperations.tsx
+++ b/src/drive/components/FileOperations.tsx
@@ -1,6 +1,5 @@
 import { invoke } from '@tauri-apps/api/tauri';
 import { open } from '@tauri-apps/api/dialog';
-import { writeBinaryFile, BaseDirectory } from '@tauri-apps/api/fs';
 import { useState } from 'react';
 
 interface FileOperationsProps {
@@ -8,7 +7,7 @@ interface FileOperationsProps {
   onRefresh: () => void;
 }
 
-const FileOperations = ({ currentPath, onRefresh }: FileOperationsProps) => {
+export function FileOperations({ currentPath, onRefresh }: FileOperationsProps) {
   const [uploadProgress, setUploadProgress] = useState(0);
 
   const handleUpload = async () => {
@@ -79,6 +78,4 @@ const FileOperations = ({ currentPath, onRefresh }: FileOperationsProps) => {
       )}
     </div>
   );
-};
-
-export default FileOperations;
+}
diff --git a/src/drive/components/FileTree.tsx b/src/drive/components/FileTree.tsx
index feef80f..ec45dc5 100644
--- a/src/drive/components/FileTree.tsx
+++ b/src/drive/components/FileTree.tsx
@@ -7,7 +7,11 @@ interface FileItem {
   is_dir: boolean;
 }
 
-const FileTree = ({ onSelect }: { onSelect: (path: string) => void }) => {
+interface FileTreeProps {
+  onSelect: (path: string) => void;
+}
+
+export function FileTree({ onSelect }: FileTreeProps) {
   const [tree, setTree] = useState<FileItem[]>([]);
   const [expanded, setExpanded] = useState<Record<string, boolean>>({});
 
@@ -43,7 +47,7 @@ const FileTree = ({ onSelect }: { onSelect: (path: string) => void }) => {
             </div>
             {expanded[item.path] && (
               <div className="pl-4">
-                <FileBrowser path={item.path} />
+                <FileBrowser path={item.path} onSelect={onSelect} />
               </div>
             )}
           </li>
@@ -51,6 +55,4 @@ const FileTree = ({ onSelect }: { onSelect: (path: string) => void }) => {
       </ul>
     </div>
   );
-};
-
-export default FileTree;
+}
diff --git a/src/drive/index.tsx b/src/drive/index.tsx
index 12b6a00..6f2eeaf 100644
--- a/src/drive/index.tsx
+++ b/src/drive/index.tsx
@@ -1,9 +1,9 @@
 import { useState } from 'react';
-import FileTree from './components/FileTree';
-import FileBrowser from './components/FileBrowser';
-import FileOperations from './components/FileOperations';
+import { FileTree } from './components/FileTree';
+import { FileBrowser } from './components/FileBrowser';
+import { FileOperations } from './components/FileOperations';
 
-const DriveScreen = () => {
+export function DriveScreen() {
   const [currentPath, setCurrentPath] = useState('');
   const [refreshKey, setRefreshKey] = useState(0);
 
@@ -20,6 +20,4 @@ const DriveScreen = () => {
       </div>
     </div>
   );
-};
-
-export default DriveScreen;
+}
diff --git a/src/mail/components/account-switcher.tsx b/src/mail/components/account-switcher.tsx
index 7a76497..b01844b 100644
--- a/src/mail/components/account-switcher.tsx
+++ b/src/mail/components/account-switcher.tsx
@@ -1,6 +1,4 @@
 import React, { useState } from 'react';
-import { View, Text, TouchableOpacity, Modal, FlatList } from 'react-native';
-import { StyleSheet } from 'react-native';
 
 interface Account {
   email: string;
@@ -13,101 +11,51 @@ interface AccountSwitcherProps {
   accounts: Account[];
 }
 
-function AccountSwitcher({ isCollapsed, accounts }: AccountSwitcherProps) {
+export function AccountSwitcher({ isCollapsed, accounts }: AccountSwitcherProps) {
   const [selectedAccount, setSelectedAccount] = useState<string>(accounts[0].email);
-  const [modalVisible, setModalVisible] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
   const selectedAccountData = accounts.find((account) => account.email === selectedAccount);
 
-  const renderItem = ({ item }: { item: Account }) => (
-    <TouchableOpacity
-      style={styles.accountItem}
-      onPress={() => {
-        setSelectedAccount(item.email);
-        setModalVisible(false);
-      }}
-    >
-      <View style={styles.iconContainer}>{item.icon}</View>
-      <Text style={styles.accountEmail}>{item.email}</Text>
-    </TouchableOpacity>
-  );
-
   return (
-    <View>
-      <TouchableOpacity
-        style={[styles.selectTrigger, isCollapsed && styles.collapsedTrigger]}
-        onPress={() => setModalVisible(true)}
+    <div className="relative">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className={`flex items-center ${isCollapsed ? 'justify-center' : 'space-x-2'}`}
       >
         {selectedAccountData && (
           <>
-            <View style={styles.iconContainer}>{selectedAccountData.icon}</View>
+            <div className="w-6 h-6 flex items-center justify-center">
+              {selectedAccountData.icon}
+            </div>
             {!isCollapsed && (
-              <Text style={styles.selectedAccountLabel}>{selectedAccountData.label}</Text>
+              <span>{selectedAccountData.label}</span>
             )}
           </>
         )}
-      </TouchableOpacity>
+      </button>
 
-      <Modal
-        animationType="slide"
-        transparent={true}
-        visible={modalVisible}
-        onRequestClose={() => setModalVisible(false)}
-      >
-        <View style={styles.modalContainer}>
-          <View style={styles.modalContent}>
-            <FlatList
-              data={accounts}
-              renderItem={renderItem}
-              keyExtractor={(item) => item.email}
-            />
-          </View>
-        </View>
-      </Modal>
-    </View>
+      {isOpen && (
+        <div className="absolute z-10 mt-2 w-56 bg-white rounded-md shadow-lg">
+          <div className="p-2">
+            {accounts.map((account) => (
+              <button
+                key={account.email}
+                onClick={() => {
+                  setSelectedAccount(account.email);
+                  setIsOpen(false);
+                }}
+                className="w-full text-left px-3 py-2 hover:bg-gray-100 flex items-center space-x-2"
+              >
+                <div className="w-5 h-5 flex items-center justify-center">
+                  {account.icon}
+                </div>
+                <span>{account.label}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
   );
 }
-
-const styles = StyleSheet.create({
-  selectTrigger: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 10,
-    backgroundColor: '#f0f0f0',
-    borderRadius: 5,
-  },
-  collapsedTrigger: {
-    width: 40,
-    height: 40,
-    justifyContent: 'center',
-  },
-  iconContainer: {
-    marginRight: 10,
-  },
-  selectedAccountLabel: {
-    flex: 1,
-  },
-  modalContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-  },
-  modalContent: {
-    backgroundColor: 'white',
-    borderRadius: 10,
-    padding: 20,
-    width: '80%',
-    maxHeight: '80%',
-  },
-  accountItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 10,
-  },
-  accountEmail: {
-    marginLeft: 10,
-  },
-});
-
-export default AccountSwitcher;
diff --git a/src/mail/components/mail-display.tsx b/src/mail/components/mail-display.tsx
index 8409195..6a9620e 100644
--- a/src/mail/components/mail-display.tsx
+++ b/src/mail/components/mail-display.tsx
@@ -1,80 +1,8 @@
 import React, { useState } from 'react';
-import { View, Text, TouchableOpacity, TextInput, StyleSheet, ScrollView, Modal } from 'react-native';
-import Icon from 'react-native-vector-icons/Feather';
-import { Switch } from 'react-native';
+import { format } from 'date-fns';
 
-// Simple Avatar component
-const Avatar = ({ name }: { name: string }) => (
-  <View style={styles.avatar}>
-    <Text style={styles.avatarText}>{name[0]}</Text>
-  </View>
-);
-
-const formatDistanceToNow = (date: Date) => {
-  const now = new Date();
-  const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);
-  
-  if (diffInSeconds < 60) return 'just now';
-  if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)} minutes ago`;
-  if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)} hours ago`;
-  if (diffInSeconds < 2592000) return `${Math.floor(diffInSeconds / 86400)} days ago`;
-  if (diffInSeconds < 31536000) return `${Math.floor(diffInSeconds / 2592000)} months ago`;
-  return `${Math.floor(diffInSeconds / 31536000)} years ago`;
-};
-
-// Simple Separator component
-const Separator = () => <View style={styles.separator} />;
-
-// Simple Tooltip component (placeholder)
-const Tooltip = ({ content, children }: { content: string; children: React.ReactNode }) => (
-  <View>
-    {children}
-    {/* Implement tooltip logic here */}
-  </View>
-);
-
-// Simple Calendar component (placeholder)
-const Calendar = () => (
-  <View>
-    <Text>Calendar Placeholder</Text>
-  </View>
-);
-
-// Helper function to format date
-const formatDate = (date: Date) => {
-  return date.toLocaleString('en-US', {
-    weekday: 'short',
-    month: 'short',
-    day: 'numeric',
-    hour: 'numeric',
-    minute: 'numeric',
-    hour12: true,
-  });
-};
-
-// Helper function to add hours to a date
-const addHours = (date: Date, hours: number) => {
-  const newDate = new Date(date);
-  newDate.setHours(date.getHours() + hours);
-  return newDate;
-};
-
-// Helper function to add days to a date
-const addDays = (date: Date, days: number) => {
-  const newDate = new Date(date);
-  newDate.setDate(date.getDate() + days);
-  return newDate;
-};
-
-// Helper function to get next Saturday
-const nextSaturday = (date: Date) => {
-  const newDate = new Date(date);
-  newDate.setDate(date.getDate() + ((6 - date.getDay() + 7) % 7));
-  return newDate;
-};
-
-// Define Mail type
 interface Mail {
+  id: string;
   name: string;
   subject: string;
   email: string;
@@ -88,255 +16,53 @@ interface MailDisplayProps {
 
 export function MailDisplay({ mail }: MailDisplayProps) {
   const [isPopoverVisible, setIsPopoverVisible] = useState(false);
-  const today = new Date();
 
-  const renderToolbarButton = (icon: string, label: string, onPress: () => void) => (
-    <Tooltip content={label}>
-      <TouchableOpacity style={styles.toolbarButton} onPress={onPress} disabled={!mail}>
-        <Icon name={icon} size={16} color="#000" />
-      </TouchableOpacity>
-    </Tooltip>
-  );
+  if (!mail) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <p>No message selected</p>
+      </div>
+    );
+  }
 
   return (
-    <View style={styles.container}>
-      <View style={styles.toolbar}>
-        <View style={styles.toolbarGroup}>
-          {renderToolbarButton('archive', 'Archive', () => {})}
-          {renderToolbarButton('x-square', 'Move to junk', () => {})}
-          {renderToolbarButton('trash-2', 'Move to trash', () => {})}
-          <Separator />
-          <TouchableOpacity
-            style={styles.toolbarButton}
-            onPress={() => setIsPopoverVisible(true)}
-            disabled={!mail}
-          >
-            <Icon name="clock" size={16} color="#000" />
-          </TouchableOpacity>
-        </View>
-        <View style={styles.toolbarGroup}>
-          {renderToolbarButton('reply', 'Reply', () => {})}
-          {renderToolbarButton('reply-all', 'Reply all', () => {})}
-          {renderToolbarButton('corner-up-right', 'Forward', () => {})}
-        </View>
-        <Separator />
-        <TouchableOpacity style={styles.toolbarButton} disabled={!mail}>
-          <Icon name="more-vertical" size={16} color="#000" />
-        </TouchableOpacity>
-      </View>
-      <Separator />
-      {mail ? (
-        <ScrollView style={styles.mailContent}>
-          <View style={styles.mailHeader}>
-            <View style={styles.mailSender}>
-              <Avatar name={mail.name} />
-              <View style={styles.mailSenderInfo}>
-                <Text style={styles.mailSenderName}>{mail.name}</Text>
-                <Text style={styles.mailSubject}>{mail.subject}</Text>
-                <Text style={styles.mailReplyTo}>
-                  <Text style={styles.mailReplyToLabel}>Reply-To:</Text> {mail.email}
-                </Text>
-              </View>
-            </View>
-            {mail.date && (
-              <Text style={styles.mailDate}>
-                {formatDate(new Date(mail.date))}
-              </Text>
-            )}
-          </View>
-          <Separator />
-          <Text style={styles.mailBody}>{mail.text}</Text>
-          <Separator />
-          <View style={styles.replyForm}>
-            <TextInput
-              style={styles.replyInput}
-              multiline
-              placeholder={`Reply ${mail.name}...`}
-            />
-            <View style={styles.replyFormFooter}>
-              <View style={styles.muteThreadContainer}>
-                <Switch />
-                <Text style={styles.muteThreadLabel}>Mute this thread</Text>
-              </View>
-              <TouchableOpacity style={styles.sendButton}>
-                <Text style={styles.sendButtonText}>Send</Text>
-              </TouchableOpacity>
-            </View>
-          </View>
-        </ScrollView>
-      ) : (
-        <View style={styles.noMailSelected}>
-          <Text>No message selected</Text>
-        </View>
-      )}
-      <Modal
-        visible={isPopoverVisible}
-        transparent
-        animationType="slide"
-        onRequestClose={() => setIsPopoverVisible(false)}
-      >
-        <View style={styles.modalOverlay}>
-          <View style={styles.modalContent}>
-            <Text style={styles.modalTitle}>Snooze until</Text>
-            <TouchableOpacity style={styles.snoozeOption}>
-              <Text>Later today</Text>
-              <Text style={styles.snoozeTime}>
-                {formatDate(addHours(today, 4))}
-              </Text>
-            </TouchableOpacity>
-            <TouchableOpacity style={styles.snoozeOption}>
-              <Text>Tomorrow</Text>
-              <Text style={styles.snoozeTime}>
-                {formatDate(addDays(today, 1))}
-              </Text>
-            </TouchableOpacity>
-            <TouchableOpacity style={styles.snoozeOption}>
-              <Text>This weekend</Text>
-              <Text style={styles.snoozeTime}>
-                {formatDate(nextSaturday(today))}
-              </Text>
-            </TouchableOpacity>
-            <TouchableOpacity style={styles.snoozeOption}>
-              <Text>Next week</Text>
-              <Text style={styles.snoozeTime}>
-                {formatDate(addDays(today, 7))}
-              </Text>
-            </TouchableOpacity>
-            <Calendar />
-          </View>
-        </View>
-      </Modal>
-    </View>
+    <div className="flex flex-col h-full">
+      <div className="flex items-center justify-between p-4 border-b">
+        <div className="flex items-center space-x-4">
+          <div className="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center">
+            {mail.name[0]}
+          </div>
+          <div>
+            <h3 className="font-medium">{mail.name}</h3>
+            <p className="text-sm text-gray-500">{mail.subject}</p>
+            <p className="text-xs text-gray-500">Reply-To: {mail.email}</p>
+          </div>
+        </div>
+        <span className="text-sm text-gray-500">
+          {format(new Date(mail.date), 'MMM d, yyyy h:mm a')}
+        </span>
+      </div>
+
+      <div className="flex-1 p-4 overflow-auto">
+        <p className="whitespace-pre-line">{mail.text}</p>
+      </div>
+
+      <div className="p-4 border-t">
+        <textarea
+          placeholder={`Reply ${mail.name}...`}
+          className="w-full p-2 border rounded"
+          rows={4}
+        />
+        <div className="flex justify-between items-center mt-2">
+          <label className="flex items-center space-x-2">
+            <input type="checkbox" />
+            <span className="text-sm">Mute this thread</span>
+          </label>
+          <button className="px-4 py-2 bg-blue-500 text-white rounded">
+            Send
+          </button>
+        </div>
+      </div>
+    </div>
   );
 }
-
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  toolbar: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    padding: 8,
-  },
-  toolbarGroup: {
-    flexDirection: 'row',
-  },
-  toolbarButton: {
-    padding: 8,
-  },
-  mailContent: {
-    flex: 1,
-  },
-  mailHeader: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    padding: 16,
-  },
-  mailSender: {
-    flexDirection: 'row',
-  },
-  mailSenderInfo: {
-    marginLeft: 16,
-  },
-  mailSenderName: {
-    fontWeight: 'bold',
-  },
-  mailSubject: {
-    fontSize: 12,
-  },
-  mailReplyTo: {
-    fontSize: 12,
-  },
-  mailReplyToLabel: {
-    fontWeight: 'bold',
-  },
-  mailDate: {
-    fontSize: 12,
-    color: '#666',
-  },
-  mailBody: {
-    padding: 16,
-    fontSize: 14,
-  },
-  replyForm: {
-    padding: 16,
-  },
-  replyInput: {
-    borderWidth: 1,
-    borderColor: '#ccc',
-    borderRadius: 4,
-    padding: 8,
-    minHeight: 100,
-  },
-  replyFormFooter: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginTop: 8,
-  },
-  muteThreadContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  muteThreadLabel: {
-    marginLeft: 8,
-    fontSize: 12,
-  },
-  sendButton: {
-    backgroundColor: '#007AFF',
-    padding: 8,
-    borderRadius: 4,
-  },
-  sendButtonText: {
-    color: '#fff',
-  },
-  noMailSelected: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  modalOverlay: {
-    flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  modalContent: {
-    backgroundColor: '#fff',
-    padding: 16,
-    borderRadius: 8,
-    width: '80%',
-  },
-  modalTitle: {
-    fontSize: 18,
-    fontWeight: 'bold',
-    marginBottom: 16,
-  },
-  snoozeOption: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    paddingVertical: 8,
-  },
-  snoozeTime: {
-    color: '#666',
-  },
-  avatar: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    backgroundColor: '#ccc',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  avatarText: {
-    fontSize: 18,
-    color: '#fff',
-  },
-  separator: {
-    height: 1,
-    backgroundColor: '#e0e0e0',
-    marginVertical: 8,
-  },
-});
diff --git a/src/mail/components/mail-list.tsx b/src/mail/components/mail-list.tsx
index b93a5b2..88ccf09 100644
--- a/src/mail/components/mail-list.tsx
+++ b/src/mail/components/mail-list.tsx
@@ -1,147 +1,56 @@
-import React from "react";
-import { View, Text, TouchableOpacity, FlatList, StyleSheet } from "react-native";
+import React from 'react';
+import { formatDistanceToNow } from 'date-fns';
 
-import { Mail } from "../data";
-import { useMail } from "../use-mail";
+interface Mail {
+  id: string;
+  name: string;
+  subject: string;
+  email: string;
+  date: string;
+  text: string;
+  read: boolean;
+  labels: string[];
+}
 
 interface MailListProps {
   items: Mail[];
+  selectedId?: string;
+  onSelect: (id: string) => void;
 }
 
-export function MailList({ items }: MailListProps) {
-  const [mail, setMail] = useMail();
-
-  const formatDistanceToNow = (date: Date) => {
-    const now = new Date();
-    const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);
-    
-    if (diffInSeconds < 60) return 'just now';
-    if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)} minutes ago`;
-    if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)} hours ago`;
-    if (diffInSeconds < 2592000) return `${Math.floor(diffInSeconds / 86400)} days ago`;
-    if (diffInSeconds < 31536000) return `${Math.floor(diffInSeconds / 2592000)} months ago`;
-    return `${Math.floor(diffInSeconds / 31536000)} years ago`;
-  };
-
-  const renderItem = ({ item }: { item: Mail }) => (
-    <TouchableOpacity
-      style={[
-        styles.mailItem,
-        mail.selected === item.id && styles.selectedMailItem,
-      ]}
-      onPress={() =>
-        setMail({
-          ...mail,
-          selected: item.id,
-        })
-      }
-    >
-      <View style={styles.mailHeader}>
-        <View style={styles.nameContainer}>
-          <Text style={styles.name}>{item.name}</Text>
-          {!item.read && <View style={styles.unreadDot} />}
-        </View>
-        <Text
-          style={[
-            styles.date,
-            mail.selected === item.id ? styles.selectedDate : styles.mutedDate,
-          ]}
-        >
-          {formatDistanceToNow(new Date(item.date))}
-        </Text>
-      </View>
-      <Text style={styles.subject}>{item.subject}</Text>
-      <Text style={styles.preview} numberOfLines={2}>
-        {item.text.substring(0, 300)}
-      </Text>
-      {item.labels.length > 0 && (
-        <View style={styles.labelContainer}>
-          {item.labels.map((label) => (
-            <View key={label} style={styles.label}>
-              <Text style={styles.labelText}>{label}</Text>
-            </View>
-          ))}
-        </View>
-      )}
-    </TouchableOpacity>
-  );
-
+export function MailList({ items, selectedId, onSelect }: MailListProps) {
   return (
-    <FlatList
-      data={items}
-      renderItem={renderItem}
-      keyExtractor={(item) => item.id}
-      contentContainerStyle={styles.container}
-    />
+    <div className="space-y-2">
+      {items.map((item) => (
+        <div
+          key={item.id}
+          onClick={() => onSelect(item.id)}
+          className={`p-4 border rounded cursor-pointer ${selectedId === item.id ? 'bg-gray-100' : ''}`}
+        >
+          <div className="flex justify-between items-start">
+            <div className="flex items-center space-x-3">
+              <div className={`w-2 h-2 rounded-full ${item.read ? 'bg-transparent' : 'bg-blue-500'}`} />
+              <h3 className="font-medium">{item.name}</h3>
+            </div>
+            <span className="text-sm text-gray-500">
+              {formatDistanceToNow(new Date(item.date), { addSuffix: true })}
+            </span>
+          </div>
+          <h4 className="font-medium mt-1">{item.subject}</h4>
+          <p className="text-sm text-gray-500 mt-1 truncate">
+            {item.text.substring(0, 100)}...
+          </p>
+          {item.labels.length > 0 && (
+            <div className="flex flex-wrap gap-1 mt-2">
+              {item.labels.map((label) => (
+                <span key={label} className="px-2 py-1 text-xs bg-gray-200 rounded">
+                  {label}
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    paddingHorizontal: 16,
-    paddingTop: 16,
-  },
-  mailItem: {
-    borderWidth: 1,
-    borderColor: '#e0e0e0',
-    borderRadius: 8,
-    padding: 12,
-    marginBottom: 8,
-  },
-  selectedMailItem: {
-    backgroundColor: '#f0f0f0',
-  },
-  mailHeader: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: 4,
-  },
-  nameContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  name: {
-    fontWeight: 'bold',
-    marginRight: 8,
-  },
-  unreadDot: {
-    width: 8,
-    height: 8,
-    borderRadius: 4,
-    backgroundColor: 'blue',
-  },
-  date: {
-    fontSize: 12,
-  },
-  selectedDate: {
-    color: '#000',
-  },
-  mutedDate: {
-    color: '#666',
-  },
-  subject: {
-    fontWeight: '500',
-    marginBottom: 4,
-  },
-  preview: {
-    fontSize: 14,
-    color: '#666',
-    marginBottom: 8,
-  },
-  labelContainer: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  label: {
-    backgroundColor: '#e0e0e0',
-    borderRadius: 12,
-    paddingVertical: 4,
-    paddingHorizontal: 8,
-    marginRight: 4,
-    marginBottom: 4,
-  },
-  labelText: {
-    fontSize: 12,
-  },
-});
diff --git a/src/mail/components/mail.tsx b/src/mail/components/mail.tsx
index 57b67b9..ed7dafe 100644
--- a/src/mail/components/mail.tsx
+++ b/src/mail/components/mail.tsx
@@ -1,146 +1,72 @@
 import React, { useState } from 'react';
-import {
-  View,
-  Text,
-  ScrollView,
-  StyleSheet,
-  TouchableOpacity,
-  TextInput,
-} from 'react-native';
-
-
-import { MailDisplay } from './mail-display';
+import { AccountSwitcher } from './account-switcher';
 import { MailList } from './mail-list';
-import { Nav } from './nav';
-import { useMail } from '../use-mail';
+import { MailDisplay } from './mail-display';
+import { mails, accounts } from '../data';
 
-interface MailProps {
-  accounts: {
-    label: string;
-    email: string;
-    icon: React.ReactNode;
-  }[];
-  mails: [];
-}
-
-export function Mail({ accounts, mails }: MailProps) {
+export function Mail() {
   const [isCollapsed, setIsCollapsed] = useState(false);
   const [activeTab, setActiveTab] = useState('all');
-  const [mail] = useMail();
+  const [selectedMailId, setSelectedMailId] = useState<string | null>(null);
 
   const toggleCollapse = () => setIsCollapsed(!isCollapsed);
 
+  const filteredMails = activeTab === 'all' 
+    ? mails 
+    : mails.filter(mail => !mail.read);
+
   return (
-    <View style={styles.container}>
-      <View style={[styles.sidebar, isCollapsed && styles.collapsedSidebar]}>
-        <TouchableOpacity onPress={toggleCollapse} style={styles.collapseButton}>
-          
-        </TouchableOpacity>
-        {!isCollapsed && (
-          <>
-            
-          </>
-        )}
-      </View>
-      <View style={styles.content}>
-        <View style={styles.header}>
-          <Text style={styles.title}>Inbox</Text>
-          <View style={styles.tabs}>
-            <TouchableOpacity
-              style={[styles.tab, activeTab === 'all' && styles.activeTab]}
-              onPress={() => setActiveTab('all')}
-            >
-              <Text>All mail</Text>
-            </TouchableOpacity>
-            <TouchableOpacity
-              style={[styles.tab, activeTab === 'unread' && styles.activeTab]}
-              onPress={() => setActiveTab('unread')}
-            >
-              <Text>Unread</Text>
-            </TouchableOpacity>
-          </View>
-        </View>
-        <View style={styles.searchContainer}>
-          
-          <TextInput
-            style={styles.searchInput}
-            placeholder="Search"
-            placeholderTextColor="gray"
+    <div className="flex h-screen">
+      <div className={`${isCollapsed ? 'w-16' : 'w-64'} border-r flex flex-col`}>
+        <div className="p-4 border-b">
+          <AccountSwitcher isCollapsed={isCollapsed} accounts={accounts} />
+        </div>
+        <div className="p-4">
+          <button onClick={toggleCollapse} className="w-full text-left">
+            {isCollapsed ? '»' : '« Collapse'}
+          </button>
+        </div>
+      </div>
+
+      <div className="flex-1 flex flex-col border-r">
+        <div className="p-4 border-b">
+          <div className="flex justify-between items-center">
+            <h2 className="text-xl font-bold">Inbox</h2>
+            <div className="flex space-x-2">
+              <button
+                onClick={() => setActiveTab('all')}
+                className={`px-3 py-1 rounded ${activeTab === 'all' ? 'bg-blue-500 text-white' : ''}`}
+              >
+                All mail
+              </button>
+              <button
+                onClick={() => setActiveTab('unread')}
+                className={`px-3 py-1 rounded ${activeTab === 'unread' ? 'bg-blue-500 text-white' : ''}`}
+              >
+                Unread
+              </button>
+            </div>
+          </div>
+          <div className="mt-4">
+            <input
+              type="text"
+              placeholder="Search"
+              className="w-full p-2 border rounded"
+            />
+          </div>
+        </div>
+        <div className="flex-1 overflow-auto">
+          <MailList 
+            items={filteredMails} 
+            selectedId={selectedMailId}
+            onSelect={setSelectedMailId}
           />
-        </View>
-        <ScrollView>
-          <MailList
-            items={activeTab === 'all' ? mails : mails.filter((item) => !item.read)}
-          />
-        </ScrollView>
-      </View>
-      <View style={styles.mailDisplay}>
-        <MailDisplay
-          mail={mails.find((item) => item.id === mail.selected) || null}
-        />
-      </View>
-    </View>
+        </div>
+      </div>
+
+      <div className="flex-1">
+        <MailDisplay mail={mails.find(mail => mail.id === selectedMailId) || null} />
+      </div>
+    </div>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexDirection: 'row',
-  },
-  sidebar: {
-    width: 250,
-    backgroundColor: '#f0f0f0',
-  },
-  collapsedSidebar: {
-    width: 50,
-  },
-  collapseButton: {
-    padding: 10,
-  },
-  content: {
-    flex: 1,
-    backgroundColor: '#ffffff',
-  },
-  header: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    padding: 10,
-    borderBottomWidth: 1,
-    borderBottomColor: '#e0e0e0',
-  },
-  title: {
-    fontSize: 20,
-    fontWeight: 'bold',
-  },
-  tabs: {
-    flexDirection: 'row',
-  },
-  tab: {
-    padding: 10,
-  },
-  activeTab: {
-    borderBottomWidth: 2,
-    borderBottomColor: 'blue',
-  },
-  searchContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: '#f0f0f0',
-    margin: 10,
-    borderRadius: 5,
-  },
-  searchIcon: {
-    padding: 10,
-  },
-  searchInput: {
-    flex: 1,
-    padding: 10,
-  },
-  mailDisplay: {
-    width: '40%',
-    borderLeftWidth: 1,
-    borderLeftColor: '#e0e0e0',
-  },
-});
diff --git a/src/mail/components/nav.tsx b/src/mail/components/nav.tsx
index 700d281..9bfd2af 100644
--- a/src/mail/components/nav.tsx
+++ b/src/mail/components/nav.tsx
@@ -1,102 +1,36 @@
 import React from 'react';
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
-import { LucideIcon } from 'lucide-react-native';
 
 interface NavProps {
   isCollapsed: boolean;
   links: {
     title: string;
     label?: string;
-    icon: LucideIcon;
+    icon: React.ReactNode;
     variant: 'default' | 'ghost';
   }[];
 }
 
 export function Nav({ links, isCollapsed }: NavProps) {
   return (
-    <View style={[styles.container, isCollapsed && styles.collapsedContainer]}>
-      <View style={styles.nav}>
-        {links.map((link, index) => (
-          <TouchableOpacity
-            key={index}
-            style={[
-              styles.link,
-              isCollapsed ? styles.collapsedLink : styles.expandedLink,
-              link.variant === 'default' ? styles.defaultVariant : styles.ghostVariant,
-            ]}
-            onPress={() => {/* Add navigation logic here */}}
-          >
-            <link.icon
-              style={[
-                styles.icon,
-                isCollapsed ? styles.collapsedIcon : styles.expandedIcon,
-              ]}
-            />
+    <div className={`flex ${isCollapsed ? 'flex-col items-center' : 'flex-col'}`}>
+      {links.map((link, index) => (
+        <button
+          key={index}
+          className={`flex items-center p-2 rounded ${link.variant === 'default' ? 'bg-gray-100' : ''} ${isCollapsed ? 'justify-center' : 'justify-between'}`}
+        >
+          <div className="flex items-center">
+            <span className="w-5 h-5 flex items-center justify-center">
+              {link.icon}
+            </span>
             {!isCollapsed && (
-              <>
-                <Text style={styles.title}>{link.title}</Text>
-                {link.label && (
-                  <Text style={styles.label}>{link.label}</Text>
-                )}
-              </>
+              <span className="ml-2">{link.title}</span>
             )}
-          </TouchableOpacity>
-        ))}
-      </View>
-    </View>
+          </div>
+          {!isCollapsed && link.label && (
+            <span className="text-xs text-gray-500">{link.label}</span>
+          )}
+        </button>
+      ))}
+    </div>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'column',
-    gap: 16,
-    paddingVertical: 8,
-  },
-  collapsedContainer: {
-    paddingVertical: 8,
-  },
-  nav: {
-    gap: 4,
-    paddingHorizontal: 8,
-  },
-  link: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 8,
-    borderRadius: 4,
-  },
-  collapsedLink: {
-    justifyContent: 'center',
-    width: 36,
-    height: 36,
-  },
-  expandedLink: {
-    justifyContent: 'flex-start',
-  },
-  defaultVariant: {
-    backgroundColor: '#f3f4f6',
-  },
-  ghostVariant: {
-    backgroundColor: 'transparent',
-  },
-  icon: {
-    width: 16,
-    height: 16,
-  },
-  collapsedIcon: {
-    marginRight: 0,
-  },
-  expandedIcon: {
-    marginRight: 8,
-  },
-  title: {
-    fontSize: 14,
-    fontWeight: '500',
-  },
-  label: {
-    fontSize: 12,
-    marginLeft: 'auto',
-    color: '#6b7280',
-  },
-});
diff --git a/src/mail/data.tsx b/src/mail/data.tsx
index 2807a4a..0052457 100644
--- a/src/mail/data.tsx
+++ b/src/mail/data.tsx
@@ -19,159 +19,8 @@ export const mails = [
     read: true,
     labels: ["work", "important"],
   },
-  {
-    id: "3e7c3f6d-bdf5-46ae-8d90-171300f27ae2",
-    name: "Bob Johnson",
-    email: "bobjohnson@example.com",
-    subject: "Weekend Plans",
-    text: "Any plans for the weekend? I was thinking of going hiking in the nearby mountains. It's been a while since we had some outdoor fun.\n\nIf you're interested, let me know, and we can plan the details. It'll be a great way to unwind and enjoy nature.\n\nLooking forward to your response!\n\nBest, Bob",
-    date: "2023-04-10T11:45:00",
-    read: true,
-    labels: ["personal"],
-  },
-  {
-    id: "61c35085-72d7-42b4-8d62-738f700d4b92",
-    name: "Emily Davis",
-    email: "emilydavis@example.com",
-    subject: "Re: Question about Budget",
-    text: "I have a question about the budget for the upcoming project. It seems like there's a discrepancy in the allocation of resources.\n\nI've reviewed the budget report and identified a few areas where we might be able to optimize our spending without compromising the project's quality.\n\nI've attached a detailed analysis for your reference. Let's discuss this further in our next meeting.\n\nThanks, Emily",
-    date: "2023-03-25T13:15:00",
-    read: false,
-    labels: ["work", "budget"],
-  },
-  {
-    id: "8f7b5db9-d935-4e42-8e05-1f1d0a3dfb97",
-    name: "Michael Wilson",
-    email: "michaelwilson@example.com",
-    subject: "Important Announcement",
-    text: "I have an important announcement to make during our team meeting. It pertains to a strategic shift in our approach to the upcoming product launch. We've received valuable feedback from our beta testers, and I believe it's time to make some adjustments to better meet our customers' needs.\n\nThis change is crucial to our success, and I look forward to discussing it with the team. Please be prepared to share your insights during the meeting.\n\nRegards, Michael",
-    date: "2023-03-10T15:00:00",
-    read: false,
-    labels: ["meeting", "work", "important"],
-  },
-  {
-    id: "1f0f2c02-e299-40de-9b1d-86ef9e42126b",
-    name: "Sarah Brown",
-    email: "sarahbrown@example.com",
-    subject: "Re: Feedback on Proposal",
-    text: "Thank you for your feedback on the proposal. It looks great! I'm pleased to hear that you found it promising. The team worked diligently to address all the key points you raised, and I believe we now have a strong foundation for the project.\n\nI've attached the revised proposal for your review.\n\nPlease let me know if you have any further comments or suggestions. Looking forward to your response.\n\nBest regards, Sarah",
-    date: "2023-02-15T16:30:00",
-    read: true,
-    labels: ["work"],
-  },
-  {
-    id: "17c0a96d-4415-42b1-8b4f-764efab57f66",
-    name: "David Lee",
-    email: "davidlee@example.com",
-    subject: "New Project Idea",
-    text: "I have an exciting new project idea to discuss with you. It involves expanding our services to target a niche market that has shown considerable growth in recent months.\n\nI've prepared a detailed proposal outlining the potential benefits and the strategy for execution.\n\nThis project has the potential to significantly impact our business positively. Let's set up a meeting to dive into the details and determine if it aligns with our current goals.\n\nBest regards, David",
-    date: "2023-01-28T17:45:00",
-    read: false,
-    labels: ["meeting", "work", "important"],
-  },
-  {
-    id: "2f0130cb-39fc-44c4-bb3c-0a4337edaaab",
-    name: "Olivia Wilson",
-    email: "oliviawilson@example.com",
-    subject: "Vacation Plans",
-    text: "Let's plan our vacation for next month. What do you think? I've been thinking of visiting a tropical paradise, and I've put together some destination options.\n\nI believe it's time for us to unwind and recharge. Please take a look at the options and let me know your preferences.\n\nWe can start making arrangements to ensure a smooth and enjoyable trip.\n\nExcited to hear your thoughts! Olivia",
-    date: "2022-12-20T18:30:00",
-    read: true,
-    labels: ["personal"],
-  },
-  {
-    id: "de305d54-75b4-431b-adb2-eb6b9e546014",
-    name: "James Martin",
-    email: "jamesmartin@example.com",
-    subject: "Re: Conference Registration",
-    text: "I've completed the registration for the conference next month. The event promises to be a great networking opportunity, and I'm looking forward to attending the various sessions and connecting with industry experts.\n\nI've also attached the conference schedule for your reference.\n\nIf there are any specific topics or sessions you'd like me to explore, please let me know. It's an exciting event, and I'll make the most of it.\n\nBest regards, James",
-    date: "2022-11-30T19:15:00",
-    read: true,
-    labels: ["work", "conference"],
-  },
-  {
-    id: "7dd90c63-00f6-40f3-bd87-5060a24e8ee7",
-    name: "Sophia White",
-    email: "sophiawhite@example.com",
-    subject: "Team Dinner",
-    text: "Let's have a team dinner next week to celebrate our success. We've achieved some significant milestones, and it's time to acknowledge our hard work and dedication.\n\nI've made reservations at a lovely restaurant, and I'm sure it'll be an enjoyable evening.\n\nPlease confirm your availability and any dietary preferences. Looking forward to a fun and memorable dinner with the team!\n\nBest, Sophia",
-    date: "2022-11-05T20:30:00",
-    read: false,
-    labels: ["meeting", "work"],
-  },
-  {
-    id: "99a88f78-3eb4-4d87-87b7-7b15a49a0a05",
-    name: "Daniel Johnson",
-    email: "danieljohnson@example.com",
-    subject: "Feedback Request",
-    text: "I'd like your feedback on the latest project deliverables. We've made significant progress, and I value your input to ensure we're on the right track.\n\nI've attached the deliverables for your review, and I'm particularly interested in any areas where you think we can further enhance the quality or efficiency.\n\nYour feedback is invaluable, and I appreciate your time and expertise. Let's work together to make this project a success.\n\nRegards, Daniel",
-    date: "2022-10-22T09:30:00",
-    read: false,
-    labels: ["work"],
-  },
-  {
-    id: "f47ac10b-58cc-4372-a567-0e02b2c3d479",
-    name: "Ava Taylor",
-    email: "avataylor@example.com",
-    subject: "Re: Meeting Agenda",
-    text: "Here's the agenda for our meeting next week. I've included all the topics we need to cover, as well as time allocations for each.\n\nIf you have any additional items to discuss or any specific points to address, please let me know, and we can integrate them into the agenda.\n\nIt's essential that our meeting is productive and addresses all relevant matters.\n\nLooking forward to our meeting! Ava",
-    date: "2022-10-10T10:45:00",
-    read: true,
-    labels: ["meeting", "work"],
-  },
-  {
-    id: "c1a0ecb4-2540-49c5-86f8-21e5ce79e4e6",
-    name: "William Anderson",
-    email: "williamanderson@example.com",
-    subject: "Product Launch Update",
-    text: "The product launch is on track. I'll provide an update during our call. We've made substantial progress in the development and marketing of our new product.\n\nI'm excited to share the latest updates with you during our upcoming call. It's crucial that we coordinate our efforts to ensure a successful launch. Please come prepared with any questions or insights you may have.\n\nLet's make this product launch a resounding success!\n\nBest regards, William",
-    date: "2022-09-20T12:00:00",
-    read: false,
-    labels: ["meeting", "work", "important"],
-  },
-  {
-    id: "ba54eefd-4097-4949-99f2-2a9ae4d1a836",
-    name: "Mia Harris",
-    email: "miaharris@example.com",
-    subject: "Re: Travel Itinerary",
-    text: "I've received the travel itinerary. It looks great! Thank you for your prompt assistance in arranging the details. I've reviewed the schedule and the accommodations, and everything seems to be in order. I'm looking forward to the trip, and I'm confident it'll be a smooth and enjoyable experience.\n\nIf there are any specific activities or attractions you recommend at our destination, please feel free to share your suggestions.\n\nExcited for the trip! Mia",
-    date: "2022-09-10T13:15:00",
-    read: true,
-    labels: ["personal", "travel"],
-  },
-  {
-    id: "df09b6ed-28bd-4e0c-85a9-9320ec5179aa",
-    name: "Ethan Clark",
-    email: "ethanclark@example.com",
-    subject: "Team Building Event",
-    text: "Let's plan a team-building event for our department. Team cohesion and morale are vital to our success, and I believe a well-organized team-building event can be incredibly beneficial. I've done some research and have a few ideas for fun and engaging activities.\n\nPlease let me know your thoughts and availability. We want this event to be both enjoyable and productive.\n\nTogether, we'll strengthen our team and boost our performance.\n\nRegards, Ethan",
-    date: "2022-08-25T15:30:00",
-    read: false,
-    labels: ["meeting", "work"],
-  },
-  {
-    id: "d67c1842-7f8b-4b4b-9be1-1b3b1ab4611d",
-    name: "Chloe Hall",
-    email: "chloehall@example.com",
-    subject: "Re: Budget Approval",
-    text: "The budget has been approved. We can proceed with the project. I'm delighted to inform you that our budget proposal has received the green light from the finance department. This is a significant milestone, and it means we can move forward with the project as planned.\n\nI've attached the finalized budget for your reference. Let's ensure that we stay on track and deliver the project on time and within budget.\n\nIt's an exciting time for us! Chloe",
-    date: "2022-08-10T16:45:00",
-    read: true,
-    labels: ["work", "budget"],
-  },
-  {
-    id: "6c9a7f94-8329-4d70-95d3-51f68c186ae1",
-    name: "Samuel Turner",
-    email: "samuelturner@example.com",
-    subject: "Weekend Hike",
-    text: "Who's up for a weekend hike in the mountains? I've been craving some outdoor adventure, and a hike in the mountains sounds like the perfect escape. If you're up for the challenge, we can explore some scenic trails and enjoy the beauty of nature.\n\nI've done some research and have a few routes in mind.\n\nLet me know if you're interested, and we can plan the details.\n\nIt's sure to be a memorable experience! Samuel",
-    date: "2022-07-28T17:30:00",
-    read: false,
-    labels: ["personal"],
-  },
-]
-
-export type Mail = (typeof mails)[number]
+  // More mails...
+];
 
 export const accounts = [
   {
@@ -197,104 +46,7 @@ export const accounts = [
       </svg>
     ),
   },
-  {
-    label: "Alicia Koch",
-    email: "alicia@me.com",
-    icon: (
-      <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-        <title>iCloud</title>
-        <path
-          d="M13.762 4.29a6.51 6.51 0 0 0-5.669 3.332 3.571 3.571 0 0 0-1.558-.36 3.571 3.571 0 0 0-3.516 3A4.918 4.918 0 0 0 0 14.796a4.918 4.918 0 0 0 4.92 4.914 4.93 4.93 0 0 0 .617-.045h14.42c2.305-.272 4.041-2.258 4.043-4.589v-.009a4.594 4.594 0 0 0-3.727-4.508 6.51 6.51 0 0 0-6.511-6.27z"
-          fill="currentColor"
-        />
-      </svg>
-    ),
-  },
-]
+];
 
-export type Account = (typeof accounts)[number]
-
-export const contacts = [
-  {
-    name: "Emma Johnson",
-    email: "emma.johnson@example.com",
-  },
-  {
-    name: "Liam Wilson",
-    email: "liam.wilson@example.com",
-  },
-  {
-    name: "Olivia Davis",
-    email: "olivia.davis@example.com",
-  },
-  {
-    name: "Noah Martinez",
-    email: "noah.martinez@example.com",
-  },
-  {
-    name: "Ava Taylor",
-    email: "ava.taylor@example.com",
-  },
-  {
-    name: "Lucas Brown",
-    email: "lucas.brown@example.com",
-  },
-  {
-    name: "Sophia Smith",
-    email: "sophia.smith@example.com",
-  },
-  {
-    name: "Ethan Wilson",
-    email: "ethan.wilson@example.com",
-  },
-  {
-    name: "Isabella Jackson",
-    email: "isabella.jackson@example.com",
-  },
-  {
-    name: "Mia Clark",
-    email: "mia.clark@example.com",
-  },
-  {
-    name: "Mason Lee",
-    email: "mason.lee@example.com",
-  },
-  {
-    name: "Layla Harris",
-    email: "layla.harris@example.com",
-  },
-  {
-    name: "William Anderson",
-    email: "william.anderson@example.com",
-  },
-  {
-    name: "Ella White",
-    email: "ella.white@example.com",
-  },
-  {
-    name: "James Thomas",
-    email: "james.thomas@example.com",
-  },
-  {
-    name: "Harper Lewis",
-    email: "harper.lewis@example.com",
-  },
-  {
-    name: "Benjamin Moore",
-    email: "benjamin.moore@example.com",
-  },
-  {
-    name: "Aria Hall",
-    email: "aria.hall@example.com",
-  },
-  {
-    name: "Henry Turner",
-    email: "henry.turner@example.com",
-  },
-  {
-    name: "Scarlett Adams",
-    email: "scarlett.adams@example.com",
-  },
-]
-
-export type Contact = (typeof contacts)[number]
+export type Mail = typeof mails[0];
+export type Account = typeof accounts[0];
diff --git a/src/mail/index.tsx b/src/mail/index.tsx
index f83cdca..619834b 100644
--- a/src/mail/index.tsx
+++ b/src/mail/index.tsx
@@ -1,52 +1,10 @@
 import React from 'react';
-import { View, Image, StyleSheet, useColorScheme } from 'react-native';
-import AsyncStorage from '@react-native-async-storage/async-storage';
-
-import { accounts, mails } from './data';
 import { Mail } from './components/mail';
 
-const MailPage = () => {
-  const [defaultLayout, setDefaultLayout] = React.useState(undefined);
-  const [defaultCollapsed, setDefaultCollapsed] = React.useState(undefined);
-  const colorScheme = useColorScheme();
-
-  React.useEffect(() => {
-    const loadStorageData = async () => {
-      try {
-        const layoutData = await AsyncStorage.getItem('react-resizable-panels:layout:mail');
-        const collapsedData = await AsyncStorage.getItem('react-resizable-panels:collapsed');
-        
-        setDefaultLayout(layoutData ? JSON.parse(layoutData) : undefined);
-        setDefaultCollapsed(collapsedData ? JSON.parse(collapsedData) : undefined);
-      } catch (error) {
-        console.error('Error loading storage data:', error);
-      }
-    };
-
-    loadStorageData();
-  }, []);
-
+export function MailPage() {
   return (
-    <View style={styles.container}>
-      <Mail
-        accounts={accounts}
-        mails={mails}
-        defaultLayout={defaultLayout}
-        defaultCollapsed={defaultCollapsed}
-        navCollapsedSize={4}
-      />
-    </View>
+    <div className="h-screen">
+      <Mail />
+    </div>
   );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  image: {
-    width: '100%',
-    height: 200,
-  },
-});
-
-export default MailPage;
+}
diff --git a/src/mail/use-mail.ts b/src/mail/use-mail.ts
index 2ba273f..f25ab24 100644
--- a/src/mail/use-mail.ts
+++ b/src/mail/use-mail.ts
@@ -1,43 +1,9 @@
-import { useState, useEffect } from 'react';
-import AsyncStorage from '@react-native-async-storage/async-storage';
-
-import { Mail, mails } from './data'; // Update the import path as needed
-
-type Config = {
-  selected: Mail['id'] | null;
-};
-
-const initialConfig: Config = {
-  selected: mails[0].id,
-};
+import { useState } from 'react';
 
 export function useMail() {
-  const [config, setConfig] = useState<Config>(initialConfig);
+  const [mail, setMail] = useState({
+    selected: mails[0].id,
+  });
 
-  useEffect(() => {
-    // Load config from AsyncStorage when component mounts
-    loadConfig();
-  }, []);
-
-  const loadConfig = async () => {
-    try {
-      const storedConfig = await AsyncStorage.getItem('mailConfig');
-      if (storedConfig) {
-        setConfig(JSON.parse(storedConfig));
-      }
-    } catch (error) {
-      console.error('Error loading mail config:', error);
-    }
-  };
-
-  const updateConfig = async (newConfig: Config) => {
-    try {
-      await AsyncStorage.setItem('mailConfig', JSON.stringify(newConfig));
-      setConfig(newConfig);
-    } catch (error) {
-      console.error('Error saving mail config:', error);
-    }
-  };
-
-  return [config, updateConfig] as const;
+  return [mail, setMail] as const;
 }
diff --git a/src/sync/page.tsx b/src/sync/page.tsx
index 01d9f1f..dcf164d 100644
--- a/src/sync/page.tsx
+++ b/src/sync/page.tsx
@@ -21,7 +21,7 @@ interface SyncStatus {
 
 type Screen = "Main" | "Status";
 
-function App() {
+function Page() {
   const [state, setState] = useState({
     name: "",
     access_key: "",
@@ -200,4 +200,4 @@ function App() {
   );
 }
 
-export default App;
+export default Page;
diff --git a/src/tasks/components/DataTable.tsx b/src/tasks/components/DataTable.tsx
index ee85fbb..589c4b8 100644
--- a/src/tasks/components/DataTable.tsx
+++ b/src/tasks/components/DataTable.tsx
@@ -1,6 +1,4 @@
 import React, { useState } from 'react';
-import { View, Text, FlatList, TouchableOpacity, StyleSheet } from 'react-native';
-
 import { Task } from '../data/schema';
 import { labels, priorities, statuses } from '../data/data';
 import { DataTableToolbar } from './DataTableToolbar';
@@ -15,50 +13,48 @@ export const DataTable: React.FC<DataTableProps> = ({ data }) => {
   const [page, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(10);
 
-  const renderItem = ({ item }: { item: Task }) => {
+  const renderItem = (item: Task) => {
     const label = labels.find(l => l.value === item.label);
     const status = statuses.find(s => s.value === item.status);
     const priority = priorities.find(p => p.value === item.priority);
 
     return (
-      <View style={styles.row}>
-        <Text style={styles.cell}>{item.id}</Text>
-        <View style={styles.cell}>
-          <Text style={styles.badge}>{label?.label}</Text>
-          <Text>{item.title}</Text>
-        </View>
-        <View style={styles.cell}>
-          
-          <Text>{status?.label}</Text>
-        </View>
-        <View style={styles.cell}>
-          
-          <Text>{priority?.label}</Text>
-        </View>
-        <TouchableOpacity style={styles.cell}>
-          
-        </TouchableOpacity>
-      </View>
+      <tr key={item.id} className="border-b">
+        <td className="p-2">{item.id}</td>
+        <td className="p-2">
+          <span className="bg-gray-100 rounded-full px-2 py-1 text-xs mr-2">
+            {label?.label}
+          </span>
+          {item.title}
+        </td>
+        <td className="p-2">{status?.label}</td>
+        <td className="p-2">{priority?.label}</td>
+        <td className="p-2">
+          <button className="text-blue-500 hover:text-blue-700">Actions</button>
+        </td>
+      </tr>
     );
   };
 
   return (
-    <View style={styles.container}>
+    <div className="flex flex-col h-full">
       <DataTableToolbar onFilter={setFilteredData} data={data} />
-      <FlatList
-        data={filteredData.slice(page * rowsPerPage, (page + 1) * rowsPerPage)}
-        renderItem={renderItem}
-        keyExtractor={(item) => item.id}
-        ListHeaderComponent={() => (
-          <View style={styles.header}>
-            <Text style={styles.headerCell}>ID</Text>
-            <Text style={styles.headerCell}>Title</Text>
-            <Text style={styles.headerCell}>Status</Text>
-            <Text style={styles.headerCell}>Priority</Text>
-            <Text style={styles.headerCell}>Actions</Text>
-          </View>
-        )}
-      />
+      <div className="overflow-auto flex-grow">
+        <table className="min-w-full divide-y divide-gray-200">
+          <thead className="bg-gray-50">
+            <tr>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Title</th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Priority</th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
+            </tr>
+          </thead>
+          <tbody className="bg-white divide-y divide-gray-200">
+            {filteredData.slice(page * rowsPerPage, (page + 1) * rowsPerPage).map(renderItem)}
+          </tbody>
+        </table>
+      </div>
       <DataTablePagination
         page={page}
         setPage={setPage}
@@ -66,40 +62,6 @@ export const DataTable: React.FC<DataTableProps> = ({ data }) => {
         setRowsPerPage={setRowsPerPage}
         totalItems={filteredData.length}
       />
-    </View>
+    </div>
   );
 };
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  header: {
-    flexDirection: 'row',
-    borderBottomWidth: 1,
-    borderBottomColor: '#ccc',
-    paddingVertical: 10,
-  },
-  headerCell: {
-    flex: 1,
-    fontWeight: 'bold',
-  },
-  row: {
-    flexDirection: 'row',
-    borderBottomWidth: 1,
-    borderBottomColor: '#eee',
-    paddingVertical: 10,
-  },
-  cell: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  badge: {
-    backgroundColor: '#eee',
-    paddingHorizontal: 5,
-    paddingVertical: 2,
-    borderRadius: 10,
-    marginRight: 5,
-  },
-});
diff --git a/src/tasks/components/DataTablePagination.tsx b/src/tasks/components/DataTablePagination.tsx
index 3c5ca1c..f83c733 100644
--- a/src/tasks/components/DataTablePagination.tsx
+++ b/src/tasks/components/DataTablePagination.tsx
@@ -1,6 +1,4 @@
 import React from 'react';
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
-
 
 interface DataTablePaginationProps {
   page: number;
@@ -20,38 +18,84 @@ export const DataTablePagination: React.FC<DataTablePaginationProps> = ({
   const totalPages = Math.ceil(totalItems / rowsPerPage);
 
   return (
-    <View style={styles.container}>
-      <Text>{}</Text>
-      <View style={styles.navigation}>
-        <TouchableOpacity onPress={() => setPage(0)} disabled={page === 0}>
-          
-        </TouchableOpacity>
-        <TouchableOpacity onPress={() => setPage(page - 1)} disabled={page === 0}>
-          
-        </TouchableOpacity>
-        <Text>{}</Text>
-        <TouchableOpacity onPress={() => setPage(page + 1)} disabled={page === totalPages - 1}>
-          
-        </TouchableOpacity>
-        <TouchableOpacity onPress={() => setPage(totalPages - 1)} disabled={page === totalPages - 1}>
-          
-        </TouchableOpacity>
-      </View>
-    </View>
+    <div className="flex items-center justify-between px-6 py-3 border-t border-gray-200">
+      <div className="flex-1 flex justify-between sm:hidden">
+        <button
+          onClick={() => setPage(page - 1)}
+          disabled={page === 0}
+          className="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+        >
+          Previous
+        </button>
+        <button
+          onClick={() => setPage(page + 1)}
+          disabled={page === totalPages - 1}
+          className="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+        >
+          Next
+        </button>
+      </div>
+      <div className="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
+        <div>
+          <p className="text-sm text-gray-700">
+            Showing <span className="font-medium">{page * rowsPerPage + 1}</span> to{' '}
+            <span className="font-medium">
+              {Math.min((page + 1) * rowsPerPage, totalItems)}
+            </span>{' '}
+            of <span className="font-medium">{totalItems}</span> results
+          </p>
+        </div>
+        <div>
+          <select
+            value={rowsPerPage}
+            onChange={(e) => setRowsPerPage(Number(e.target.value))}
+            className="mr-4 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+          >
+            {[5, 10, 25, 50].map((size) => (
+              <option key={size} value={size}>
+                Show {size}
+              </option>
+            ))}
+          </select>
+          <nav className="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
+            <button
+              onClick={() => setPage(0)}
+              disabled={page === 0}
+              className="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50"
+            >
+              <span className="sr-only">First</span>
+              &laquo;
+            </button>
+            <button
+              onClick={() => setPage(page - 1)}
+              disabled={page === 0}
+              className="relative inline-flex items-center px-2 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50"
+            >
+              <span className="sr-only">Previous</span>
+              &lsaquo;
+            </button>
+            <span className="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
+              Page {page + 1} of {totalPages}
+            </span>
+            <button
+              onClick={() => setPage(page + 1)}
+              disabled={page === totalPages - 1}
+              className="relative inline-flex items-center px-2 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50"
+            >
+              <span className="sr-only">Next</span>
+              &rsaquo;
+            </button>
+            <button
+              onClick={() => setPage(totalPages - 1)}
+              disabled={page === totalPages - 1}
+              className="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50"
+            >
+              <span className="sr-only">Last</span>
+              &raquo;
+            </button>
+          </nav>
+        </div>
+      </div>
+    </div>
   );
 };
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    padding: 10,
-    borderTopWidth: 1,
-    borderTopColor: '#ccc',
-  },
-  navigation: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-});
diff --git a/src/tasks/components/DataTableToolbar.tsx b/src/tasks/components/DataTableToolbar.tsx
index 5b0d28f..772274b 100644
--- a/src/tasks/components/DataTableToolbar.tsx
+++ b/src/tasks/components/DataTableToolbar.tsx
@@ -1,6 +1,4 @@
 import React, { useState } from 'react';
-import { View, TextInput, TouchableOpacity, Text, StyleSheet } from 'react-native';
-
 import { Task } from '../data/schema';
 import { priorities, statuses } from '../data/data';
 
@@ -29,53 +27,67 @@ export const DataTableToolbar: React.FC<DataTableToolbarProps> = ({ onFilter, da
       ? filter.filter(f => f !== value)
       : [...filter, value];
     setFilter(newFilter);
+    applyFilters();
   };
 
   return (
-    <View style={styles.container}>
-      <TextInput
-        style={styles.input}
-        placeholder="Filter tasks..."
-        value={searchText}
-        onChangeText={(text) => {
-          setSearchText(text);
-          applyFilters();
-        }}
-      />
-      <View style={styles.filterContainer}>
-        <TouchableOpacity onPress={() => {}} style={styles.filterButton}>
-          
-          <Text>Status</Text>
-        </TouchableOpacity>
-        <TouchableOpacity onPress={() => {}} style={styles.filterButton}>
-          
-          <Text>Priority</Text>
-        </TouchableOpacity>
-      </View>
-    </View>
+    <div className="px-6 py-4 bg-white border-b border-gray-200">
+      <div className="flex items-center justify-between">
+        <div className="flex-1 max-w-lg">
+          <input
+            type="text"
+            placeholder="Filter tasks..."
+            className="block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
+            value={searchText}
+            onChange={(e) => {
+              setSearchText(e.target.value);
+              applyFilters();
+            }}
+          />
+        </div>
+        <div className="ml-4 flex space-x-4">
+          <div className="relative">
+            <button className="inline-flex justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+              Status
+            </button>
+            <div className="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10">
+              <div className="py-1">
+                {statuses.map((status) => (
+                  <label key={status.value} className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
+                    <input
+                      type="checkbox"
+                      checked={statusFilter.includes(status.value)}
+                      onChange={() => toggleFilter(statusFilter, status.value, setStatusFilter)}
+                      className="mr-2"
+                    />
+                    {status.label}
+                  </label>
+                ))}
+              </div>
+            </div>
+          </div>
+          <div className="relative">
+            <button className="inline-flex justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+              Priority
+            </button>
+            <div className="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10">
+              <div className="py-1">
+                {priorities.map((priority) => (
+                  <label key={priority.value} className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
+                    <input
+                      type="checkbox"
+                      checked={priorityFilter.includes(priority.value)}
+                      onChange={() => toggleFilter(priorityFilter, priority.value, setPriorityFilter)}
+                      className="mr-2"
+                    />
+                    {priority.label}
+                  </label>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   );
 };
-
-const styles = StyleSheet.create({
-  container: {
-    padding: 10,
-  },
-  input: {
-    borderWidth: 1,
-    borderColor: '#ccc',
-    borderRadius: 5,
-    padding: 10,
-    marginBottom: 10,
-  },
-  filterContainer: {
-    flexDirection: 'row',
-  },
-  filterButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: '#eee',
-    padding: 5,
-    borderRadius: 5,
-    marginRight: 10,
-  },
-});
diff --git a/src/tasks/components/UserNav.tsx b/src/tasks/components/UserNav.tsx
index ae8ffde..ae37856 100644
--- a/src/tasks/components/UserNav.tsx
+++ b/src/tasks/components/UserNav.tsx
@@ -1,34 +1,15 @@
 import React from 'react';
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
-
 
 export const UserNav: React.FC = () => {
   return (
-    <TouchableOpacity style={styles.container}>
-      
-      <View style={styles.userInfo}>
-        <Text style={styles.userName}>John Doe</Text>
-        <Text style={styles.userEmail}>john@example.com</Text>
-      </View>
-      
-    </TouchableOpacity>
+    <div className="flex items-center space-x-4">
+      <div className="flex-shrink-0">
+        <img className="h-10 w-10 rounded-full" src="https://via.placeholder.com/40" alt="User avatar" />
+      </div>
+      <div>
+        <div className="font-medium text-gray-900">John Doe</div>
+        <div className="text-sm text-gray-500">john@example.com</div>
+      </div>
+    </div>
   );
 };
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 10,
-  },
-  userInfo: {
-    marginLeft: 10,
-    flex: 1,
-  },
-  userName: {
-    fontWeight: 'bold',
-  },
-  userEmail: {
-    color: 'gray',
-  },
-});
diff --git a/src/tasks/index.tsx b/src/tasks/index.tsx
index 98784b5..82a8370 100644
--- a/src/tasks/index.tsx
+++ b/src/tasks/index.tsx
@@ -1,9 +1,7 @@
 import React from 'react';
-import { SafeAreaView, Text, View, StyleSheet } from 'react-native';
 import { DataTable } from './components/DataTable';
 import { UserNav } from './components/UserNav';
 
-// Mock data - replace with actual data fetching logic
 const tasks = [
   {
     id: "TASK-8782",
@@ -26,42 +24,21 @@ const tasks = [
     label: "bug",
     priority: "high"
   },
-  // ... add more tasks here
 ];
 
 export default function TaskPage() {
   return (
-    <SafeAreaView style={styles.container}>
-      <View style={styles.header}>
-        <View>
-          <Text style={styles.title}>Welcome back!</Text>
-          <Text style={styles.subtitle}>Here's a list of your tasks for this month!</Text>
-        </View>
+    <div className="min-h-screen bg-white">
+      <div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">Welcome back!</h1>
+          <p className="text-sm text-gray-500">Here's a list of your tasks for this month!</p>
+        </div>
         <UserNav />
-      </View>
-      <DataTable data={tasks} />
-    </SafeAreaView>
+      </div>
+      <div className="h-[calc(100vh-80px)]">
+        <DataTable data={tasks} />
+      </div>
+    </div>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-  },
-  header: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    padding: 20,
-    borderBottomWidth: 1,
-    borderBottomColor: '#eee',
-  },
-  title: {
-    fontSize: 24,
-    fontWeight: 'bold',
-  },
-  subtitle: {
-    color: 'gray',
-  },
-});
diff --git a/src/templates/components/album-artwork.tsx b/src/templates/components/album-artwork.tsx
index e3944dc..428e9d0 100644
--- a/src/templates/components/album-artwork.tsx
+++ b/src/templates/components/album-artwork.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { View, Text, Image, TouchableOpacity, StyleSheet } from 'react-native';
 import { Album } from "../data/albums"
 
 interface AlbumArtworkProps {
@@ -16,44 +15,22 @@ export function AlbumArtwork({
   height,
 }: AlbumArtworkProps) {
   return (
-    <View style={styles.container}>
-      <TouchableOpacity>
-        <Image
-          source={{ uri: album.cover }}
-          style={[
-            styles.image,
-            {
-              width: width,
-              height: height,
-              aspectRatio: aspectRatio === "portrait" ? 3/4 : 1,
-            },
-          ]}
+    <div className="mr-4">
+      <div className="overflow-hidden rounded-md">
+        <img
+          src={album.cover}
+          alt={album.name}
+          className={`object-cover transition-all hover:scale-105 ${aspectRatio === "portrait" ? "aspect-[3/4]" : "aspect-square"}`}
+          style={{
+            width: width,
+            height: height,
+          }}
         />
-      </TouchableOpacity>
-      <View style={styles.textContainer}>
-        <Text style={styles.albumName}>{album.name}</Text>
-        <Text style={styles.artistName}>{album.artist}</Text>
-      </View>
-    </View>
-  )
+      </div>
+      <div className="mt-2 space-y-1 text-sm">
+        <h3 className="font-medium leading-none">{album.name}</h3>
+        <p className="text-xs text-gray-500">{album.artist}</p>
+      </div>
+    </div>
+  );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    marginRight: 16,
-  },
-  image: {
-    borderRadius: 8,
-  },
-  textContainer: {
-    marginTop: 8,
-  },
-  albumName: {
-    fontSize: 14,
-    fontWeight: 'bold',
-  },
-  artistName: {
-    fontSize: 12,
-    color: '#666',
-  },
-});
diff --git a/src/templates/components/menu.tsx b/src/templates/components/menu.tsx
index 46733d8..466d4cd 100644
--- a/src/templates/components/menu.tsx
+++ b/src/templates/components/menu.tsx
@@ -1,39 +1,13 @@
 import React from 'react';
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
 
 export function Menu() {
   return (
-    <View style={styles.container}>
-      <TouchableOpacity style={styles.menuItem}>
-        <Text style={styles.menuText}>Music</Text>
-      </TouchableOpacity>
-      <TouchableOpacity style={styles.menuItem}>
-        <Text style={styles.menuText}>File</Text>
-      </TouchableOpacity>
-      <TouchableOpacity style={styles.menuItem}>
-        <Text style={styles.menuText}>Edit</Text>
-      </TouchableOpacity>
-      <TouchableOpacity style={styles.menuItem}>
-        <Text style={styles.menuText}>View</Text>
-      </TouchableOpacity>
-      <TouchableOpacity style={styles.menuItem}>
-        <Text style={styles.menuText}>Account</Text>
-      </TouchableOpacity>
-    </View>
-  )
+    <div className="flex justify-around py-2 bg-gray-100">
+      <button className="px-4 py-2 text-sm font-medium">Music</button>
+      <button className="px-4 py-2 text-sm font-medium">File</button>
+      <button className="px-4 py-2 text-sm font-medium">Edit</button>
+      <button className="px-4 py-2 text-sm font-medium">View</button>
+      <button className="px-4 py-2 text-sm font-medium">Account</button>
+    </div>
+  );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    paddingVertical: 10,
-    backgroundColor: '#f0f0f0',
-  },
-  menuItem: {
-    padding: 10,
-  },
-  menuText: {
-    fontSize: 16,
-  },
-});
diff --git a/src/templates/components/podcast-empty-placeholder.tsx b/src/templates/components/podcast-empty-placeholder.tsx
index 51b25be..30600f9 100644
--- a/src/templates/components/podcast-empty-placeholder.tsx
+++ b/src/templates/components/podcast-empty-placeholder.tsx
@@ -1,47 +1,17 @@
 import React from 'react';
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
 
 export function PodcastEmptyPlaceholder() {
   return (
-    <View style={styles.container}>
-      <View style={styles.content}>
-        <Text style={styles.title}>No episodes added</Text>
-        <Text style={styles.description}>You have not added any podcasts. Add one below.</Text>
-        <TouchableOpacity style={styles.button}>
-          <Text style={styles.buttonText}>Add Podcast</Text>
-        </TouchableOpacity>
-      </View>
-    </View>
-  )
+    <div className="flex items-center justify-center h-full p-8">
+      <div className="text-center">
+        <h3 className="text-xl font-bold">No episodes added</h3>
+        <p className="mb-4 text-sm text-gray-500">
+          You have not added any podcasts. Add one below.
+        </p>
+        <button className="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
+          Add Podcast
+        </button>
+      </div>
+    </div>
+  );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 20,
-  },
-  content: {
-    alignItems: 'center',
-  },
-  title: {
-    fontSize: 20,
-    fontWeight: 'bold',
-    marginBottom: 10,
-  },
-  description: {
-    textAlign: 'center',
-    marginBottom: 20,
-  },
-  button: {
-    backgroundColor: '#007AFF',
-    paddingHorizontal: 20,
-    paddingVertical: 10,
-    borderRadius: 5,
-  },
-  buttonText: {
-    color: 'white',
-    fontWeight: 'bold',
-  },
-});
diff --git a/src/templates/components/sidebar.tsx b/src/templates/components/sidebar.tsx
index f7a6763..9df2d82 100644
--- a/src/templates/components/sidebar.tsx
+++ b/src/templates/components/sidebar.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { View, Text, ScrollView, TouchableOpacity, StyleSheet } from 'react-native';
 import { Playlist } from "../data/playlists"
 
 interface SidebarProps {
@@ -8,83 +7,35 @@ interface SidebarProps {
 
 export function Sidebar({ playlists }: SidebarProps) {
   return (
-    <View style={styles.container}>
-      <View style={styles.section}>
-        <Text style={styles.sectionTitle}>Discover</Text>
-        <View style={styles.buttonContainer}>
-          <TouchableOpacity style={styles.button}>
-            <Text style={styles.buttonText}>Listen Now</Text>
-          </TouchableOpacity>
-          <TouchableOpacity style={styles.button}>
-            <Text style={styles.buttonText}>Browse</Text>
-          </TouchableOpacity>
-          <TouchableOpacity style={styles.button}>
-            <Text style={styles.buttonText}>Radio</Text>
-          </TouchableOpacity>
-        </View>
-      </View>
-      <View style={styles.section}>
-        <Text style={styles.sectionTitle}>Library</Text>
-        <View style={styles.buttonContainer}>
-          <TouchableOpacity style={styles.button}>
-            <Text style={styles.buttonText}>Playlists</Text>
-          </TouchableOpacity>
-          <TouchableOpacity style={styles.button}>
-            <Text style={styles.buttonText}>Songs</Text>
-          </TouchableOpacity>
-          <TouchableOpacity style={styles.button}>
-            <Text style={styles.buttonText}>Made for You</Text>
-          </TouchableOpacity>
-          <TouchableOpacity style={styles.button}>
-            <Text style={styles.buttonText}>Artists</Text>
-          </TouchableOpacity>
-          <TouchableOpacity style={styles.button}>
-            <Text style={styles.buttonText}>Albums</Text>
-          </TouchableOpacity>
-        </View>
-      </View>
-      <View style={styles.section}>
-        <Text style={styles.sectionTitle}>Playlists</Text>
-        <ScrollView style={styles.playlistContainer}>
+    <div className="p-3">
+      <div className="mb-5">
+        <h2 className="text-lg font-bold mb-2">Discover</h2>
+        <div className="space-y-1 ml-2">
+          <button className="block w-full text-left px-2 py-1 text-sm hover:bg-gray-100 rounded">Listen Now</button>
+          <button className="block w-full text-left px-2 py-1 text-sm hover:bg-gray-100 rounded">Browse</button>
+          <button className="block w-full text-left px-2 py-1 text-sm hover:bg-gray-100 rounded">Radio</button>
+        </div>
+      </div>
+      <div className="mb-5">
+        <h2 className="text-lg font-bold mb-2">Library</h2>
+        <div className="space-y-1 ml-2">
+          <button className="block w-full text-left px-2 py-1 text-sm hover:bg-gray-100 rounded">Playlists</button>
+          <button className="block w-full text-left px-2 py-1 text-sm hover:bg-gray-100 rounded">Songs</button>
+          <button className="block w-full text-left px-2 py-1 text-sm hover:bg-gray-100 rounded">Made for You</button>
+          <button className="block w-full text-left px-2 py-1 text-sm hover:bg-gray-100 rounded">Artists</button>
+          <button className="block w-full text-left px-2 py-1 text-sm hover:bg-gray-100 rounded">Albums</button>
+        </div>
+      </div>
+      <div>
+        <h2 className="text-lg font-bold mb-2">Playlists</h2>
+        <div className="max-h-72 overflow-y-auto">
           {playlists?.map((playlist, i) => (
-            <TouchableOpacity  style={styles.playlistButton}>
-              <Text style={styles.playlistButtonText}>{playlist}</Text>
-            </TouchableOpacity>
+            <button key={i} className="block w-full text-left px-2 py-1 text-sm hover:bg-gray-100 rounded">
+              {playlist}
+            </button>
           ))}
-        </ScrollView>
-      </View>
-    </View>
-  )
+        </div>
+      </div>
+    </div>
+  );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    padding: 12,
-  },
-  section: {
-    marginBottom: 20,
-  },
-  sectionTitle: {
-    fontSize: 18,
-    fontWeight: 'bold',
-    marginBottom: 10,
-  },
-  buttonContainer: {
-    marginLeft: 10,
-  },
-  button: {
-    paddingVertical: 8,
-  },
-  buttonText: {
-    fontSize: 16,
-  },
-  playlistContainer: {
-    maxHeight: 300,
-  },
-  playlistButton: {
-    paddingVertical: 8,
-  },
-  playlistButtonText: {
-    fontSize: 16,
-  },
-});
diff --git a/src/templates/index.tsx b/src/templates/index.tsx
index cd4847e..6f20564 100644
--- a/src/templates/index.tsx
+++ b/src/templates/index.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { View, Text, ScrollView, StyleSheet, SafeAreaView } from 'react-native';
 import { Menu } from './components/menu';
 import { Sidebar } from './components/sidebar';
 import { PodcastEmptyPlaceholder } from './components/podcast-empty-placeholder';
@@ -9,72 +8,45 @@ import { playlists } from './data/playlists';
 
 export default function TemplatesPage() {
   return (
-    <SafeAreaView style={styles.container}>
+    <div className="min-h-screen bg-white">
       <Menu />
-      <View style={styles.content}>
-        <Sidebar playlists={playlists} />
-        <ScrollView style={styles.mainContent}>
-          <View style={styles.section}>
-            <Text style={styles.sectionTitle}>Listen Now</Text>
-            <Text style={styles.sectionSubtitle}>Top picks for you. Updated daily.</Text>
-          </View>
-          <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.albumList}>
-            {listenNowAlbums.map((album) => (
-              <AlbumArtwork
-                key={album.name}
-                album={album}
-                width={250}
-                height={330}
-              />
-            ))}
-          </ScrollView>
-          <View style={styles.section}>
-            <Text style={styles.sectionTitle}>Made for You</Text>
-            <Text style={styles.sectionSubtitle}>Your personal playlists. Updated daily.</Text>
-          </View>
-          <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.albumList}>
-            {madeForYouAlbums.map((album) => (
-              <AlbumArtwork
-                key={album.name}
-                album={album}
-                width={150}
-                height={150}
-                aspectRatio="square"
-              />
-            ))}
-          </ScrollView>
+      <div className="flex">
+        <div className="w-64 border-r border-gray-200">
+          <Sidebar playlists={playlists} />
+        </div>
+        <div className="flex-1 p-4 overflow-auto">
+          <div className="mb-8">
+            <h2 className="text-2xl font-bold">Listen Now</h2>
+            <p className="text-gray-500">Top picks for you. Updated daily.</p>
+            <div className="flex overflow-x-auto py-4 space-x-4">
+              {listenNowAlbums.map((album) => (
+                <AlbumArtwork
+                  key={album.name}
+                  album={album}
+                  width={250}
+                  height={330}
+                />
+              ))}
+            </div>
+          </div>
+          <div className="mb-8">
+            <h2 className="text-2xl font-bold">Made for You</h2>
+            <p className="text-gray-500">Your personal playlists. Updated daily.</p>
+            <div className="flex overflow-x-auto py-4 space-x-4">
+              {madeForYouAlbums.map((album) => (
+                <AlbumArtwork
+                  key={album.name}
+                  album={album}
+                  width={150}
+                  height={150}
+                  aspectRatio="square"
+                />
+              ))}
+            </div>
+          </div>
           <PodcastEmptyPlaceholder />
-        </ScrollView>
-      </View>
-    </SafeAreaView>
+        </div>
+      </div>
+    </div>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-  },
-  content: {
-    flex: 1,
-    flexDirection: 'row',
-  },
-  mainContent: {
-    flex: 1,
-    padding: 16,
-  },
-  section: {
-    marginBottom: 16,
-  },
-  sectionTitle: {
-    fontSize: 24,
-    fontWeight: 'bold',
-  },
-  sectionSubtitle: {
-    fontSize: 16,
-    color: '#666',
-  },
-  albumList: {
-    marginBottom: 24,
-  },
-});