diff --git a/README.md b/README.md
index ddcb0a1..ba0edba 100644
--- a/README.md
+++ b/README.md
@@ -13,6 +13,8 @@
 ```
 lib/
   |- components/    # Shared components, such as custom buttons, form inputs, etc.
+      |- media_preview.dart
+      |- navigation_drawer.dart
   |- models/        # Data models
   |- screens/       # Different screens/pages
       |- accounts/  # Screens related to account, like login, registration, user profile
@@ -25,10 +27,16 @@ lib/
           |- report_list.dart
           |- report_detail.dart
           |- create_report.dart
+      |- chat/   # Screens related to chatbot, you can chat with gemini
+          |- routes.dart
+          |- chat_page.dart
       |- map/       # Map display, such as showing the map on the homepage
           |- routes.dart
           |- home_map.dart
   |- services/      # Services, like network requests, local storage
+      |- auth_service.dart
+      |- report_service.dart
+      |- social_service.dart
   |- utils/         # Utility classes, such as utility functions, constant definitions
   main.dart         # Entry file
 ```
diff --git a/lib/components/navigation_drawer.dart b/lib/components/navigation_drawer.dart
new file mode 100644
index 0000000..1d824f0
--- /dev/null
+++ b/lib/components/navigation_drawer.dart
@@ -0,0 +1,53 @@
+import 'package:flutter/material.dart';
+
+class NavigationDrawer extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Drawer(
+      child: ListView(
+        padding: EdgeInsets.zero,
+        children: <Widget>[
+          DrawerHeader(
+            decoration: BoxDecoration(
+              color: Colors.blue,
+            ),
+            child: Text(
+              'Navigation Menu',
+              style: TextStyle(
+                color: Colors.white,
+                fontSize: 24,
+              ),
+            ),
+          ),
+          ListTile(
+            leading: Icon(Icons.home),
+            title: Text('Home'),
+            onTap: () => _navigateTo(context, '/'), // 导航到主页，根据实际路由调整
+          ),
+          ListTile(
+            leading: Icon(Icons.bar_chart),
+            title: Text('Reports'),
+            onTap: () => _navigateTo(context, '/reports'), // 调整为实际报告页面的路由
+          ),
+          ListTile(
+            leading: Icon(Icons.chat),
+            title: Text('Chatbot'),
+            onTap: () => _navigateTo(context, '/chat'), // 调整为实际聊天页面的路由
+          ),
+          ListTile(
+            leading: Icon(Icons.account_circle),
+            title: Text('Accounts'),
+            onTap: () => _navigateTo(context, '/accounts'), // 调整为实际账户页面的路由
+          ),
+        ],
+      ),
+    );
+  }
+
+  void _navigateTo(BuildContext context, String route) {
+    Navigator.pop(context); // 关闭抽屉
+    if (ModalRoute.of(context)?.settings.name != route) {
+      Navigator.pushNamed(context, route);
+    }
+  }
+}
diff --git a/lib/main.dart b/lib/main.dart
index c979c92..487a2e5 100644
--- a/lib/main.dart
+++ b/lib/main.dart
@@ -1,8 +1,10 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_dotenv/flutter_dotenv.dart';
-import 'screens/accounts/routes.dart' as account_routes;
 import 'screens/map/routes.dart' as map_routes;
 import 'screens/reports/routes.dart' as reports_routes;
+import 'screens/chat/routes.dart' as chat_routes;
+import 'screens/accounts/routes.dart' as account_routes;
+import 'components/navigation_drawer.dart'
 
 Future main() async {
   await dotenv.load(fileName: ".env"); // 加載.env文件
@@ -23,9 +25,27 @@ class TrafficReportApp extends StatelessWidget {
       initialRoute: '/',
       routes: {
         ...map_routes.mapRoutes,
-        ...account_routes.accountsRoutes,
         ...reports_routes.reportsRoutes,
+        ...chat_routes.chatRoutes,
+        ...account_routes.accountsRoutes,
       },
+      home: HomeScreen(), // 设置主屏幕
+    );
+  }
+}
+
+// HomeScreen 类
+class HomeScreen extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text('Traffic Report System'),
+      ),
+      drawer: NavigationDrawer(), // 使用新组件
+      body: Center(
+        child: Text('Welcome to Traffic Report System'),
+      ),
     );
   }
 }
\ No newline at end of file
diff --git a/lib/screens/chat/chat_screen.dart b/lib/screens/chat/chat_screen.dart
new file mode 100644
index 0000000..88de5e2
--- /dev/null
+++ b/lib/screens/chat/chat_screen.dart
@@ -0,0 +1,53 @@
+import 'package:flutter/material.dart';
+import 'package:http/http.dart' as http;
+
+class ChatPage extends StatefulWidget {
+  @override
+  _ChatScreenState createState() => _ChatScreenState();
+}
+
+class _ChatScreenState extends State<ChatScreen> {
+  final TextEditingController _controller = TextEditingController();
+  String _response = '';
+
+  void _sendMessage() async {
+    var response = await http.post(
+      Uri.parse('YOUR_DJANGO_SERVER_URL/chat-with-gemini/'),
+      headers: <String, String>{
+        'Content-Type': 'application/json; charset=UTF-8',
+      },
+      body: <String, String>{
+        'message': _controller.text,
+      },
+    );
+    setState(() {
+      _response = response.body;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text('Chat with Gemini'),
+      ),
+      body: Column(
+        children: <Widget>[
+          Expanded(
+            child: Text(_response),
+          ),
+          TextField(
+            controller: _controller,
+            decoration: InputDecoration(
+              labelText: 'Enter your message',
+            ),
+          ),
+          ElevatedButton(
+            onPressed: _sendMessage,
+            child: Text('Send'),
+          ),
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/screens/chat/routes.dart b/lib/screens/chat/routes.dart
new file mode 100644
index 0000000..7cbe7d0
--- /dev/null
+++ b/lib/screens/chat/routes.dart
@@ -0,0 +1,6 @@
+import 'package:flutter/material.dart';
+import 'chat_page.dart';
+
+Map<String, WidgetBuilder> chatRoutes = {
+    '/chat': (context) => const ChatPage(),
+};
\ No newline at end of file
diff --git a/lib/screens/reports/routes.dart b/lib/screens/reports/routes.dart
index 9fb328b..25d4b38 100644
--- a/lib/screens/reports/routes.dart
+++ b/lib/screens/reports/routes.dart
@@ -7,8 +7,8 @@ import 'report_paged_list_page.dart';
 
 Map<String, WidgetBuilder> reportsRoutes = {
   '/reports': (context) => const ReportListPage(),
-  '/reports/create': (context) => const CreateReportPage(),
-  '/reports/details': (context) => const ReportDetailsPage(),
-  '/reports/edit': (context) => const ReportEditPage(),
-  '/reports/paged': (context) => const ReportPagedListPage(),
+  '/create': (context) => const CreateReportPage(),
+  '/details': (context) => const ReportDetailsPage(),
+  '/edit': (context) => const ReportEditPage(),
+  '/paged': (context) => const ReportPagedListPage(),
 };
\ No newline at end of file