diff --git a/src/components/app/index.tsx b/src/components/app/index.tsx
new file mode 100644
index 0000000..a271fb8
--- /dev/null
+++ b/src/components/app/index.tsx
@@ -0,0 +1,15 @@
+import MushroomCatImage from './mushroom-cat.png';
+
+import Portrait from '../portrait';
+import { FC } from 'react';
+
+const App: FC = () => {
+    return (
+        <div>
+            <div>Hello, Webpack</div>
+            <Portrait src={MushroomCatImage} />
+        </div>
+    );
+};
+
+export default App;
diff --git a/src/img/mushroom-cat.png b/src/components/app/mushroom-cat.png
similarity index 100%
rename from src/img/mushroom-cat.png
rename to src/components/app/mushroom-cat.png
diff --git a/src/portrait/index.tsx b/src/components/portrait/index.tsx
similarity index 100%
rename from src/portrait/index.tsx
rename to src/components/portrait/index.tsx
diff --git a/src/index.tsx b/src/index.tsx
index 07f37ff..e2346dd 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,25 +1,8 @@
-import { FC } from 'react';
 import { createRoot } from 'react-dom/client';
-
-import { doWork } from './module';
+import App from './components/app';
 
 import './index.scss';
 
-import MushroomCatImage from './img/mushroom-cat.png';
-
-import Portrait from './portrait';
-
-const App: FC = () => {
-    const num = doWork();
-    console.log('work gave', num);
-    return (
-        <div>
-            <div>Hello, Webpack</div>
-            <Portrait src={MushroomCatImage} />
-        </div>
-    );
-};
-
 const main = document.querySelector('main');
 if (main === null) {
     throw new Error('unable to find main!');
diff --git a/src/module.ts b/src/module.ts
deleted file mode 100644
index 9c9c943..0000000
--- a/src/module.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export function doWork(): number {
-    console.log('doing some major work right now B)');
-    return 4;
-}