diff --git a/index.css b/index.css
index a4dde3f..8b85934 100644
--- a/index.css
+++ b/index.css
@@ -2,13 +2,12 @@
 @tailwind components;
 @tailwind utilities;
 
-
 @font-face {
   font-family: "Space Grotesk";
   font-style: normal;
   font-weight: 300 700;
   font-display: swap;
-  src: url('./assets/fonts/SpaceGrotesk-Variable.ttf') format('truetype');
+  src: url("./assets/fonts/SpaceGrotesk-Variable.ttf") format("truetype");
 }
 
 @font-face {
@@ -16,13 +15,39 @@
   font-style: normal;
   font-weight: 100 900;
   font-display: swap;
-  src: url('./assets/fonts/Inter-Variable.ttf') format('truetype');
+  src: url("./assets/fonts/Inter-Variable.ttf") format("truetype");
 }
 
-@layer components {
+@layer base {
+  h1 {
+    @apply text-2xl md:text-4xl lg:text-5xl;
+  }
+  h2 {
+    @apply text-xl md:text-3xl lg:text-4xl;
+  }
+  h3 {
+    @apply text-lg md:text-2xl lg:text-3xl;
+  }
+  h4 {
+    @apply text-base md:text-xl lg:text-2xl;
+  }
+  h5 {
+    @apply text-sm md:text-lg lg:text-xl;
+  }
+  h6 {
+    @apply text-xs md:text-base lg:text-lg;
+  }
+  p {
+    @apply text-base md:text-lg;
+  }
 
+  button {
+    @apply text-lg md:text-xl lg:text-2xl;
+  }
+}
+
+@layer components {
   .ease {
     @apply transition duration-300 ease-in-out;
   }
-
 }
diff --git a/src/components/app.rs b/src/components/app.rs
index 5055e02..4f7ed90 100644
--- a/src/components/app.rs
+++ b/src/components/app.rs
@@ -4,6 +4,7 @@ use leptos_meta::{Link, Meta, Title};
 use tracing::info;
 
 use crate::client::ClientRpc;
+use crate::components::create_wallet::CreateWallet;
 use crate::components::service_worker::ServiceWorker;
 use crate::components::{Footer, Joined, Logo, SubmitForm, WalletSelector};
 use crate::context::provide_client_context;
@@ -72,7 +73,7 @@ pub fn App() -> impl IntoView {
 
       <div class="h-[100dvh]">
         <div class="mx-auto w-full h-full flex flex-col min-w-[400px] lg:max-w-[600px] p-6">
-          <header class="flex justify-center mb-20">
+          <header class="flex justify-center mb-6 md:mb-20">
             <Logo class="bg-red border-1 border-blue"/>
           </header>
           <main class="w-full pb-24 flex-grow ">
@@ -88,6 +89,9 @@ pub fn App() -> impl IntoView {
                           available=wallets
                           on_select=move |wallet_name| select_wallet_action.dispatch(wallet_name)
                         />
+                        <CreateWallet
+                          on_select=move |wallet_name| select_wallet_action.dispatch(wallet_name)
+                        />
                       }.into_view()
                     } else {
                       empty_view().into_view()
@@ -100,7 +104,7 @@ pub fn App() -> impl IntoView {
               when=show_join
                 fallback=|| empty_view()
               >
-              <h1 class="font-heading text-gray-900 text-4xl font-semibold mb-6">"Join a Federation"</h1>
+              <h1 class="font-heading text-gray-900 font-semibold mb-6">"Join a Federation"</h1>
               <SubmitForm
                 description="Enter invite code (i.e. fed11jpr3lgm8t…) to join a Federation".into()
                 on_submit=move |value| join_action.dispatch(value)
@@ -114,7 +118,7 @@ pub fn App() -> impl IntoView {
               when=show_join_error
               fallback=|| empty_view()
             >
-              {move || view!{<div class="text-body text-md mt-4"><span class="text-red-500">{
+              {move || view!{<div class="text-body mt-4"><span class="text-red-500">{
                 format!("✗ Failed to join federation: {:?}", join_action.value().with(|r| {
                   match r {
                     Some(Err(e)) =>anyhow!("{:?}", e),
diff --git a/src/components/balance.rs b/src/components/balance.rs
index 25c9789..d742513 100644
--- a/src/components/balance.rs
+++ b/src/components/balance.rs
@@ -34,8 +34,8 @@ pub fn Balance(#[prop(optional, into)] class: String) -> impl IntoView {
 
     view! {
       <div class=class>
-        <h2 class="text-xl leading-tight w-full font-body font-semibold  pb-4 mb-4 text-gray-400 border-b-2 border-gray-200">"Balance"</h2>
-        <h3 class="text-4xl">{balance}</h3>
+        <h2 class="text-lg md:text-xl leading-tight w-full font-body font-semibold md:pb-4 mb-4 text-gray-400 border-b-2 border-gray-200">"Balance"</h2>
+        <h3 class="text-xl md:text-4xl">{balance}</h3>
       </div>
     }
 }
diff --git a/src/components/copyable_text.rs b/src/components/copyable_text.rs
index 091fe97..8ba2d94 100644
--- a/src/components/copyable_text.rs
+++ b/src/components/copyable_text.rs
@@ -36,7 +36,7 @@ pub fn CopyableText(
                         let copy = copy.clone();
                         move |_| copy(text.get().as_str())
                     }
-                    class="w-full py-3 text-xl bg-blue-500 hover:enabled:bg-blue-600
+                    class="w-full py-3 bg-blue-500 hover:enabled:bg-blue-600
                         text-white font-semibold font-body rounded-lg cursor-pointer enabled:ease disabled:opacity-70
                         disabled:cursor-not-allowed hover:enabled:shadow-lg"
                 >
diff --git a/src/components/create_wallet.rs b/src/components/create_wallet.rs
new file mode 100644
index 0000000..988d98c
--- /dev/null
+++ b/src/components/create_wallet.rs
@@ -0,0 +1,44 @@
+use leptos::*;
+
+use crate::components::SubmitForm;
+use crate::utils::empty_view;
+
+#[component]
+pub fn CreateWallet<F>(on_select: F) -> impl IntoView
+where
+    F: Fn(String) + 'static + Copy,
+{
+    let (loading, set_loading) = create_signal(false);
+    let (show_create_wallet_form, set_show_create_wallet_form) = create_signal(false);
+    let select = move |name: String| {
+        set_loading.set(true);
+        on_select(name);
+    };
+
+    view! {
+    <div class="flex justify-center">
+      <Show when=move || !show_create_wallet_form.get() fallback=|| empty_view() >
+        <button
+          class="mt-4 px-4 py-2 bg-blue-500 text-white font-bold rounded hover:bg-blue-700 focus:outline-none focus:shadow-outline min-w-[200px]"
+          on:click=move |_| {
+            set_show_create_wallet_form.set(true);
+          }
+        >
+          "Create a new wallet"
+        </button>
+      </Show>
+      <Show when=move || show_create_wallet_form.get() fallback=|| empty_view() >
+        <SubmitForm
+          description="Enter a name for the new wallet".into()
+          on_submit=move |name| {
+            set_show_create_wallet_form.set(false);
+            select(name);
+          }
+          placeholder="Wallet Name".into()
+          submit_label="Create".into()
+          loading=loading
+        />
+      </Show>
+    </div>
+        }
+}
diff --git a/src/components/footer.rs b/src/components/footer.rs
index 337d4fc..a43bc19 100644
--- a/src/components/footer.rs
+++ b/src/components/footer.rs
@@ -6,7 +6,7 @@ use crate::components::LogoFedimint;
 pub fn Footer(version: &'static str, #[prop(optional, into)] class: String) -> impl IntoView {
     let version_prefix: &'static str = &version[..7];
     view! {
-      <div class={format!("flex justify-center items-center text-body text-sm text-gray-500 {class}")}>
+      <div class={format!("flex justify-center items-center text-body text-gray-500 {class}")}>
         "Webimint version "
         <a
           class="text-gray-950 font-mono mx-1"
diff --git a/src/components/joined.rs b/src/components/joined.rs
index 44e7a97..6c757a1 100644
--- a/src/components/joined.rs
+++ b/src/components/joined.rs
@@ -54,7 +54,7 @@ pub fn Joined() -> impl IntoView {
     ];
 
     view! {
-        <h1 class="font-heading text-gray-900 text-4xl font-semibold">{federation_label}</h1>
+        <h1 class="font-heading text-gray-900 font-semibold">{federation_label}</h1>
         <Balance class="my-12" />
         <Menu
             items=menu_items
@@ -81,29 +81,32 @@ where
     let (tab, set_tab) = create_signal(initial_item);
 
     view! {
-        <ul class="my-12 w-full flex flex-row">
-            {
-                items.iter().enumerate().map(|(i, item)| {
-                    view! {
-                        <li class="flex-1">
-                            <button
-                                on:click=move |_| {
-                                    set_tab.set(i);
-                                    on_tab_change();
-                                }
-                                class={move || format!("my-2 block w-full text-center
-                                    border-b-2 py-4 ease font-body font-semibold
-                                    text-xl leading-tight hover:text-blue-500 {active}",
-                                    active = if tab.get() == i {"text-blue-400 border-blue-400"}
-                                        else {"text-gray-400 border-gray-200 hover:border-gray-700"})}
-                            >
-                                { item.title.to_owned() }
-                            </button>
-                        </li>
-                    }
-                }).collect_view()
-            }
-        </ul>
+        <ul class="my-12 w-full flex flex-row flex-wrap">
+        {
+            items.iter().enumerate().map(|(i, item)| {
+                view! {
+                    <li class="flex-1 md:flex-auto">
+                        <button
+                            on:click=move |_| {
+                                set_tab.set(i);
+                                on_tab_change();
+                            }
+                            class={move || format!("my-2 block w-full text-center
+                                border-b-2 py-1 md:py-4 ease font-body font-semibold
+                                text-xs md:text-xl leading-tight hover:text-blue-500 {active}",
+                                active = if tab.get() == i {"text-blue-400 border-blue-400"}
+                                    else {"text-gray-400 border-gray-200 hover:border-gray-700"})}
+                        >
+                            { match (i, item.title.as_str()) {
+                                (4, "LN Receive") => "LN Rec.".to_string(),
+                                (_, title) => title.to_string(),
+                            } }
+                        </button>
+                    </li>
+                }
+            }).collect_view()
+        }
+    </ul>
         {
             items.iter().enumerate().map(|(i, item)| {
                 let view = item.view.to_owned();
diff --git a/src/components/ln_receive_form.rs b/src/components/ln_receive_form.rs
index efb383f..c5cd1df 100644
--- a/src/components/ln_receive_form.rs
+++ b/src/components/ln_receive_form.rs
@@ -37,7 +37,7 @@ where
             <input
                 type="number"
                 placeholder="Amount msat"
-                class="my-4 w-full text-xl font-body text-gray-600 border-gray-400 placeholder:text-gray-400 ring-0 focus:border-blue-400 focus:ring-0"
+                class="my-4 w-full font-body text-gray-600 border-gray-400 placeholder:text-gray-400 ring-0 focus:border-blue-400 focus:ring-0"
                 on:input=move |ev| {
                     set_amount.set(event_target_value(&ev));
                 }
@@ -57,7 +57,7 @@ where
             <input
                 type="text"
                 placeholder="Description"
-                class="my-4 w-full text-xl font-body text-gray-600 border-gray-400 placeholder:text-gray-400 ring-0 focus:border-blue-400 focus:ring-0"
+                class="my-4 w-full font-body text-gray-600 border-gray-400 placeholder:text-gray-400 ring-0 focus:border-blue-400 focus:ring-0"
                 on:input=move |ev| {
                     set_description.set(event_target_value(&ev));
                 }
diff --git a/src/components/mod.rs b/src/components/mod.rs
index 5ddf786..cc94870 100644
--- a/src/components/mod.rs
+++ b/src/components/mod.rs
@@ -2,6 +2,7 @@ pub mod alerts;
 pub mod app;
 pub mod balance;
 pub mod copyable_text;
+pub mod create_wallet;
 pub mod footer;
 pub mod joined;
 pub mod ln_receive_form;
diff --git a/src/components/receive_ecash.rs b/src/components/receive_ecash.rs
index 33e7cb4..05cecce 100644
--- a/src/components/receive_ecash.rs
+++ b/src/components/receive_ecash.rs
@@ -29,7 +29,7 @@ pub fn ReceiveEcash() -> impl IntoView {
       {move ||
         if let Some(result) = submit_action.value().get() {
           view!(
-            <div class="text-body text-md mt-4">{
+            <div class="text-body mt-4">{
               match result {
                 Err(error) => view!(<span class="text-red-500">{format!("✗ Failed to redeem e-cash: {error}")}</span>),
                 Ok(value) => view!(<span class="text-green-600">{format!("✓ Redeemed {:?} msat", value.msats)}</span>)
diff --git a/src/components/send_ln.rs b/src/components/send_ln.rs
index b3df59d..5a3e0ac 100644
--- a/src/components/send_ln.rs
+++ b/src/components/send_ln.rs
@@ -30,7 +30,7 @@ pub fn SendLn() -> impl IntoView {
       {move ||
         if let Some(result) = submit_action.value().get() {
           view!(
-            <div class="text-body text-md mt-4">{
+            <div class="text-body mt-4">{
               match result {
                 Err(error) => view!(<span class="text-red-500">{format!("✗ Failed to send invoice {error}")}</span>),
                 Ok(_) => view!(<span class="text-green-600">"✓ Invoice successfully sent"</span>)
diff --git a/src/components/submit_button.rs b/src/components/submit_button.rs
index 30429b1..8c8a3d1 100644
--- a/src/components/submit_button.rs
+++ b/src/components/submit_button.rs
@@ -19,7 +19,7 @@ where
 
       <button
         on:click=on_click
-        class={move || format!("py-4 px-6 text-2xl flex items-center justify-center bg-blue-500 hover:enabled:bg-blue-600 text-white font-semibold font-body rounded-lg cursor-pointer enabled:ease disabled:opacity-70 disabled:cursor-not-allowed hover:enabled:shadow-lg {class}")}
+        class={move || format!("py-4 px-6 flex items-center justify-center bg-blue-500 hover:enabled:bg-blue-600 text-white font-semibold font-body rounded-lg cursor-pointer enabled:ease disabled:opacity-70 disabled:cursor-not-allowed hover:enabled:shadow-lg {class}")}
         disabled=move || disabled.get()
       >
         {children()}
diff --git a/src/components/wallet_selector.rs b/src/components/wallet_selector.rs
index ec35c79..5afdbfa 100644
--- a/src/components/wallet_selector.rs
+++ b/src/components/wallet_selector.rs
@@ -1,59 +1,61 @@
 use leptos::*;
 
-use super::{NoteBlock, SubmitForm, WarningBlock};
+use super::{NoteBlock, WarningBlock};
+use crate::utils::empty_view;
 
 #[component]
 pub fn WalletSelector<F>(available: Vec<String>, on_select: F) -> impl IntoView
 where
     F: Fn(String) + 'static + Copy,
 {
-    let (loading, set_loading) = create_signal(false);
+    let (_, set_loading) = create_signal(false);
     let select = move |name: String| {
         set_loading.set(true);
         on_select(name);
     };
 
+    let available_clone = available.clone();
+    let wallets_available = move || available_clone.len() > 0;
+
+    const MAX_NAME_LEN: usize = 20;
+
     let available_list = available
         .into_iter()
         .map(|name| {
             let select_name = name.clone();
+            let abbreviated_name = if name.len() > MAX_NAME_LEN {
+                let part_len = MAX_NAME_LEN / 2 - 1;
+                format!("{}...{}", &name[..part_len], &name[name.len() - part_len..])
+            } else {
+                name.clone()
+            };
             view! {
-                <li>
-                  <a
-                    class="text-xl underline"
-                    href="#"
+                  <button
+                    class="px-4 w-4/5 py-2 bg-blue-400 text-white font-bold rounded hover:bg-blue-700 focus:outline-none focus:shadow-outline min-w-[200px]"
                     on:click=move |ev| {
                       ev.prevent_default();
                       select(select_name.clone());
                     }
                   >
-                    {name}
-                  </a>
-                </li>
+                    {abbreviated_name}
+                  </button>
             }
         })
         .collect::<Vec<_>>();
 
     view! {
-        <NoteBlock class="mb-8">
+      <NoteBlock class="mb-8">
           "To switch wallets after selecting one just reload the web app."
         </NoteBlock>
         <WarningBlock class="mb-8">
-          "Webimint is a highly experimental Fedimint wallet, use at your own risk.
-          It's currently compatible with the 0.2 release of Fedimint."
+          "Webimint is a highly experimental Fedimint wallet, use at your own risk."
         </WarningBlock>
 
-        <h1 class="font-heading text-gray-900 text-4xl font-semibold mb-6">"Select a wallet:"</h1>
-        <ul class="mb-6 list-disc">
-          { available_list }
-        </ul>
-
-      <SubmitForm
-        description="… or create a new one".into()
-        on_submit=select
-        placeholder="Wallet Name".into()
-        submit_label="Create".into()
-        loading=loading
-      />
+        <Show when=wallets_available fallback=|| empty_view() >
+          <h1 class="font-heading text-gray-900 font-semibold mb-6">"Select a wallet:"</h1>
+        </Show>
+        <div class="flex flex-col items-center mb-6 gap-y-4">
+        { available_list }
+        </div>
     }
 }