diff --git a/Gemfile b/Gemfile
index 0f8cfe0..091e228 100644
--- a/Gemfile
+++ b/Gemfile
@@ -52,6 +52,10 @@ gem "bootsnap", require: false
 # used to make http requests
 gem 'httparty'
 
+gem 'bootstrap', '~> 5.2.0'
+gem 'jquery-rails'
+gem 'mini_racer'
+
 group :development, :test do
   # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
   gem "debug", platforms: %i[ mri mingw x64_mingw ]
diff --git a/Gemfile.lock b/Gemfile.lock
index be860d1..b90acdb 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -69,10 +69,16 @@ GEM
     addressable (2.8.5)
       public_suffix (>= 2.0.2, < 6.0)
     ast (2.4.2)
+    autoprefixer-rails (10.4.16.0)
+      execjs (~> 2)
     bcrypt (3.1.19)
     bindex (0.8.1)
     bootsnap (1.17.0)
       msgpack (~> 1.2)
+    bootstrap (5.2.3)
+      autoprefixer-rails (>= 9.1.0)
+      popper_js (>= 2.11.6, < 3)
+      sassc-rails (>= 2.0.0)
     builder (3.2.4)
     byebug (11.1.3)
     capybara (3.39.2)
@@ -98,11 +104,13 @@ GEM
     dockerfile-rails (1.5.12)
       rails (>= 3.0.0)
     erubi (1.12.0)
+    execjs (2.9.1)
     factory_bot (6.2.1)
       activesupport (>= 5.0.0)
     factory_bot_rails (6.2.0)
       factory_bot (~> 6.2.0)
       railties (>= 5.0.0)
+    ffi (1.16.3)
     globalid (1.2.1)
       activesupport (>= 6.1)
     hashdiff (1.0.1)
@@ -122,10 +130,15 @@ GEM
     jbuilder (2.11.5)
       actionview (>= 5.0.0)
       activesupport (>= 5.0.0)
+    jquery-rails (4.6.0)
+      rails-dom-testing (>= 1, < 3)
+      railties (>= 4.2.0)
+      thor (>= 0.14, < 2.0)
     json (2.6.3)
     language_server-protocol (3.17.0.3)
     launchy (2.5.2)
       addressable (~> 2.8)
+    libv8-node (18.16.0.0-x86_64-linux)
     loofah (2.21.4)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
@@ -138,6 +151,8 @@ GEM
     matrix (0.4.2)
     method_source (1.0.0)
     mini_mime (1.1.5)
+    mini_racer (0.8.0)
+      libv8-node (~> 18.16.0.0)
     minitest (5.20.0)
     msgpack (1.7.2)
     multi_xml (0.6.0)
@@ -158,6 +173,7 @@ GEM
       ast (~> 2.4.1)
       racc
     pg (1.5.4)
+    popper_js (2.11.8)
     pry (0.14.2)
       coderay (~> 1.1)
       method_source (~> 1.0)
@@ -241,6 +257,14 @@ GEM
       parser (>= 3.2.1.0)
     ruby-progressbar (1.13.0)
     rubyzip (2.3.2)
+    sassc (2.4.0)
+      ffi (~> 1.9)
+    sassc-rails (2.1.2)
+      railties (>= 4.0.0)
+      sassc (>= 2.0)
+      sprockets (> 3.0)
+      sprockets-rails
+      tilt
     selenium-webdriver (4.10.0)
       rexml (~> 3.2, >= 3.2.5)
       rubyzip (>= 1.2.2, < 3.0)
@@ -268,6 +292,7 @@ GEM
       railties (>= 6.0.0)
     stringio (3.0.9)
     thor (1.3.0)
+    tilt (2.3.0)
     timeout (0.4.1)
     turbo-rails (1.5.0)
       actionpack (>= 6.0.0)
@@ -303,6 +328,7 @@ PLATFORMS
 DEPENDENCIES
   bcrypt (~> 3.1.7)
   bootsnap
+  bootstrap (~> 5.2.0)
   capybara
   debug
   dockerfile-rails (>= 1.5)
@@ -310,7 +336,9 @@ DEPENDENCIES
   httparty
   importmap-rails
   jbuilder
+  jquery-rails
   launchy
+  mini_racer
   pg
   pry-byebug
   puma (~> 5.0)
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.scss
similarity index 97%
rename from app/assets/stylesheets/application.css
rename to app/assets/stylesheets/application.scss
index 288b9ab..a4705dc 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.scss
@@ -13,3 +13,4 @@
  *= require_tree .
  *= require_self
  */
+@import "bootstrap";
diff --git a/app/javascript/application.js b/app/javascript/application.js
index 0d7b494..16cda22 100644
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@@ -1,3 +1,6 @@
 // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
