diff --git a/package-lock.json b/package-lock.json
index ceed70e..de7f108 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "launchpad-react",
       "version": "0.1.0",
       "dependencies": {
+        "@react-oauth/google": "^0.12.1",
         "axios": "^1.7.6",
         "env-cmd": "^10.1.0",
         "react": "^18.2.0",
@@ -3695,6 +3696,16 @@
         }
       }
     },
+    "node_modules/@react-oauth/google": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/@react-oauth/google/-/google-0.12.1.tgz",
+      "integrity": "sha512-qagsy22t+7UdkYAiT5ZhfM4StXi9PPNvw0zuwNmabrWyMKddczMtBIOARflbaIj+wHiQjnMAsZmzsUYuXeyoSg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/@remix-run/router": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.3.tgz",
@@ -23922,6 +23933,12 @@
         "source-map": "^0.7.3"
       }
     },
+    "@react-oauth/google": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/@react-oauth/google/-/google-0.12.1.tgz",
+      "integrity": "sha512-qagsy22t+7UdkYAiT5ZhfM4StXi9PPNvw0zuwNmabrWyMKddczMtBIOARflbaIj+wHiQjnMAsZmzsUYuXeyoSg==",
+      "requires": {}
+    },
     "@remix-run/router": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.3.tgz",
