diff --git a/src/views/login.ejs b/src/views/login.ejs
index eabc1e5..c2e5f2b 100644
--- a/src/views/login.ejs
+++ b/src/views/login.ejs
@@ -1,8 +1,8 @@
 <%- include("./partials/fileHeader") %>
 <%- include("./partials/headerStart") %>
 
-<main>
-    <div class="flex justify-center items-center pt-50">
+<main class="pt-24">
+    <div class="flex justify-center items-center">
         <form action="/login" method="POST">
             <div class="w-96 p-6 shadow-1g bg-white rounded-md">
                 <h1 class="text-3xl block text-center font-semibold">Login</h1>
diff --git a/src/views/more.ejs b/src/views/more.ejs
index 52e11d4..8e9020d 100644
--- a/src/views/more.ejs
+++ b/src/views/more.ejs
@@ -1,7 +1,7 @@
 <%- include("./partials/fileHeader") %>
 <%- include("./partials/header") %>
 
-<main class="pt-24">
+<main class="pt-24 pb-10">
     <div class="mt-6">
         <div class="mb-12 grid gap-y-6 gap-x-6 md:grid-cols-2 mr-3 ml-3 xl:grid-cols-4">
             <!--box to put logo icon if we want on in a box-->
diff --git a/src/views/newPlan.ejs b/src/views/newPlan.ejs
index 22a5093..c1ae0e7 100644
--- a/src/views/newPlan.ejs
+++ b/src/views/newPlan.ejs
@@ -1,7 +1,7 @@
 <%- include("./partials/fileHeader") %>
 <%- include("./partials/header") %>
 
-<main class="container mx-auto p-4 pt-28">
+<main class="container mx-auto p-4 pt-30">
     <h2 class="text-xl text-white font-semibold mb-4">Welcome: <%= user.name %></h2>
     <div class="max-w-md mx-auto bg-white p-8 mb-10 rounded-lg shadow-md">
         <h3 class="text-lg font-medium mb-6">Retirement Plan</h3>
diff --git a/src/views/partials/header.ejs b/src/views/partials/header.ejs
index e3a7227..e7df59b 100644
--- a/src/views/partials/header.ejs
+++ b/src/views/partials/header.ejs
@@ -16,7 +16,7 @@
                     <span class="sr-only">Loading...</span>
                 </div>
                 
-                <div style="display: none;" class="flex items-center pt-2" id="currencyExchange">
+                <div style="display: none;" class="flex items-center pt-2 md:pt-0 lg:pt-0" id="currencyExchange">
                     <div id="exFrom" class="shrink-0 z-10 inline-flex w-[115px] items-center py-2.5 px-4 text-sm font-medium text-center text-gray-900 bg-gray-100 border border-gray-300 rounded-s-lg focus:ring-4 focus:outline-none focus:ring-gray-100 dark:bg-gray-700 dark:focus:ring-gray-700 dark:text-white dark:border-gray-600">
                         <img src="" id="yourFlag" class="h-4 w-4 me-2" alt="">
                         <p id="flagTag"></p>
@@ -41,7 +41,7 @@
             <% } else if(geoData.message == "error") { %>
                 <p>error</p>
             <% } else { %>
-                <div class="flex items-center pt-2">
+                <div class="flex items-center pt-2 md:pt-0 lg:pt-0">
                     <div class="shrink-0 z-10 w-[115px] inline-flex items-center py-2.5 px-4 text-sm font-medium text-center text-gray-900 bg-gray-100 border border-gray-300 rounded-s-lg focus:ring-4 focus:outline-none focus:ring-gray-100 dark:bg-gray-700 dark:focus:ring-gray-700 dark:text-white dark:border-gray-600">
                         <img src="/static/svgs/flags/<%= geoData.country %>.svg" id="yourFlag" class="h-4 w-4 me-2" alt="<%= geoData.country %>"> (<%= geoData.country %>)
                         <p id="flagTag"></p>
@@ -101,7 +101,7 @@
             </div>
 
             <!-- drawer component -->
-            <div id="drawer-navigation" class="fixed top-0 right-0 z-40 w-64 h-screen p-4 overflow-y-auto transition-transform translate-x-full bg-white dark:bg-gray-800" tabindex="-1" aria-labelledby="drawer-navigation-label">
+            <div id="drawer-navigation" class="hidden lg:block fixed top-0 right-0 z-40 w-64 h-screen p-4 overflow-y-auto transition-transform translate-x-full bg-white dark:bg-gray-800" tabindex="-1" aria-labelledby="drawer-navigation-label">
                 <h5 id="drawer-navigation-label" class="text-base font-semibold text-gray-500 uppercase dark:text-gray-400"><%= user.name %></h5>
                 <button type="button" data-drawer-hide="drawer-navigation" aria-controls="drawer-navigation" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 absolute top-2.5 end-2.5 inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" >
                     <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
diff --git a/src/views/questionnaire.ejs b/src/views/questionnaire.ejs
index 84420e6..8cf4cd7 100644
--- a/src/views/questionnaire.ejs
+++ b/src/views/questionnaire.ejs
@@ -1,8 +1,8 @@
 <%- include("./partials/fileHeader") %>
 <%- include("./partials/header") %>
 
-<main class="container mx-auto p-4">
-    <h2 class="text-xl font-semibold mb-4">Welcome: <%= user.name %></h2>
+<main class="container mx-auto p-4 pt-28">
+    <h2 class="text-xl text-white font-semibold mb-4">Welcome: <%= user.name %></h2>
     <div class="max-w-md mx-auto bg-white p-8 mb-10 rounded-lg shadow-md">
         <h3 class="text-lg font-medium mb-6">Financial Questionnaire</h3>
         <form action="/questionnaire" method="post" class="space-y-4">
diff --git a/src/views/signup.ejs b/src/views/signup.ejs
index af18bf8..8f9c2bd 100644
--- a/src/views/signup.ejs
+++ b/src/views/signup.ejs
@@ -1,8 +1,8 @@
 <%- include("./partials/fileHeader") %>
 <%- include("./partials/headerStart") %>
 
-<main>
-    <div class="flex justify-center items-center pt-50">
+<main class="pt-24">
+    <div class="flex justify-center items-center">
         <form action="/signup" method="POST">
             <div class="w-96 p-6 shadow-1g bg-white rounded-md">
                 <h1 class="text-3xl block text-center font-semibold">Signup</h1>