diff --git a/README.md b/README.md
index db8b743..d344fe2 100644
--- a/README.md
+++ b/README.md
@@ -1,30 +1,125 @@
 # SL Transport Departures Display
 
-A digital signage system for displaying transit departures and weather information. Perfect for Raspberry Pi-based information displays.
+A modern digital signage system for displaying real-time transit departures and weather information. Perfect for Raspberry Pi-based information displays, kiosks, and public transport information boards.
 
-![SL Transport Departures Display](https://example.com/screenshot.png)
+![SL Transport Departures Display](screenshots/main-display.png)
+
+> **Note**: Screenshots should be added to the `screenshots/` directory. The application displays real-time transit departures in a modern, optimized layout.
 
 ## Features
 
-- Real-time transit departure information
-- Current weather and hourly forecast
-- Multiple screen orientation support (0°, 90°, 180°, 270°)
-- Dark mode with automatic switching based on sunrise/sunset
-- Custom background image support
-- Responsive design for various screen sizes
+### 🚌 Real-Time Transit Information
+- **Multi-stop support**: Display departures from up to 4 transit stops simultaneously
+- **Smart grouping**: Departures grouped by line number with direction indicators
+- **Visual indicators**: 
+  - Color-coded countdowns (green for "Now", red for <5 minutes, white for 5+ minutes)
+  - Direction arrows showing bus/tram direction
+  - Transport mode icons (Bus, Tram, Metro, Train, Ship)
+- **Accurate timing**: Uses `expected` time from API to account for delays
+
+### 🌤️ Weather Display
+- Current weather conditions with icons
+- Hourly forecast (8-hour outlook)
+- Sunrise/sunset times
+- Automatic dark mode based on time of day
+
+### ⚙️ Flexible Configuration
+- **Screen orientations**: Support for 0°, 90°, 180°, 270° rotations
+- **Landscape optimization**: Automatic 4-column grid layout for wide screens
+- **Dark mode**: Automatic, always on, or always off
+- **Custom backgrounds**: Upload your own background images with adjustable opacity
+- **Map-based site selection**: Visual map interface for selecting transit stops (no Swedish required!)
+
+### 🎨 Modern Design
+- Swedish color scheme (blue/yellow gradient clock banner)
+- Compact ribbon-style clock with time and date on one line
+- Optimized spacing and typography for readability
+- Responsive design that adapts to screen size
+- Smooth animations and visual effects
+
+## Screenshots
+
+### Main Display (Landscape Layout)
+![Landscape Layout](screenshots/landscape-layout.png)
+
+> **Screenshot**: The system automatically optimizes for landscape orientation with a 4-column grid layout, maximizing screen real estate while maintaining readability. Add your screenshot to `screenshots/landscape-layout.png`.
+
+### Key Features Highlighted
+- **Clock Banner**: Compact ribbon-style header with time and date
+- **Departure Cards**: Color-coded boxes with transport icons, line numbers, and direction arrows
+- **Weather Widget**: Fixed at bottom with current conditions and hourly forecast
 
 ## Quick Start
 
-1. Clone this repository
-2. Run the server: `node server.js`
-3. Open a browser and navigate to: `http://localhost:3002`
-
-## System Requirements
-
+### Prerequisites
 - Node.js (v12 or higher)
 - Modern web browser with CSS3 support
 - Internet connection for API access
 
+### Installation
+
+1. **Clone the repository**
+   ```bash
+   git clone http://192.168.68.53:3000/kyle/SignageHTML.git
+   cd SignageHTML
+   ```
+
+2. **Start the server**
+   ```bash
+   node server.js
+   ```
+
+3. **Open in browser**
+   Navigate to: `http://localhost:3002`
+
+The server will start on port 3002 by default. The application will automatically load and begin fetching transit and weather data.
+
+## Configuration
+
+### Adding Transit Stops
+
+#### Method 1: Search by Name
+1. Click the gear icon (⚙️) in the top-right corner
+2. Go to the "Content" tab
+3. Enter a stop name in the search box (e.g., "Ambassaderna")
+4. Click "Search" and select from results
+
+#### Method 2: Select from Map
+1. Click "Select from Map" button
+2. Navigate to your location on the map
+3. Click on any transit stop marker
+4. Click "Select This Stop" in the popup
+
+#### Method 3: Manual Entry
+1. Click "Add Site Manually"
+2. Enter the Site Name and Site ID
+3. Enable/disable the site as needed
+
+### Changing Weather Location
+
+Weather location is configured in `weather.js`. Update the default coordinates:
+
+```javascript
+window.weatherManager = new WeatherManager({
+    latitude: 59.3293,  // Stockholm default
+    longitude: 18.0686,
+    apiKey: 'your-api-key'
+});
+```
+
+Or use the settings panel to configure it through the UI.
+
+### Screen Orientation
+
+The system supports multiple orientations:
+- **Normal (0°)**: Standard portrait/landscape
+- **Vertical (90°)**: Rotated 90° clockwise
+- **Upside Down (180°)**: Rotated 180°
+- **Vertical Reverse (270°)**: Rotated 270°
+- **Landscape (2-column)**: Optimized landscape layout
+
+Select your orientation from the settings panel (⚙️ → Display → Screen Orientation).
+
 ## Raspberry Pi Setup
 
 For a dedicated display on Raspberry Pi, we've included a setup script that:
@@ -35,12 +130,12 @@ For a dedicated display on Raspberry Pi, we've included a setup script that:
 4. Disables screen blanking and screensaver
 5. Creates a desktop shortcut for manual launch
 
-To set up on Raspberry Pi:
+### Setup Instructions
 
 ```bash
 # Clone the repository
-git clone https://github.com/yourusername/sl-departures-display.git
-cd sl-departures-display
+git clone http://192.168.68.53:3000/kyle/SignageHTML.git
+cd SignageHTML
 
 # Make the setup script executable
 chmod +x raspberry-pi-setup.sh
@@ -52,71 +147,148 @@ sudo ./raspberry-pi-setup.sh
 sudo reboot
 ```
 
-## Configuration
-
-### Changing Transit Stop
-
-To display departures for a different transit stop, modify the API_URL in server.js:
-
-```javascript
-const API_URL = 'https://transport.integration.sl.se/v1/sites/YOUR_SITE_ID/departures';
-```
-
-### Changing Weather Location
-
-To display weather for a different location, modify the latitude and longitude in index.html:
-
-```javascript
-window.weatherManager = new WeatherManager({
-    latitude: YOUR_LATITUDE,
-    longitude: YOUR_LONGITUDE
-});
-```
-
-## UI Settings
-
-The gear icon in the top-right corner opens the settings panel where you can configure:
-
-- Screen orientation
-- Dark mode (auto/on/off)
-- Background image and opacity
-- Transit sites
-
-Settings are saved to localStorage and persist across sessions.
+After reboot, the display will automatically start in kiosk mode.
 
 ## Architecture
 
 The system consists of the following components:
 
-1. **Node.js Server** - Handles API proxying and serves static files
-2. **Configuration Manager** - Manages system settings and UI customization
-3. **Weather Component** - Displays weather data and manages dark mode
-4. **Clock Component** - Shows current time and date
-5. **Departures Component** - Displays transit departure information
-6. **Main UI** - Responsive layout with multiple orientation support
+1. **Node.js Server** (`server.js`)
+   - Handles API proxying (SL Transport API, OpenWeatherMap)
+   - Serves static files
+   - Manages site configuration
 
-## Documentation
+2. **Configuration Manager** (`config.js`)
+   - Manages system settings and UI customization
+   - Handles site selection and map integration
+   - Persists settings to localStorage
 
-For detailed documentation, see [documentation.md](documentation.md).
+3. **Weather Component** (`weather.js`)
+   - Displays weather data from OpenWeatherMap
+   - Manages dark mode based on sunrise/sunset
+   - Shows hourly forecasts
+
+4. **Clock Component** (`clock.js`)
+   - Shows current time and date
+   - Swedish locale formatting
+   - Updates every second
+
+5. **Departures Component** (`departures.js`)
+   - Fetches and displays transit departure information
+   - Groups departures by line number
+   - Handles direction indicators and timing
+
+6. **Main UI** (`index.html`)
+   - Responsive layout with multiple orientation support
+   - CSS Grid-based landscape optimization
+   - Modern styling with animations
+
+## API Integration
+
+### SL Transport API
+The system uses the SL Transport API to fetch real-time departure information:
+- Endpoint: `https://transport.integration.sl.se/v1/sites/{siteId}/departures`
+- Returns: Real-time departure data with expected times, directions, and line information
+
+### OpenWeatherMap API
+Weather data is fetched from OpenWeatherMap:
+- Requires API key (configured in `weather.js`)
+- Provides current conditions and hourly forecasts
+- Used for dark mode timing calculations
+
+For detailed API response documentation, see [API_RESPONSE_DOCUMENTATION.md](API_RESPONSE_DOCUMENTATION.md).
+
+## UI Settings
+
+The gear icon (⚙️) in the top-right corner opens the settings panel with tabs for:
+
+### Display
+- Screen orientation selection
+- Dark mode settings (Automatic/Sunset-Sunrise, Always On, Always Off)
+
+### Appearance
+- Background image URL or local file upload
+- Background opacity slider
+
+### Content
+- Transit site management
+  - Search for stops by name
+  - Select from interactive map
+  - Add manually
+  - Enable/disable sites
+- Option to combine departures going in the same direction
+
+### Options
+- Additional system preferences
+
+Settings are automatically saved to localStorage and persist across sessions.
+
+## Recent Updates
+
+### Version 1.1.0 - Landscape Optimization
+- ✅ Optimized 4-column grid layout for landscape screens
+- ✅ Replaced text labels with transport mode icons
+- ✅ Reduced box sizes for better space efficiency
+- ✅ Increased font sizes after space optimization
+- ✅ Changed default box color to blue with white line numbers
+- ✅ Fixed TRAM display to correctly show from API
+- ✅ Improved time display formatting and prevented cutoff
+- ✅ Compact ribbon-style clock banner
 
 ## Troubleshooting
 
-### Common Issues:
+### Common Issues
 
 1. **Server won't start**
-   - Check if port 3002 is already in use
-   - Ensure Node.js is installed correctly
+   - Check if port 3002 is already in use: `netstat -ano | findstr :3002`
+   - Ensure Node.js is installed correctly: `node --version`
+   - Check server logs for error messages
 
 2. **No departures displayed**
    - Verify internet connection
    - Check server console for API errors
-   - Ensure the site ID is correct (currently set to 9636)
+   - Ensure site IDs are correct and enabled
+   - Verify sites are configured in settings
 
 3. **Weather data not loading**
-   - Check OpenWeatherMap API key
+   - Check OpenWeatherMap API key in `weather.js`
    - Verify internet connection
-   - Look for errors in browser console
+   - Look for errors in browser console (F12)
+   - Check API key quota/limits
 
+4. **Map not loading**
+   - Ensure internet connection is active
+   - Check browser console for Leaflet.js errors
+   - Verify OpenStreetMap tile access
+
+5. **Layout issues**
+   - Clear browser cache and refresh (Ctrl+F5)
+   - Check browser console for CSS errors
+   - Verify screen orientation setting matches physical setup
+
+## Development
+
+### Project Structure
+```
+SignageHTML/
+├── index.html          # Main HTML file with UI and styles
+├── server.js           # Node.js server for API proxying
+├── config.js           # Configuration management
+├── clock.js            # Clock component
+├── weather.js          # Weather component
+├── departures.js       # Departures component
+├── sites-config.json   # Persistent site configuration
+├── package.json        # Node.js dependencies
+└── README.md           # This file
+```
+
+### Contributing
+
+1. Fork the repository
+2. Create a feature branch
+3. Make your changes
+4. Test thoroughly
+5. Submit a pull request
 
 ## License
 
@@ -124,5 +296,17 @@ MIT License
 
 ## Acknowledgements
 
-- OpenWeatherMap for weather data
-- SL Transport API for departure information
+- **SL Transport API** - Real-time transit departure information
+- **OpenWeatherMap** - Weather data and forecasts
+- **OpenStreetMap** - Map tiles for site selection
+- **Leaflet.js** - Interactive map functionality
+
+## Support
+
+For issues, questions, or contributions, please use the Gitea repository:
+- Repository: http://192.168.68.53:3000/kyle/SignageHTML
+- Issues: http://192.168.68.53:3000/kyle/SignageHTML/issues
+
+---
+
+**Built for Stockholm public transport** 🚌🚊
diff --git a/screenshots/README.md b/screenshots/README.md
new file mode 100644
index 0000000..3ff8ae5
--- /dev/null
+++ b/screenshots/README.md
@@ -0,0 +1,9 @@
+# Screenshots Directory
+
+Place screenshots of the application here for the README.
+
+Suggested screenshots:
+- `main-display.png` - Main landscape layout showing all features
+- `landscape-layout.png` - Close-up of the 4-column departure grid
+- `settings-panel.png` - Settings modal showing configuration options
+- `map-selector.png` - Map interface for selecting transit stops