diff --git a/backend/config/config.go b/backend/config/config.go
index 90dfee4..bcb950f 100644
--- a/backend/config/config.go
+++ b/backend/config/config.go
@@ -16,6 +16,10 @@ type Config struct {
 }
 
 func newConfig(filePath string, data *configData) (*Config, error) {
+	conf := &Config{
+		filePath:   filePath,
+		configData: data,
+	}
 	// TODO make sure required fields have SOMETHING in them
 	// TODO Merge existing config with read in config
 	if data == nil {
@@ -24,10 +28,7 @@ func newConfig(filePath string, data *configData) (*Config, error) {
 	if err := data.validate(); err != nil {
 		return nil, fmt.Errorf("invalid config: %w", err)
 	}
-	return &Config{
-		filePath:   filePath,
-		configData: data,
-	}, nil
+	return conf, nil
 }
 
 type configData struct {
@@ -40,7 +41,7 @@ func (d *configData) validate() error {
 		return errors.New("nil library config")
 	}
 	if err := d.Library.Validate(); err != nil {
-		return fmt.Errorf("invalid library config: %s\n%w", d.Library, err)
+		return fmt.Errorf("invalid library config: %#v: %w", d.Library, err)
 	}
 	return nil
 }
@@ -59,7 +60,7 @@ func GetCurrentConfig() (*Config, error) {
 	}
 	configFilePath := path.Join(configDir, "config.toml")
 
-	// create the config obj with the filepath we got
+	// create the config obj with the filepath we got, initializing with default data
 	config, err := newConfig(configFilePath, defaultConfigData)
 	if err != nil {
 		return nil, fmt.Errorf("could not create new config: %w", err)
@@ -80,6 +81,12 @@ func GetCurrentConfig() (*Config, error) {
 	if err != nil {
 		return nil, fmt.Errorf("could not load config file %s: %w", configFilePath, err)
 	}
+
+	// before we return the config, lets make sure sub configs can invoke saving when they need
+	err = config.updateSubConfigSaveFuncReferences()
+	if err != nil {
+		return nil, fmt.Errorf("could not update sub config save func references: %w", err)
+	}
 	return config, nil
 }
 
@@ -107,6 +114,12 @@ func (c *Config) loadConfig() (*Config, error) {
 		return nil, fmt.Errorf("could not create config from config file data at %s: %w", c.filePath, err)
 	}
 
+	// before we return the config, lets make sure sub configs can invoke saving when they need
+	err = config.updateSubConfigSaveFuncReferences()
+	if err != nil {
+		return nil, fmt.Errorf("could not update sub config save func references: %w", err)
+	}
+
 	return config, nil
 }
 
@@ -125,3 +138,8 @@ func (c *Config) WriteConfig() error {
 	}
 	return nil
 }
+
+func (c *Config) updateSubConfigSaveFuncReferences() error {
+	c.Library.SaveFunc = c.WriteConfig
+	return nil
+}
diff --git a/backend/library/library.go b/backend/library/library.go
index e77e489..e147906 100644
--- a/backend/library/library.go
+++ b/backend/library/library.go
@@ -3,10 +3,12 @@ package library
 import (
 	"context"
 	"fmt"
+	"os"
 )
 
 type Config struct {
 	DirectoryPath string
+	SaveFunc      func() error `toml:"-"`
 }
 
 func (c *Config) Validate() error {
@@ -27,7 +29,7 @@ func NewLibrary(conf *Config) (*Library, error) {
 		return nil, fmt.Errorf("nil config for library")
 	}
 	if err := conf.Validate(); err != nil {
-		return nil, fmt.Errorf("invalid library config %s\n%w", conf, err)
+		return nil, fmt.Errorf("invalid library config %#v: %w", conf, err)
 	}
 	return &Library{
 		conf: conf,
@@ -42,3 +44,20 @@ func (l *Library) Init(ctx context.Context) error {
 func (l *Library) GetDir() (string, error) {
 	return l.conf.DirectoryPath, nil
 }
+
+func (l *Library) SetDir(dirPath string) error {
+	fileInfo, err := os.Stat(dirPath)
+	if err != nil {
+		return fmt.Errorf("could not stat %s: %w", dirPath, err)
+	}
+	if !fileInfo.IsDir() {
+		return fmt.Errorf("dirPath is not a directory: %s", dirPath)
+	}
+
+	l.conf.DirectoryPath = dirPath
+	err = l.conf.SaveFunc()
+	if err != nil {
+		return fmt.Errorf("could not save library dir config: %w", err)
+	}
+	return nil
+}
diff --git a/frontend/package.json.md5 b/frontend/package.json.md5
index 290c071..18a63a5 100755
--- a/frontend/package.json.md5
+++ b/frontend/package.json.md5
@@ -1 +1 @@
-c8268978cc1672b8c925fd9aaff81ad7
\ No newline at end of file
+a08fc53bd03e73d3ce16aefd412e00b2
\ No newline at end of file
diff --git a/frontend/src/components/audio-player/controls/player-controls.ts b/frontend/src/components/audio-player/controls/player-controls.ts
index 800c74c..4c3ddf2 100644
--- a/frontend/src/components/audio-player/controls/player-controls.ts
+++ b/frontend/src/components/audio-player/controls/player-controls.ts
@@ -14,7 +14,7 @@ export class PlayerControls extends LitElement {
   <button>
     <img src="/src/assets/images/icons/music/skip-prev-solid.svg"></img>
   </button>
-  <button @click="${this.onPlayPauseButtonClick}">
+  <button @click="${this.onPlayPauseClick}">
     <img src="/src/assets/images/icons/music/play-solid.svg"></img>
   </button>
   <button>
@@ -27,14 +27,13 @@ export class PlayerControls extends LitElement {
 `;
   }
 
-  onPlayPauseButtonClick(event: { target: HTMLButtonElement; }) {
+  onPlayPauseClick(event: { target: HTMLButtonElement; }) {
     try {
       Play().then((result) => {
         console.log(result)
         event.target.setAttribute("src", "/src/assets/images/icons/music/pause-solid.svg")
       }).catch((err) => {
-        console.log("There is an error with playing")
-        console.error(err);
+        console.error("there is an error with playing " + err);
       });
     }
     catch (err) {
diff --git a/frontend/src/components/audio-player/seekbar/seek-bar.ts b/frontend/src/components/audio-player/seekbar/seek-bar.ts
index 53715aa..53b9112 100644
--- a/frontend/src/components/audio-player/seekbar/seek-bar.ts
+++ b/frontend/src/components/audio-player/seekbar/seek-bar.ts
@@ -8,7 +8,7 @@ const seekBar = () => html`
 @customElement('seek-bar')
 export class SeekBar extends LitElement {
 
-  render() {
+  override render() {
     return seekBar();
   }
 }
diff --git a/frontend/src/components/config/library-picker/library-picker.ts b/frontend/src/components/config/library-picker/library-picker.ts
new file mode 100644
index 0000000..c0b396b
--- /dev/null
+++ b/frontend/src/components/config/library-picker/library-picker.ts
@@ -0,0 +1,49 @@
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { GetDir, SetDir } from '@go/library/Library.js';
+import { DirectoryPicker } from '@go/frontendbindings/FrontendBindings.js';
+
+@customElement('library-picker')
+export class LibraryPicker extends LitElement {
+
+  @property({ type: String })
+  currentLibraryDirectoryText: string = "No Library Directory selected";
+
+  override render() {
+    return html`
+      <div>
+        <label>${this.currentLibraryDirectoryText}</label>
+        <button @click="${this.onSelectLibraryClick}">Choose Directory...</button>
+      </div>
+    `;
+  }
+
+  constructor() {
+    super();
+    GetDir().
+      then((result) => {
+        if (result.length === 0) { return; }
+        this.currentLibraryDirectoryText = result;
+      }).catch((err) => { console.error(err) })
+  }
+
+  onSelectLibraryClick() {
+    try {
+      DirectoryPicker()
+        .then((result: string) => {
+          SetDir(result).then(() => {
+            this.currentLibraryDirectoryText = result;
+          }).catch((err: string) => {
+            console.error("There is an error with saving selected directory: " + err);
+          });
+        })
+        .catch((err) => {
+          console.error("There is an error with directory picker: " + err);
+        });
+    }
+    catch (err) {
+      console.error(err);
+    }
+  }
+
+}
diff --git a/frontend/src/pages/config/config.html b/frontend/src/pages/config/config.html
index 2ce88cb..889f8db 100644
--- a/frontend/src/pages/config/config.html
+++ b/frontend/src/pages/config/config.html
@@ -9,10 +9,9 @@
 
     <meta charset="UTF-8" />
     <meta content="width=device-width, initial-scale=1.0" name="viewport" />
-    <link rel="stylesheet" type="text/css" href="/node_modules/@picocss/pico/css/pico.css">
     <title>yellowjacket - config</title>
 </head>
-<script src="./config.js" type="module"></script>
+<script src="./config.ts" type="module"></script>
 
 <body>
     <header class="container">
@@ -47,10 +46,7 @@
     </header>
     <hr />
     <main class="container">
-        <section id="library-selector">
-            <label id="library-directory-label">No Library Directory Selected</label>
-            <button onclick="dirPicker()">Choose Directory...</button>
-        </section>
+        <library-picker></library-picker>
     </main>
 </body>
 
diff --git a/frontend/src/pages/config/config.js b/frontend/src/pages/config/config.js
deleted file mode 100644
index 09621bc..0000000
--- a/frontend/src/pages/config/config.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { DirectoryPicker } from '/wailsjs/go/frontendbindings/FrontendBindings.js';
-import { GetDir as GetLibraryDir } from '/wailsjs/go/library/Library.js';
-
-let libraryDirectoryLabel = document.getElementById("library-directory-label");
-
-window.updateLibraryDirLabel = function(value) {
-  libraryDirectoryLabel.innerText = value;
-}
-
-// on load update the library dir label
-GetLibraryDir().
-  then((result) => {
-    if (result.length === 0) { return; }
-    window.updateLibraryDirLabel(result);
-  }).catch((err) => { console.error(err) })
-
-
-window.dirPicker = function() {
-  try {
-    DirectoryPicker()
-      .then((result) => { 
-        window.updateLibraryDirLabel(result); })
-      .catch((err) => {
-        console.error("There is an error with directory picker: " + err);
-      });
-  }
-  catch (err) {
-    console.error(err);
-  }
-}
diff --git a/frontend/src/pages/config/config.ts b/frontend/src/pages/config/config.ts
new file mode 100644
index 0000000..949f1e5
--- /dev/null
+++ b/frontend/src/pages/config/config.ts
@@ -0,0 +1 @@
+import '@components/config/library-picker/library-picker.ts';
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 252fd8c..29448d7 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -28,10 +28,12 @@
       "@go/*": ["./wailsjs/go/*"],
       "@components/*": ["./src/components/*"],
       "@assets/*": ["./src/assets/*"],
+      "@pages/*": ["./src/pages/*"],
       "@node_modules/*": ["./node_modules/*"]
     },
     // needed for Lit Elements
     "experimentalDecorators": true,
+    "useDefineForClassFields": false, // allows us to define properties as class fields
     // plugins
     "plugins": [
       {"name": "ts-lit-plugin"},
diff --git a/frontend/wailsjs/go/library/Library.d.ts b/frontend/wailsjs/go/library/Library.d.ts
index f6fc6b8..4883635 100755
--- a/frontend/wailsjs/go/library/Library.d.ts
+++ b/frontend/wailsjs/go/library/Library.d.ts
@@ -5,3 +5,5 @@ import {context} from '../models';
 export function GetDir():Promise<string>;
 
 export function Init(arg1:context.Context):Promise<void>;
+
+export function SetDir(arg1:string):Promise<void>;
diff --git a/frontend/wailsjs/go/library/Library.js b/frontend/wailsjs/go/library/Library.js
index 539e50d..84793b7 100755
--- a/frontend/wailsjs/go/library/Library.js
+++ b/frontend/wailsjs/go/library/Library.js
@@ -9,3 +9,7 @@ export function GetDir() {
 export function Init(arg1) {
   return window['go']['library']['Library']['Init'](arg1);
 }
+
+export function SetDir(arg1) {
+  return window['go']['library']['Library']['SetDir'](arg1);
+}