diff --git a/scripts/build.sh b/scripts/build.sh
new file mode 100755
index 0000000..55956ee
--- /dev/null
+++ b/scripts/build.sh
@@ -0,0 +1,174 @@
+#!/bin/bash
+
+set -e
+
+# Colors for output
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+NC='\033[0m' # No Color
+
+# Default values
+IMAGE_NAME="rideaware-landing"
+IMAGE_TAG="latest"
+NO_CACHE=false
+RUN_CONTAINER=false
+CONTAINER_NAME="rideaware-landing"
+
+# Help function
+show_help() {
+	cat << EOF
+Usage: $0 [OPTIONS]
+
+OPTIONS:
+  -t, --tag TAG           Image tag (default: latest)
+  -n, --name NAME         Image name (default: rideaware-landing)
+  -r, --run               Run container after build
+  -c, --container NAME    Container name when running (default: rideaware-landing)
+  --no-cache              Build without cache
+  -h, --help              Show this help message
+
+EXAMPLES:
+  $0                              # Build as rideaware:latest
+  $0 -t v1.0                      # Build as rideaware:v1.0
+  $0 -t dev --run                 # Build and run
+  $0 --no-cache -t prod           # Build without cache as rideaware:prod
+
+EOF
+	exit 0
+}
+
+# Parse arguments
+while [[ $# -gt 0 ]]; do
+	case $1 in
+		-t|--tag)
+			IMAGE_TAG="$2"
+			shift 2
+			;;
+		-n|--name)
+			IMAGE_NAME="$2"
+			shift 2
+			;;
+		-r|--run)
+			RUN_CONTAINER=true
+			shift
+			;;
+		-c|--container)
+			CONTAINER_NAME="$2"
+			shift 2
+			;;
+		--no-cache)
+			NO_CACHE=true
+			shift
+			;;
+		-h|--help)
+			show_help
+			;;
+		*)
+			echo -e "${RED}Unknown option: $1${NC}"
+			show_help
+			;;
+	esac
+done
+
+FULL_IMAGE="$IMAGE_NAME:$IMAGE_TAG"
+BUILD_ARGS=""
+
+if [ "$NO_CACHE" = true ]; then
+	BUILD_ARGS="--no-cache"
+fi
+
+# Function to stop and remove container
+cleanup_container() {
+	local name=$1
+
+	if podman ps -a --format "{{.Names}}" | grep -q "^${name}\$"; then
+		echo -e "${YELLOW}Removing existing container: $name${NC}"
+
+		# Stop if running
+		if podman ps --format "{{.Names}}" | grep -q "^${name}\$"; then
+			echo "  Stopping container..."
+			podman kill "$name" 2>/dev/null || true
+		fi
+
+		# Remove
+		echo "  Removing container..."
+		if podman rm "$name" 2>/dev/null; then
+			echo -e "${GREEN}  ✓ Container removed${NC}"
+		else
+			echo -e "${RED}  ✗ Failed to remove container${NC}"
+			return 1
+		fi
+	fi
+	return 0
+}
+
+echo -e "${BLUE}╔════════════════════════════════════════╗${NC}"
+echo -e "${BLUE}║        Building Podman Image           ║${NC}"
+echo -e "${BLUE}╚════════════════════════════════════════╝${NC}"
+echo -e "${YELLOW}Image: $FULL_IMAGE${NC}"
+echo ""
+
+if ! podman build $BUILD_ARGS -f Containerfile -t "$FULL_IMAGE" .; then
+	echo -e "${RED}✗ Build failed${NC}"
+	exit 1
+fi
+
+echo -e "${GREEN}✓ Image built successfully${NC}"
+echo ""
+
+# Show image info
+echo -e "${BLUE}╔════════════════════════════════════════╗${NC}"
+echo -e "${BLUE}║        Image Details                   ║${NC}"
+echo -e "${BLUE}╚════════════════════════════════════════╝${NC}"
+podman images "$IMAGE_NAME:$IMAGE_TAG" \
+	--format "table {{.Repository}}:{{.Tag}}\t{{.Size}}\t{{.Created}}"
+echo ""
+
+if [ "$RUN_CONTAINER" = true ]; then
+	echo -e "${BLUE}╔════════════════════════════════════════╗${NC}"
+	echo -e "${BLUE}║      Starting Container               ║${NC}"
+	echo -e "${BLUE}╚════════════════════════════════════════╝${NC}"
+
+	# Cleanup existing container
+	if ! cleanup_container "$CONTAINER_NAME"; then
+		echo -e "${RED}✗ Failed to clean up existing container${NC}"
+		exit 1
+	fi
+
+	echo ""
+	echo "Starting new container: $CONTAINER_NAME"
+
+	if podman run -d \
+		--name "$CONTAINER_NAME" \
+		-p 5000:5000 \
+		--env-file .env \
+		"$FULL_IMAGE"; then
+		echo -e "${GREEN}✓ Container running: $CONTAINER_NAME${NC}"
+		echo ""
+
+		# Wait for startup
+		sleep 2
+
+		echo -e "${YELLOW}Container logs:${NC}"
+		podman logs "$CONTAINER_NAME"
+		echo ""
+
+		echo -e "${GREEN}Site available at: http://localhost:5000${NC}"
+		echo -e "${YELLOW}To view logs: podman logs -f $CONTAINER_NAME${NC}"
+		echo -e "${YELLOW}To stop: podman kill $CONTAINER_NAME${NC}"
+	else
+		echo -e "${RED}✗ Failed to start container${NC}"
+		exit 1
+	fi
+else
+	echo -e "${YELLOW}To run the container:${NC}"
+	echo "  podman run -d --name $CONTAINER_NAME -p 5000:5000 --env-file .env $FULL_IMAGE"
+	echo ""
+	echo -e "${YELLOW}Or use this script with --run:${NC}"
+	echo "  $0 -t $IMAGE_TAG --run"
+fi
+
+echo ""
+echo -e "${GREEN}✓ Done!${NC}"
\ No newline at end of file
diff --git a/static/css/styles.css b/static/css/styles.css
index a05c93e..22f11f6 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -24,6 +24,7 @@
   --shadow: 0 10px 30px rgba(30, 78, 156, 0.1);
   --shadow-hover: 0 20px 40px rgba(30, 78, 156, 0.15);
   --navbar-height: 64px;
