diff --git a/.gitignore b/.gitignore
index 4aaf102..7e5db71 100644
--- a/.gitignore
+++ b/.gitignore
@@ -33,3 +33,8 @@
 
 # Ignore master key for decrypting credentials and more.
 /config/master.key
+
+/app/assets/builds/*
+!/app/assets/builds/.keep
+
+vendor/bundle
diff --git a/Gemfile b/Gemfile
index a7f333a..d216871 100644
--- a/Gemfile
+++ b/Gemfile
@@ -55,3 +55,5 @@ group :test do
   gem "capybara"
   gem "selenium-webdriver"
 end
+
+gem "tailwindcss-rails", "~> 3.0"
diff --git a/Gemfile.lock b/Gemfile.lock
index 1efd5fc..99a560f 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -247,6 +247,10 @@ GEM
     stimulus-rails (1.3.4)
       railties (>= 6.0.0)
     stringio (3.1.1)
+    tailwindcss-rails (3.0.0)
+      railties (>= 7.0.0)
+      tailwindcss-ruby
+    tailwindcss-ruby (3.4.14-x86_64-linux)
     thor (1.3.2)
     timeout (0.4.1)
     turbo-rails (2.0.11)
@@ -286,6 +290,7 @@ DEPENDENCIES
   sprockets-rails
   sqlite3 (>= 1.4)
   stimulus-rails
+  tailwindcss-rails (~> 3.0)
   turbo-rails
   tzinfo-data
   web-console
diff --git a/Procfile.dev b/Procfile.dev
new file mode 100644
index 0000000..da151fe
--- /dev/null
+++ b/Procfile.dev
@@ -0,0 +1,2 @@
+web: bin/rails server
+css: bin/rails tailwindcss:watch
diff --git a/app/assets/builds/.keep b/app/assets/builds/.keep
new file mode 100644
index 0000000..e69de29
diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js
index 5918193..338a0e8 100644
--- a/app/assets/config/manifest.js
+++ b/app/assets/config/manifest.js
@@ -1,2 +1,3 @@
 //= link_tree ../images
 //= link_directory ../stylesheets .css
+//= link_tree ../builds
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 8855c3f..b2dd0b1 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -13,44 +13,51 @@
  *= require_tree .
  *= require_self
  */
+@import url('https://fonts.googleapis.com/css2?family=Fleur+De+Leah&display=swap');
+/* html, body { */
+/*     margin: 0; */
+/*     padding: 0; */
+/*     height: 100%; */
+/* } */
 
-html, body {
-    margin: 0;
-    padding: 0;
-    height: 100%;
-}
+/* #container { */
+/*     background-color: darkseagreen; */
+/*     height: 100%; */
+/* } */
 
-#container {
-    background-color: darkseagreen;
-    height: 100%;
-}
+/* #navbar > ul { */
+/*     list-style-type: none; */
+/* } */
+/* #navbar > ul > li { */
+/*     float: left; */
+/*     font-size: 1.25em; */
+/*     margin-top: 16px; */
+/*     margin-left: 30px; */
+/*     color: cornsilk; */
+/* } */
 
-#navbar > ul {
-    list-style-type: none;
-}
-#navbar > ul > li {
-    float: left;
-    font-size: 1.25em;
-    margin-top: 16px;
-    margin-left: 30px;
-    color: cornsilk;
-}
+/* #logo { */
+/*     font-size: 1.5em; */
+/*     padding: 12px 20px; */
+/*     float: left; */
+/*     color: cornsilk; */
+/* } */
 
-#logo {
-    font-size: 1.5em;
-    padding: 12px 20px;
-    float: left;
-    color: cornsilk;
-}
+/* .nav-column-member { */
+/*     float: left; */
+/*     font-size: 1.25em; */
+/*     padding: 16px 30px; */
+/* } */
 
-.nav-column-member {
-    float: left;
-    font-size: 1.25em;
-    padding: 16px 30px;
-}
+/* #main-content { */
+/*     clear: left; */
+/*     background-color: cornsilk; */
+/*     height: 100%; */
+/* } */
 
-#main-content {
-    clear: left;
-    background-color: cornsilk;
-    height: 100%;
+
+.fleur-de-leah-regular {
+  font-family: "Fleur De Leah", cursive;
+  font-weight: 400;
+  font-style: normal;
 }
diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css
new file mode 100644
index 0000000..8666d2f
--- /dev/null
+++ b/app/assets/stylesheets/application.tailwind.css
@@ -0,0 +1,13 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/*
+
+@layer components {
+  .btn-primary {
+    @apply py-2 px-4 bg-blue-200;
+  }
+}
+
+*/
diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb
index 94ec8e1..ee6d531 100644
--- a/app/views/home/index.html.erb
+++ b/app/views/home/index.html.erb
@@ -1 +1 @@
-<h1>Hello, Rails!</h1>
+<h1 class="text-3xl font-bold underline">Hello, Rails!</h1>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 3956cdd..534c0d0 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title><%= content_for(:title) || "Weddingplan" %></title>
+    <title><%= content_for(:title) || "Jillian and Adam's Wedding" %></title>
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <%= csrf_meta_tags %>
@@ -13,26 +13,40 @@
     <link rel="icon" href="/icon.png" type="image/png">
     <link rel="icon" href="/icon.svg" type="image/svg+xml">
     <link rel="apple-touch-icon" href="/icon.png">
+    <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
     <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
   </head>
 
   <body>
-    <div id="container">
-      <div id="navbar">
-	<div id="logo">
-	  A & J Wedding
+    <nav class="flex items-center justify-between flex-wrap bg-[#8fbc8f]">
+      <div class="text-4xl text-amber-100 fleur-de-leah-regular">
+	  Jillian and Adam's Wedding
+      </div>
+      <div id="burger-menu" class="block lg:hidden">
+	<button class="flex items-center px-3 py-2 border rounded text-amber-100 border-amber-100 hover:text-white hover:border-white">
+	  <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
+	</button>
+      </div>
+      <div class="w-full block flex-grow lg:flex lg:w-auto  lg:justify-end">
+	<div id="nav-links" class="text-md max-sm:hidden flex flex-col lg:flex-row lg:mr-4">
+	  <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-amber-100 hover:text-white mr-4">Ceremony & Reception</a>
+	  <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-amber-100 hover:text-white mr-4">Accommodations</a>
+	  <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-amber-100 hover:text-white mr-4">Dress</a>
+	  <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-amber-100 hover:text-white mr-4">Registry</a>
+	  <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-amber-100 hover:text-white">RSVP</a>
 	</div>
-	<ul>
-	  <li>Order of Events</li>
-	  <li>Travel</li>
-	  <li>Accommodation</li>
-	  <li>Dress</li>
-	  <li>Gifts</li>
-	</ul>
-      </div>
-      <div id="main-content">
-	<%= yield %>
       </div>
+    </nav>
+    <div id="main-content">
+      <%= yield %>
     </div>
+    <script>
+      var burgerMenu = document.getElementById('burger-menu');
+      var navLinks = document.getElementById('nav-links');
+      burgerMenu.addEventListener('click', function() {
+	  navLinks.classList.toggle("max-sm:hidden");
+      });
+    </script>
+
   </body>
 </html>
diff --git a/bin/dev b/bin/dev
new file mode 100755
index 0000000..ad72c7d
--- /dev/null
+++ b/bin/dev
@@ -0,0 +1,16 @@
+#!/usr/bin/env sh
+
+if ! gem list foreman -i --silent; then
+  echo "Installing foreman..."
+  gem install foreman
+fi
+
+# Default to port 3000 if not specified
+export PORT="${PORT:-3000}"
+
+# Let the debug gem allow remote connections,
+# but avoid loading until `debugger` is called
+export RUBY_DEBUG_OPEN="true"
+export RUBY_DEBUG_LAZY="true"
+
+exec foreman start -f Procfile.dev "$@"
diff --git a/config/tailwind.config.js b/config/tailwind.config.js
new file mode 100644
index 0000000..d6ad82c
--- /dev/null
+++ b/config/tailwind.config.js
@@ -0,0 +1,22 @@
+const defaultTheme = require('tailwindcss/defaultTheme')
+
+module.exports = {
+  content: [
+    './public/*.html',
+    './app/helpers/**/*.rb',
+    './app/javascript/**/*.js',
+    './app/views/**/*.{erb,haml,html,slim}'
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
+      },
+    },
+  },
+  plugins: [
+    require('@tailwindcss/forms'),
+    require('@tailwindcss/typography'),
+    require('@tailwindcss/container-queries'),
+  ]
+}