diff --git a/assets/pics/classic/hero.jpg b/assets/pics/classic/hero.jpg
new file mode 100644
index 0000000..608bf21
Binary files /dev/null and b/assets/pics/classic/hero.jpg differ
diff --git a/index.html b/index.html
index 7398516..91482f0 100644
--- a/index.html
+++ b/index.html
@@ -6,16 +6,20 @@
     <title>Beach Party Balloons</title>
     <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css"
->
+  href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Playwrite+AU+SA:wght@100..400&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="style.css">
 <script defer src="script.js"></script>
 </head>
 <body>
-    <nav class="navbar" role="navigation" aria-label="main navigation">
-        <div class="navbar-brand">
-          <a class="navbar-item is-large" href="index.html">
-      <img src="assets/logo/BeachPartyBalloons-logo.png" alt="Beach Party Balloons logo">
+    <nav class="navbar is-info" role="navigation" aria-label="main navigation">
+        <div class="navbar-brand is-size-1">
+          <a class="navbar-item" href="index.html">
+              <img style="background-color: white;" src="assets/logo/BeachPartyBalloons-logo.png" alt="Beach Party Balloons logo">
+            
+      
           </a>
       
           <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
@@ -54,18 +58,26 @@
           </div>
         </div>
       </nav>
-      <header class="container is-fluid">
-        <img
-        src="assets/pics/classic/20240825_104716.webp"
+      <!-- <div>
+        <img class="image is-16by9" id="heroImg"
+        src="assets/pics/classic/hero.jpg"
         alt="Classic Arch with bumble bees"
       />
       <div class="centerimg">
-       <img src="assets/logo/BeachPartyBalloons-logo.png" alt="logo">
-
+       <img  src="assets/logo/BeachPartyBalloons-logo.png" alt="logo">
       </div>
-      </header>
+      <p>Visit our store:</p>
+    </div> -->
+    <div class="container is-justify-content-center">
+      <img src="assets/pics/classic/hero.jpg" alt="Image 1" >
+      <img class="is-overlay" src="assets/logo/BeachPartyBalloons-logo.png" alt="Image 2">
+    </div>
+    <div class="is-flex-direction-column is-dark">
+      <h1 class="is-size-1" style="text-align: center;">Visit our store</h1>  
+<h2 class="is-size-2" style="text-align: center;">554 ste 9 Boston Post Road, Milford, CT 06460</h2>  
+<a class="is-size-2 is-justify-content-center" href="tel:203.283.5626">203.283.5626</a>
+    </div>
 
 
-  
 </body>
 </html>
\ No newline at end of file
diff --git a/style.css b/style.css
index 12bb393..1c995fa 100644
--- a/style.css
+++ b/style.css
@@ -4,11 +4,16 @@
     --bulma-info-h: 175deg;
     --bulma-info-s: 88%;
     --bulma-info-l: 42%;
+    --bulma-navbar-item-img-max-height: 200px;
   }
   html{
-    background-color:antiquewhite
+    background-color:antiquewhite;
+    font-family: "Playwrite AU SA", serif;
+    height: 100%;
   }
-
+nav{
+  font-family: "Playwrite AU SA", serif;
+}
   header{
     position: relative;
     text-align: center;
@@ -21,4 +26,16 @@
     left: 50%;
     transform: translate(-50%, -50%);
     font-size: 4em;
-  }
\ No newline at end of file
+  }
+
+  #heroImg{
+    position: absolute;
+    /* height: 600px; */
+  }
+  .navbar-item img, .navbar-item svg {
+    /* max-height: var(--bulma-navbar-item-img-max-height); */
+    max-height: 1.30em;
+  }
+.is-overlay{
+  margin: auto;
+}
\ No newline at end of file
