diff --git a/lib/moodpage.dart b/lib/moodpage.dart
index 5459ba8eb38319dea484ffb1f1c6db72b0d8f391..02f8d87f551643d70fdc2f2aaed4a2127dc7e73d 100644
--- a/lib/moodpage.dart
+++ b/lib/moodpage.dart
@@ -53,6 +53,7 @@ class MoodPage extends State<StateMoodPage> {
   Moods? currentMood = selectedMoodAsEnum;
   String imagePath = "";
 
+  //besorgt ein image file aus der galarie
   _getFromGallery() async {
     try {
       XFile? pickedFile = await _picker.pickImage(
@@ -71,14 +72,14 @@ class MoodPage extends State<StateMoodPage> {
       print(e);
     }
   }
-
+  //sendet den befehl music zum passenden genre rauszusuchen
   _changeMusic() async {
     //code zum musik ändern
     String hexcode = selectedMood.red.toRadixString(16) + selectedMood.green.toRadixString(16) + selectedMood.blue.toRadixString(16);
     String genre = await changeFirebase().getGenreByHex(hexcode);
     print("genre = " + genre);
   }
-
+  //vergleicht zwei farben auf ähnlichkeit
   _getColorDistance(Color c1, Color c2) {
     LabColor labC1 = LabColor.fromColor(c1);
     LabColor labC2 = LabColor.fromColor(c2);
@@ -127,22 +128,21 @@ class MoodPage extends State<StateMoodPage> {
   }
   _updateColorPalete(Color col){
     if(!usesPicture){
-      col = Color.fromARGB(col.alpha - 100, col.red, col.green, col.blue);
-      //col = darken(col, 0.05);
+      if(col.value != Color.fromARGB(255, 0, 0, 0).value){
+        col = ligten(col, 0.2);
+      }
       primaryColor = col;
-      backGroundColor = Color.fromARGB(col.alpha - 140, col.red, col.green, col.blue);
-    }else{
-      backGroundColor = Color.fromARGB(col.alpha - 240, col.red, col.green, col.blue);
     }
+    backGroundColor = Color.fromARGB(col.alpha - 230, col.red, col.green, col.blue);
     primaryColor = col;
-    onPrimary = darken(col, 0.2);
+    onPrimary = darken(col, 0.5);
 
-    Color shiftedColor = Color.fromARGB(col.alpha - 100, col.red, col.green, col.blue);
+    Color shiftedColor = ligten(col,0.1);;
 
     primaryContainer = shiftedColor;
-    onPrimaryContainer = darken(shiftedColor, 0.2);
+    onPrimaryContainer = darken(shiftedColor, 0.5);
   }
-
+  //returend die liste mit den moods
   _getMoodList(){
     return Column(children: <Widget>[
 
@@ -230,6 +230,7 @@ class MoodPage extends State<StateMoodPage> {
               });
             },
           ),
+
       RadioListTile<Moods>(
         title: const Text(
           "Happy",
@@ -358,7 +359,7 @@ class MoodPage extends State<StateMoodPage> {
           ),
         ]);
   }
-
+  // setzt das bild(falls vorhanden) in einem container ein der sich and die bildschirmgröße anpasst
   _getContainerTodisplay() {
     BoxDecoration deco = new BoxDecoration();
     var image;
@@ -386,7 +387,7 @@ class MoodPage extends State<StateMoodPage> {
       ),
     );
   }
-
+  //generiert ein image aus dem imagefile
   _getImageTodisplay() {
     var imageToShow;
     try {
@@ -396,7 +397,7 @@ class MoodPage extends State<StateMoodPage> {
       return null;
     }
   }
-
+  // generiert einen paletegenerator vom aktiellen image
   Future<PaletteGenerator> _updatePaletteGenerator() async {
     if (imagePath != "") {
       paletteGenerator = await PaletteGenerator.fromImageProvider(
@@ -405,8 +406,8 @@ class MoodPage extends State<StateMoodPage> {
     }
     return paletteGenerator;
   }
-
-  _getCollorIndicator() {
+  //gibt dem widged den colorindicator zur momentan generierten Primärfarbe und die Moodliste mit dem aktuell auszuwählenden Mood zurück
+  _getCollorIndicatorAndMoodList() {
     return FutureBuilder<PaletteGenerator>(
         future: _updatePaletteGenerator(), // async work
         builder:
@@ -456,7 +457,7 @@ class MoodPage extends State<StateMoodPage> {
           child: Column(
             children: <Widget>[
               _getContainerTodisplay(),
-              _getCollorIndicator(),
+              _getCollorIndicatorAndMoodList(),
               //_getMoodList(),
             ],
           ),
diff --git a/lib/searchpage.dart b/lib/searchpage.dart
index c328c711f9e555ea9452262eff7713710f282631..5c834388233d2f288d9f86401d3496a31c3b4c53 100644
--- a/lib/searchpage.dart
+++ b/lib/searchpage.dart
@@ -3,6 +3,9 @@ import 'package:flutter/material.dart';
 import 'dart:developer';
 
 import 'package:ambient/services/spotify.dart';
+import 'package:ambient/homepage.dart';
+import 'package:flutter/services.dart';
+import 'package:spotify_sdk/spotify_sdk.dart';
 
 class StateSearcgPage extends StatefulWidget {
   const StateSearcgPage({super.key});
@@ -14,6 +17,7 @@ class StateSearcgPage extends StatefulWidget {
 class SearchPage extends State<StateSearcgPage> {
   final controller = TextEditingController();
   Spotify spotifyApi = Spotify();
+  HomePage homePage = HomePage();
   List<Song> songs = List.empty(growable: true);
 
   @override
@@ -45,8 +49,7 @@ class SearchPage extends State<StateSearcgPage> {
                       itemCount: songs.length,
                       itemBuilder: ((context, index) {
                         Song song = songs[index];
-
-                        return Card(
+                        return GestureDetector(
                           child: Padding(
                             padding: const EdgeInsets.all(10),
                             child: Row(
@@ -65,6 +68,9 @@ class SearchPage extends State<StateSearcgPage> {
                               ],
                             ),
                           ),
+                          onTap: () {
+                            play(song.id);
+                          },
                         );
                       })),
                 )
@@ -73,14 +79,21 @@ class SearchPage extends State<StateSearcgPage> {
   }
 
   updateList(String searchedString) async {
-    if (searchedString.length >= 3) {
-      var searchList = await spotifyApi.search(searchedString);
+    songs = List.empty(growable: true);
+    var searchList = await spotifyApi.search(searchedString);
+
+    for (var element in searchList) {
+      songs.add(element);
+    }
+  }
 
-      for (var element in searchList) {
-        songs.add(element);
-      }
-    } else if (searchedString.isEmpty) {
-      songs = List.empty(growable: true);
+  Future<void> play(String songId) async {
+    try {
+      await SpotifySdk.play(spotifyUri: 'spotify:track:$songId');
+    } on PlatformException catch (e) {
+      //setStatus(e.code, message: e.message);
+    } on MissingPluginException {
+      //setStatus('not implemented');
     }
   }
 }
diff --git a/lib/services/spotify.dart b/lib/services/spotify.dart
index a2716f903ae5c24a214f04ca3fbcee43513860f5..45b7f266323507002bcd4bca5bdf06c965d3e5b5 100644
--- a/lib/services/spotify.dart
+++ b/lib/services/spotify.dart
@@ -2,7 +2,9 @@ import 'dart:convert';
 import 'dart:developer';
 import 'dart:io';
 
+import 'package:flutter/services.dart';
 import 'package:http/http.dart' as http;
+import 'package:spotify_sdk/spotify_sdk.dart';
 
 class Spotify {
   final clientId = '60cf1944b15d4f9fb223ba32ce6336d1';
@@ -61,6 +63,42 @@ class Spotify {
     }
   }
 
+  playGenre(genre) async {
+    try {
+      final response = await http.get(
+        Uri.parse('https://api.spotify.com/v1/search?q=genre=$genre'),
+        headers: {
+          // 'Authorization': 'Bearer $authToken',
+          'Authorization':
+              'Bearer BQBx44KHYThkfXDRdxk9MNUaepkW_29jFARFKqOcO11ukDjdzuHY4dzNg2vl_8QPZ2wHX9NzTYaYFbwEjt5a83MD9oHoBTrbgjwvzGRQkL8L6LLz571amR-YhhxTsH9pG8ClYDZv2zgUgKgqXH6W64YCfyYSTiqYWnjKuUGSTyVUnz-BEQTTqbjJqemR4H-thfA9oWQDp07Ud2hOtI8Q'
+        },
+      );
+      final responseJson = json.decode(response.body);
+      final items = responseJson['tracks']['items'] as List;
+
+      List songList = items.map((item) => Song.fromJson(item)).toList();
+
+      var playSong = songList.first();
+
+      play(playSong['id']);
+      // T
+    } catch (e) {
+      log(e.toString());
+    }
+  }
+
+  getUser() async {
+    try {
+      var response = await http.get(
+        Uri.parse("https://api.spotify.com/v1/me"),
+        headers: {HttpHeaders.authorizationHeader: authToken},
+      );
+      return response;
+    } catch (e) {
+      log(e.toString());
+    }
+  }
+
   getUserAlbums() async {
     try {
       var response = await http.get(
@@ -193,6 +231,16 @@ class Spotify {
       log(e.toString());
     }
   }
+
+  Future<void> play(String songId) async {
+    try {
+      await SpotifySdk.play(spotifyUri: 'spotify:track:$songId');
+    } on PlatformException catch (e) {
+      //setStatus(e.code, message: e.message);
+    } on MissingPluginException {
+      //setStatus('not implemented');
+    }
+  }
 }
 
 class Song {
diff --git a/lib/widgets/navbars.dart b/lib/widgets/navbars.dart
index c05c964b9e7fd8e8b57572fc9ce05f46119132d8..782c8777c2fc824c5676e0471dab27b349ff2440 100644
--- a/lib/widgets/navbars.dart
+++ b/lib/widgets/navbars.dart
@@ -1,7 +1,11 @@
+// ignore_for_file: prefer_const_constructors
+
+import 'package:ambient/services/spotify.dart';
+import 'package:firebase_auth/firebase_auth.dart';
 import 'package:flutter/material.dart';
+import '../loginRegister/login.dart';
 import '../main.dart';
 
-
 //Todo Daniel Sidebar
 class SettingsDrawer extends StatelessWidget {
   const SettingsDrawer({
@@ -10,12 +14,51 @@ class SettingsDrawer extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    Spotify spotify = Spotify();
+    var user = spotify.getUser();
+
     return Drawer(
-      backgroundColor: onPrimary,
-      width: 200,
-      child: Center(
-        child: Text("Moin",
-            style: TextStyle(fontSize: 30, color: onPrimaryContainer)),
+      child: ListView(
+        padding: EdgeInsets.zero,
+        children: [
+          UserAccountsDrawerHeader(
+            accountName: user['display_name'],
+            accountEmail: user['email'],
+            currentAccountPicture: CircleAvatar(
+              child: ClipOval(
+                  child: Image.network(
+                user['images'][0]['url'],
+                width: 90,
+                height: 90,
+                fit: BoxFit.cover,
+              )),
+            ),
+            decoration: BoxDecoration(
+                color: Colors.blue,
+                image: DecorationImage(
+                  image: NetworkImage(
+                      'https://www.geeklawblog.com/wp-content/uploads/sites/528/2018/12/liprofile.png'),
+                  fit: BoxFit.cover,
+                )),
+          ),
+          ListTile(
+            leading: Icon(Icons.favorite),
+            title: Text('Favoriten'),
+            onTap: () {
+              //TODO: Site to Favorite
+            },
+          ),
+          ListTile(
+            leading: Icon(Icons.exit_to_app),
+            title: Text('Abmelden'),
+            onTap: () {
+              FirebaseAuth.instance.signOut().then((value) {
+                Navigator.push(context, MaterialPageRoute(builder:
+                    (context) => LoginPage()));
+              });
+            },
+          )
+        ],
       ),
     );
   }
@@ -25,9 +68,7 @@ class Topbar extends StatelessWidget implements PreferredSizeWidget {
   final Text title;
   final double height = 50;
 
-  const Topbar({Key? key, this.title = const Text("Navbar")})
-      : super(key: key);
-
+  const Topbar({Key? key, this.title = const Text("Navbar")}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
@@ -37,8 +78,7 @@ class Topbar extends StatelessWidget implements PreferredSizeWidget {
       title: title,
       actions: [
         Builder(
-            builder: (BuildContext context) =>
-                IconButton(
+            builder: (BuildContext context) => IconButton(
                   icon: const Icon(Icons.settings_outlined),
                   onPressed: () => Scaffold.of(context).openEndDrawer(),
                 ))