diff --git a/Images/HeroSection.jpeg b/Images/HeroSection.jpeg
new file mode 100644
index 00000000..dab9ccc1
Binary files /dev/null and b/Images/HeroSection.jpeg differ
diff --git a/Images/OMSymbol.png b/Images/OMSymbol.png
new file mode 100644
index 00000000..390a4d74
Binary files /dev/null and b/Images/OMSymbol.png differ
diff --git a/commonStyles.css b/commonStyles.css
index 4564a7cd..23c8de83 100644
--- a/commonStyles.css
+++ b/commonStyles.css
@@ -72,14 +72,12 @@ footer{
   gap: 4rem;
   margin-left: 10rem;
   margin-right: 10rem;
-
   font-size: 16px;
 }
 
 .footer-divide-text{
   text-align: left;
   padding-top: 30px;
-
   font-size: 16px !important;
 }
 
@@ -98,4 +96,20 @@ footer{
   margin-bottom: 5px;
   margin-top: 5px;
   font-size: 16px;
+}
+.OmSymbol{
+  position: relative;
+  height: 18vh;
+  width: 11vw;
+  left: 40vw;
+  bottom: 5vh;
+}
+
+@media screen and (min-width: 280px) and (max-width: 912px) {
+  .OmSymbol{
+    position: relative;
+    height: 100px;
+    width: 120px;
+    left: 40vw;
+  }
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 756af333..a87c5fe6 100644
--- a/index.html
+++ b/index.html
@@ -153,10 +153,10 @@ <h1 class="text-xs uppercase font-semibold tracking-widest">Menu</h1>
 
       <!-- Hero Section & Navbar  -->
       <div
-           class="heroSection h-[100vh] flex px-0  text-2xl lg:text-lg flex-col items-center bg-[url('./Images/testHero2.jpg')] bg-top bg-no-repeat bg-cover ">
+           class="heroSection h-[100vh] flex px-0  text-2xl lg:text-lg flex-col items-center bg-[url('./Images/HeroSection.jpeg')] bg-top bg-no-repeat bg-cover">
 
-        <!-- Navbar   -->
-        <div class="indexNavbar fixed top-0 px-4 py-3 ease-in-out text-white duration-300 flex z-30 items-center justify-between w-full left-0 ">
+        <!-- Navbar  -->
+        <div class="indexNavbar fixed top-0 px-4 py-3 ease-in-out text-white duration-300 flex z-30 items-center justify-between w-full left-0 bg-gradient-to-l from-[#009933] to-[#c4e327]">
           <div class="leftSection">
             <a class="flex items-center" href="./index.html">
               <img src="./Images/New_Logo_2.png" alt="Moksh Logo" class="w-[4rem] h-[4rem] rounded-full" />
@@ -233,8 +233,9 @@ <h1 class="text-xs uppercase font-semibold tracking-widest">Menu</h1>
         <!-- Hero Section  -->
         <div
              class="heroSectionContent mt-20 h-[calc(90vh-0px)]  w-full  flex items-center flex-col text-white py-8 relative">
+             <img src="./Images/OMSymbol.png" class="OmSymbol" />
           <div class="top text-center pt-8">
-            <p class="projectName text-[4em]">Moksh</p>
+            <p class="projectName text-[4em]">"Moksh</p>
             <span class="text-xs italic mt-8 block sm:font-semibold">
               A Spiritual Productivity Tool for Mental Wellness.
             </span>