+//= require jquery3
+//= require popper
+//= require bootstrap-sprockets
 import "@hotwired/turbo-rails"
 import "controllers"
diff --git a/app/views/beerclubs/index.html.erb b/app/views/beerclubs/index.html.erb
index 5a32468..ff6c0bc 100644
--- a/app/views/beerclubs/index.html.erb
+++ b/app/views/beerclubs/index.html.erb
@@ -1,5 +1,3 @@
-<p style="color: green"><%= notice %></p>
-
 <h1>Beerclubs</h1>
 
 <div id="beerclubs">
diff --git a/app/views/beerclubs/show.html.erb b/app/views/beerclubs/show.html.erb
index 0ee1343..05b8d51 100644
--- a/app/views/beerclubs/show.html.erb
+++ b/app/views/beerclubs/show.html.erb
@@ -1,5 +1,3 @@
-<p style="color: green"><%= notice %></p>
-
 <%= render @beerclub %>
 
 <div>
diff --git a/app/views/beers/index.html.erb b/app/views/beers/index.html.erb
index f13bc83..bcbc8b7 100644
--- a/app/views/beers/index.html.erb
+++ b/app/views/beers/index.html.erb
@@ -1,5 +1,3 @@
-<p style="color: green"><%= notice %></p>
-
 <h1>Beers</h1>
 
 <div id="beers">
diff --git a/app/views/beers/show.html.erb b/app/views/beers/show.html.erb
index 337e2b6..0530efb 100644
--- a/app/views/beers/show.html.erb
+++ b/app/views/beers/show.html.erb
@@ -1,5 +1,3 @@
-<p style="color: green"><%= notice %></p>
-
 <%= render @beer %>
 
 <div>
diff --git a/app/views/breweries/index.html.erb b/app/views/breweries/index.html.erb
index 93bc4f1..b7e2c84 100644
--- a/app/views/breweries/index.html.erb
+++ b/app/views/breweries/index.html.erb
@@ -1,5 +1,3 @@
-<p style="color: green"><%= notice %></p>
-
 <h1>Breweries</h1>
 
 <div id="breweries">
diff --git a/app/views/breweries/show.html.erb b/app/views/breweries/show.html.erb
index 958e782..4102cb9 100644
--- a/app/views/breweries/show.html.erb
+++ b/app/views/breweries/show.html.erb
@@ -1,5 +1,3 @@
-<p style="color: green"><%= notice %></p>
-
 <%= render @brewery %>
 
 <div>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 4bc14d8..ae77996 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -11,32 +11,81 @@
   </head>
 
   <body>
-    <p>
-      <%= link_to "breweries", breweries_path %>
-      <%= link_to "beers", beers_path %>
-      <%= link_to "ratings", ratings_path %>
-      <%= link_to "users", users_path %>
-      <%= link_to "clubs", beerclubs_path %>
-      <%= link_to "places", places_path %>
-      <%= link_to "styles", styles_path %>
-      |
-      <% if current_user.nil? %>
-        <%= link_to "Sign up", new_user_path %>
-        <%= link_to "Sign in", new_session_path %>
-      <% else %>
-        <%= link_to current_user.username, user_path(current_user.id) %>
-        <%= link_to "Rate a new beer", new_rating_path %>
-        <%= link_to "Join a beer club", new_membership_path %>
-        <%= link_to "signout", signout_path, data: { "turbo-method": :delete } %>
-      <% end %>
-    </p>
-    <%= yield %>
-    <% if false %>
-      <% if session[:last_rating].nil? %>
-        <p>no ratings given</p>
-      <% else %>
-        <p>previous rating: <%= session[:last_rating] %></p>
-      <% end %>
-    <% end %>
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+      <div class="container-fluid">
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+            <li class="nav-item">
+              <%= link_to 'breweries', breweries_path, { class: "nav-link" } %>
+            </li>
+            <li class="nav-item">
+              <%= link_to 'beers', beers_path , { class: "nav-link" } %>
+            </li>
+            <li class="nav-item">
+              <%= link_to 'ratings', ratings_path , { class: "nav-link" } %>
+            </li>
+            <li class="nav-item">
+              <%= link_to 'users', users_path , { class: "nav-link" } %>
+            </li>
+            <li class="nav-item">
+              <%= link_to 'clubs', beerclubs_path , { class: "nav-link" } %>
+            </li>
+            <li class="nav-item">
+              <%= link_to 'places', places_path, { class: "nav-link" }  %>
+            </li>
+            <li class="nav-item">
+              <%= link_to 'styles', styles_path , { class: "nav-link" } %>
+            </li>
+            |
+            <% if current_user %>
+              <li class="nav-item">
+                <%= link_to "#{current_user.username}", current_user , { class: "nav-link" } %>
+              </li>
+              <li class="nav-item">
+                <%= link_to "Rate a beer", new_rating_path , { class: "nav-link" } %>
+              </li>
+              <li class="nav-item">
+                <%= link_to "Join a club", new_membership_path , { class: "nav-link" } %>
+              </li>
+              <li class="nav-item">
+                <%= link_to "Sign out", signout_path, class: "nav-link", data: {turbo_method: :delete} %>
+              </li>
+            <% else %>
+              <li class="nav-item">
+                <%= link_to "Sign up", signup_path , { class: "nav-link" } %>
+              </li>
+              <li class="nav-item">
+                <%= link_to "Sign in", signin_path , { class: "nav-link" } %>
+              </li>
+            <% end %>        
+          </ul>
+        </div>
+      </div>
+    </nav>
+
+    <div class="container">
+      <% if notice %>
+        <div class="alert alert-primary" role="alert">
+          <%= notice %>
+        </div>
+      <% end %>  
+
+      <div class="row">
+        <div class="col-sm-8">
+          <%= yield %>
+        </div>
+        <div class="col-sm-4">
+          <img
+            src="http://www.cs.helsinki.fi/u/mluukkai/wadror/pint.jpg"
+            width="200"
+            style="padding-top:30px"
+          >
+        </div>
+      </div>
+    </div>
+
   </body>
 </html>
