diff --git a/.gitignore b/.gitignore
index 5104525..63f809f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,6 +10,8 @@ start_server
 /tmp
 /public/js
 /public/css
+/public/fonts
+/public/images
 /public/mix-manifest.json
 /node_modules
 yarn-error.log
diff --git a/package.json b/package.json
index 4cc92c5..bdeed9d 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "dependencies": {
     "@rails/ujs": "^6.0.0",
     "normalize-scss": "^7.0.1",
+    "tufte-css": "^1.8.0",
     "turbolinks": "^5.2.0"
   },
   "scripts": {
diff --git a/src/css/app.css b/src/css/app.css
new file mode 100644
index 0000000..84f97dc
--- /dev/null
+++ b/src/css/app.css
@@ -0,0 +1 @@
+@import "~tufte-css/tufte.css";
diff --git a/src/css/app.scss b/src/css/app.scss
deleted file mode 100644
index d1d7417..0000000
--- a/src/css/app.scss
+++ /dev/null
@@ -1,66 +0,0 @@
-// Lucky generates 3 folders to help you organize your CSS:
-//
-//    - src/css/variables # Files for colors, spacing, etc.
-//    - src/css/mixins # Put your mixin functions in files here
-//    - src/css/components # CSS for your components
-//
-// Remember to import your new CSS files or they won't be loaded:
-//
-//    @import "./variables/colors" # Imports the file in src/css/variables/_colors.scss
-//
-// Note: importing with `~` tells webpack to look in the installed npm packages
-// https://stackoverflow.com/questions/39535760/what-does-a-tilde-in-a-css-url-do
-
-@import "~normalize-scss/sass/normalize/import-now";
-// Add your own components and import them like this:
-//
-// @import "components/my_new_component";
-
-// Default Lucky styles.
-// Delete these when you're ready to bring in your own CSS.
-body {
-  font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto,
-    Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  margin: 0 auto;
-  max-width: 800px;
-  padding: 20px 40px;
-}
-
-label,
-input {
-  display: flex;
-}
-
-label {
-  font-weight: 500;
-}
-
-[type="color"],
-[type="date"],
-[type="datetime"],
-[type="datetime-local"],
-[type="email"],
-[type="month"],
-[type="number"],
-[type="password"],
-[type="search"],
-[type="tel"],
-[type="text"],
-[type="time"],
-[type="url"],
-[type="week"],
-input:not([type]),
-textarea {
-  border-radius: 3px;
-  border: 1px solid #bbb;
-  margin: 7px 0 14px 0;
-  max-width: 400px;
-  padding: 8px 6px;
-  width: 100%;
-}
-
-[type="submit"] {
-  font-weight: 900;
-  margin: 9px 0;
-  padding: 6px 9px;
-}
diff --git a/webpack.mix.js b/webpack.mix.js
index a147b1b..1b31c64 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -22,7 +22,7 @@ if (mix.inProduction()) {
 mix
   .setPublicPath("public")
   .js("src/js/app.js", "js")
-  .sass("src/css/app.scss", "css")
+  .css("src/css/app.css", "css")
   .options({
     imgLoaderOptions: { enabled: false },
     clearConsole: false,
diff --git a/yarn.lock b/yarn.lock
index cace790..8728115 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6718,6 +6718,11 @@ tty-browserify@0.0.0:
   resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
   integrity sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY=
 
+tufte-css@^1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/tufte-css/-/tufte-css-1.8.0.tgz#16243dcde580716dbccaa40e097d1cbfbc7e8133"
+  integrity sha512-ZxL1CpgSfoafR885HLUi7lHuM7sIMrhokM4xC6ySKERJsOwnAB1Ag4bMQUveS1G9xr56VKFxP5APMRVGhoE4VQ==
+
 turbolinks@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/turbolinks/-/turbolinks-5.2.0.tgz#e6877a55ea5c1cb3bb225f0a4ae303d6d32ff77c"