diff --git a/lib/components/message.dart b/lib/components/message.dart
index 3f7fb3d..9a8938c 100644
--- a/lib/components/message.dart
+++ b/lib/components/message.dart
@@ -7,9 +7,11 @@ void showToast(BuildContext context, {required String message, IconData? icon})
   var newEntry = OverlayEntry(
       builder: (context) => ToastOverlay(message: message, icon: icon));
 
-  OverlayWidget.of(context)?.addOverlay(newEntry);
+  var overlay = OverlayWidget.of(context);
 
-  Timer(const Duration(seconds: 2), () => OverlayWidget.of(context)?.remove(newEntry));
+  overlay?.addOverlay(newEntry);
+
+  Timer(const Duration(seconds: 2), () => overlay?.remove(newEntry));
 }
 
 class ToastOverlay extends StatelessWidget {
diff --git a/lib/components/title_bar.dart b/lib/components/title_bar.dart
index 05b2de4..6d603c4 100644
--- a/lib/components/title_bar.dart
+++ b/lib/components/title_bar.dart
@@ -23,3 +23,29 @@ class TitleBar extends StatelessWidget {
     );
   }
 }
+
+class SliverTitleBar extends StatelessWidget {
+  const SliverTitleBar({required this.title, this.action, super.key});
+
+  final String title;
+
+  final Widget? action;
+
+
+  @override
+  Widget build(BuildContext context) {
+    return SliverToBoxAdapter(
+      child: SizedBox(
+        child: Row(
+          children: [
+            Text(title,
+              style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),),
+            const Spacer(),
+            if(action != null)
+              action!
+          ],
+        ).paddingHorizontal(16).paddingVertical(8),
+      ),
+    );
+  }
+}
diff --git a/lib/pages/settings_page.dart b/lib/pages/settings_page.dart
index ce08dbb..c917038 100644
--- a/lib/pages/settings_page.dart
+++ b/lib/pages/settings_page.dart
@@ -1,4 +1,11 @@
 import 'package:fluent_ui/fluent_ui.dart';
+import 'package:pixes/appdata.dart';
+import 'package:pixes/components/page_route.dart';
+import 'package:pixes/components/title_bar.dart';
+import 'package:pixes/foundation/app.dart';
+import 'package:pixes/pages/main_page.dart';
+import 'package:pixes/utils/translation.dart';
+import 'package:url_launcher/url_launcher_string.dart';
 
 class SettingsPage extends StatefulWidget {
   const SettingsPage({super.key});
@@ -10,6 +17,82 @@ class SettingsPage extends StatefulWidget {
 class _SettingsPageState extends State<SettingsPage> {
   @override
   Widget build(BuildContext context) {
-    return const Placeholder();
+    return ScaffoldPage(
+      padding: EdgeInsets.zero,
+      content: CustomScrollView(
+        slivers: [
+          SliverTitleBar(title: "Settings".tl),
+          buildHeader("Account".tl),
+          buildAccount(),
+        ],
+      ),
+    );
+  }
+
+  Widget buildHeader(String text) {
+    return SliverToBoxAdapter(
+      child: Padding(
+        padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
+        child: Text(text, style: const TextStyle(fontSize: 14, fontWeight: FontWeight.bold)),
+      ),);
+  }
+
+  Widget buildItem({required String title, String? subtitle, Widget? action}) {
+    return Card(
+      margin: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
+      padding: EdgeInsets.zero,
+      child: ListTile(
+        title: Text(title),
+        subtitle: subtitle == null ? null : Text(subtitle),
+        trailing: action,
+      ),
+    );
+  }
+  
+  Widget buildAccount(){
+    return SliverToBoxAdapter(
+      child: Column(
+        children: [
+          buildItem(
+            title: "Logout".tl,
+            action: Button(
+              onPressed: () {
+                showDialog<String>(
+                  context: App.rootNavigatorKey.currentContext!,
+                  builder: (context) => ContentDialog(
+                    title: Text('Logout'.tl),
+                    content: Text('Are you sure you want to logout?'.tl),
+                    actions: [
+                      Button(
+                        child: Text('Continue'.tl),
+                        onPressed: () {
+                          appdata.account = null;
+                          App.rootNavigatorKey.currentState!.pushAndRemoveUntil(
+                              AppPageRoute(
+                                  builder: (context) => const MainPage()),
+                                  (route) => false
+                          );
+                        },
+                      ),
+                      FilledButton(
+                        child: Text('Cancel'.tl),
+                        onPressed: () => context.pop(),
+                      ),
+                    ],
+                  ),
+                );
+              },
+              child: Text("Continue".tl).fixWidth(64),
+            ),
+          ),
+          buildItem(title: "Account Settings".tl, action: Button(
+            child: Text("Edit".tl).fixWidth(64),
+            onPressed: (){
+              launchUrlString("https://www.pixiv.net/setting_user.php");
+            },
+          )),
+        ],
+      ),
+    );
   }
 }
\ No newline at end of file