diff --git a/app/components/nav-bar.js b/app/components/nav-bar.js
index 17d6c20..387b66a 100644
--- a/app/components/nav-bar.js
+++ b/app/components/nav-bar.js
@@ -1,19 +1,10 @@
 import Component from '@glimmer/component';
 import { inject as service } from "@ember/service";
 import {action, set,get} from '@ember/object';
-import { tracked } from '@glimmer/tracking';
 
 export default class NavBarComponent extends Component {
     @service data;
     @service userPreference;
-    @tracked theme;
-
-    constructor(){
-        super(...arguments);
-        let value = get(this.userPreference,'theme') ;
-        this.theme = value ? value : 'light';
-        this.changeColour();
-    }
 
     get libraryReq(){
          return this.data.libraryReq;
@@ -23,34 +14,30 @@ export default class NavBarComponent extends Component {
         return this.data.booksReq;
     }
 
-    // get theme(){
-    //     console.log("getter");
-        
-    //     let t = get(this.userPreference,'theme');
-    //     // setting body colour
-        // let backgroundColour = t == 'dark' ? 'grey' : 'white';
-        // let colour = t == 'dark' ? 'white' : 'black';
-        // $('body').css('background-color', backgroundColour);
-        // $('body').css('color', colour);
-
-    //     // return t;
-    //     return get(this.userPreference,'theme');
-    // }
+    get theme(){        
+        let t = this.userPreference.theme;
+
+        // setting body colour
+        let backgroundColour = t == 'dark' ? 'grey' : 'white';
+        let colour = t == 'dark' ? 'white' : 'black';
+        $('body').css('background-color', backgroundColour);
+        $('body').css('color', colour);
+
+        return t;
+    }
 
     @action
     changeTheme(){
         let t = this.theme == 'dark' ? 'light' : 'dark';
-        this.theme = t;
-        this.changeColour();
-        set(this.userPreference, 'theme' , t);
+        this.userPreference.setTheme(t);
     }
 
-    @action
-    changeColour(){
-        let backgroundColour = this.theme  == 'dark' ? 'grey' : 'white';
-        let colour = this.theme  == 'dark' ? 'white' : 'black';
-        $('body').css('background-color', backgroundColour);
-        $('body').css('color', colour);
-    }
+    // @action
+    // changeColour(){
+    //     let backgroundColour = this.theme  == 'dark' ? 'grey' : 'white';
+    //     let colour = this.theme  == 'dark' ? 'white' : 'black';
+    //     $('body').css('background-color', backgroundColour);
+    //     $('body').css('color', colour);
+    // }
 
 }
diff --git a/app/services/user-preference.js b/app/services/user-preference.js
index 82d88fa..9a1b2c9 100644
--- a/app/services/user-preference.js
+++ b/app/services/user-preference.js
@@ -1,29 +1,38 @@
 import Service from '@ember/service';
+import { tracked } from '@glimmer/tracking';
 
 export default class UserPreferenceService extends Service {
 
-    set theme(newTheme) {
+    @tracked theme;
+
+    constructor(){
+        super(...arguments);
+        let value = localStorage.getItem("theme");
+        this.theme = value ? value : 'light';
+    }
+
+    setTheme(newTheme) {
+        localStorage.setItem("theme",newTheme)
+        this.theme =  newTheme;
+
         // let date = new Date();
         // seetting expiry date of 30 days
         // date.setTime(date.getTime() + (30 * 24 * 60 * 60 * 1000));
         // document.cookie = `theme=${newTheme};expires=${date.toUTCString()}`;
-
-        localStorage.setItem("theme",newTheme)
     }
 
-    get theme() {
-        // let cookieArr = document.cookie.split('; ');
-        // let t = 'light';
-        // if (cookieArr.length > 0) {
-        //     cookieArr.forEach((cookie) => {
-        //         let keyValue = cookie.split("=");
-        //         if (keyValue[0] == 'theme') {
-        //             t = keyValue[1];
-        //         }
-        //     })
-
-        // }
-        // return t;
-        return localStorage.getItem("theme");
-    }
+    // get theme() {
+    //     // let cookieArr = document.cookie.split('; ');
+    //     // let t = 'light';
+    //     // if (cookieArr.length > 0) {
+    //     //     cookieArr.forEach((cookie) => {
+    //     //         let keyValue = cookie.split("=");
+    //     //         if (keyValue[0] == 'theme') {
+    //     //             t = keyValue[1];
+    //     //         }
+    //     //     })
+    //     // }
+    //     // return t;
+    //     return localStorage.getItem("theme");
+    // }
 }