+  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 html {
@@ -31,11 +32,13 @@ html {
 }
 
 body {
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   line-height: 1.7;
   color: var(--text-dark);
   overflow-x: hidden;
-  background: #fff;
+  background: var(--white);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 /* =======================
@@ -50,7 +53,7 @@ body {
   backdrop-filter: blur(20px);
   z-index: 1000;
   padding: 1rem 0;
-  transition: all 0.3s ease;
+  transition: var(--transition);
   border-bottom: 1px solid rgba(2, 6, 23, 0.04);
   min-height: var(--navbar-height);
   font-size: 1rem;
@@ -58,6 +61,11 @@ body {
   letter-spacing: 0;
 }
 
+.navbar.scrolled {
+  box-shadow: var(--shadow);
+  background: rgba(255, 255, 255, 0.98);
+}
+
 .nav-container {
   max-width: 1200px;
   margin: 0 auto;
@@ -136,9 +144,9 @@ body {
   height: 42px;
   border: 1px solid rgba(2, 6, 23, 0.08);
   border-radius: 10px;
-  background: #ffffff;
+  background: var(--white);
   cursor: pointer;
-  transition: box-shadow 0.2s ease, transform 0.2s ease;
+  transition: var(--transition);
 }
 
 .nav-toggle:hover {
@@ -190,7 +198,7 @@ body {
 .hero-content h1 {
   font-size: clamp(2.5rem, 5vw, 4rem);
   font-weight: 800;
-  color: #fff;
+  color: var(--white);
   margin-bottom: 1.5rem;
   line-height: 1.2;
   text-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
@@ -209,20 +217,55 @@ body {
   padding: 2rem;
   border-radius: 20px;
   border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
 }
 
 .cta-section h3 {
-  color: #fff;
+  color: var(--white);
   font-size: 1.5rem;
   margin-bottom: 0.5rem;
   font-weight: 600;
 }
 
-.cta-section p {
+.cta-section > p {
   color: rgba(255, 255, 255, 0.8);
   margin-bottom: 1.5rem;
+  font-size: 1rem;
 }
 
+/* Beta Badge */
+.beta-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  background: rgba(255, 255, 255, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  padding: 10px 16px;
+  border-radius: 50px;
+  margin-bottom: 20px;
+  font-size: 13px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.95);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  backdrop-filter: blur(10px);
+}
+
+.badge-icon {
+  font-size: 16px;
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.7;
+  }
+}
+
+/* Email Form */
 .email-form {
   display: flex;
   gap: 1rem;
@@ -234,19 +277,25 @@ body {
   padding: 1rem 1.5rem;
   border: none;
   border-radius: 50px;
-  background: rgba(255, 255, 255, 0.9);
+  background: rgba(255, 255, 255, 0.95);
   backdrop-filter: blur(10px);
   font-size: 1rem;
   outline: none;
-  transition: all 0.3s ease;
+  transition: var(--transition);
+  color: var(--text-dark);
+}
+
+.email-input::placeholder {
+  color: rgba(26, 26, 26, 0.5);
 }
 
 .email-input:focus {
-  background: #fff;
+  background: var(--white);
   box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
 }
 
-.notify-btn {
+.notify-btn,
+.dev-btn {
   padding: 1rem 2rem;
   background: var(--white);
   color: var(--primary);
@@ -254,38 +303,56 @@ body {
   border-radius: 50px;
   font-weight: 600;
   cursor: pointer;
-  transition: all 0.3s ease;
+  transition: var(--transition);
   white-space: nowrap;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
 }
 
-.notify-btn:hover {
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-hover);
+.notify-btn:hover,
+.dev-btn:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
 }
 
-.countdown {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 1rem;
-  margin-top: 1rem;
+.notify-btn:active,
+.dev-btn:active {
+  transform: translateY(-1px);
 }
 
-.countdown-item {
+/* Beta Notice */
+.beta-notice {
+  background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 152, 0, 0.1));
+  border-left: 4px solid rgba(255, 193, 7, 0.6);
+  border-radius: 12px;
+  padding: 16px;
+  margin-top: 20px;
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+}
+
+.beta-notice p {
+  margin: 0;
+  line-height: 1.6;
+}
+
+/* Dev Access Button */
+.dev-access-button {
+  margin-top: 25px;
   text-align: center;
-  color: #fff;
 }
 
-.countdown-number {
-  font-size: 2rem;
-  font-weight: 700;
-  display: block;
+.dev-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  text-decoration: none;
+  background: var(--white);
+  color: var(--primary);
 }
 
-.countdown-label {
-  font-size: 0.875rem;
-  opacity: 0.8;
-  text-transform: uppercase;
-  letter-spacing: 1px;
+.dev-btn-icon {
+  font-size: 18px;
 }
 
 /* Phone mockup */
@@ -332,7 +399,7 @@ body {
 }
 
 .app-interface {
-  color: #fff;
+  color: var(--white);
   text-align: center;
   display: flex;
   flex-direction: column;
@@ -355,6 +422,7 @@ body {
   height: 32px;
   display: block;
   border-radius: 6px;
+  background: rgba(255, 255, 255, 0.2);
 }
 
 .app-logo {
@@ -362,7 +430,7 @@ body {
   font-weight: 700;
   margin: 0;
   letter-spacing: -0.5px;
-  color: #ffffff;
+  color: var(--white);
 }
 
 .screen .stats-grid {
@@ -386,7 +454,7 @@ body {
 .screen .stat-number {
   font-size: 1.8rem !important;
   font-weight: 900 !important;
-  color: #ffffff !important;
+  color: var(--white) !important;
   margin-bottom: 0.4rem !important;
   display: block !important;
   text-shadow: none !important;
@@ -399,7 +467,7 @@ body {
   font-weight: 600 !important;
   text-transform: uppercase !important;
   letter-spacing: 0.8px !important;
-  color: #ffffff !important;
+  color: var(--white) !important;
   display: block !important;
   opacity: 1 !important;
 }
@@ -409,7 +477,7 @@ body {
    ======================= */
 .features {
   padding: 6rem 0;
-  background: var(--bg-light);
+  background: var(--white);
   position: relative;
 }
 
@@ -449,11 +517,11 @@ body {
 }
 
 .feature-card {
-  background: #fff;
+  background: var(--white);
   padding: 2.5rem;
   border-radius: 20px;
   box-shadow: var(--shadow);
-  transition: all 0.3s ease;
+  transition: var(--transition);
   border: 1px solid rgba(30, 78, 156, 0.05);
   position: relative;
   overflow: hidden;
@@ -472,6 +540,7 @@ body {
 .feature-card:hover {
   transform: translateY(-10px);
   box-shadow: var(--shadow-hover);
+  border-color: rgba(30, 78, 156, 0.15);
 }
 
 .feature-icon {
@@ -483,7 +552,7 @@ body {
   align-items: center;
   justify-content: center;
   margin-bottom: 1.5rem;
-  color: #fff;
+  color: var(--white);
   font-size: 1.5rem;
 }
 
@@ -543,7 +612,7 @@ body {
   margin: 0 auto 1rem;
   border-radius: 16px;
   background: var(--gradient);
-  color: #fff;
+  color: var(--white);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -576,17 +645,18 @@ body {
 }
 
 .newsletter-card {
-  background: #fff;
+  background: var(--white);
   border: 1px solid rgba(30, 78, 156, 0.08);
   border-radius: 16px;
   padding: 1.25rem 1.25rem 1rem;
   box-shadow: var(--shadow);
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  transition: var(--transition);
 }
 
 .newsletter-card:hover {
   transform: translateY(-4px);
   box-shadow: var(--shadow-hover);
+  border-color: rgba(30, 78, 156, 0.15);
 }
 
 .newsletter-header {
@@ -601,7 +671,7 @@ body {
   height: 44px;
   border-radius: 12px;
   background: var(--gradient);
-  color: #fff;
+  color: var(--white);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -616,6 +686,7 @@ body {
 .newsletter-info a {
   color: var(--text-dark);
   text-decoration: none;
+  transition: color 0.3s ease;
 }
 
 .newsletter-info a:hover {
@@ -641,12 +712,18 @@ body {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
-  color: #fff;
+  color: var(--white);
   background: var(--gradient);
   padding: 0.55rem 0.9rem;
   border-radius: 999px;
   text-decoration: none;
   font-weight: 600;
+  transition: var(--transition);
+}
+
+.read-more-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow);
 }
 
 .back-navigation {
@@ -659,10 +736,14 @@ body {
   color: var(--secondary);
   text-decoration: none;
   font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  transition: gap 0.3s ease;
 }
 
 .back-link:hover {
-  text-decoration: underline;
+  gap: 0.75rem;
 }
 
 .newsletter-header h1 {
@@ -701,7 +782,7 @@ body {
 
 .newsletter-content {
   margin-top: 1.25rem;
-  background: #fff;
+  background: var(--white);
   border: 1px solid rgba(30, 78, 156, 0.08);
   border-radius: 16px;
   padding: 1.5rem;
@@ -749,24 +830,29 @@ body {
   border: none;
   text-decoration: none;
   font-weight: 600;
+  transition: var(--transition);
 }
 
 .action-btn.primary {
   background: var(--gradient);
-  color: #fff;
+  color: var(--white);
 }
 
 .action-btn.secondary {
-  background: #f1f5f9;
+  background: var(--bg-light);
   color: var(--text-dark);
 }
 
+.action-btn:hover {
+  transform: translateY(-2px);
+}
+
 /* =======================
    Footer
    ======================= */
 .footer {
   background: var(--text-dark);
-  color: #fff;
+  color: var(--white);
   text-align: center;
   padding: 2rem 0;
 }
@@ -776,7 +862,7 @@ body {
    ======================= */
 .contact-about-page {
   min-height: 100vh;
-  background: #fff;
+  background: var(--white);
   padding-top: var(--navbar-height);
 }
 
@@ -784,7 +870,7 @@ body {
   background: var(--gradient);
   padding: 6rem 2rem;
   text-align: center;
-  color: #fff;
+  color: var(--white);
 }
 
 .hero-section h1 {
@@ -843,7 +929,7 @@ body {
 }
 
 .contact-form {
-  background: #fff;
+  background: var(--white);
   border: 1px solid rgba(30, 78, 156, 0.08);
   border-radius: 16px;
   padding: 2rem;
@@ -881,7 +967,9 @@ body {
   border-radius: 8px;
   font-family: inherit;
   font-size: 1rem;
-  transition: all 0.3s ease;
+  transition: var(--transition);
+  background: var(--white);
+  color: var(--text-dark);
 }
 
 .form-group input:focus,
@@ -967,13 +1055,13 @@ body {
   align-items: center;
   gap: 0.5rem;
   background: var(--gradient);
-  color: #fff;
+  color: var(--white);
   padding: 1rem 2.5rem;
   border: none;
   border-radius: 10px;
   font-weight: 600;
   cursor: pointer;
-  transition: all 0.3s ease;
+  transition: var(--transition);
   font-size: 1rem;
 }
 
@@ -982,6 +1070,10 @@ body {
   box-shadow: var(--shadow-hover);
 }
 
+.form-submit:active {
+  transform: translateY(-1px);
+}
+
 .form-submit i {
   font-size: 1.1rem;
 }
@@ -994,6 +1086,18 @@ body {
   border-radius: 8px;
   margin-bottom: 1.5rem;
   display: none;
+  animation: slideDown 0.3s ease;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 .form-success.show {
@@ -1010,18 +1114,19 @@ body {
 }
 
 .info-card {
-  background: #fff;
+  background: var(--white);
   border: 1px solid rgba(30, 78, 156, 0.08);
   border-radius: 16px;
   padding: 2rem;
   text-align: center;
   box-shadow: var(--shadow);
-  transition: all 0.3s ease;
+  transition: var(--transition);
 }
 
 .info-card:hover {
   transform: translateY(-4px);
   box-shadow: var(--shadow-hover);
+  border-color: rgba(30, 78, 156, 0.15);
 }
 
 .info-card-icon {
@@ -1032,7 +1137,7 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #fff;
+  color: var(--white);
   font-size: 1.5rem;
   margin: 0 auto 1rem;
 }
@@ -1052,10 +1157,11 @@ body {
   color: var(--secondary);
   text-decoration: none;
   font-weight: 600;
+  transition: color 0.3s ease;
 }
 
 .info-card a:hover {
-  text-decoration: underline;
+  color: var(--primary);
 }
 
 .team-section {
@@ -1087,11 +1193,11 @@ body {
 }
 
 .team-member {
-  background: #fff;
+  background: var(--white);
   border-radius: 16px;
   overflow: hidden;
   box-shadow: var(--shadow);
-  transition: all 0.3s ease;
+  transition: var(--transition);
   text-align: center;
 }
 
@@ -1103,12 +1209,12 @@ body {
 .team-member-image {
   width: 100%;
   height: 250px;
-  background: linear-gradient(135deg, var(--primary), var(--secondary));
+  background: var(--gradient);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 4rem;
-  color: #fff;
+  color: var(--white);
 }
 
 .team-member-info {
@@ -1135,7 +1241,7 @@ body {
 
 .values-section {
   padding: 4rem 2rem;
-  background: #fff;
+  background: var(--white);
 }
 
 .values-grid {
@@ -1147,18 +1253,19 @@ body {
 }
 
 .value-card {
-  background: #fff;
+  background: var(--white);
   border: 1px solid rgba(30, 78, 156, 0.08);
   border-radius: 16px;
   padding: 2rem;
   text-align: center;
   box-shadow: var(--shadow);
-  transition: all 0.3s ease;
+  transition: var(--transition);
 }
 
 .value-card:hover {
   transform: translateY(-8px);
   box-shadow: var(--shadow-hover);
+  border-color: rgba(30, 78, 156, 0.15);
 }
 
 .value-icon {
@@ -1169,7 +1276,7 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #fff;
+  color: var(--white);
   font-size: 1.5rem;
   margin: 0 auto 1rem;
 }
@@ -1207,15 +1314,20 @@ body {
 .stat-box {
   text-align: center;
   padding: 2rem;
-  background: #fff;
+  background: var(--white);
   border-radius: 16px;
   box-shadow: var(--shadow);
+  transition: var(--transition);
+}
+
+.stat-box:hover {
+  transform: translateY(-4px);
 }
 
 .stat-number {
   font-size: 2.5rem;
   font-weight: 700;
-  color: #1e4e9c;
+  color: var(--primary);
   margin-bottom: 0.5rem;
 }
 
@@ -1226,7 +1338,7 @@ body {
 
 .faq-section {
   padding: 4rem 2rem;
-  background: #fff;
+  background: var(--white);
 }
 
 .faq-container {
@@ -1239,13 +1351,14 @@ body {
   border-radius: 12px;
   margin-bottom: 1rem;
   overflow: hidden;
-  background: #fff;
+  background: var(--white);
   box-shadow: var(--shadow);
-  transition: all 0.3s ease;
+  transition: var(--transition);
 }
 
 .faq-item.open {
   box-shadow: var(--shadow-hover);
+  border-color: rgba(30, 78, 156, 0.15);
 }
 
 .faq-question {
@@ -1255,6 +1368,7 @@ body {
   justify-content: space-between;
   align-items: center;
   transition: background 0.3s ease;
+  user-select: none;
 }
 
 .faq-question:hover {
@@ -1300,6 +1414,141 @@ body {
   justify-content: center;
 }
 
+/* =======================
+   Development Status Section (Improved)
+   ======================= */
+.development-status {
+  padding: 60px 20px;
+  background: linear-gradient(135deg, #f8fafc 0%, #f0f4f9 100%);
+  border-top: 1px solid rgba(51, 124, 242, 0.1);
+}
+
+.status-container {
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.development-status h2 {
+  font-size: 32px;
+  color: var(--text-dark);
+  margin-bottom: 15px;
+  text-align: center;
+  font-weight: 700;
+}
+
+.status-intro {
+  font-size: 16px;
+  color: var(--text-light);
+  text-align: center;
+  margin-bottom: 40px;
+  line-height: 1.7;
+  max-width: 700px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.status-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 20px;
+  margin-bottom: 40px;
+}
+
+.status-item {
+  background: var(--white);
+  border-radius: 12px;
+  padding: 25px;
+  border: 1px solid rgba(51, 124, 242, 0.1);
+  position: relative;
+  transition: var(--transition);
+}
+
+.status-item:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-hover);
+  border-color: rgba(51, 124, 242, 0.2);
+}
+
+.status-badge {
+  display: inline-block;
+  font-size: 12px;
+  font-weight: 700;
+  padding: 6px 12px;
+  border-radius: 6px;
+  margin-bottom: 15px;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+}
+
+.status-item.ready .status-badge {
+  background: rgba(76, 175, 80, 0.15);
+  color: #2e7d32;
+}
+
+.status-item.in-progress .status-badge {
+  background: rgba(255, 193, 7, 0.15);
+  color: #f57f17;
+}
+
+.status-item.planned .status-badge {
+  background: rgba(51, 124, 242, 0.15);
+  color: var(--primary);
+}
+
+.status-item h4 {
+  color: var(--text-dark);
+  font-size: 16px;
+  margin: 0 0 8px 0;
+  font-weight: 600;
+}
+
+.status-item p {
+  color: var(--text-light);
+  font-size: 14px;
+  margin: 0;
+  line-height: 1.6;
+}
+
+.feedback-cta {
+  background: var(--white);
+  border: 2px solid rgba(51, 124, 242, 0.2);
+  border-radius: 12px;
+  padding: 30px;
+  text-align: center;
+  transition: var(--transition);
+}
+
+.feedback-cta:hover {
+  border-color: rgba(51, 124, 242, 0.4);
+  box-shadow: var(--shadow);
+}
+
+.feedback-cta h3 {
+  color: var(--text-dark);
+  font-size: 20px;
+  margin: 0 0 12px 0;
+  font-weight: 700;
+}
+
+.feedback-cta p {
+  color: var(--text-light);
+  font-size: 15px;
+  margin: 0;
+  line-height: 1.7;
+}
+
+.feedback-cta a {
+  color: var(--secondary);
+  text-decoration: none;
+  font-weight: 600;
+  transition: color 0.3s ease;
+}
+
+.feedback-cta a:hover {
+  color: var(--primary);
+  text-decoration: underline;
+}
+
 /* =======================
    Article layout for newsletter detail
    ======================= */
@@ -1319,7 +1568,7 @@ body {
 }
 
 .article-meta {
-  background: #fff;
+  background: var(--white);
   border: 1px solid rgba(30, 78, 156, 0.08);
   border-radius: 16px;
   padding: 1rem;
@@ -1330,6 +1579,7 @@ body {
 .article-title {
   font-size: 1.1rem;
   margin: 0 0 0.5rem 0;
+  font-weight: 600;
 }
 
 .meta-row {
@@ -1359,7 +1609,7 @@ body {
 
 .toc {
   margin-top: 1rem;
-  background: #fff;
+  background: var(--white);
   border: 1px solid rgba(30, 78, 156, 0.08);
   border-radius: 16px;
   padding: 0.75rem 0.75rem 0.75rem 1rem;
@@ -1385,6 +1635,7 @@ body {
   text-decoration: none;
   color: var(--text-dark);
   font-size: 0.95rem;
+  transition: color 0.3s ease;
 }
 
 #toc-list a:hover {
@@ -1408,14 +1659,14 @@ body {
   height: 44px;
   border-radius: 12px;
   background: var(--gradient);
-  color: #fff;
+  color: var(--white);
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
 
 /* =======================
-   Responsive
+   Responsive Design
    ======================= */
 
 /* Tablet adjustments */
@@ -1437,24 +1688,28 @@ body {
 
 /* Mobile layout and hamburger menu */
 @media (max-width: 768px) {
+  :root {
+    --navbar-height: 60px;
+  }
+
   .nav-container {
     padding: 0 1rem;
   }
 
   .nav-toggle {
-    display: inline-flex;
+    display: flex;
   }
 
   .nav-links {
     position: absolute;
-    top: 64px;
-    left: 16px;
-    right: 16px;
+    top: 60px;
+    left: 1rem;
+    right: 1rem;
     display: none;
     flex-direction: column;
     gap: 0;
     list-style: none;
-    background: #ffffff;
+    background: var(--white);
     border: 1px solid rgba(2, 6, 23, 0.08);
     border-radius: 12px;
     box-shadow: var(--shadow);
@@ -1478,12 +1733,11 @@ body {
   }
 
   .nav-links a:hover {
-    background: #f8fafc;
+    background: var(--bg-light);
   }
 
   .nav-links a::after {
     display: none;
-    content: none;
   }
 
   .nav-toggle.active .bar:nth-child(1) {
@@ -1509,7 +1763,6 @@ body {
   .hero-visual {
     order: -1;
     height: 360px;
-    margin-top: 4px;
   }
 
   .phone-mockup {
@@ -1517,7 +1770,7 @@ body {
     height: 460px;
     padding: 16px;
     border-radius: 36px;
-    transform: rotate(-5deg) translateY(0);
+    transform: rotate(-5deg);
   }
 
   .screen {
@@ -1537,7 +1790,6 @@ body {
 
   .app-logo {
     font-size: 1.4rem;
-    margin-bottom: 0;
   }
 
   .screen .stats-grid {
@@ -1622,15 +1874,25 @@ body {
 
   .cta-section {
     margin: 2rem 1rem !important;
-    padding: 2.5rem 1rem !important;
+    padding: 1.5rem !important;
   }
 
-  .cta-section h2 {
-    font-size: 1.5rem;
+  .cta-section h3 {
+    font-size: 1.25rem;
   }
 
-  .cta-section p {
-    font-size: 0.95rem;
+  .cta-section > p {
+    font-size: 0.9rem;
+  }
+
+  .email-form {
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .email-input,
+  .notify-btn {
+    width: 100%;
   }
 
   .article-wrap {
@@ -1639,6 +1901,18 @@ body {
   .article-aside {
     position: static;
   }
+
+  .status-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .development-status h2 {
+    font-size: 24px;
+  }
+
+  .feedback-cta {
+    padding: 20px;
+  }
 }
 
 /* Small phones */
@@ -1690,6 +1964,18 @@ body {
   .screen .stat-label {
     font-size: 0.6rem;
   }
+
+  .hero-content h1 {
+    font-size: 1.75rem;
+  }
+
+  .hero-content .subtitle {
+    font-size: 1rem;
+  }
+
+  .section-header h2 {
+    font-size: 1.5rem;
+  }
 }
 
 /* Very narrow devices */
@@ -1734,7 +2020,7 @@ body {
   }
 }
 
-/* Anchor scroll offset so anchors are not hidden under fixed navbar */
+/* Anchor scroll offset */
 main,
 .section,
 .page-header,
@@ -1742,12 +2028,11 @@ main,
   scroll-margin-top: calc(var(--navbar-height) + 12px);
 }
 
-/* =======================
-   Hard Guards for Navbar
-   ======================= */
+/* Hard guards for navbar */
 .navbar .logo {
   color: var(--text-dark) !important;
 }
+
 .navbar .logo .logo-accent {
   color: var(--accent) !important;
 }
@@ -1757,5 +2042,5 @@ main,
   text-transform: none;
   letter-spacing: normal;
   line-height: normal;
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
 }
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index b6804ea..a86357e 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -12,8 +12,12 @@
         </p>
 
         <div class="cta-section">
-          <h3>Coming soon!</h3>
-          <p>Join us while waiting for launch</p>
+          <div class="beta-badge">
+            <span class="badge-icon">⚡</span>
+            <span class="badge-text">Development Build Available</span>
+          </div>
+          <h3>Join Our Newsletter</h3>
+          <p>Get updates on new features and development progress</p>
 
           <div class="email-form">
             <input
@@ -23,7 +27,14 @@
               placeholder="Enter your email address"
               required
             />
-            <button class="notify-btn" id="notify-button">Notify Me</button>
+            <button class="notify-btn" id="notify-button">Subscribe</button>
+          </div>
+
+          <div class="beta-notice">
+            <p>
+              <strong>Note:</strong> This is an early development build. Not all features are fully functional yet. 
+              Your feedback helps us build better! 🚀
+            </p>
           </div>
         </div>
       </div>
@@ -72,15 +83,15 @@
   <!-- Features Section -->
   {{if .IsHome}}
     <section class="features" id="features">
-      <div class="section-header">
-        <h2>Powerful Features for Every Cyclist</h2>
-        <p>
-          From beginners to professionals, RideAware provides comprehensive
-          tools to optimize your training and performance.
-        </p>
-      </div>
-
       <div class="features-container">
+        <div class="section-header">
+          <h2>Powerful Features for Every Cyclist</h2>
+          <p>
+            From beginners to professionals, RideAware provides comprehensive
+            tools to optimize your training and performance.
+          </p>
+        </div>
+
         <div class="features-grid">
           <div class="feature-card">
             <div class="feature-icon">
@@ -210,5 +221,77 @@
         </div>
       </div>
     </section>
+
+    <!-- Development Status Section -->
+    <section class="development-status">
+      <div class="status-container">
+        <h2>Current Development Status</h2>
+        <p class="status-intro">
+          RideAware is actively being built. This development build lets you experience the platform early 
+          and help us refine it. Some features are still in progress.
+        </p>
+
+        <div class="status-grid">
+          <div class="status-item ready">
+            <span class="status-badge">✓ Live</span>
+            <h4>User Authentication</h4>
+            <p>Sign up, login, and user profiles fully functional</p>
+          </div>
+
+          <div class="status-item ready">
+            <span class="status-badge">✓ Live</span>
+            <h4>Equipment Management</h4>
+            <p>Add and manage your bikes and cycling gear</p>
+          </div>
+
+          <div class="status-item ready">
+            <span class="status-badge">✓ Live</span>
+            <h4>Training Zones</h4>
+            <p>HR and power zone calculations</p>
+          </div>
+
+          <div class="status-item in-progress">
+            <span class="status-badge">🔨 In Progress</span>
+            <h4>Workout Planning</h4>
+            <p>Structured workout builder with interval support</p>
+          </div>
+
+          <div class="status-item in-progress">
+            <span class="status-badge">🔨 In Progress</span>
+            <h4>Performance Analytics</h4>
+            <p>Detailed performance tracking and metrics</p>
+          </div>
+
+          <div class="status-item planned">
+            <span class="status-badge">📋 Planned</span>
+            <h4>Device Integration</h4>
+            <p>Sync with wearables and cycling computers</p>
+          </div>
+
+          <div class="status-item planned">
+            <span class="status-badge">📋 Planned</span>
+            <h4>Community Features</h4>
+            <p>Social sharing and competitive leaderboards</p>
+          </div>
+
+          <div class="status-item planned">
+            <span class="status-badge">📋 Planned</span>
+            <h4>Advanced Training</h4>
+            <p>AI-powered coaching and personalized plans</p>
+          </div>
+        </div>
+
+        <div class="feedback-cta">
+          <h3>Ready to Try RideAware?</h3>
+          <p>
+            Access the development build and start testing RideAware today. Your feedback helps us build the ultimate cycling training platform.
+          </p>
+          <a href="https://dev.rideaware.org" class="action-btn primary" target="_blank">
+            <i class="fas fa-rocket"></i>
+            Access Development Build
+          </a>
+        </div>
+      </div>
+    </section>
   {{end}}
 {{end}}
\ No newline at end of file