diff --git a/packages/popup/src/Popup.tsx b/packages/popup/src/Popup.tsx
index 6ec0b4d34..3b1d85537 100644
--- a/packages/popup/src/Popup.tsx
+++ b/packages/popup/src/Popup.tsx
@@ -16,11 +16,10 @@ const Popup = () => {
         backgroundColor: theme === 'light' ? '#eee' : '#222',
       }}>
       <header className="App-header" style={{ color: theme === 'light' ? '#222' : '#eee' }}>
-        {/*TODO: ADD asset managing module or some other solution */}
         <img src={chrome.runtime.getURL('newtab/logo.svg')} className="App-logo" alt="logo" />
 
         <p>
-          Edit <code>packages/popup/src/Popup.tsx</code> and save to reload.
+          Edit <code>pages/popup/src/Popup.tsx</code> and save to reload.
         </p>
         <a
           className="App-link"
diff --git a/pages/shared/index.ts b/packages/shared/index.ts
similarity index 100%
rename from pages/shared/index.ts
rename to packages/shared/index.ts
diff --git a/pages/shared/lib/hoc/index.ts b/packages/shared/lib/hoc/index.ts
similarity index 100%
rename from pages/shared/lib/hoc/index.ts
rename to packages/shared/lib/hoc/index.ts
diff --git a/pages/shared/lib/hoc/withErrorBoundary.tsx b/packages/shared/lib/hoc/withErrorBoundary.tsx
similarity index 100%
rename from pages/shared/lib/hoc/withErrorBoundary.tsx
rename to packages/shared/lib/hoc/withErrorBoundary.tsx
diff --git a/pages/shared/lib/hoc/withSuspense.tsx b/packages/shared/lib/hoc/withSuspense.tsx
similarity index 100%
rename from pages/shared/lib/hoc/withSuspense.tsx
rename to packages/shared/lib/hoc/withSuspense.tsx
diff --git a/pages/shared/lib/hooks/index.ts b/packages/shared/lib/hooks/index.ts
similarity index 100%
rename from pages/shared/lib/hooks/index.ts
rename to packages/shared/lib/hooks/index.ts
diff --git a/pages/shared/lib/hooks/useStorageSuspense.tsx b/packages/shared/lib/hooks/useStorageSuspense.tsx
similarity index 100%
rename from pages/shared/lib/hooks/useStorageSuspense.tsx
rename to packages/shared/lib/hooks/useStorageSuspense.tsx
diff --git a/pages/shared/lib/storages/base.ts b/packages/shared/lib/storages/base.ts
similarity index 100%
rename from pages/shared/lib/storages/base.ts
rename to packages/shared/lib/storages/base.ts
diff --git a/pages/shared/lib/storages/exampleThemeStorage.ts b/packages/shared/lib/storages/exampleThemeStorage.ts
similarity index 100%
rename from pages/shared/lib/storages/exampleThemeStorage.ts
rename to packages/shared/lib/storages/exampleThemeStorage.ts
diff --git a/pages/shared/lib/storages/index.ts b/packages/shared/lib/storages/index.ts
similarity index 100%
rename from pages/shared/lib/storages/index.ts
rename to packages/shared/lib/storages/index.ts
diff --git a/pages/shared/package.json b/packages/shared/package.json
similarity index 100%
rename from pages/shared/package.json
rename to packages/shared/package.json
diff --git a/pages/shared/tsconfig.json b/packages/shared/tsconfig.json
similarity index 100%
rename from pages/shared/tsconfig.json
rename to packages/shared/tsconfig.json
diff --git a/pages/shared/tsup.config.ts b/packages/shared/tsup.config.ts
similarity index 100%
rename from pages/shared/tsup.config.ts
rename to packages/shared/tsup.config.ts
diff --git a/pages/content-ui/src/app.tsx b/pages/content-ui/src/app.tsx
index 27432fe4a..6ec435e74 100644
--- a/pages/content-ui/src/app.tsx
+++ b/pages/content-ui/src/app.tsx
@@ -5,5 +5,9 @@ export default function App() {
     console.log('content ui loaded');
   }, []);
 