diff --git a/package.json b/package.json
index 64cb785..8f30a1b 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "deploy": "cdk deploy --app 'cdk.out/' --require-approval never"
   },
   "dependencies": {
+    "@react-oauth/google": "^0.12.1",
     "axios": "^1.7.6",
     "env-cmd": "^10.1.0",
     "react": "^18.2.0",
diff --git a/src/components/features/Gallery/GalleryHeader.tsx b/src/components/features/Gallery/GalleryHeader.tsx
index d8cd8a0..ae65c4f 100644
--- a/src/components/features/Gallery/GalleryHeader.tsx
+++ b/src/components/features/Gallery/GalleryHeader.tsx
@@ -1,4 +1,4 @@
-// src/components/features/Gallery/GalleryHeader.tsx
+
 import React from 'react';
 
 const GalleryHeader: React.FC = () => {
@@ -7,7 +7,7 @@ const GalleryHeader: React.FC = () => {
       <h1 className="gallery-title">Gallery Search</h1>
       <div className="search-container">
         <input type="text" className="search-bar" placeholder="Search" />
-        <img src="/public/assets/icons/search-icon.png" alt="Search Icon" className="search-icon" />
+        <img src="/assets/icons/search-icon.png" alt="Search Icon" className="search-icon" />
       </div>
     </div>
   );
diff --git a/src/components/features/Home/HomeHero.tsx b/src/components/features/Home/HomeHero.tsx
index b219763..3f38dd0 100644
--- a/src/components/features/Home/HomeHero.tsx
+++ b/src/components/features/Home/HomeHero.tsx
@@ -1,13 +1,16 @@
-// src/components/features/Home/HomeHero.tsx
+
 import { Link } from 'react-router-dom';
 import React from 'react';
 
 const HomeHero: React.FC = () => {
   return (
-    <div className="home-hero">
-      <div className="hero-content">
+    <div className="homepage">
+      <div className="background-img"></div>
+      <div className="content">
         <h1>Send us your<br />Satellite Streak</h1>
         <Link to="/about" className="learn-more-btn">Learn more</Link>
+        <div className="Home-Line"></div>
+        <Link to="/gallery" className="gallery-link">View Gallery &#8250;</Link>
       </div>
     </div>
   );
diff --git a/src/components/features/Home/spacePic.png b/src/components/features/Home/spacePic.png
deleted file mode 100644
index 81590e8..0000000
Binary files a/src/components/features/Home/spacePic.png and /dev/null differ
diff --git a/src/components/layout/Footer/Footer.css b/src/components/layout/Footer/Footer.css
index be407bf..0e3dd2e 100644
--- a/src/components/layout/Footer/Footer.css
+++ b/src/components/layout/Footer/Footer.css
@@ -1,4 +1,3 @@
-/* src/components/layout/Footer/Footer.css */
 .footer {
   background-color: var(--primary-color);
   color: var(--text-color);
diff --git a/src/components/layout/Footer/Footer.tsx b/src/components/layout/Footer/Footer.tsx
index b684a57..71af98b 100644
--- a/src/components/layout/Footer/Footer.tsx
+++ b/src/components/layout/Footer/Footer.tsx
@@ -1,4 +1,3 @@
-// src/components/layout/Footer/Footer.tsx
 import './Footer.css';
 import { Link } from 'react-router-dom';
 import React from 'react';
diff --git a/src/components/layout/NavBar/NavBar.css b/src/components/layout/NavBar/NavBar.css
index 76aff21..02aeab8 100644
--- a/src/components/layout/NavBar/NavBar.css
+++ b/src/components/layout/NavBar/NavBar.css
@@ -1,66 +1,47 @@
-/* src/components/layout/NavBar/NavBar.css */
+/* Navbar styles */
 .navbar {
   background-color: var(--primary-color);
-  padding: var(--spacing-md) 0;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.navbar-container {
+  color: var(--text-color);
   display: flex;
   justify-content: space-between;
   align-items: center;
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 var(--spacing-md);
-}
-
-.navbar-logo {
-  display: flex;
-  align-items: center;
+  padding: var(--spacing-md) var(--spacing-lg);
+  width: 100%;
 }
 
 .navbar-logo-image {
-  height: 40px;
-  width: auto;
+  height: 30px;
 }
 
 .navbar-menu {
-  display: flex;
   list-style-type: none;
   margin: 0;
   padding: 0;
+  display: flex;
 }
 
 .navbar-item {
-  margin-left: var(--spacing-md);
+  margin-right: var(--spacing-lg);
+}
+
+.navbar-item:last-child {
+  margin-right: 0;
 }
 
 .navbar-link {
   color: var(--text-color);
   text-decoration: none;
-  font-weight: 500;
-  transition: color var(--transition-speed) ease;
-}
-
-.navbar-link:hover {
-  color: var(--accent-color);
 }
 
 .account-bubble {
-  width: 32px;
-  height: 32px;
-  background-color: var(--accent-color);
+  background-color: var(--secondary-color);
+  color: var(--primary-color);
   border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  text-align: center;
+  line-height: 30px;
   display: flex;
-  align-items: center;
   justify-content: center;
-  color: var(--primary-color);
-  font-weight: bold;
-}
-
-@media (max-width: 768px) {
-  .navbar-menu {
-    display: none; /* Hide menu on small screens */
-  }
-  /* Add styles for a mobile menu button here */
+  align-items: center;
 }
\ No newline at end of file
diff --git a/src/components/layout/NavBar/NavBar.tsx b/src/components/layout/NavBar/NavBar.tsx
index b561bf0..1b9a2b9 100644
--- a/src/components/layout/NavBar/NavBar.tsx
+++ b/src/components/layout/NavBar/NavBar.tsx
@@ -1,30 +1,28 @@
-// src/components/layout/NavBar/NavBar.tsx
 import './NavBar.css';
 import { Link } from 'react-router-dom';
 import React from 'react';
 
+
 const NavBar: React.FC = () => {
   return (
     <nav className="navbar">
-      <div className="navbar-container">
-        <Link to="/" className="navbar-logo">
-          <img src="/public/assets/images/logo.png" alt="SpaceTitle Logo" className="navbar-logo-image" />
-        </Link>
-        <ul className="navbar-menu">
-          <li className="navbar-item">
-            <Link to="/" className="navbar-link">Home</Link>
-          </li>
-          <li className="navbar-item">
-            <Link to="/gallery" className="navbar-link">Gallery</Link>
-          </li>
-          <li className="navbar-item">
-            <Link to="/upload" className="navbar-link">Contribute</Link>
-          </li>
-          <li className="navbar-item">
-            <div className="account-bubble">A</div>
-          </li>
-        </ul>
-      </div>
+      <Link to="/" className="navbar-logo">
+        <img src="favicon.ico" alt="SpaceTitle Logo" className="navbar-logo-image" />
+      </Link>
+      <ul className="navbar-menu">
+        <li className="navbar-item">
+          <Link to="/" className="navbar-link">Home</Link>
+        </li>
+        <li className="navbar-item">
+          <Link to="/gallery" className="navbar-link">Gallery</Link>
+        </li>
+        <li className="navbar-item">
+          <Link to="/upload" className="navbar-link">Contribute</Link>
+        </li>
+        <li className="navbar-item">
+          <div className="account-bubble">A</div>
+        </li>
+      </ul>
     </nav>
   );
 };
diff --git a/src/styles/global.css b/src/styles/global.css
index 583cf95..befd447 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,31 +1,54 @@
-@import 'variables.css';
-
-html, body {
-  width: 100vw;
-  height: 100vh;
-  min-width: 350px;
-  overflow-y: overlay;
+body {
   font-family: var(--font-family);
   font-size: var(--font-size-md);
   color: var(--text-color);
   background-color: var(--background-color);
+  line-height: 1.5;
 }
 
-h1, h2, h3, p {
-  color: var(--text-color);
+h1, h2, h3, h4, h5, h6 {
+  margin-bottom: var(--spacing-md);
 }
 
 h1 { font-size: var(--font-size-xl); }
 h2 { font-size: var(--font-size-lg); }
 
-main {
-  @apply flex flex-col items-center w-full h-full;
+a {
+  color: var(--accent-color);
+  text-decoration: none;
+  transition: color var(--transition-speed) ease;
+}
+
+a:hover {
+  color: var(--secondary-color);
 }
 
-h2 {
-  @apply p-5;
+button {
+  cursor: pointer;
+  font-size: var(--font-size-md);
+  padding: var(--spacing-sm) var(--spacing-md);
+  border: none;
+  border-radius: var(--border-radius-sm);
+  background-color: var(--accent-color);
+  color: var(--text-color);
+  transition: background-color var(--transition-speed) ease;
+}
+
+button:hover {
+  background-color: var(--primary-color);
+}
+
+input, textarea, select {
+  font-size: var(--font-size-md);
+  padding: var(--spacing-sm);
+  border: 1px solid var(--accent-color);
+  border-radius: var(--border-radius-sm);
+  background-color: var(--background-color);
+  color: var(--text-color);
 }
 
-p {
-  @apply p-1;
+.error-message {
+  color: var(--error-color);
+  font-size: var(--font-size-sm);
+  margin-top: var(--spacing-xs);
 }
\ No newline at end of file
diff --git a/src/styles/index.css b/src/styles/index.css
index 5fd1537..141021e 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -8,4 +8,6 @@
 @import 'components.css';
 @import 'pages.css';
 
+
+/* You can add any additional global styles or overrides here */
 /* You can add any additional global styles or overrides here */
\ No newline at end of file
diff --git a/src/styles/pages.css b/src/styles/pages.css
index 5ccf56c..c7f2f71 100644
--- a/src/styles/pages.css
+++ b/src/styles/pages.css
@@ -14,25 +14,24 @@
   background-image: url('/public/assets/images/spacePic.png');
   background-size: cover;
   background-position: center;
+  z-index: -1; /* Push the background image behind other elements */
 }
 
 .content {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
   text-align: center;
   color: var(--text-color);
+  z-index: 1;
 }
 
 .content h1 {
-  font-size: min(6vw, 70px);
+  font-size: min(8vw, 80px);
   font-weight: lighter;
+  margin-bottom: var(--spacing-xl);
 }
 
 .learn-more-btn {
   display: inline-block;
-  font-size: min(2vw, 15px);
+  font-size: min(2vw, 18px);
   padding: min(2vw, 15px) min(4vw, 30px);
   background-color: transparent;
   color: var(--text-color);
@@ -40,7 +39,6 @@
   text-decoration: none;
   border-radius: 25px;
   transition: background-color 0.3s, color 0.3s;
-  margin-top: 4vh;
 }
 
 .learn-more-btn:hover {
@@ -48,22 +46,18 @@
 }
 
 .Home-Line {
-  position: absolute;
-  top: calc(53vh + 20px);
-  left: 50%;
-  transform: translateX(-50%);
   width: 95%;
   height: 1px;
   background-color: var(--text-color);
+  margin: var(--spacing-xl) auto;
 }
 
 .gallery-link {
-  position: absolute;
-  top: calc(53vh + 40px);
-  transform: translateX(50%);
+  display: block;
   color: var(--text-color);
   font-size: min(7vw, 35px);
   text-decoration: none;
+  margin-top: var(--spacing-lg);
 }
 
 /* Gallery styles */
diff --git a/src/styles/utilities.css b/src/styles/utilities.css
index cc82077..c05e906 100644
--- a/src/styles/utilities.css
+++ b/src/styles/utilities.css
@@ -1,7 +1,3 @@
-.light-text {
-  @apply text-slate-500;
-}
-
 .container {
   width: 100%;
   max-width: 1200px;
@@ -9,32 +5,30 @@
   padding: 0 var(--spacing-md);
 }
 
-.row {
-  display: flex;
-  flex-wrap: wrap;
-  margin: 0 calc(-1 * var(--spacing-sm));
+.text-center {
+  text-align: center;
 }
 
-[class^="col-"] {
-  padding: 0 var(--spacing-sm);
-  flex: 0 0 auto;
-}
+.mt-1 { margin-top: var(--spacing-xs); }
+.mt-2 { margin-top: var(--spacing-sm); }
+.mt-3 { margin-top: var(--spacing-md); }
+.mt-4 { margin-top: var(--spacing-lg); }
+.mt-5 { margin-top: var(--spacing-xl); }
 
-.col-1 { width: 8.33%; }
-.col-2 { width: 16.66%; }
-.col-3 { width: 25%; }
-.col-4 { width: 33.33%; }
-.col-6 { width: 50%; }
-.col-12 { width: 100%; }
+.mb-1 { margin-bottom: var(--spacing-xs); }
+.mb-2 { margin-bottom: var(--spacing-sm); }
+.mb-3 { margin-bottom: var(--spacing-md); }
+.mb-4 { margin-bottom: var(--spacing-lg); }
+.mb-5 { margin-bottom: var(--spacing-xl); }
 
-.col {
-  @apply flex flex-col items-center justify-center;
-}
+.flex { display: flex; }
+.flex-col { flex-direction: column; }
+.items-center { align-items: center; }
+.justify-center { justify-content: center; }
+.justify-between { justify-content: space-between; }
 
-.wrap {
-  @apply flex flex-wrap;
-}
+.rounded-sm { border-radius: var(--border-radius-sm); }
+.rounded-md { border-radius: var(--border-radius-md); }
+.rounded-lg { border-radius: var(--border-radius-lg); }
 
-.centered {
-  @apply flex justify-center items-center h-3/4 w-3/4 my-10;
-}
\ No newline at end of file
+.transition { transition: all var(--transition-speed) ease; }
\ No newline at end of file
diff --git a/src/styles/variables.css b/src/styles/variables.css
index e287c13..b3aa337 100644
--- a/src/styles/variables.css
+++ b/src/styles/variables.css
@@ -1,19 +1,31 @@
 :root {
+  /* Colors */
   --primary-color: #1C2533;
   --secondary-color: #E0E8F4;
-  --text-color: #E0E8F4;
-  --background-color: #1C2533;
   --accent-color: #7A8CA8;
+  --background-color: #1C2533;
+  --text-color: #E0E8F4;
+  --error-color: #ff6b6b;
 
+  /* Typography */
   --font-family: Arial, sans-serif;
   --font-size-sm: 14px;
   --font-size-md: 16px;
   --font-size-lg: 20px;
   --font-size-xl: 24px;
 
+  /* Spacing */
   --spacing-xs: 4px;
   --spacing-sm: 8px;
   --spacing-md: 16px;
   --spacing-lg: 24px;
   --spacing-xl: 32px;
+
+  /* Border Radius */
+  --border-radius-sm: 4px;
+  --border-radius-md: 8px;
+  --border-radius-lg: 16px;
+
+  /* Transitions */
+  --transition-speed: 0.3s;
 }
\ No newline at end of file