diff --git a/src/App.svelte b/src/App.svelte
index 4d82931..52c7f28 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,15 +1,13 @@
 <script>
-  import Head from "./lib/Head.svelte";
-  import Header from "./lib/Header.svelte";
-  import FileViewer from "./lib/FileViewer.svelte";
-  import Footer from "./lib/Footer.svelte";
+  import Head from "./lib/sections/Head.svelte";
+  import Header from "./lib/sections/Header.svelte";
+  import Footer from "./lib/sections/Footer.svelte";
+  import Main from "./lib/sections/Main.svelte";
 </script>
 
 <Head/>
 <Header />
-<main>
-  <FileViewer />
-</main>
+<Main />
 <Footer />
 
 <style>
diff --git a/src/app.css b/src/app.css
index cb81043..907485a 100644
--- a/src/app.css
+++ b/src/app.css
@@ -23,12 +23,6 @@ body {
   height: 100%;
 }
 
-main {
-  flex: 1; /* This pushes footer to bottom */
-  padding: 20px;
-  min-height: 85vh;
-}
-
 #app {
   display: flex;
   flex-direction: column;
diff --git a/src/lib/CardList.svelte b/src/lib/components/CardList.svelte
similarity index 97%
rename from src/lib/CardList.svelte
rename to src/lib/components/CardList.svelte
index 5cebbcb..6ee5a06 100644
--- a/src/lib/CardList.svelte
+++ b/src/lib/components/CardList.svelte
@@ -1,6 +1,6 @@
 <script>
-  import { t } from "../i18n"
-  import renderFileToCanvas from "../file-renderer";
+  import { t } from "../../i18n"
+  import renderFileToCanvas from "../../file-renderer";
 
   export let files = [];
   let canvasRefs = [];
diff --git a/src/lib/Dropzone.svelte b/src/lib/components/Dropzone.svelte
similarity index 97%
rename from src/lib/Dropzone.svelte
rename to src/lib/components/Dropzone.svelte
index ae1a7d2..ae44657 100644
--- a/src/lib/Dropzone.svelte
+++ b/src/lib/components/Dropzone.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { t } from "../i18n"
+  import { t } from "../../i18n"
 
   export let files;
   export let supportedFormats;
diff --git a/src/lib/FileList.svelte b/src/lib/components/FileList.svelte
similarity index 100%
rename from src/lib/FileList.svelte
rename to src/lib/components/FileList.svelte
diff --git a/src/lib/FileViewer.svelte b/src/lib/components/FileViewer.svelte
similarity index 93%
rename from src/lib/FileViewer.svelte
rename to src/lib/components/FileViewer.svelte
index a085fa3..21105a1 100644
--- a/src/lib/FileViewer.svelte
+++ b/src/lib/components/FileViewer.svelte
@@ -3,9 +3,9 @@
   import Dropzone from "./Dropzone.svelte";
   import FileList from "./FileList.svelte";
 
-  import { filterFiles } from "../utils/filterFiles";
-  import { supportedFormats } from "../format-readers";
-  import { t } from "../i18n"
+  import { filterFiles } from "../../utils/filterFiles";
+  import { supportedFormats } from "../../format-readers";
+  import { t } from "../../i18n"
 
   let acceptedFiles;
   let rejectedFiles;
diff --git a/src/lib/Footer.svelte b/src/lib/sections/Footer.svelte
similarity index 87%
rename from src/lib/Footer.svelte
rename to src/lib/sections/Footer.svelte
index c2d1693..c9d70f4 100644
--- a/src/lib/Footer.svelte
+++ b/src/lib/sections/Footer.svelte
@@ -1,6 +1,6 @@
 <script>
-  import { t } from "../i18n"
-  import { appVersion } from "../utils/env";
+  import { t } from "../../i18n"
+  import { appVersion } from "../../utils/env";
 </script>
 
 <footer>
@@ -43,7 +43,7 @@
     }
 
     footer p {
-      font-size: 12px; 
+      font-size: 12px;
     }
   }
 </style>
diff --git a/src/lib/Head.svelte b/src/lib/sections/Head.svelte
similarity index 82%
rename from src/lib/Head.svelte
rename to src/lib/sections/Head.svelte
index d13a633..75d761f 100644
--- a/src/lib/Head.svelte
+++ b/src/lib/sections/Head.svelte
@@ -1,6 +1,6 @@
 <script>
-    import { t, locale } from "../i18n";
-    import thumbnail from "../assets/thumbnail.webp";
+    import { t, locale } from "../../i18n";
+    import thumbnail from "../../assets/thumbnail.webp";
 
     $: document.documentElement.lang = $locale;
 </script>
diff --git a/src/lib/Header.svelte b/src/lib/sections/Header.svelte
similarity index 96%
rename from src/lib/Header.svelte
rename to src/lib/sections/Header.svelte
index 2873279..8a5bab8 100644
--- a/src/lib/Header.svelte
+++ b/src/lib/sections/Header.svelte
@@ -1,7 +1,7 @@
 <script>
-  import MediaQuery from "../lib/MediaQuery.svelte";
-  import logo from "../assets/logo.webp";
-  import { t, locale, locales } from "../i18n"
+  import MediaQuery from "../MediaQuery.svelte";
+  import logo from "../../assets/logo.webp";
+  import { t, locale, locales } from "../../i18n"
 
   const configsFor = (matches) => {
     return matches
diff --git a/src/lib/sections/Main.svelte b/src/lib/sections/Main.svelte
new file mode 100644
index 0000000..cdb3faa
--- /dev/null
+++ b/src/lib/sections/Main.svelte
@@ -0,0 +1,14 @@
+<script>
+    import FileViewer from "../components/FileViewer.svelte";
+</script>
+<main>
+    <FileViewer />
+</main>
+
+<style>
+    main {
+        flex: 1; /* This pushes footer to bottom */
+        padding: 20px;
+        min-height: 85vh;
+    }
+</style>