-  return <div className="">content view</div>;
+  return (
+    <div>
+      Edit <code>pages/content-ui/src/app.tsx</code> and save to reload.
+    </div>
+  );
 }
diff --git a/pages/devtools-panel/src/Panel.tsx b/pages/devtools-panel/src/Panel.tsx
index 06e7954f6..3eefae888 100644
--- a/pages/devtools-panel/src/Panel.tsx
+++ b/pages/devtools-panel/src/Panel.tsx
@@ -8,7 +8,7 @@ import {
 
 const Panel = () => {
   const theme = useStorageSuspense(exampleThemeStorage);
-  console.log(chrome.runtime.getURL('logo.svg'));
+
   return (
     <div
       className="App"
@@ -18,7 +18,7 @@ const Panel = () => {
       <header className="App-header" style={{ color: theme === 'light' ? '#222' : '#eee' }}>
         <img src={chrome.runtime.getURL('devtools-panel/logo.svg')} className="App-logo" alt="logo" />
         <p>
-          Edit <code>packages/devtools-panel/src/Panel.tsx</code> and save to reload.
+          Edit <code>pages/devtools-panel/src/Panel.tsx</code> and save to reload.
         </p>
         <a
           className="App-link"
diff --git a/pages/devtools/src/index.ts b/pages/devtools/src/index.ts
index b9070b11a..043063f6d 100644
--- a/pages/devtools/src/index.ts
+++ b/pages/devtools/src/index.ts
@@ -1,4 +1,5 @@
 try {
+  console.log("Edit 'pages/devtools/src/index.ts' and save to reload.");
   chrome.devtools.panels.create('Dev Tools', 'icon-34.png', 'devtools-panel/index.html');
 } catch (e) {
   console.error(e);
diff --git a/pages/newtab/src/Newtab.tsx b/pages/newtab/src/Newtab.tsx
index e16d7a58a..0deb78e0f 100644
--- a/pages/newtab/src/Newtab.tsx
+++ b/pages/newtab/src/Newtab.tsx
@@ -17,10 +17,9 @@ const Newtab = () => {
         backgroundColor: theme === 'light' ? '#eee' : '#222',
       }}>
       <header className="App-header" style={{ color: theme === 'light' ? '#222' : '#eee' }}>
-        {/*TODO: ADD asset managing module or some other solution */}
         <img src={chrome.runtime.getURL('newtab/logo.svg')} className="App-logo" alt="logo" />
         <p>
-          Edit <code>packages/newtab/src/Newtab.tsx</code> and save to reload.
+          Edit <code>pages/newtab/src/Newtab.tsx</code> and save to reload.
         </p>
         <a
           className="App-link"
diff --git a/pages/options/src/Options.tsx b/pages/options/src/Options.tsx
index 3e520dc8d..0bd282b93 100644
--- a/pages/options/src/Options.tsx
+++ b/pages/options/src/Options.tsx
@@ -15,9 +15,17 @@ const Options = () => {
       style={{
         backgroundColor: theme === 'light' ? '#eee' : '#222',
       }}>
-      {/*TODO: ADD asset managing module or some other solution */}
       <img src={chrome.runtime.getURL('options/logo.svg')} className="App-logo" alt="logo" />
       <span style={{ color: theme === 'light' ? '#0281dc' : undefined, marginBottom: '10px' }}>Options</span>
+      Edit <code>pages/options/src/Options.tsx</code> and save to reload.
+      <button
+        style={{
+          backgroundColor: theme === 'light' ? '#eee' : '#222',
+          color: theme === 'light' ? '#222' : '#eee',
+        }}
+        onClick={exampleThemeStorage.toggle}>
+        Toggle Theme
+      </button>
     </div>
   );
 };
diff --git a/pages/sidepanel/src/SidePanel.tsx b/pages/sidepanel/src/SidePanel.tsx
index 55c6e4605..c3007ebe2 100644
--- a/pages/sidepanel/src/SidePanel.tsx
+++ b/pages/sidepanel/src/SidePanel.tsx
@@ -16,10 +16,9 @@ const SidePanel = () => {
         backgroundColor: theme === 'light' ? '#eee' : '#222',
       }}>
       <header className="App-header" style={{ color: theme === 'light' ? '#222' : '#eee' }}>
-        {/*TODO: ADD asset managing module or some other solution */}
         <img src={chrome.runtime.getURL('sidepanel/logo.svg')} className="App-logo" alt="logo" />
         <p>
-          Edit <code>packages/sidepanel/src/SidePanel.tsx</code> and save to reload.
+          Edit <code>pages/sidepanel/src/SidePanel.tsx</code> and save to reload.
         </p>
         <a
           className="App-link"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a7aafa19f..81146328f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -102,7 +102,7 @@ importers:
         version: link:../../packages/hmr
       '@chrome-extension-boilerplate/shared':
         specifier: workspace:*
-        version: link:../../pages/shared
+        version: link:../../packages/shared
       '@chrome-extension-boilerplate/tsconfig':
         specifier: workspace:*
         version: link:../../packages/tsconfig
@@ -166,7 +166,7 @@ importers:
     dependencies:
       '@chrome-extension-boilerplate/shared':
         specifier: workspace:*
-        version: link:../../pages/shared
+        version: link:../shared
     devDependencies:
       '@chrome-extension-boilerplate/hmr':
         specifier: workspace:*
@@ -181,13 +181,22 @@ importers:
         specifier: 5.0.12
         version: 5.0.12(@types/node@20.8.10)(sass@1.74.1)
 
+  packages/shared:
+    devDependencies:
+      '@chrome-extension-boilerplate/tsconfig':
+        specifier: workspace:*
+        version: link:../tsconfig
+      tsup:
+        specifier: 8.0.2
+        version: 8.0.2(typescript@5.2.2)
+
   packages/tsconfig: {}
 
   pages/content:
     dependencies:
       '@chrome-extension-boilerplate/shared':
         specifier: workspace:*
-        version: link:../shared
+        version: link:../../packages/shared
     devDependencies:
       '@chrome-extension-boilerplate/hmr':
         specifier: workspace:*
@@ -203,7 +212,7 @@ importers:
     dependencies:
       '@chrome-extension-boilerplate/shared':
         specifier: workspace:*
-        version: link:../shared
+        version: link:../../packages/shared
     devDependencies:
       '@chrome-extension-boilerplate/hmr':
         specifier: workspace:*
@@ -222,7 +231,7 @@ importers:
     dependencies:
       '@chrome-extension-boilerplate/shared':
         specifier: workspace:*
-        version: link:../shared
+        version: link:../../packages/shared
     devDependencies:
       '@chrome-extension-boilerplate/hmr':
         specifier: workspace:*
@@ -241,7 +250,7 @@ importers:
     dependencies:
       '@chrome-extension-boilerplate/shared':
         specifier: workspace:*
-        version: link:../shared
+        version: link:../../packages/shared
     devDependencies:
       '@chrome-extension-boilerplate/hmr':
         specifier: workspace:*
@@ -260,7 +269,7 @@ importers:
     dependencies:
       '@chrome-extension-boilerplate/shared':
         specifier: workspace:*
-        version: link:../shared
+        version: link:../../packages/shared
     devDependencies:
       '@chrome-extension-boilerplate/hmr':
         specifier: workspace:*
@@ -282,7 +291,7 @@ importers:
     dependencies:
       '@chrome-extension-boilerplate/shared':
         specifier: workspace:*
-        version: link:../shared
+        version: link:../../packages/shared
     devDependencies:
       '@chrome-extension-boilerplate/hmr':
         specifier: workspace:*
@@ -297,20 +306,11 @@ importers:
         specifier: 5.0.12
         version: 5.0.12(@types/node@20.8.10)(sass@1.74.1)
 
-  pages/shared:
-    devDependencies:
-      '@chrome-extension-boilerplate/tsconfig':
-        specifier: workspace:*
-        version: link:../../packages/tsconfig
-      tsup:
-        specifier: 8.0.2
-        version: 8.0.2(typescript@5.2.2)
-
   pages/sidepanel:
     dependencies:
       '@chrome-extension-boilerplate/shared':
         specifier: workspace:*
-        version: link:../shared
+        version: link:../../packages/shared
     devDependencies:
       '@chrome-extension-boilerplate/hmr':
         specifier: workspace:*