diff --git a/app/views/memberships/index.html.erb b/app/views/memberships/index.html.erb
index dc0ba09..d1ee7e9 100644
--- a/app/views/memberships/index.html.erb
+++ b/app/views/memberships/index.html.erb
@@ -1,5 +1,3 @@
-<p style="color: green"><%= notice %></p>
-
 <h1>Memberships</h1>
 
 <div id="memberships">
diff --git a/app/views/memberships/show.html.erb b/app/views/memberships/show.html.erb
index 2e13a36..f2ee578 100644
--- a/app/views/memberships/show.html.erb
+++ b/app/views/memberships/show.html.erb
@@ -1,5 +1,3 @@
-<p style="color: green"><%= notice %></p>
-
 <%= render @membership %>
 
 <div>
diff --git a/app/views/places/index.html.erb b/app/views/places/index.html.erb
index c5e6482..e029208 100644
--- a/app/views/places/index.html.erb
+++ b/app/views/places/index.html.erb
@@ -5,8 +5,6 @@
   <%= form.submit "Search" %>
 <% end %>
 
-
-<%= notice %>
 <% if @weather %>
   <div>
     <strong>
diff --git a/app/views/sessions/new.html.erb b/app/views/sessions/new.html.erb
index 4bf317d..ed2796b 100644
--- a/app/views/sessions/new.html.erb
+++ b/app/views/sessions/new.html.erb
@@ -1,7 +1,5 @@
 <h1>Sign in</h1>
 
-<p style="color: red"><%= notice %></p>
-
 <%= form_with url: session_path, method: :post do |form| %>
   <div>
     <%= form.label :username, style: "display: block" %>
diff --git a/app/views/styles/index.html.erb b/app/views/styles/index.html.erb
index c08d48a..7fa2627 100644
--- a/app/views/styles/index.html.erb
+++ b/app/views/styles/index.html.erb
@@ -1,6 +1,5 @@
 <h1>Styles</h1>
 
-<%= notice %>
 <% if @styles %>
   <% @styles.each do |style|%>
     <%= render style %>
diff --git a/app/views/styles/show.html.erb b/app/views/styles/show.html.erb
index ffd1fcd..156403c 100644
--- a/app/views/styles/show.html.erb
+++ b/app/views/styles/show.html.erb
@@ -1,5 +1,3 @@
-<%= notice %>
-
 <%= render @style%>
 
 <div>
diff --git a/app/views/users/index.html.erb b/app/views/users/index.html.erb
index 2427a40..9d19fc6 100644
--- a/app/views/users/index.html.erb
+++ b/app/views/users/index.html.erb
@@ -1,5 +1,3 @@
-<p style="color: green"><%= notice %></p>
-
 <h1>Users</h1>
 
 <div id="users">
diff --git a/app/views/users/show.html.erb b/app/views/users/show.html.erb
index 647da1a..b82367c 100644
--- a/app/views/users/show.html.erb
+++ b/app/views/users/show.html.erb
@@ -1,5 +1,3 @@
-<p style="color: green"><%= notice %></p>
-
 <div>
   <p>
     <strong>Username:</strong>