diff --git a/src/hooks/useSettings.ts b/src/hooks/useSettings.ts
index 301a406..b277c6f 100644
--- a/src/hooks/useSettings.ts
+++ b/src/hooks/useSettings.ts
@@ -11,7 +11,6 @@ export const defaultSettings = {
 // context to access it anywhere)
 const useSettings = () => {
   const [settings, setSettings] = React.useState(defaultSettings);
-  console.log('DEBUG:: ~ file: useSettings.ts ~ line 15 ~ settings', settings);
 
   React.useEffect(() => {
     if (!settings.tagsListString.trim()) {
@@ -24,13 +23,23 @@ const useSettings = () => {
 
   React.useEffect(() => {
     // Init config panel
-    window.roamMemo.extensionAPI.settings.panel.create(settingsPanelConfig({ setSettings }));
+    window.roamMemo.extensionAPI.settings.panel.create(
+      settingsPanelConfig({ settings, setSettings })
+    );
   }, [setSettings, settings.dataPageTitle]);
 
   React.useEffect(() => {
     const allSettings = window.roamMemo.extensionAPI.settings.getAll() || {};
 
-    setSettings((currentSettings) => ({ ...currentSettings, ...allSettings }));
+    // Filterout out any settings that are falsey
+    const filteredSettings = Object.keys(allSettings).reduce((acc, key) => {
+      if (allSettings[key]) {
+        acc[key] = allSettings[key];
+      }
+      return acc;
+    }, {});
+
+    setSettings((currentSettings) => ({ ...currentSettings, ...filteredSettings }));
   }, [setSettings]);
 
   return settings;
diff --git a/src/settingsPanelConfig.ts b/src/settingsPanelConfig.tsx
similarity index 80%
rename from src/settingsPanelConfig.ts
rename to src/settingsPanelConfig.tsx
index 7ff27e9..3424eee 100644
--- a/src/settingsPanelConfig.ts
+++ b/src/settingsPanelConfig.tsx
@@ -1,9 +1,8 @@
 import * as asyncUtils from '~/utils/async';
-import { importRoamSrOldData } from '~/utils/migration';
-import RoamSrImportData from '~/components/RoamSRImport';
+import RoamSrImportPanel from '~/components/RoamSrImportPanel';
 import { defaultSettings } from './hooks/useSettings';
 
-const settingsPanelConfig = ({ setSettings }) => {
+const settingsPanelConfig = ({ settings, setSettings }) => {
   const syncFn = async ({ key, value }: { key: string; value: any }) => {
     window.roamMemo.extensionAPI.settings.set(key, value);
     setSettings((currentSettings) => {
@@ -17,9 +16,9 @@ const settingsPanelConfig = ({ setSettings }) => {
     settings: [
       {
         id: 'tagsListString',
-        name: 'Tag Pages',
+        name: 'Tag Pages (aka Decks)',
         description:
-          'Separate multiple with commas. First one is the default page. Example: "memo, sr, 🐘, french words, fun facts"',
+          'Separate multiple decks with commas. Example: "memo, sr, 🐘, french exam, fun facts"',
         action: {
           type: 'input',
           placeholder: defaultSettings.tagsListString,
@@ -35,7 +34,7 @@ const settingsPanelConfig = ({ setSettings }) => {
         description: 'Import Roam Sr Old data',
         action: {
           type: 'reactComponent',
-          component: RoamSrImportData,
+          component: () => <RoamSrImportPanel dataPageTitle={settings.dataPageTitle} />,
         },
       },
       {