diff --git a/src/components/CollegePage/CollegePage.css b/src/components/CollegePage/CollegePage.css
index 2ea1435b..1cf5941f 100644
--- a/src/components/CollegePage/CollegePage.css
+++ b/src/components/CollegePage/CollegePage.css
@@ -135,23 +135,26 @@ margin-bottom: 0px;
   display: flex;
   margin-left: 0px;
   height: 50% !important;
-  width: 50vw;
+  width: 40vw;
   object-fit: cover;
   margin-bottom: 0px !important;
   position: absolute;
   bottom: 0px;
+  margin-left: 5vw;
 }
 
 
 
 .search-button {
   background-color: rgb(23, 23, 70);
+  z-index: 100 !important;
   color: white;
   padding: 10px;
   border-radius: 6px;
-  margin-top: -200px;
-  margin-left: 32vw;
+  margin-left: 30px;
+  height: 50px;
   width: 150px;
+  margin-top: 15px;
 }
 .right{
   display: flex;
@@ -310,4 +313,4 @@ margin-bottom: 0px;
     height: 50%;
     justify-content: start !important;
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/CollegePage/CollegePage.jsx b/src/components/CollegePage/CollegePage.jsx
index ce6fcdde..32397eba 100644
--- a/src/components/CollegePage/CollegePage.jsx
+++ b/src/components/CollegePage/CollegePage.jsx
@@ -102,11 +102,11 @@ const CollegePage = () => {
                 <p className="rating-text abeezee-regular" >{college.rating}/10</p>
                 </div>
               </div>
+                <button className="search-button "><a href={college.website} target="_blank" rel="noreferrer">Search</a></button>
             </div>
             </div>
             <img className="image" src={college.imageURL} />
           </div>
-          <button className="search-button "><a href={college.website} target="_blank" rel="noreferrer">Search</a></button>
         </div>
         <div className="right">
           <div className="searchCourses" style={{marginTop:"20px"}}>