diff --git a/app/__init__.py b/app/__init__.py
index 4ce705f..a1e8af5 100644
--- a/app/__init__.py
+++ b/app/__init__.py
@@ -4,22 +4,16 @@ import os
 
 def create_app(config_name='development'):
     app = Flask(__name__, 
-                template_folder='templates',
-                static_folder='static')
+                static_folder='static',
+                template_folder='templates')
     
-    # Import config
-    try:
-        from config.settings import config
-        app.config.from_object(config.get(config_name, 'default'))
-    except ImportError:
-        # Fallback configuration
-        app.config['SECRET_KEY'] = 'dev-key-placeholder'
-        app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///app.db'
-        app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
-    
-    # Create the app instance folder if it doesn't exist
-    # This is where SQLite database will be stored
-    os.makedirs(os.path.join(app.instance_path), exist_ok=True)
+    # Load configuration
+    if config_name == 'production':
+        app.config.from_object('config.ProductionConfig')
+    elif config_name == 'testing':
+        app.config.from_object('config.TestingConfig')
+    else:
+        app.config.from_object('config.DevelopmentConfig')
     
     # Initialize extensions
     from app.core.extensions import db, migrate, login_manager, bcrypt, limiter, csrf
@@ -35,118 +29,38 @@ def create_app(config_name='development'):
     
     @login_manager.user_loader
     def load_user(user_id):
-        # Make sure we're in app context
-        with app.app_context():
-            return User.query.get(int(user_id))
+        return User.query.get(int(user_id))
     
-    # Initialize CSRF protection
-    from flask_wtf.csrf import CSRFProtect
-    csrf = CSRFProtect()
-    csrf.init_app(app)
+    login_manager.login_view = 'auth.login'
+    login_manager.login_message = 'Please log in to access this page.'
+    login_manager.login_message_category = 'info'
     
-    # Request hooks
-    @app.before_request
-    def before_request():
-        g.user = None
-        from flask_login import current_user
-        if current_user.is_authenticated:
-            g.user = current_user
-        
-        # Add datetime to all templates
-        g.now = datetime.datetime.utcnow()
-    
-    @app.context_processor
-    def inject_now():
-        return {'now': datetime.datetime.utcnow()}
-    
-    @app.after_request
-    def add_security_headers(response):
-        # Security headers
-        response.headers['X-Content-Type-Options'] = 'nosniff'
-        response.headers['X-Frame-Options'] = 'SAMEORIGIN'
-        response.headers['X-XSS-Protection'] = '1; mode=block'
-        
-        # Update last_seen for the user
-        if hasattr(g, 'user') and g.user and g.user.is_authenticated:
-            g.user.last_seen = datetime.datetime.utcnow()
-            db.session.commit()
-        return response
-    
-    # Add a basic index route that redirects to login or dashboard
-    @app.route('/')
-    def index():
-        from flask_login import current_user
-        if current_user.is_authenticated:
-            return redirect(url_for('dashboard.dashboard_home'))
-        return redirect(url_for('auth.login'))
-    
-    # Register blueprints - order matters!
-    # First auth blueprint
-    from app.routes.auth import bp as auth_bp
-    app.register_blueprint(auth_bp)
-    print("Registered Auth blueprint")
-    
-    # Then other blueprints
-    try:
-        from app.routes.dashboard import bp as dashboard_bp
-        app.register_blueprint(dashboard_bp)
-        print("Registered Dashboard blueprint")
-    except ImportError as e:
-        print(f"Could not import dashboard blueprint: {e}")
-    
-    try:
-        from app.routes.ipam import bp as ipam_bp
-        app.register_blueprint(ipam_bp)
-        print("Registered IPAM blueprint")
-    except ImportError as e:
-        print(f"Could not import ipam blueprint: {e}")
-    
-    try:
-        from app.routes.api import bp as api_bp
-        app.register_blueprint(api_bp)
-        print("Registered API blueprint")
-    except ImportError as e:
-        print(f"Could not import API blueprint: {e}")
-    
-    # Register template filters - IMPORTANT FOR MARKDOWN FILTER
+    # Register template filters
     from app.core.template_filters import bp as filters_bp
     app.register_blueprint(filters_bp)
     
-    # Register template filters directly if the blueprint method doesn't work
-    from app.core.template_filters import markdown_filter, ip_network_filter, ip_address_filter, get_ip_network
-    app.jinja_env.filters['markdown'] = markdown_filter
-    app.jinja_env.filters['ip_network'] = ip_network_filter
-    app.jinja_env.filters['ip_address'] = ip_address_filter
-    app.jinja_env.globals['get_ip_network'] = get_ip_network
-    
-    # Create database tables
+    # Create database tables without seeding any data
     with app.app_context():
         try:
             db.create_all()
             print("Database tables created successfully")
-            
-            # Check if we need to seed the database
-            from app.core.auth import User
-            if User.query.count() == 0:
-                # Run the seed database function if we have no users
-                try:
-                    from app.scripts.db_seed import seed_database
-                    seed_database()
-                    print("Database seeded with initial data")
-                    
-                    # Create an admin user
-                    admin = User(email="admin@example.com", is_admin=True)
-                    admin.set_password("admin")
-                    db.session.add(admin)
-                    db.session.commit()
-                    print("Admin user created: admin@example.com / admin")
-                except Exception as e:
-                    print(f"Error seeding database: {e}")
         except Exception as e:
             print(f"Error with database setup: {e}")
     
-    # After all blueprint registrations, add error handlers
-
+    # Register blueprints
+    from app.routes.auth import bp as auth_bp
+    app.register_blueprint(auth_bp)
+    
+    from app.routes.dashboard import bp as dashboard_bp
+    app.register_blueprint(dashboard_bp)
+    
+    from app.routes.ipam import bp as ipam_bp
+    app.register_blueprint(ipam_bp)
+    
+    from app.routes.api import bp as api_bp
+    app.register_blueprint(api_bp)
+    
+    # Add error handlers
     @app.errorhandler(404)
     def page_not_found(e):
         return render_template('errors/404.html', title='Page Not Found'), 404
@@ -158,9 +72,5 @@ def create_app(config_name='development'):
     @app.errorhandler(403)
     def forbidden(e):
         return render_template('errors/403.html', title='Forbidden'), 403
-
-    @app.errorhandler(401)
-    def unauthorized(e):
-        return render_template('errors/401.html', title='Unauthorized'), 401
     
     return app
\ No newline at end of file
diff --git a/app/__pycache__/__init__.cpython-313.pyc b/app/__pycache__/__init__.cpython-313.pyc
index 25aafc2..6632ed3 100644
Binary files a/app/__pycache__/__init__.cpython-313.pyc and b/app/__pycache__/__init__.cpython-313.pyc differ
diff --git a/app/core/__pycache__/auth.cpython-313.pyc b/app/core/__pycache__/auth.cpython-313.pyc
index 5a7100f..a2cbcbb 100644
Binary files a/app/core/__pycache__/auth.cpython-313.pyc and b/app/core/__pycache__/auth.cpython-313.pyc differ
diff --git a/app/core/__pycache__/template_filters.cpython-313.pyc b/app/core/__pycache__/template_filters.cpython-313.pyc
index f27479d..9ea9883 100644
Binary files a/app/core/__pycache__/template_filters.cpython-313.pyc and b/app/core/__pycache__/template_filters.cpython-313.pyc differ
diff --git a/app/core/auth.py b/app/core/auth.py
index 8bcb78c..bb92f6a 100644
--- a/app/core/auth.py
+++ b/app/core/auth.py
@@ -10,9 +10,9 @@ class User(UserMixin, db.Model):
     __tablename__ = 'users'
     
     id = db.Column(db.Integer, primary_key=True)
-    username = db.Column(db.String(64), unique=True, index=True)
-    email = db.Column(db.String(120), unique=True, index=True)
-    password_hash = db.Column(db.String(128))
+    username = db.Column(db.String(64), unique=True, nullable=True)
+    email = db.Column(db.String(120), unique=True, nullable=False)
+    password_hash = db.Column(db.String(128), nullable=False)
     is_admin = db.Column(db.Boolean, default=False)
     created_at = db.Column(db.DateTime, default=datetime.utcnow)
     last_seen = db.Column(db.DateTime, default=datetime.utcnow)
@@ -21,10 +21,10 @@ class User(UserMixin, db.Model):
         return f'<User {self.username}>'
     
     def set_password(self, password):
-        self.password_hash = bcrypt.generate_password_hash(password).decode('utf-8')
+        self.password_hash = generate_password_hash(password)
     
     def check_password(self, password):
-        return bcrypt.check_password_hash(self.password_hash, password)
+        return check_password_hash(self.password_hash, password)
 
     def get_id(self):
         return str(self.id)
diff --git a/app/core/template_filters.py b/app/core/template_filters.py
index 7bcda14..3a04345 100644
--- a/app/core/template_filters.py
+++ b/app/core/template_filters.py
@@ -1,14 +1,44 @@
 import ipaddress
 import markdown as md_package
+import re
 from flask import Blueprint
 
 bp = Blueprint('filters', __name__)
 
+def github_style_admonition(text):
+    """Transform GitHub-style alerts (> [!NOTE], etc.) to custom HTML"""
+    patterns = {
+        r'> \[!NOTE\](.*?)(?:\n\n|\Z)': '<div class="markdown-alert markdown-alert-note"><p class="markdown-alert-title">Note</p>\\1</div>',
+        r'> \[!TIP\](.*?)(?:\n\n|\Z)': '<div class="markdown-alert markdown-alert-tip"><p class="markdown-alert-title">Tip</p>\\1</div>',
+        r'> \[!IMPORTANT\](.*?)(?:\n\n|\Z)': '<div class="markdown-alert markdown-alert-important"><p class="markdown-alert-title">Important</p>\\1</div>',
+        r'> \[!WARNING\](.*?)(?:\n\n|\Z)': '<div class="markdown-alert markdown-alert-warning"><p class="markdown-alert-title">Warning</p>\\1</div>',
+        r'> \[!CAUTION\](.*?)(?:\n\n|\Z)': '<div class="markdown-alert markdown-alert-caution"><p class="markdown-alert-title">Caution</p>\\1</div>'
+    }
+    
+    for pattern, replacement in patterns.items():
+        text = re.sub(pattern, replacement, text, flags=re.DOTALL)
+    
+    return text
+
 @bp.app_template_filter('markdown')
 def markdown_filter(text):
-    """Convert markdown text to HTML"""
+    """Convert markdown text to HTML with support for GitHub-style features"""
     if text:
-        return md_package.markdown(text, extensions=['tables', 'fenced_code'])
+        # Pre-process GitHub-style alerts
+        text = github_style_admonition(text)
+        
+        # Convert to HTML with regular markdown
+        html = md_package.markdown(
+            text, 
+            extensions=[
+                'tables', 
+                'fenced_code',
+                'codehilite',
+                'nl2br'
+            ]
+        )
+        
+        return html
     return ""
 
 @bp.app_template_filter('ip_network')
diff --git a/app/routes/__pycache__/api.cpython-313.pyc b/app/routes/__pycache__/api.cpython-313.pyc
index ffd4419..9091e04 100644
Binary files a/app/routes/__pycache__/api.cpython-313.pyc and b/app/routes/__pycache__/api.cpython-313.pyc differ
diff --git a/app/routes/__pycache__/auth.cpython-313.pyc b/app/routes/__pycache__/auth.cpython-313.pyc
index 08dccd5..8dfda97 100644
Binary files a/app/routes/__pycache__/auth.cpython-313.pyc and b/app/routes/__pycache__/auth.cpython-313.pyc differ
diff --git a/app/routes/__pycache__/dashboard.cpython-313.pyc b/app/routes/__pycache__/dashboard.cpython-313.pyc
index 28a1a02..8db7c90 100644
Binary files a/app/routes/__pycache__/dashboard.cpython-313.pyc and b/app/routes/__pycache__/dashboard.cpython-313.pyc differ
diff --git a/app/routes/__pycache__/ipam.cpython-313.pyc b/app/routes/__pycache__/ipam.cpython-313.pyc
index b3316d2..3d17b67 100644
Binary files a/app/routes/__pycache__/ipam.cpython-313.pyc and b/app/routes/__pycache__/ipam.cpython-313.pyc differ
diff --git a/app/routes/api.py b/app/routes/api.py
index 9fd0761..15e8c8a 100644
--- a/app/routes/api.py
+++ b/app/routes/api.py
@@ -9,23 +9,14 @@ import ipaddress
 bp = Blueprint('api', __name__, url_prefix='/api')
 
 @bp.route('/subnets', methods=['GET'])
-@login_required
 def get_subnets():
     """Get all subnets"""
     subnets = Subnet.query.all()
-    result = []
-    
-    for subnet in subnets:
-        result.append({
-            'id': subnet.id,
-            'cidr': subnet.cidr,
-            'location': subnet.location,
-            'used_ips': subnet.used_ips,
-            'auto_scan': subnet.auto_scan,
-            'created_at': subnet.created_at.strftime('%Y-%m-%d %H:%M:%S')
-        })
-    
-    return jsonify({'subnets': result})
+    return jsonify([{
+        'id': subnet.id,
+        'cidr': subnet.cidr,
+        'location': subnet.location
+    } for subnet in subnets])
 
 @bp.route('/subnets/<int:subnet_id>', methods=['GET'])
 @login_required
@@ -306,4 +297,14 @@ def delete_port(port_id):
     db.session.delete(port)
     db.session.commit()
     
-    return jsonify({'success': True})
\ No newline at end of file
+    return jsonify({'success': True})
+
+@bp.route('/subnets/<int:subnet_id>/servers', methods=['GET'])
+def get_subnet_servers(subnet_id):
+    """Get all servers for a specific subnet"""
+    servers = Server.query.filter_by(subnet_id=subnet_id).all()
+    return jsonify([{
+        'id': server.id,
+        'hostname': server.hostname,
+        'ip_address': server.ip_address
+    } for server in servers])
\ No newline at end of file
diff --git a/app/routes/auth.py b/app/routes/auth.py
index 2a41f8d..5330ea2 100644
--- a/app/routes/auth.py
+++ b/app/routes/auth.py
@@ -41,24 +41,19 @@ def register():
     
     if request.method == 'POST':
         email = request.form.get('email')
-        username = request.form.get('username')
         password = request.form.get('password')
         
         # Validation
-        if not email or not username or not password:
-            flash('All fields are required', 'danger')
+        if not email or not password:
+            flash('Email and password are required', 'danger')
             return render_template('auth/register.html', title='Register')
         
         if User.query.filter_by(email=email).first():
             flash('Email already registered', 'danger')
             return render_template('auth/register.html', title='Register')
-            
-        if User.query.filter_by(username=username).first():
-            flash('Username already taken', 'danger')
-            return render_template('auth/register.html', title='Register')
         
         # Create new user
-        user = User(email=email, username=username)
+        user = User(email=email)
         user.set_password(password)
         
         db.session.add(user)
diff --git a/app/routes/dashboard.py b/app/routes/dashboard.py
index 5e6b394..5caf064 100644
--- a/app/routes/dashboard.py
+++ b/app/routes/dashboard.py
@@ -129,30 +129,48 @@ def server_new():
 def server_edit(server_id):
     """Edit an existing server"""
     server = Server.query.get_or_404(server_id)
+    subnets = Subnet.query.all()
     
     if request.method == 'POST':
         hostname = request.form.get('hostname')
         ip_address = request.form.get('ip_address')
         subnet_id = request.form.get('subnet_id')
+        documentation = request.form.get('documentation', '')
         
         if not hostname or not ip_address or not subnet_id:
             flash('All fields are required', 'danger')
-            return redirect(url_for('dashboard.server_edit', server_id=server_id))
+            return render_template(
+                'dashboard/server_form.html',
+                title='Edit Server',
+                server=server,
+                subnets=subnets
+            )
         
         # Check if hostname changed and already exists
         if hostname != server.hostname and Server.query.filter_by(hostname=hostname).first():
             flash('Hostname already exists', 'danger')
-            return redirect(url_for('dashboard.server_edit', server_id=server_id))
+            return render_template(
+                'dashboard/server_form.html',
+                title='Edit Server',
+                server=server,
+                subnets=subnets
+            )
             
         # Check if IP changed and already exists
         if ip_address != server.ip_address and Server.query.filter_by(ip_address=ip_address).first():
             flash('IP address already exists', 'danger')
-            return redirect(url_for('dashboard.server_edit', server_id=server_id))
+            return render_template(
+                'dashboard/server_form.html',
+                title='Edit Server',
+                server=server,
+                subnets=subnets
+            )
         
         # Update server
         server.hostname = hostname
         server.ip_address = ip_address
         server.subnet_id = subnet_id
+        server.documentation = documentation
         
         db.session.commit()
         
@@ -160,9 +178,8 @@ def server_edit(server_id):
         return redirect(url_for('dashboard.server_view', server_id=server.id))
     
     # GET request - show form with current values
-    subnets = Subnet.query.all()
     return render_template(
-        'dashboard/server_edit.html',
+        'dashboard/server_form.html',
         title=f'Edit Server - {server.hostname}',
         server=server,
         subnets=subnets
@@ -277,62 +294,44 @@ def app_edit(app_id):
         server_id = request.form.get('server_id')
         documentation = request.form.get('documentation', '')
         
-        # Get port data from form
-        port_numbers = request.form.getlist('port_numbers[]')
-        protocols = request.form.getlist('protocols[]')
-        port_descriptions = request.form.getlist('port_descriptions[]')
+        if not name or not server_id:
+            flash('All required fields must be filled', 'danger')
+            return render_template(
+                'dashboard/app_form.html',
+                title='Edit Application',
+                app=app,
+                servers=servers
+            )
         
-        # Validate inputs
-        if not all([name, server_id]):
-            flash('All fields are required', 'danger')
-            return render_template('dashboard/app_form.html', 
-                                   title='Edit Application',
-                                   app=app,
-                                   servers=servers,
-                                   edit_mode=True)
+        # Check if name changed and already exists on the same server
+        existing_app = App.query.filter(App.name == name, 
+                                        App.server_id == server_id, 
+                                        App.id != app.id).first()
+        if existing_app:
+            flash('Application with this name already exists on the selected server', 'danger')
+            return render_template(
+                'dashboard/app_form.html',
+                title='Edit Application',
+                app=app,
+                servers=servers
+            )
         
-        # Update app
+        # Update application
         app.name = name
         app.server_id = server_id
         app.documentation = documentation
         
-        # Delete existing ports and recreate them
-        # This simplifies handling additions, deletions, and updates
-        Port.query.filter_by(app_id=app.id).delete()
+        db.session.commit()
         
-        # Add new ports
-        for i in range(len(port_numbers)):
-            if port_numbers[i] and port_numbers[i].strip():
-                try:
-                    port_num = int(port_numbers[i])
-                    
-                    # Get protocol and description, handling index errors
-                    protocol = protocols[i] if i < len(protocols) else 'TCP'
-                    description = port_descriptions[i] if i < len(port_descriptions) else ''
-                    
-                    new_port = Port(
-                        app_id=app.id,
-                        port_number=port_num,
-                        protocol=protocol,
-                        description=description
-                    )
-                    db.session.add(new_port)
-                except (ValueError, IndexError):
-                    continue
-        
-        try:
-            db.session.commit()
-            flash(f'Application {name} has been updated', 'success')
-            return redirect(url_for('dashboard.server_view', server_id=app.server_id))
-        except Exception as e:
-            db.session.rollback()
-            flash(f'Error updating application: {str(e)}', 'danger')
+        flash('Application updated successfully', 'success')
+        return redirect(url_for('dashboard.app_view', app_id=app.id))
     
-    return render_template('dashboard/app_form.html', 
-                           title='Edit Application',
-                           app=app,
-                           servers=servers,
-                           edit_mode=True)
+    return render_template(
+        'dashboard/app_form.html',
+        title=f'Edit Application - {app.name}',
+        app=app,
+        servers=servers
+    )
 
 @bp.route('/app/<int:app_id>/delete', methods=['POST'])
 @login_required
@@ -345,4 +344,40 @@ def app_delete(app_id):
     db.session.commit()
     
     flash('Application deleted successfully', 'success')
-    return redirect(url_for('dashboard.server_view', server_id=server_id))
\ No newline at end of file
+    return redirect(url_for('dashboard.server_view', server_id=server_id))
+
+@bp.route('/settings', methods=['GET', 'POST'])
+@login_required
+def settings():
+    """User settings page"""
+    if request.method == 'POST':
+        # Handle user settings update
+        current_password = request.form.get('current_password')
+        new_password = request.form.get('new_password')
+        confirm_password = request.form.get('confirm_password')
+        
+        # Validate inputs
+        if not current_password:
+            flash('Current password is required', 'danger')
+            return redirect(url_for('dashboard.settings'))
+            
+        if new_password != confirm_password:
+            flash('New passwords do not match', 'danger')
+            return redirect(url_for('dashboard.settings'))
+            
+        # Verify current password
+        if not current_user.check_password(current_password):
+            flash('Current password is incorrect', 'danger')
+            return redirect(url_for('dashboard.settings'))
+            
+        # Update password
+        current_user.set_password(new_password)
+        db.session.commit()
+        
+        flash('Password updated successfully', 'success')
+        return redirect(url_for('dashboard.settings'))
+        
+    return render_template(
+        'dashboard/settings.html',
+        title='User Settings'
+    )
\ No newline at end of file
diff --git a/app/routes/ipam.py b/app/routes/ipam.py
index b6ad807..fcd585a 100644
--- a/app/routes/ipam.py
+++ b/app/routes/ipam.py
@@ -192,4 +192,69 @@ def subnet_scan(subnet_id):
         db.session.rollback()
         flash(f'Error scanning subnet: {str(e)}', 'danger')
     
-    return redirect(url_for('ipam.subnet_view', subnet_id=subnet_id))
\ No newline at end of file
+    return redirect(url_for('ipam.subnet_view', subnet_id=subnet_id))
+
+@bp.route('/subnet/<int:subnet_id>/force-delete', methods=['POST'])
+@login_required
+def subnet_force_delete(subnet_id):
+    """Force delete a subnet and all its related servers and applications"""
+    subnet = Subnet.query.get_or_404(subnet_id)
+    
+    try:
+        # Get all servers to be deleted for reporting
+        servers = Server.query.filter_by(subnet_id=subnet_id).all()
+        server_count = len(servers)
+        
+        # This will cascade delete all related servers and their applications
+        db.session.delete(subnet)
+        db.session.commit()
+        
+        flash(f'Subnet {subnet.cidr} and {server_count} related servers were deleted successfully', 'success')
+        return redirect(url_for('dashboard.ipam_home'))
+    except Exception as e:
+        db.session.rollback()
+        flash(f'Error deleting subnet: {str(e)}', 'danger')
+        return redirect(url_for('dashboard.subnet_view', subnet_id=subnet_id))
+
+@bp.route('/subnet/create-ajax', methods=['POST'])
+@login_required
+def subnet_create_ajax():
+    """Create a subnet via AJAX"""
+    data = request.json
+    if not data:
+        return jsonify({'success': False, 'error': 'No data provided'})
+    
+    cidr = data.get('cidr')
+    location = data.get('location')
+    auto_scan = data.get('auto_scan', False)
+    
+    if not cidr or not location:
+        return jsonify({'success': False, 'error': 'CIDR and location are required'})
+    
+    # Validate CIDR
+    try:
+        network = ipaddress.ip_network(cidr, strict=False)
+    except ValueError as e:
+        return jsonify({'success': False, 'error': f'Invalid CIDR: {str(e)}'})
+    
+    # Create subnet
+    subnet = Subnet(
+        cidr=cidr,
+        location=location,
+        auto_scan=auto_scan,
+        active_hosts=json.dumps([])
+    )
+    
+    try:
+        db.session.add(subnet)
+        db.session.commit()
+        
+        return jsonify({
+            'success': True,
+            'subnet_id': subnet.id,
+            'cidr': subnet.cidr,
+            'location': subnet.location
+        })
+    except Exception as e:
+        db.session.rollback()
+        return jsonify({'success': False, 'error': str(e)})
\ No newline at end of file
diff --git a/app/scripts/__pycache__/db_seed.cpython-313.pyc b/app/scripts/__pycache__/db_seed.cpython-313.pyc
deleted file mode 100644
index 02a29fe..0000000
Binary files a/app/scripts/__pycache__/db_seed.cpython-313.pyc and /dev/null differ
diff --git a/app/static/css/custom.css b/app/static/css/custom.css
new file mode 100644
index 0000000..b7b12ff
--- /dev/null
+++ b/app/static/css/custom.css
@@ -0,0 +1,55 @@
+/* Collapsible cards customization */
+.accordion-button:not(.collapsed) {
+  background-color: rgba(32, 107, 196, 0.06);
+  color: #206bc4;
+}
+
+.accordion-button:focus {
+  box-shadow: none;
+}
+
+.markdown-content {
+  overflow-wrap: break-word;
+}
+
+/* Adjust spacing in application cards */
+.accordion-button .badge {
+  font-size: 0.7rem;
+  padding: 0.25em 0.5em;
+}
+
+/* Ensure icons are vertically centered */
+.accordion-button .ti {
+  vertical-align: middle;
+}
+
+/* Make sure markdown content has proper spacing */
+.markdown-content>*:first-child {
+  margin-top: 0;
+}
+
+.markdown-content>*:last-child {
+  margin-bottom: 0;
+}
+
+/* Custom styling for port badges in accordion headers */
+.accordion-button .badge {
+  background-color: #206bc4;
+  color: white;
+}
+
+/* Add a bit of hover effect to the accordion items */
+.accordion-item:hover {
+  background-color: rgba(32, 107, 196, 0.03);
+}
+
+/* Visual cue for the action buttons */
+.accordion-body .btn-outline-primary:hover {
+  background-color: #206bc4;
+  color: white;
+}
+
+.accordion-body .btn-outline-danger:hover {
+  background-color: #d63939;
+  color: white;
+}
\ No newline at end of file
diff --git a/app/static/css/markdown.css b/app/static/css/markdown.css
new file mode 100644
index 0000000..bbfcff9
--- /dev/null
+++ b/app/static/css/markdown.css
@@ -0,0 +1,195 @@
+/* Enhanced Markdown Styling */
+.markdown-content {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 1.6;
+  word-wrap: break-word;
+  color: #24292e;
+}
+
+.markdown-content h1,
+.markdown-content h2,
+.markdown-content h3,
+.markdown-content h4,
+.markdown-content h5,
+.markdown-content h6 {
+  margin-top: 24px;
+  margin-bottom: 16px;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+.markdown-content h1 {
+  font-size: 2em;
+  border-bottom: 1px solid #eaecef;
+  padding-bottom: .3em;
+}
+
+.markdown-content h2 {
+  font-size: 1.5em;
+  border-bottom: 1px solid #eaecef;
+  padding-bottom: .3em;
+}
+
+.markdown-content h3 {
+  font-size: 1.25em;
+}
+
+.markdown-content h4 {
+  font-size: 1em;
+}
+
+.markdown-content p {
+  margin-top: 0;
+  margin-bottom: 16px;
+}
+
+.markdown-content blockquote {
+  padding: 0 1em;
+  color: #6a737d;
+  border-left: 0.25em solid #dfe2e5;
+  margin: 0 0 16px 0;
+}
+
+.markdown-content pre {
+  padding: 16px;
+  overflow: auto;
+  font-size: 85%;
+  line-height: 1.45;
+  background-color: #f6f8fa;
+  border-radius: 3px;
+  margin-bottom: 16px;
+}
+
+.markdown-content code {
+  padding: 0.2em 0.4em;
+  margin: 0;
+  font-size: 85%;
+  background-color: rgba(27, 31, 35, 0.05);
+  border-radius: 3px;
+}
+
+.markdown-content pre code {
+  background-color: transparent;
+  padding: 0;
+}
+
+.markdown-content table {
+  border-spacing: 0;
+  border-collapse: collapse;
+  margin-bottom: 16px;
+  width: 100%;
+  overflow: auto;
+}
+
+.markdown-content table th,
+.markdown-content table td {
+  padding: 6px 13px;
+  border: 1px solid #dfe2e5;
+}
+
+.markdown-content table tr {
+  background-color: #fff;
+  border-top: 1px solid #c6cbd1;
+}
+
+.markdown-content table tr:nth-child(2n) {
+  background-color: #f6f8fa;
+}
+
+/* GitHub-style alerts */
+.markdown-alert {
+  padding: 0.5rem 1rem;
+  margin-bottom: 16px;
+  border-radius: 6px;
+}
+
+.markdown-alert p {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.markdown-alert p:first-of-type {
+  margin-top: 8px;
+}
+
+.markdown-alert-title {
+  font-weight: bold;
+  margin-bottom: 8px;
+}
+
+.markdown-alert-note {
+  background-color: #f1f8ff;
+  border-left: 4px solid #58a6ff;
+}
+
+.markdown-alert-tip {
+  background-color: #dafbe1;
+  border-left: 4px solid #2da44e;
+}
+
+.markdown-alert-important {
+  background-color: #fff8c5;
+  border-left: 4px solid #bf8700;
+}
+
+.markdown-alert-warning {
+  background-color: #fff8c5;
+  border-left: 4px solid #bf8700;
+}
+
+.markdown-alert-caution {
+  background-color: #ffebe9;
+  border-left: 4px solid #cf222e;
+}
+
+/* Add this to ensure consistent display of markdown content */
+.markdown-body {
+  color: inherit;
+  font-family: inherit;
+}
+
+.markdown-content {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  line-height: 1.6;
+  color: #24292e;
+  overflow-wrap: break-word;
+  padding: 0;
+}
+
+.markdown-content h1:first-child,
+.markdown-content h2:first-child,
+.markdown-content h3:first-child,
+.markdown-content h4:first-child,
+.markdown-content h5:first-child,
+.markdown-content h6:first-child {
+  margin-top: 0;
+}
+
+/* Additional styling for consistency in all views */
+.markdown-content pre,
+.markdown-body pre {
+  background-color: #f6f8fa;
+  border-radius: 3px;
+  padding: 16px;
+  overflow: auto;
+  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+  font-size: 85%;
+}
+
+.markdown-content code,
+.markdown-body code {
+  background-color: rgba(27, 31, 35, 0.05);
+  border-radius: 3px;
+  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+  font-size: 85%;
+  margin: 0;
+  padding: 0.2em 0.4em;
+}
+
+/* Make sure all GitHub-style alert boxes look the same */
+.markdown-alert {
+  padding: 8px 16px;
+  margin-bottom: 16px;
+  border-radius: 6px;
+}
\ No newline at end of file
diff --git a/app/templates/auth/register.html b/app/templates/auth/register.html
index 3cf110c..1654a5d 100644
--- a/app/templates/auth/register.html
+++ b/app/templates/auth/register.html
@@ -1,47 +1,46 @@
 {% extends "layout.html" %}
 
 {% block content %}
-<div class="container">
-  <div class="row justify-content-center">
-    <div class="col-md-6 col-lg-5">
-      <div class="card shadow-sm mt-5">
-        <div class="card-body p-5">
-          <div class="text-center mb-4">
-            <h2 class="card-title">Register</h2>
-            <p class="text-muted">Create a new account</p>
-          </div>
+<div class="container-narrow py-4">
+  <div class="card card-md">
+    <div class="card-body">
+      <h2 class="card-title text-center mb-4">Create New Account</h2>
 
-          {% with messages = get_flashed_messages(with_categories=true) %}
-          {% if messages %}
-          {% for category, message in messages %}
-          <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
-            {{ message }}
-            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-          </div>
-          {% endfor %}
-          {% endif %}
-          {% endwith %}
+      {% with messages = get_flashed_messages(with_categories=true) %}
+      {% if messages %}
+      {% for category, message in messages %}
+      <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
+        {{ message }}
+        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+      </div>
+      {% endfor %}
+      {% endif %}
+      {% endwith %}
 
-          <form method="POST" action="{{ url_for('auth.register') }}">
-            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
-            <div class="mb-3">
-              <label for="email" class="form-label">Email address</label>
-              <input type="email" class="form-control" id="email" name="email" required>
-            </div>
-            <div class="mb-3">
-              <label for="password" class="form-label">Password</label>
-              <input type="password" class="form-control" id="password" name="password" required>
-            </div>
-            <div class="mb-4">
-              <label for="password_confirm" class="form-label">Confirm Password</label>
-              <input type="password" class="form-control" id="password_confirm" name="password_confirm" required>
-            </div>
-            <button type="submit" class="btn btn-primary w-100">Register</button>
-          </form>
-
-          <div class="mt-4 text-center">
-            <p>Already have an account? <a href="{{ url_for('auth.login') }}">Login here</a></p>
-          </div>
+      <form method="POST" action="{{ url_for('auth.register') }}">
+        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+        <div class="mb-3">
+          <label class="form-label">Email address</label>
+          <input type="email" class="form-control" name="email" placeholder="your@email.com" required
+            autocomplete="username">
+        </div>
+        <div class="mb-3">
+          <label class="form-label">Password</label>
+          <input type="password" class="form-control" name="password" placeholder="Password" required
+            autocomplete="new-password">
+        </div>
+        <div class="form-footer">
+          <button type="submit" class="btn btn-primary w-100">Create Account</button>
+        </div>
+      </form>
+    </div>
+    <div class="hr-text">or</div>
+    <div class="card-body">
+      <div class="row">
+        <div class="col">
+          <a href="{{ url_for('auth.login') }}" class="btn w-100">
+            Login with existing account
+          </a>
         </div>
       </div>
     </div>
diff --git a/app/templates/dashboard/app_edit.html b/app/templates/dashboard/app_edit.html
index c207dc3..beea199 100644
--- a/app/templates/dashboard/app_edit.html
+++ b/app/templates/dashboard/app_edit.html
@@ -44,170 +44,130 @@
         </div>
         <div class="mb-3">
           <label class="form-label">Documentation</label>
-          <textarea class="form-control" name="documentation" rows="6"
+          <textarea class="form-control" name="documentation" rows="12"
             placeholder="Use Markdown for formatting">{{ app.documentation }}</textarea>
-          <small class="form-hint">Supports Markdown formatting</small>
+          <small class="form-hint">Supports Markdown formatting including GitHub-style alerts:</small>
+          <div class="mt-2 d-flex gap-2 flex-wrap">
+            <code>> [!NOTE] This is a note</code>
+            <code>> [!TIP] This is a tip</code>
+            <code>> [!IMPORTANT] Important info</code>
+            <code>> [!WARNING] Warning message</code>
+            <code>> [!CAUTION] Critical caution</code>
+          </div>
         </div>
 
         <!-- Port management section -->
         <div class="mb-3">
-          <label class="form-label">Application Ports</label>
-          <div id="ports-container">
-            {% if app.ports %}
-            {% for port in app.ports %}
-            <div class="port-entry mb-2 row">
-              <div class="col-4">
-                <input type="number" class="form-control" name="port_numbers[]" value="{{ port.port_number }}"
-                  placeholder="Port number" min="1" max="65535">
-              </div>
-              <div class="col-3">
-                <select class="form-select" name="protocols[]">
-                  <option value="TCP" {% if port.protocol=='TCP' %}selected{% endif %}>TCP</option>
-                  <option value="UDP" {% if port.protocol=='UDP' %}selected{% endif %}>UDP</option>
-                  <option value="HTTP" {% if port.protocol=='HTTP' %}selected{% endif %}>HTTP</option>
-                  <option value="HTTPS" {% if port.protocol=='HTTPS' %}selected{% endif %}>HTTPS</option>
-                </select>
-              </div>
-              <div class="col-4">
-                <input type="text" class="form-control" name="port_descriptions[]" value="{{ port.description }}"
-                  placeholder="Description">
-              </div>
-              <div class="col-1">
-                <button type="button" class="btn btn-outline-danger remove-port"><i class="ti ti-trash"></i></button>
-              </div>
-            </div>
-            {% endfor %}
-            {% else %}
-            <div class="port-entry mb-2 row">
-              <div class="col-4">
-                <input type="number" class="form-control" name="port_numbers[]" placeholder="Port number" min="1"
-                  max="65535">
-              </div>
-              <div class="col-3">
-                <select class="form-select" name="protocols[]">
-                  <option value="TCP">TCP</option>
-                  <option value="UDP">UDP</option>
-                  <option value="HTTP">HTTP</option>
-                  <option value="HTTPS">HTTPS</option>
-                </select>
-              </div>
-              <div class="col-4">
-                <input type="text" class="form-control" name="port_descriptions[]" placeholder="Description">
-              </div>
-              <div class="col-1">
-                <button type="button" class="btn btn-outline-danger remove-port"><i class="ti ti-trash"></i></button>
-              </div>
-            </div>
-            {% endif %}
+          <label class="form-label">Ports</label>
+          <div class="table-responsive">
+            <table class="table table-vcenter" id="ports-table">
+              <thead>
+                <tr>
+                  <th>Port Number</th>
+                  <th>Protocol</th>
+                  <th>Description</th>
+                  <th></th>
+                </tr>
+              </thead>
+              <tbody>
+                {% for port in app.ports %}
+                <tr>
+                  <td>
+                    <input type="number" name="port_id_{{ port.id }}" value="{{ port.port_number }}"
+                      class="form-control" min="1" max="65535">
+                  </td>
+                  <td>
+                    <select name="protocol_{{ port.id }}" class="form-select">
+                      <option value="TCP" {% if port.protocol=='TCP' %}selected{% endif %}>TCP</option>
+                      <option value="UDP" {% if port.protocol=='UDP' %}selected{% endif %}>UDP</option>
+                      <option value="SCTP" {% if port.protocol=='SCTP' %}selected{% endif %}>SCTP</option>
+                      <option value="OTHER" {% if port.protocol=='OTHER' %}selected{% endif %}>OTHER</option>
+                    </select>
+                  </td>
+                  <td>
+                    <input type="text" name="description_{{ port.id }}" value="{{ port.description }}"
+                      class="form-control" placeholder="Description">
+                  </td>
+                  <td>
+                    <button type="button" class="btn btn-sm btn-ghost-danger"
+                      onclick="removePermanentPort(this, {{ port.id }})">
+                      <span class="ti ti-trash"></span>
+                    </button>
+                  </td>
+                </tr>
+                {% endfor %}
+              </tbody>
+            </table>
           </div>
-          <div class="mt-2">
-            <button type="button" id="add-port" class="btn btn-sm btn-outline-primary">
-              <i class="ti ti-plus me-1"></i> Add Port
-            </button>
-            <button type="button" id="suggest-port" class="btn btn-sm btn-outline-secondary ms-2">
-              <i class="ti ti-bolt me-1"></i> Suggest Free Port
+
+          <input type="hidden" name="ports_to_delete" id="ports-to-delete" value="">
+
+          <div class="mt-3">
+            <button type="button" class="btn btn-sm btn-outline-primary" onclick="addPortRow()">
+              <span class="ti ti-plus me-1"></span> Add Port
             </button>
           </div>
         </div>
 
-        <div class="d-flex justify-content-between mt-4">
-          <a href="{{ url_for('dashboard.server_view', server_id=app.server_id) }}" class="btn btn-outline-secondary">
-            Cancel
-          </a>
-          <button type="submit" class="btn btn-primary">
-            Save Changes
-          </button>
+        <div class="form-footer">
+          <div class="d-flex">
+            <a href="{{ url_for('dashboard.app_view', app_id=app.id) }}" class="btn btn-link">Cancel</a>
+            <button type="submit" class="btn btn-primary ms-auto">Save Changes</button>
+          </div>
         </div>
       </form>
     </div>
   </div>
 </div>
+
+{% block extra_js %}
+<script>
+  let newPortIndex = 0;
+  const portsToDelete = [];
+
+  function addPortRow() {
+    const tbody = document.querySelector('#ports-table tbody');
+    const tr = document.createElement('tr');
+    tr.classList.add('new-port-row');
+    tr.innerHTML = `
+      <td>
+        <input type="number" name="new_port_${newPortIndex}" class="form-control" 
+               min="1" max="65535" placeholder="Port number">
+      </td>
+      <td>
+        <select name="new_protocol_${newPortIndex}" class="form-select">
+          <option value="TCP">TCP</option>
+          <option value="UDP">UDP</option>
+          <option value="SCTP">SCTP</option>
+          <option value="OTHER">OTHER</option>
+        </select>
+      </td>
+      <td>
+        <input type="text" name="new_description_${newPortIndex}" class="form-control" 
+               placeholder="Description">
+      </td>
+      <td>
+        <button type="button" class="btn btn-sm btn-ghost-danger" onclick="removePortRow(this)">
+          <span class="ti ti-trash"></span>
+        </button>
+      </td>
+    `;
+    tbody.appendChild(tr);
+    newPortIndex++;
+  }
+
+  function removePortRow(button) {
+    const row = button.closest('tr');
+    row.remove();
+  }
+
+  function removePermanentPort(button, portId) {
+    const row = button.closest('tr');
+    row.remove();
+    portsToDelete.push(portId);
+    document.getElementById('ports-to-delete').value = portsToDelete.join(',');
+  }
+</script>
 {% endblock %}
 
-{% block scripts %}
-<script>
-  document.addEventListener('DOMContentLoaded', function () {
-    const portsContainer = document.getElementById('ports-container');
-    const addPortButton = document.getElementById('add-port');
-    const suggestPortButton = document.getElementById('suggest-port');
-
-    // Add new port field
-    addPortButton.addEventListener('click', function () {
-      const portEntry = document.createElement('div');
-      portEntry.className = 'port-entry mb-2 row';
-
-      portEntry.innerHTML = `
-        <div class="col-4">
-          <input type="number" class="form-control" name="port_numbers[]" placeholder="Port number" min="1" max="65535">
-        </div>
-        <div class="col-3">
-          <select class="form-select" name="protocols[]">
-            <option value="TCP">TCP</option>
-            <option value="UDP">UDP</option>
-            <option value="HTTP">HTTP</option>
-            <option value="HTTPS">HTTPS</option>
-          </select>
-        </div>
-        <div class="col-4">
-          <input type="text" class="form-control" name="port_descriptions[]" placeholder="Description">
-        </div>
-        <div class="col-1">
-          <button type="button" class="btn btn-outline-danger remove-port"><i class="ti ti-trash"></i></button>
-        </div>
-      `;
-      portsContainer.appendChild(portEntry);
-
-      // Add event listener to the new remove button
-      const removeButton = portEntry.querySelector('.remove-port');
-      removeButton.addEventListener('click', function () {
-        portEntry.remove();
-      });
-    });
-
-    // Add event listeners to initial remove buttons
-    document.querySelectorAll('.remove-port').forEach(button => {
-      button.addEventListener('click', function () {
-        this.closest('.port-entry').remove();
-      });
-    });
-
-    // Suggest a free port
-    suggestPortButton.addEventListener('click', async function () {
-      try {
-        const serverId = document.querySelector('select[name="server_id"]').value;
-        if (!serverId) {
-          alert('Please select a server first');
-          return;
-        }
-
-        const response = await fetch(`/api/servers/${serverId}/suggest_port`);
-        if (!response.ok) throw new Error('Failed to get port suggestion');
-
-        const data = await response.json();
-        if (data.port) {
-          // Find the first empty port input or add a new one
-          let portInput = document.querySelector('input[name="port_numbers[]"]:not([value])');
-          if (!portInput) {
-            addPortButton.click();
-            portInput = document.querySelector('input[name="port_numbers[]"]:not([value])');
-          }
-
-          portInput.value = data.port;
-
-          // Copy to clipboard
-          navigator.clipboard.writeText(data.port.toString())
-            .then(() => {
-              showNotification('Port copied to clipboard!', 'success');
-            })
-            .catch(err => {
-              console.error('Failed to copy: ', err);
-            });
-        }
-      } catch (error) {
-        console.error('Error:', error);
-        showNotification('Failed to suggest port', 'danger');
-      }
-    });
-  });
-</script>
 {% endblock %}
\ No newline at end of file
diff --git a/app/templates/dashboard/app_form.html b/app/templates/dashboard/app_form.html
index d104542..e8ddabe 100644
--- a/app/templates/dashboard/app_form.html
+++ b/app/templates/dashboard/app_form.html
@@ -6,7 +6,7 @@
     <div class="row align-items-center">
       <div class="col">
         <h2 class="page-title">
-          Add New Application
+          {% if app %}Edit Application{% else %}Add New Application{% endif %}
         </h2>
       </div>
     </div>
@@ -25,156 +25,85 @@
       {% endif %}
       {% endwith %}
 
-      <form method="POST" action="{{ url_for('dashboard.app_new') }}">
+      <form method="POST"
+        action="{% if app %}{{ url_for('dashboard.app_edit', app_id=app.id) }}{% else %}{{ url_for('dashboard.app_new') }}{% endif %}">
         <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
         <div class="mb-3">
           <label class="form-label required">Application Name</label>
-          <input type="text" class="form-control" name="name" required>
+          <input type="text" class="form-control" name="name" required value="{% if app %}{{ app.name }}{% endif %}">
         </div>
         <div class="mb-3">
           <label class="form-label required">Server</label>
           <select class="form-select" name="server_id" required>
             <option value="">Select a server</option>
             {% for server in servers %}
-            <option value="{{ server.id }}">{{ server.hostname }} ({{ server.ip_address }})</option>
+            <option value="{{ server.id }}" {% if app and app.server_id==server.id %}selected {% elif server_id and
+              server.id|string==server_id|string %}selected{% endif %}>
+              {{ server.hostname }} ({{ server.ip_address }})
+            </option>
             {% endfor %}
           </select>
         </div>
         <div class="mb-3">
           <label class="form-label">Documentation</label>
-          <textarea class="form-control" name="documentation" rows="6"
-            placeholder="Use Markdown for formatting"></textarea>
-          <small class="form-hint">Supports Markdown formatting</small>
+          <textarea class="form-control" name="documentation"
+            rows="10">{% if app %}{{ app.documentation }}{% endif %}</textarea>
+          <div class="form-text">Markdown is supported</div>
         </div>
-
-        <!-- Port management section -->
-        <div class="mb-3">
-          <label class="form-label">Application Ports</label>
-          <div id="ports-container">
-            <div class="port-entry mb-2 row">
-              <div class="col-4">
-                <input type="number" class="form-control" name="port_numbers[]" placeholder="Port number" min="1"
-                  max="65535">
-              </div>
-              <div class="col-3">
-                <select class="form-select" name="protocols[]">
-                  <option value="TCP">TCP</option>
-                  <option value="UDP">UDP</option>
-                  <option value="HTTP">HTTP</option>
-                  <option value="HTTPS">HTTPS</option>
-                </select>
-              </div>
-              <div class="col-4">
-                <input type="text" class="form-control" name="port_descriptions[]" placeholder="Description">
-              </div>
-              <div class="col-1">
-                <button type="button" class="btn btn-outline-danger remove-port"><i class="ti ti-trash"></i></button>
-              </div>
-            </div>
-          </div>
-          <div class="mt-2">
-            <button type="button" class="btn btn-outline-primary btn-sm" id="add-port">
-              <i class="ti ti-plus me-1"></i> Add Port
-            </button>
-            <button type="button" class="btn btn-outline-secondary btn-sm ms-2" id="suggest-port">
-              <i class="ti ti-bulb me-1"></i> Suggest Free Port
-            </button>
-          </div>
-        </div>
-
         <div class="form-footer">
-          <button type="submit" class="btn btn-primary">Save Application</button>
-          <a href="{{ url_for('dashboard.dashboard_home') }}" class="btn btn-outline-secondary ms-2">Cancel</a>
+          <button type="submit" class="btn btn-primary">Save</button>
+          {% if app %}
+          <a href="{{ url_for('dashboard.app_view', app_id=app.id) }}" class="btn btn-outline-secondary ms-2">Cancel</a>
+          {% else %}
+          <a href="{% if server_id %}{{ url_for('dashboard.server_view', server_id=server_id) }}{% else %}{{ url_for('dashboard.dashboard_home') }}{% endif %}"
+            class="btn btn-outline-secondary ms-2">Cancel</a>
+          {% endif %}
         </div>
       </form>
     </div>
   </div>
 </div>
+
+{% block extra_js %}
+<script>
+  let portRowIndex = 1;
+
+  function addPortRow() {
+    const tbody = document.querySelector('#ports-table tbody');
+    const tr = document.createElement('tr');
+    tr.classList.add('port-row');
+    tr.innerHTML = `
+      <td>
+        <input type="number" name="port_number_${portRowIndex}" class="form-control" 
+               min="1" max="65535" placeholder="Port number">
+      </td>
+      <td>
+        <select name="protocol_${portRowIndex}" class="form-select">
+          <option value="TCP">TCP</option>
+          <option value="UDP">UDP</option>
+          <option value="SCTP">SCTP</option>
+          <option value="OTHER">OTHER</option>
+        </select>
+      </td>
+      <td>
+        <input type="text" name="description_${portRowIndex}" class="form-control" 
+               placeholder="Description">
+      </td>
+      <td>
+        <button type="button" class="btn btn-sm btn-ghost-danger" onclick="removePortRow(this)">
+          <span class="ti ti-trash"></span>
+        </button>
+      </td>
+    `;
+    tbody.appendChild(tr);
+    portRowIndex++;
+  }
+
+  function removePortRow(button) {
+    const row = button.closest('tr');
+    row.remove();
+  }
+</script>
 {% endblock %}
 
-{% block scripts %}
-<script>
-  document.addEventListener('DOMContentLoaded', function () {
-    const portsContainer = document.getElementById('ports-container');
-    const addPortButton = document.getElementById('add-port');
-    const suggestPortButton = document.getElementById('suggest-port');
-
-    // Add a new port field
-    addPortButton.addEventListener('click', function () {
-      const portEntry = document.createElement('div');
-      portEntry.className = 'port-entry mb-2 row';
-      portEntry.innerHTML = `
-        <div class="col-4">
-          <input type="number" class="form-control" name="port_numbers[]" placeholder="Port number" min="1" max="65535">
-        </div>
-        <div class="col-3">
-          <select class="form-select" name="protocols[]">
-            <option value="TCP">TCP</option>
-            <option value="UDP">UDP</option>
-            <option value="HTTP">HTTP</option>
-            <option value="HTTPS">HTTPS</option>
-          </select>
-        </div>
-        <div class="col-4">
-          <input type="text" class="form-control" name="port_descriptions[]" placeholder="Description">
-        </div>
-        <div class="col-1">
-          <button type="button" class="btn btn-outline-danger remove-port"><i class="ti ti-trash"></i></button>
-        </div>
-      `;
-      portsContainer.appendChild(portEntry);
-
-      // Add event listener to the new remove button
-      const removeButton = portEntry.querySelector('.remove-port');
-      removeButton.addEventListener('click', function () {
-        portEntry.remove();
-      });
-    });
-
-    // Add event listeners to initial remove buttons
-    document.querySelectorAll('.remove-port').forEach(button => {
-      button.addEventListener('click', function () {
-        this.closest('.port-entry').remove();
-      });
-    });
-
-    // Suggest a free port
-    suggestPortButton.addEventListener('click', async function () {
-      try {
-        const serverId = document.querySelector('select[name="server_id"]').value;
-        if (!serverId) {
-          alert('Please select a server first');
-          return;
-        }
-
-        const response = await fetch(`/api/servers/${serverId}/suggest_port`);
-        if (!response.ok) throw new Error('Failed to get port suggestion');
-
-        const data = await response.json();
-        if (data.port) {
-          // Find the first empty port input or add a new one
-          let portInput = document.querySelector('input[name="port_numbers[]"]:not([value])');
-          if (!portInput) {
-            addPortButton.click();
-            portInput = document.querySelector('input[name="port_numbers[]"]:not([value])');
-          }
-
-          portInput.value = data.port;
-
-          // Copy to clipboard
-          navigator.clipboard.writeText(data.port.toString())
-            .then(() => {
-              showNotification('Port copied to clipboard!', 'success');
-            })
-            .catch(err => {
-              console.error('Failed to copy: ', err);
-            });
-        }
-      } catch (error) {
-        console.error('Error:', error);
-        showNotification('Failed to suggest port', 'danger');
-      }
-    });
-  });
-</script>
 {% endblock %}
\ No newline at end of file
diff --git a/app/templates/dashboard/app_view.html b/app/templates/dashboard/app_view.html
index f3db2ad..ed7b910 100644
--- a/app/templates/dashboard/app_view.html
+++ b/app/templates/dashboard/app_view.html
@@ -1,26 +1,223 @@
-<!-- Documentation section -->
-<div class="card mt-3">
-  <div class="card-header">
-    <h3 class="card-title">Documentation</h3>
-  </div>
-  <div class="card-body markdown-content">
-    {% if app.documentation %}
-    {{ app.documentation|markdown|safe }}
-    {% else %}
-    <div class="empty">
-      <div class="empty-icon">
-        <span class="ti ti-file-text"></span>
+{% extends "layout.html" %}
+
+{% block content %}
+<div class="container-xl">
+  <div class="page-header d-print-none">
+    <div class="row align-items-center">
+      <div class="col">
+        <div class="page-pretitle">
+          Application Details
+        </div>
+        <h2 class="page-title">
+          {{ app.name }}
+        </h2>
       </div>
-      <p class="empty-title">No documentation available</p>
-      <p class="empty-subtitle text-muted">
-        Add documentation to this application to keep track of important information.
-      </p>
-      <div class="empty-action">
-        <a href="{{ url_for('dashboard.app_edit', app_id=app.id) }}" class="btn btn-primary">
-          <span class="ti ti-edit me-2"></span> Add Documentation
-        </a>
+      <div class="col-auto ms-auto">
+        <div class="btn-list">
+          <a href="{{ url_for('dashboard.app_edit', app_id=app.id) }}" class="btn btn-primary">
+            <span class="ti ti-edit me-2"></span>Edit Application
+          </a>
+          <button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteAppModal">
+            <span class="ti ti-trash me-2"></span>Delete
+          </button>
+        </div>
       </div>
     </div>
-    {% endif %}
   </div>
-</div>
\ No newline at end of file
+
+  <div class="row mt-3">
+    <div class="col-md-4">
+      <!-- Basic Information -->
+      <div class="card">
+        <div class="card-header">
+          <h3 class="card-title">Basic Information</h3>
+        </div>
+        <div class="card-body">
+          <div class="mb-3">
+            <div class="form-label">Server</div>
+            <div>
+              <a href="{{ url_for('dashboard.server_view', server_id=server.id) }}">
+                {{ server.hostname }}
+              </a>
+              ({{ server.ip_address }})
+            </div>
+          </div>
+          <div class="mb-3">
+            <div class="form-label">Created</div>
+            <div>{{ app.created_at.strftime('%Y-%m-%d %H:%M') }}</div>
+          </div>
+          <div class="mb-3">
+            <div class="form-label">Last Updated</div>
+            <div>{{ app.updated_at.strftime('%Y-%m-%d %H:%M') }}</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Ports -->
+      <div class="card mt-3">
+        <div class="card-header">
+          <h3 class="card-title">Ports</h3>
+          <div class="card-actions">
+            <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addPortModal">
+              <span class="ti ti-plus me-1"></span> Add Port
+            </button>
+          </div>
+        </div>
+        <div class="card-body">
+          {% if app.ports %}
+          <div class="table-responsive">
+            <table class="table table-vcenter">
+              <thead>
+                <tr>
+                  <th>Port</th>
+                  <th>Protocol</th>
+                  <th>Description</th>
+                  <th class="w-1"></th>
+                </tr>
+              </thead>
+              <tbody>
+                {% for port in app.ports %}
+                <tr>
+                  <td>{{ port.port_number }}</td>
+                  <td>{{ port.protocol }}</td>
+                  <td>{{ port.description or 'No description' }}</td>
+                  <td>
+                    <a href="#" data-bs-toggle="modal" data-bs-target="#deletePortModal{{ port.id }}"
+                      class="btn btn-sm btn-ghost-danger">
+                      <span class="ti ti-trash"></span>
+                    </a>
+                  </td>
+                </tr>
+                {% endfor %}
+              </tbody>
+            </table>
+          </div>
+          {% else %}
+          <div class="empty">
+            <div class="empty-icon">
+              <span class="ti ti-plug"></span>
+            </div>
+            <p class="empty-title">No ports configured</p>
+            <p class="empty-subtitle text-muted">
+              Add port information to track which ports this application uses.
+            </p>
+            <div class="empty-action">
+              <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addPortModal">
+                <span class="ti ti-plus me-2"></span> Add Port
+              </button>
+            </div>
+          </div>
+          {% endif %}
+        </div>
+      </div>
+    </div>
+
+    <div class="col-md-8">
+      <!-- Documentation section - ENHANCED -->
+      <div class="card">
+        <div class="card-header">
+          <h3 class="card-title">Documentation</h3>
+        </div>
+        <div class="card-body markdown-content">
+          {% if app.documentation %}
+          {{ app.documentation|markdown|safe }}
+          {% else %}
+          <div class="empty">
+            <div class="empty-icon">
+              <span class="ti ti-file-text"></span>
+            </div>
+            <p class="empty-title">No documentation available</p>
+            <p class="empty-subtitle text-muted">
+              Add documentation to this application to keep track of important information.
+            </p>
+            <div class="empty-action">
+              <a href="{{ url_for('dashboard.app_edit', app_id=app.id) }}" class="btn btn-primary">
+                <span class="ti ti-edit me-2"></span> Add Documentation
+              </a>
+            </div>
+          </div>
+          {% endif %}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Add Port Modal -->
+<div class="modal" id="addPortModal" tabindex="-1">
+  <div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content">
+      <form method="POST" action="{{ url_for('api.add_port', app_id=app.id) }}">
+        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+        <div class="modal-header">
+          <h5 class="modal-title">Add Port</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <div class="mb-3">
+            <label class="form-label required">Port Number</label>
+            <input type="number" class="form-control" name="port_number" required min="1" max="65535">
+          </div>
+          <div class="mb-3">
+            <label class="form-label required">Protocol</label>
+            <select class="form-select" name="protocol" required>
+              <option value="TCP">TCP</option>
+              <option value="UDP">UDP</option>
+              <option value="SCTP">SCTP</option>
+              <option value="OTHER">OTHER</option>
+            </select>
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Description</label>
+            <input type="text" class="form-control" name="description" placeholder="What is this port used for?">
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+          <button type="submit" class="btn btn-primary">Add Port</button>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+
+<!-- Delete App Modal -->
+<div class="modal modal-blur fade" id="deleteAppModal" tabindex="-1">
+  <div class="modal-dialog modal-sm modal-dialog-centered">
+    <div class="modal-content">
+      <div class="modal-body">
+        <div class="modal-title">Are you sure?</div>
+        <div>This will permanently delete the application "{{ app.name }}" and all its ports.</div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+        <form method="POST" action="{{ url_for('dashboard.app_delete', app_id=app.id) }}">
+          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+          <button type="submit" class="btn btn-danger">Delete Application</button>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Delete Port Modals -->
+{% for port in app.ports %}
+<div class="modal modal-blur fade" id="deletePortModal{{ port.id }}" tabindex="-1">
+  <div class="modal-dialog modal-sm modal-dialog-centered">
+    <div class="modal-content">
+      <div class="modal-body">
+        <div class="modal-title">Are you sure?</div>
+        <div>This will delete port {{ port.port_number }}/{{ port.protocol }}.</div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+        <form method="POST" action="{{ url_for('api.delete_port', port_id=port.id) }}">
+          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+          <button type="submit" class="btn btn-danger">Delete Port</button>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+{% endfor %}
+{% endblock %}
\ No newline at end of file
diff --git a/app/templates/dashboard/server_form.html b/app/templates/dashboard/server_form.html
index 075c6ba..73d8fcf 100644
--- a/app/templates/dashboard/server_form.html
+++ b/app/templates/dashboard/server_form.html
@@ -6,7 +6,7 @@
     <div class="row align-items-center">
       <div class="col">
         <h2 class="page-title">
-          Add New Server
+          {% if server %}Edit Server{% else %}Add New Server{% endif %}
         </h2>
       </div>
     </div>
@@ -25,37 +25,144 @@
       {% endif %}
       {% endwith %}
 
-      <form method="POST" action="{{ url_for('dashboard.server_new') }}">
+      <form method="POST"
+        action="{% if server %}{{ url_for('dashboard.server_edit', server_id=server.id) }}{% else %}{{ url_for('dashboard.server_new') }}{% endif %}">
         <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
         <div class="mb-3">
           <label class="form-label required">Hostname</label>
-          <input type="text" class="form-control" name="hostname" required>
+          <input type="text" class="form-control" name="hostname" required
+            value="{% if server %}{{ server.hostname }}{% endif %}">
         </div>
         <div class="mb-3">
           <label class="form-label required">IP Address</label>
-          <input type="text" class="form-control" name="ip_address" placeholder="192.168.1.10" required>
+          <input type="text" class="form-control" name="ip_address" placeholder="192.168.1.10" required
+            value="{% if server %}{{ server.ip_address }}{% endif %}">
         </div>
         <div class="mb-3">
           <label class="form-label required">Subnet</label>
-          <select class="form-select" name="subnet_id" required>
-            <option value="">Select a subnet</option>
-            {% for subnet in subnets %}
-            <option value="{{ subnet.id }}">{{ subnet.cidr }} ({{ subnet.location }})</option>
-            {% endfor %}
-          </select>
+          <div class="input-group">
+            <select class="form-select" name="subnet_id" required id="subnet-select">
+              <option value="">Select a subnet</option>
+              {% for subnet in subnets %}
+              <option value="{{ subnet.id }}" {% if server and server.subnet_id==subnet.id %}selected{% endif %}>
+                {{ subnet.cidr }} ({{ subnet.location }})
+              </option>
+              {% endfor %}
+            </select>
+            <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal"
+              data-bs-target="#quickSubnetModal">
+              <span class="ti ti-plus"></span>
+            </button>
+          </div>
         </div>
         <div class="mb-3">
           <label class="form-label">Documentation</label>
-          <textarea class="form-control" name="documentation" rows="6"
-            placeholder="Use Markdown for formatting"></textarea>
-          <small class="form-hint">Supports Markdown formatting</small>
+          <textarea class="form-control" name="documentation"
+            rows="10">{% if server %}{{ server.documentation }}{% endif %}</textarea>
+          <div class="form-text">Markdown is supported</div>
         </div>
-        <div class="d-flex justify-content-end">
-          <a href="{{ url_for('dashboard.server_list') }}" class="btn btn-link me-2">Cancel</a>
-          <button type="submit" class="btn btn-primary">Save Server</button>
+        <div class="form-footer">
+          <button type="submit" class="btn btn-primary">Save</button>
+          {% if server %}
+          <a href="{{ url_for('dashboard.server_view', server_id=server.id) }}"
+            class="btn btn-outline-secondary ms-2">Cancel</a>
+          {% else %}
+          <a href="{{ url_for('dashboard.dashboard_home') }}" class="btn btn-outline-secondary ms-2">Cancel</a>
+          {% endif %}
         </div>
       </form>
     </div>
   </div>
 </div>
+
+<!-- Quick Subnet Creation Modal -->
+<div class="modal fade" id="quickSubnetModal" tabindex="-1" aria-labelledby="quickSubnetModalLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="quickSubnetModalLabel">Quick Subnet Creation</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <form id="quickSubnetForm">
+          <div class="mb-3">
+            <label class="form-label required">IP Address</label>
+            <input type="text" class="form-control" id="subnet-ip" placeholder="192.168.1.0" required>
+          </div>
+          <div class="mb-3">
+            <label class="form-label required">Prefix</label>
+            <select class="form-select" id="subnet-prefix" required>
+              {% for i in range(8, 31) %}
+              <option value="{{ i }}" {% if i==24 %}selected{% endif %}>{{ i }}</option>
+              {% endfor %}
+            </select>
+          </div>
+          <div class="mb-3">
+            <label class="form-label required">Location</label>
+            <input type="text" class="form-control" id="subnet-location" required>
+          </div>
+        </form>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+        <button type="button" class="btn btn-primary" id="createSubnetBtn">Create</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Add this JavaScript at the end -->
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    const createSubnetBtn = document.getElementById('createSubnetBtn');
+
+    createSubnetBtn.addEventListener('click', function () {
+      const ip = document.getElementById('subnet-ip').value;
+      const prefix = document.getElementById('subnet-prefix').value;
+      const location = document.getElementById('subnet-location').value;
+
+      // Validate inputs
+      if (!ip || !prefix || !location) {
+        alert('All fields are required');
+        return;
+      }
+
+      // Create the subnet via AJAX
+      fetch('/ipam/subnet/create-ajax', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-CSRFToken': document.querySelector('input[name="csrf_token"]').value
+        },
+        body: JSON.stringify({
+          cidr: `${ip}/${prefix}`,
+          location: location,
+          auto_scan: false
+        })
+      })
+        .then(response => response.json())
+        .then(data => {
+          if (data.success) {
+            // Add the new subnet to the dropdown
+            const selectElement = document.getElementById('subnet-select');
+            const option = document.createElement('option');
+            option.value = data.subnet_id;
+            option.text = `${data.cidr} (${data.location})`;
+            option.selected = true;
+            selectElement.appendChild(option);
+
+            // Close the modal
+            const modal = bootstrap.Modal.getInstance(document.getElementById('quickSubnetModal'));
+            modal.hide();
+          } else {
+            alert(data.error || 'Failed to create subnet');
+          }
+        })
+        .catch(error => {
+          console.error('Error:', error);
+          alert('An error occurred. Please try again.');
+        });
+    });
+  });
+</script>
 {% endblock %}
\ No newline at end of file
diff --git a/app/templates/dashboard/server_view.html b/app/templates/dashboard/server_view.html
index 5629817..596d0ca 100644
--- a/app/templates/dashboard/server_view.html
+++ b/app/templates/dashboard/server_view.html
@@ -12,13 +12,13 @@
           {{ server.hostname }}
         </h2>
       </div>
-      <div class="col-auto ms-auto d-print-none">
+      <div class="col-auto ms-auto">
         <div class="btn-list">
           <a href="{{ url_for('dashboard.server_edit', server_id=server.id) }}" class="btn btn-primary">
-            <i class="ti ti-edit me-1"></i> Edit
+            <span class="ti ti-edit me-2"></span>Edit Server
           </a>
-          <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteServerModal">
-            <i class="ti ti-trash me-1"></i> Delete
+          <button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteServerModal">
+            <span class="ti ti-trash me-2"></span>Delete
           </button>
         </div>
       </div>
@@ -27,28 +27,29 @@
 
   <div class="row mt-3">
     <div class="col-md-4">
+      <!-- Server Information -->
       <div class="card">
         <div class="card-header">
-          <h3 class="card-title">Server Information</h3>
+          <h3 class="card-title">Basic Information</h3>
         </div>
         <div class="card-body">
-          <dl class="row">
-            <dt class="col-5">IP Address:</dt>
-            <dd class="col-7">{{ server.ip_address }}</dd>
-
-            <dt class="col-5">Subnet:</dt>
-            <dd class="col-7">
-              <a href="{{ url_for('ipam.subnet_view', subnet_id=server.subnet.id) }}">
+          <div class="mb-3">
+            <div class="form-label">IP Address</div>
+            <div>{{ server.ip_address }}</div>
+          </div>
+          <div class="mb-3">
+            <div class="form-label">Subnet</div>
+            <div>
+              <a href="{{ url_for('ipam.subnet_view', subnet_id=server.subnet_id) }}">
                 {{ server.subnet.cidr }}
               </a>
-            </dd>
-
-            <dt class="col-5">Location:</dt>
-            <dd class="col-7">{{ server.subnet.location }}</dd>
-
-            <dt class="col-5">Created:</dt>
-            <dd class="col-7">{{ server.created_at.strftime('%Y-%m-%d') }}</dd>
-          </dl>
+              ({{ server.subnet.location }})
+            </div>
+          </div>
+          <div class="mb-3">
+            <div class="form-label">Scan Status</div>
+            <div>{{ server.last_scan or 'Not scanned yet' }}</div>
+          </div>
         </div>
       </div>
 
@@ -101,70 +102,8 @@
     </div>
 
     <div class="col-md-8">
-      <!-- Applications -->
-      <div class="card">
-        <div class="card-header">
-          <h3 class="card-title">Applications</h3>
-          <div class="card-actions">
-            <a href="{{ url_for('dashboard.app_new', server_id=server.id) }}" class="btn btn-primary">
-              <span class="ti ti-plus me-2"></span> Add Application
-            </a>
-          </div>
-        </div>
-        <div class="card-body">
-          {% if server.apps %}
-          <div class="row row-cards">
-            {% for app in server.apps %}
-            <div class="col-md-6 col-lg-4">
-              <div class="card">
-                <div class="card-body">
-                  <h3 class="card-title">
-                    <a href="{{ url_for('dashboard.app_view', app_id=app.id) }}">{{ app.name }}</a>
-                  </h3>
-                  {% if app.ports %}
-                  <div class="mt-2">
-                    <span class="badge bg-blue me-1">Ports:</span>
-                    {% for port in app.ports %}
-                    <span class="badge bg-azure me-1">{{ port.port_number }}/{{ port.protocol }}</span>
-                    {% endfor %}
-                  </div>
-                  {% endif %}
-                  {% if app.documentation %}
-                  <div class="mt-3">
-                    <h5>Documentation</h5>
-                    <div class="markdown-body">
-                      {{ app.documentation|markdown|safe }}
-                    </div>
-                  </div>
-                  {% else %}
-                  <div class="text-muted">No documentation available</div>
-                  {% endif %}
-                </div>
-              </div>
-            </div>
-            {% endfor %}
-          </div>
-          {% else %}
-          <div class="empty">
-            <div class="empty-icon">
-              <i class="ti ti-apps"></i>
-            </div>
-            <p class="empty-title">No applications found</p>
-            <p class="empty-subtitle text-muted">
-              This server doesn't have any applications yet.
-            </p>
-            <div class="empty-action">
-              <a href="{{ url_for('dashboard.app_new', server_id=server.id) }}" class="btn btn-primary">
-                <i class="ti ti-plus me-1"></i> Add Application
-              </a>
-            </div>
-          </div>
-          {% endif %}
-        </div>
-      </div>
-
       <!-- Documentation section -->
-      <div class="card mt-3">
+      <div class="card">
         <div class="card-header">
           <h3 class="card-title">Documentation</h3>
         </div>
@@ -189,25 +128,103 @@
           {% endif %}
         </div>
       </div>
+
+      <!-- Applications section with collapsible cards -->
+      <div class="card mt-3">
+        <div class="card-header">
+          <h3 class="card-title">Applications</h3>
+          <div class="card-actions">
+            <a href="{{ url_for('dashboard.app_new', server_id=server.id) }}" class="btn btn-primary me-2">
+              <span class="ti ti-plus me-2"></span> Add Application
+            </a>
+            <button class="btn btn-outline-primary" id="toggle-all-apps">
+              <span class="ti ti-chevrons-down me-1"></span> <span id="toggle-text">Expand All</span>
+            </button>
+          </div>
+        </div>
+        <div class="card-body">
+          {% if server.apps %}
+          <div class="accordion" id="accordionApps">
+            {% for app in server.apps %}
+            <div class="accordion-item">
+              <h2 class="accordion-header" id="heading-{{ app.id }}">
+                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                  data-bs-target="#collapse-{{ app.id }}" aria-expanded="false" aria-controls="collapse-{{ app.id }}">
+                  <div class="d-flex justify-content-between align-items-center w-100 me-2">
+                    <span>{{ app.name }}</span>
+                    {% if app.ports %}
+                    <div>
+                      {% for port in app.ports %}
+                      <span class="badge bg-azure me-1">{{ port.port_number }}/{{ port.protocol }}</span>
+                      {% endfor %}
+                    </div>
+                    {% endif %}
+                  </div>
+                </button>
+              </h2>
+              <div id="collapse-{{ app.id }}" class="accordion-collapse collapse" aria-labelledby="heading-{{ app.id }}"
+                data-bs-parent="#accordionApps">
+                <div class="accordion-body">
+                  <div class="d-flex justify-content-end mb-3">
+                    <a href="{{ url_for('dashboard.app_view', app_id=app.id) }}"
+                      class="btn btn-sm btn-outline-primary me-2">
+                      <span class="ti ti-eye me-1"></span> View
+                    </a>
+                    <a href="{{ url_for('dashboard.app_edit', app_id=app.id) }}"
+                      class="btn btn-sm btn-outline-primary me-2">
+                      <span class="ti ti-edit me-1"></span> Edit
+                    </a>
+                    <button class="btn btn-sm btn-outline-danger" onclick="deleteApp('{{ app.id }}', '{{ app.name }}')">
+                      <span class="ti ti-trash me-1"></span> Delete
+                    </button>
+                  </div>
+
+                  {% if app.documentation %}
+                  <div class="markdown-content">
+                    {{ app.documentation|markdown|safe }}
+                  </div>
+                  {% else %}
+                  <div class="text-muted">No documentation available</div>
+                  {% endif %}
+                </div>
+              </div>
+            </div>
+            {% endfor %}
+          </div>
+          {% else %}
+          <div class="empty">
+            <div class="empty-icon">
+              <span class="ti ti-apps"></span>
+            </div>
+            <p class="empty-title">No applications found</p>
+            <p class="empty-subtitle text-muted">
+              This server doesn't have any applications yet.
+            </p>
+            <div class="empty-action">
+              <a href="{{ url_for('dashboard.app_new', server_id=server.id) }}" class="btn btn-primary">
+                <span class="ti ti-plus me-1"></span> Add Application
+              </a>
+            </div>
+          </div>
+          {% endif %}
+        </div>
+      </div>
     </div>
   </div>
 </div>
 
 <!-- Delete Server Modal -->
-<div class="modal fade" id="deleteServerModal" tabindex="-1" aria-labelledby="deleteServerModalLabel"
-  aria-hidden="true">
-  <div class="modal-dialog">
+<div class="modal modal-blur fade" id="deleteServerModal" tabindex="-1">
+  <div class="modal-dialog modal-sm modal-dialog-centered">
     <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title" id="deleteServerModalLabel">Confirm Delete</h5>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-      </div>
       <div class="modal-body">
-        Are you sure you want to delete server <strong>{{ server.hostname }}</strong>? This action cannot be undone.
+        <div class="modal-title">Are you sure?</div>
+        <div>This will permanently delete the server "{{ server.hostname }}" and all associated applications and ports.
+        </div>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-        <form action="{{ url_for('dashboard.server_delete', server_id=server.id) }}" method="POST">
+        <form method="POST" action="{{ url_for('dashboard.server_delete', server_id=server.id) }}">
           <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
           <button type="submit" class="btn btn-danger">Delete Server</button>
         </form>
@@ -216,20 +233,17 @@
   </div>
 </div>
 
-<!-- Delete App Modal (created dynamically) -->
-<div class="modal fade" id="deleteAppModal" tabindex="-1" aria-hidden="true">
-  <div class="modal-dialog">
+<!-- Delete App Modal Template - Will be dynamically populated -->
+<div class="modal modal-blur fade" id="deleteAppModal" tabindex="-1">
+  <div class="modal-dialog modal-sm modal-dialog-centered">
     <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title">Confirm Delete</h5>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-      </div>
-      <div class="modal-body" id="deleteAppModalBody">
-        Are you sure you want to delete this application?
+      <div class="modal-body">
+        <div class="modal-title">Are you sure?</div>
+        <div id="delete-app-message"></div>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-        <form id="deleteAppForm" method="POST">
+        <form id="delete-app-form" method="POST" action="">
           <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
           <button type="submit" class="btn btn-danger">Delete Application</button>
         </form>
@@ -237,58 +251,68 @@
     </div>
   </div>
 </div>
+
+{% block extra_js %}
+<script>
+  // Function to handle app deletion modal
+  function deleteApp(appId, appName) {
+    const modal = document.getElementById('deleteAppModal');
+    const message = document.getElementById('delete-app-message');
+    const form = document.getElementById('delete-app-form');
+
+    message.textContent = `This will delete the application "${appName}" and all its ports.`;
+    form.action = "{{ url_for('dashboard.app_delete', app_id=0) }}".replace('0', appId);
+
+    // Show the modal
+    new bootstrap.Modal(modal).show();
+  }
+
+  // Toggle expand/collapse all
+  document.addEventListener('DOMContentLoaded', function () {
+    const toggleBtn = document.getElementById('toggle-all-apps');
+    const toggleText = document.getElementById('toggle-text');
+    let isExpanded = false;
+
+    toggleBtn.addEventListener('click', function () {
+      const accordionButtons = document.querySelectorAll('.accordion-button');
+      const accordionContents = document.querySelectorAll('.accordion-collapse');
+
+      isExpanded = !isExpanded;
+
+      if (isExpanded) {
+        // Expand all
+        accordionButtons.forEach(button => {
+          button.classList.remove('collapsed');
+          button.setAttribute('aria-expanded', 'true');
+        });
+
+        accordionContents.forEach(content => {
+          content.classList.add('show');
+        });
+
+        toggleText.textContent = 'Collapse All';
+        toggleBtn.querySelector('span:first-child').classList.remove('ti-chevrons-down');
+        toggleBtn.querySelector('span:first-child').classList.add('ti-chevrons-up');
+      } else {
+        // Collapse all
+        accordionButtons.forEach(button => {
+          button.classList.add('collapsed');
+          button.setAttribute('aria-expanded', 'false');
+        });
+
+        accordionContents.forEach(content => {
+          content.classList.remove('show');
+        });
+
+        toggleText.textContent = 'Expand All';
+        toggleBtn.querySelector('span:first-child').classList.remove('ti-chevrons-up');
+        toggleBtn.querySelector('span:first-child').classList.add('ti-chevrons-down');
+      }
+    });
+  });
+</script>
 {% endblock %}
 
-{% block scripts %}
-<script>
-  document.addEventListener('DOMContentLoaded', function () {
-    // Initialize tooltips
-    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
-    tooltipTriggerList.map(function (tooltipTriggerEl) {
-      return new bootstrap.Tooltip(tooltipTriggerEl);
-    });
-
-    // Random port generator
-    const getRandomPortBtn = document.getElementById('get-random-port');
-    if (getRandomPortBtn) {
-      getRandomPortBtn.addEventListener('click', async function () {
-        try {
-          const response = await fetch(`/api/servers/{{ server.id }}/suggest_port`);
-          if (!response.ok) throw new Error('Failed to get port suggestion');
-
-          const data = await response.json();
-          if (data.port) {
-            // Copy to clipboard
-            navigator.clipboard.writeText(data.port.toString())
-              .then(() => {
-                showNotification(`Port ${data.port} copied to clipboard!`, 'success');
-              })
-              .catch(err => {
-                console.error('Failed to copy: ', err);
-                showNotification(`Suggested free port: ${data.port}`, 'info');
-              });
-          }
-        } catch (error) {
-          console.error('Error:', error);
-          showNotification('Failed to suggest port', 'danger');
-        }
-      });
-    }
-  });
-
-  // Function to handle app deletion confirmation
-  function confirmDeleteApp(appId, appName) {
-    const modal = document.getElementById('deleteAppModal');
-    const modalBody = document.getElementById('deleteAppModalBody');
-    const deleteForm = document.getElementById('deleteAppForm');
-
-    modalBody.textContent = `Are you sure you want to delete application "${appName}"? This action cannot be undone.`;
-    deleteForm.action = `/dashboard/apps/${appId}/delete`;
-
-    const bsModal = new bootstrap.Modal(modal);
-    bsModal.show();
-  }
-</script>
 {% endblock %}
 
 {% block styles %}
diff --git a/app/templates/dashboard/settings.html b/app/templates/dashboard/settings.html
new file mode 100644
index 0000000..96124a8
--- /dev/null
+++ b/app/templates/dashboard/settings.html
@@ -0,0 +1,86 @@
+{% extends "layout.html" %}
+
+{% block content %}
+<div class="container-xl">
+  <div class="page-header d-print-none">
+    <div class="row align-items-center">
+      <div class="col">
+        <h2 class="page-title">
+          User Settings
+        </h2>
+      </div>
+    </div>
+  </div>
+
+  <div class="row mt-3">
+    <div class="col-md-6">
+      <!-- Password Change Card -->
+      <div class="card">
+        <div class="card-header">
+          <h3 class="card-title">Change Password</h3>
+        </div>
+        <div class="card-body">
+          {% with messages = get_flashed_messages(with_categories=true) %}
+          {% if messages %}
+          {% for category, message in messages %}
+          <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
+            {{ message }}
+            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+          </div>
+          {% endfor %}
+          {% endif %}
+          {% endwith %}
+
+          <form method="POST" action="{{ url_for('dashboard.settings') }}">
+            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+            <div class="mb-3">
+              <label class="form-label required">Current Password</label>
+              <input type="password" class="form-control" name="current_password" required>
+            </div>
+            <div class="mb-3">
+              <label class="form-label required">New Password</label>
+              <input type="password" class="form-control" name="new_password" required>
+            </div>
+            <div class="mb-3">
+              <label class="form-label required">Confirm New Password</label>
+              <input type="password" class="form-control" name="confirm_password" required>
+            </div>
+            <div class="form-footer">
+              <button type="submit" class="btn btn-primary">Change Password</button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+
+    <div class="col-md-6">
+      <!-- User Information Card -->
+      <div class="card">
+        <div class="card-header">
+          <h3 class="card-title">Account Information</h3>
+        </div>
+        <div class="card-body">
+          <div class="mb-3">
+            <div class="form-label">Email</div>
+            <div>{{ current_user.email }}</div>
+          </div>
+          <div class="mb-3">
+            <div class="form-label">Account Type</div>
+            <div>
+              {% if current_user.is_admin %}
+              <span class="badge bg-green">Administrator</span>
+              {% else %}
+              <span class="badge bg-blue">Standard User</span>
+              {% endif %}
+            </div>
+          </div>
+          <div class="mb-3">
+            <div class="form-label">Created</div>
+            <div>{{ current_user.created_at.strftime('%Y-%m-%d %H:%M') }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/app/templates/dashboard/subnet_view.html b/app/templates/dashboard/subnet_view.html
new file mode 100644
index 0000000..83d7c52
--- /dev/null
+++ b/app/templates/dashboard/subnet_view.html
@@ -0,0 +1,64 @@
+<!-- Add this in the action buttons section -->
+<div class="col-auto ms-auto">
+  <div class="btn-list">
+    <a href="{{ url_for('dashboard.subnet_edit', subnet_id=subnet.id) }}" class="btn btn-primary">
+      <span class="ti ti-edit me-2"></span>Edit Subnet
+    </a>
+    <button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteSubnetModal">
+      <span class="ti ti-trash me-2"></span>Delete
+    </button>
+    <button class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#forceDeleteSubnetModal">
+      <span class="ti ti-alert-triangle me-2"></span>Force Delete
+    </button>
+  </div>
+</div>
+
+<!-- Add this at the bottom of the template -->
+<!-- Force Delete Subnet Modal -->
+<div class="modal modal-blur fade" id="forceDeleteSubnetModal" tabindex="-1">
+  <div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title text-danger">⚠️ Dangerous Action: Force Delete</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <div class="alert alert-danger">
+          <h4 class="alert-title">Warning: This action cannot be undone!</h4>
+          <p>You are about to <strong>permanently delete</strong> the subnet {{ subnet.cidr }} and <strong>ALL</strong>
+            of its:</p>
+          <ul>
+            <li>{{ subnet.servers|length }} server(s)</li>
+            <li>All applications on those servers</li>
+            <li>All port configurations</li>
+            <li>All documentation</li>
+          </ul>
+        </div>
+        <p>To confirm, please type <strong>{{ subnet.cidr }}</strong> below:</p>
+        <input type="text" id="force-delete-confirmation" class="form-control"
+          placeholder="Type subnet CIDR to confirm">
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+        <form method="POST" action="{{ url_for('ipam.subnet_force_delete', subnet_id=subnet.id) }}"
+          id="force-delete-form">
+          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+          <button type="submit" class="btn btn-danger" id="force-delete-button" disabled>Force Delete
+            Everything</button>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    const confirmationInput = document.getElementById('force-delete-confirmation');
+    const deleteButton = document.getElementById('force-delete-button');
+    const subnetCidr = "{{ subnet.cidr }}";
+
+    confirmationInput.addEventListener('input', function () {
+      deleteButton.disabled = confirmationInput.value !== subnetCidr;
+    });
+  });
+</script>
\ No newline at end of file
diff --git a/app/templates/ipam/subnet_form.html b/app/templates/ipam/subnet_form.html
index d56ad85..f11297d 100644
--- a/app/templates/ipam/subnet_form.html
+++ b/app/templates/ipam/subnet_form.html
@@ -6,7 +6,7 @@
     <div class="row align-items-center">
       <div class="col">
         <h2 class="page-title">
-          Add New Subnet
+          {% if subnet %}Edit Subnet{% else %}New Subnet{% endif %}
         </h2>
       </div>
     </div>
@@ -25,27 +25,100 @@
       {% endif %}
       {% endwith %}
 
-      <form method="POST" action="{{ url_for('ipam.subnet_new') }}">
+      <form method="POST"
+        action="{% if subnet %}{{ url_for('ipam.subnet_edit', subnet_id=subnet.id) }}{% else %}{{ url_for('ipam.subnet_new') }}{% endif %}">
         <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
-        <div class="mb-3">
-          <label class="form-label required">CIDR Notation</label>
-          <input type="text" class="form-control" name="cidr" placeholder="192.168.1.0/24" required>
-          <small class="form-hint">Example: 192.168.1.0/24</small>
+
+        <!-- IP Address and Prefix Selection -->
+        <div class="row mb-3">
+          <div class="col-md-8">
+            <label class="form-label required">IP Address</label>
+            <input type="text" class="form-control" id="ip-address" placeholder="192.168.1.0" required
+              value="{% if subnet %}{{ subnet.cidr.split('/')[0] }}{% endif %}">
+          </div>
+          <div class="col-md-4">
+            <label class="form-label required">Prefix</label>
+            <select class="form-select" id="prefix" required>
+              {% for i in range(8, 31) %}
+              <option value="{{ i }}" {% if subnet and subnet.cidr.split('/')[1]|int==i %}selected{% endif %}>
+                {{ i }} ({{ 2**(32-i) }} hosts)
+              </option>
+              {% endfor %}
+            </select>
+          </div>
         </div>
+
+        <!-- Hidden CIDR field to submit combined value -->
+        <input type="hidden" name="cidr" id="cidr-value" value="{% if subnet %}{{ subnet.cidr }}{% endif %}">
+
         <div class="mb-3">
           <label class="form-label required">Location</label>
-          <input type="text" class="form-control" name="location" placeholder="Office, Datacenter, etc." required>
+          <input type="text" class="form-control" name="location" required
+            value="{% if subnet %}{{ subnet.location }}{% endif %}">
         </div>
-        <div class="mb-3 form-check">
-          <input type="checkbox" class="form-check-input" id="auto_scan" name="auto_scan">
-          <label class="form-check-label" for="auto_scan">Enable automatic scanning</label>
+
+        <div class="mb-3">
+          <div class="form-check">
+            <input class="form-check-input" type="checkbox" name="auto_scan" id="auto_scan" {% if subnet and
+              subnet.auto_scan %}checked{% endif %}>
+            <label class="form-check-label" for="auto_scan">
+              Auto-scan for active hosts
+            </label>
+          </div>
         </div>
-        <div class="d-flex justify-content-end">
-          <a href="{{ url_for('ipam.ipam_home') }}" class="btn btn-link me-2">Cancel</a>
-          <button type="submit" class="btn btn-primary">Save Subnet</button>
+
+        <div class="form-footer">
+          <button type="submit" class="btn btn-primary">Save</button>
+          <a href="{% if subnet %}{{ url_for('ipam.subnet_view', subnet_id=subnet.id) }}{% else %}{{ url_for('ipam.ipam_home') }}{% endif %}"
+            class="btn btn-outline-secondary ms-2">Cancel</a>
         </div>
       </form>
     </div>
   </div>
 </div>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    const ipAddressInput = document.getElementById('ip-address');
+    const prefixSelect = document.getElementById('prefix');
+    const cidrValueInput = document.getElementById('cidr-value');
+
+    // Function to update the hidden CIDR field
+    function updateCidrValue() {
+      const ip = ipAddressInput.value.trim();
+      const prefix = prefixSelect.value;
+
+      if (ip) {
+        cidrValueInput.value = `${ip}/${prefix}`;
+      }
+    }
+
+    // Add event listeners
+    ipAddressInput.addEventListener('input', updateCidrValue);
+    prefixSelect.addEventListener('change', updateCidrValue);
+
+    // Initialize CIDR value if editing
+    if (cidrValueInput.value) {
+      const parts = cidrValueInput.value.split('/');
+      if (parts.length === 2) {
+        ipAddressInput.value = parts[0];
+        const prefix = parseInt(parts[1]);
+        if (!isNaN(prefix) && prefix >= 8 && prefix <= 30) {
+          prefixSelect.value = prefix;
+        }
+      }
+    }
+
+    // Ensure form submission updates the CIDR value
+    document.querySelector('form').addEventListener('submit', function (e) {
+      updateCidrValue();
+
+      // Basic validation
+      if (!cidrValueInput.value) {
+        e.preventDefault();
+        alert('Please enter a valid IP address and prefix');
+      }
+    });
+  });
+</script>
 {% endblock %}
\ No newline at end of file
diff --git a/app/templates/layout.html b/app/templates/layout.html
index c216a59..3705117 100644
--- a/app/templates/layout.html
+++ b/app/templates/layout.html
@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{{ title if title else 'Network Documentation' }}</title>
+    <title>{{ title|default('Network Infrastructure Management') }}</title>
     <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <!-- Tabler Icons -->
@@ -15,6 +15,12 @@
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     <!-- Custom CSS -->
     <link rel="stylesheet" href="{{ url_for('static', filename='css/app.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/tabler.min.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='libs/tabler-icons/tabler-icons.min.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/custom.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/markdown.css') }}">
+    <!-- Favicon -->
+    <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/favicon.png') }}">
     {% block styles %}{% endblock %}
     <script>
         // Check for saved theme preference or respect OS preference
@@ -31,6 +37,71 @@
         // Run before page load to prevent flash
         initTheme();
     </script>
+    <style>
+        .sidebar-item-parent {
+            position: relative;
+        }
+
+        .sidebar-submenu {
+            display: none;
+            padding-left: 20px;
+            font-size: 0.9em;
+        }
+
+        .sidebar-item-parent.expanded .sidebar-submenu {
+            display: block;
+        }
+
+        .sidebar-item-parent.expanded .toggle-icon {
+            transform: rotate(180deg);
+        }
+
+        .subnet-item,
+        .server-item {
+            padding: 5px 10px;
+            margin: 2px 0;
+            border-radius: 4px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            text-decoration: none;
+            color: inherit;
+        }
+
+        .subnet-item:hover,
+        .server-item:hover {
+            background-color: rgba(0, 0, 0, 0.05);
+        }
+
+        .subnet-item.active,
+        .server-item.active {
+            background-color: rgba(0, 0, 0, 0.1);
+        }
+
+        .subnet-servers {
+            margin-left: 15px;
+            display: none;
+        }
+
+        .subnet-item-expanded .subnet-servers {
+            display: block;
+        }
+
+        .subnet-item-expanded .subnet-toggle-icon {
+            transform: rotate(90deg);
+        }
+
+        .subnet-toggle-icon {
+            transition: transform 0.2s ease;
+            margin-right: 5px;
+        }
+
+        .loading-placeholder {
+            color: #888;
+            font-style: italic;
+            padding: 5px 15px;
+        }
+    </style>
 </head>
 
 <body class="{{ 'auth-page' if not current_user.is_authenticated else '' }}">
@@ -55,10 +126,25 @@
                 class="sidebar-item {{ 'active' if request.endpoint and request.endpoint.startswith('dashboard.server') }}">
                 <span class="ti ti-server me-2"></span> Servers
             </a>
-            <a href="{{ url_for('ipam.ipam_home') }}"
-                class="sidebar-item {{ 'active' if request.endpoint and request.endpoint.startswith('ipam.') }}">
-                <span class="ti ti-network me-2"></span> IPAM
-            </a>
+
+            <!-- IPAM with Subnet Tree -->
+            <div class="sidebar-item-parent">
+                <a href="{{ url_for('ipam.ipam_home') }}"
+                    class="sidebar-item {{ 'active' if request.endpoint and request.endpoint.startswith('ipam.') }}">
+                    <span class="ti ti-network me-2"></span> IPAM
+                    <span class="ti ti-chevron-down ms-auto toggle-icon"></span>
+                </a>
+                <div class="sidebar-submenu">
+                    <div id="subnet-tree-container">
+                        <!-- Subnets will be loaded here -->
+                        <div class="text-center py-2 d-none" id="subnet-loader">
+                            <div class="spinner-border spinner-border-sm" role="status">
+                                <span class="visually-hidden">Loading...</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
 
             <div class="sidebar-heading">Management</div>
             <a href="{{ url_for('dashboard.server_new') }}" class="sidebar-item">
@@ -69,6 +155,10 @@
             </a>
 
             <div class="sidebar-heading">User</div>
+            <a href="{{ url_for('dashboard.settings') }}"
+                class="sidebar-item {{ 'active' if request.endpoint == 'dashboard.settings' }}">
+                <span class="ti ti-settings me-2"></span> Settings
+            </a>
             <a href="{{ url_for('auth.logout') }}" class="sidebar-item">
                 <span class="ti ti-logout me-2"></span> Logout
             </a>
@@ -162,6 +252,130 @@
             });
         }
     </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            // Toggle sidebar submenus
+            document.querySelectorAll('.sidebar-item-parent > a').forEach(item => {
+                item.addEventListener('click', function (e) {
+                    e.preventDefault();
+                    const parent = this.parentElement;
+                    parent.classList.toggle('expanded');
+
+                    // Load subnet data when IPAM is expanded
+                    if (parent.classList.contains('expanded') && this.textContent.includes('IPAM')) {
+                        loadSubnets();
+                    }
+                });
+            });
+
+            function loadSubnets() {
+                const subnetContainer = document.getElementById('subnet-tree-container');
+                const loader = document.getElementById('subnet-loader');
+
+                if (!loader || !subnetContainer) return;
+
+                // Show loader
+                loader.classList.remove('d-none');
+
+                // Fetch subnets
+                fetch('/api/subnets')
+                    .then(response => {
+                        if (!response.ok) {
+                            throw new Error('Network response was not ok');
+                        }
+                        return response.json();
+                    })
+                    .then(subnets => {
+                        loader.classList.add('d-none');
+
+                        if (subnets.length === 0) {
+                            subnetContainer.innerHTML = '<div class="text-muted px-3 py-2">No subnets found</div>';
+                            return;
+                        }
+
+                        let html = '';
+                        subnets.forEach(subnet => {
+                            html += `
+                                <div class="subnet-item-container">
+                                    <div class="subnet-item" data-subnet-id="${subnet.id}">
+                                        <span class="ti ti-chevron-right subnet-toggle-icon me-1"></span>
+                                        <a href="/ipam/subnet/${subnet.id}" class="text-reset text-decoration-none flex-grow-1">
+                                            ${subnet.cidr} (${subnet.location})
+                                        </a>
+                                    </div>
+                                    <div class="subnet-servers d-none" id="subnet-servers-${subnet.id}">
+                                        <div class="text-muted px-3 py-2">Loading servers...</div>
+                                    </div>
+                                </div>
+                            `;
+                        });
+
+                        subnetContainer.innerHTML = html;
+
+                        // Add click handlers to subnet items
+                        document.querySelectorAll('.subnet-item').forEach(item => {
+                            item.querySelector('.subnet-toggle-icon').addEventListener('click', function (e) {
+                                e.preventDefault();
+                                e.stopPropagation();
+
+                                const subnetId = item.dataset.subnetId;
+                                const serversContainer = document.getElementById(`subnet-servers-${subnetId}`);
+                                serversContainer.classList.toggle('d-none');
+
+                                if (!serversContainer.classList.contains('d-none') &&
+                                    serversContainer.querySelector('.text-muted')) {
+                                    loadServersForSubnet(subnetId);
+                                }
+
+                                // Toggle icon
+                                this.classList.toggle('ti-chevron-right');
+                                this.classList.toggle('ti-chevron-down');
+                            });
+                        });
+                    })
+                    .catch(error => {
+                        console.error('Error loading subnets:', error);
+                        loader.classList.add('d-none');
+                        subnetContainer.innerHTML = '<div class="text-danger px-3 py-2">Error loading subnets</div>';
+                    });
+            }
+
+            function loadServersForSubnet(subnetId) {
+                const serversContainer = document.getElementById(`subnet-servers-${subnetId}`);
+
+                // Fetch servers for this subnet
+                fetch(`/api/subnets/${subnetId}/servers`)
+                    .then(response => {
+                        if (!response.ok) {
+                            throw new Error('Network response was not ok');
+                        }
+                        return response.json();
+                    })
+                    .then(servers => {
+                        if (servers.length === 0) {
+                            serversContainer.innerHTML = '<div class="text-muted px-3 py-2">No servers in this subnet</div>';
+                            return;
+                        }
+
+                        let html = '';
+                        servers.forEach(server => {
+                            html += `
+                                <a href="/dashboard/server/${server.id}" class="server-item d-block ps-4 py-1">
+                                    <span class="ti ti-server me-1 small"></span>
+                                    ${server.hostname} (${server.ip_address})
+                                </a>
+                            `;
+                        });
+
+                        serversContainer.innerHTML = html;
+                    })
+                    .catch(error => {
+                        console.error('Error loading servers:', error);
+                        serversContainer.innerHTML = '<div class="text-danger px-3 py-2">Error loading servers</div>';
+                    });
+            }
+        });
+    </script>
     {% block scripts %}{% endblock %}
 </body>
 
diff --git a/app/templates/server.html b/app/templates/server.html
index 2e0e3c6..04ec67e 100644
--- a/app/templates/server.html
+++ b/app/templates/server.html
@@ -5,11 +5,11 @@
 <div>
     <p><strong>IP Address:</strong> {{ server.ip_address }}</p>
     <p><strong>Open Ports:</strong> {{ server.get_open_ports() | join(', ') }}</p>
-    <div class="markdown-body">
+    <div class="markdown-content">
         <h3>Documentation:</h3>
         <div id="markdown-preview">
-            {{ markdown(server.documentation) | safe }}
+            {{ server.documentation|markdown|safe }}
         </div>
     </div>
 </div>
-{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/config/__pycache__/settings.cpython-313.pyc b/config/__pycache__/settings.cpython-313.pyc
deleted file mode 100644
index a0c0577..0000000
Binary files a/config/__pycache__/settings.cpython-313.pyc and /dev/null differ
diff --git a/instance/app.db b/instance/app.db
index 43782aa..d0e6fea 100644
Binary files a/instance/app.db and b/instance/app.db differ
diff --git a/instance/development.db b/instance/development.db
deleted file mode 100644
index 16f05f5..0000000
Binary files a/instance/development.db and /dev/null differ
diff --git a/instance/production.db b/instance/production.db
deleted file mode 100644
index 0c68a26..0000000
Binary files a/instance/production.db and /dev/null differ
diff --git a/scripts/check_routes.py b/scripts/check_routes.py
new file mode 100755
index 0000000..c78ceff
--- /dev/null
+++ b/scripts/check_routes.py
@@ -0,0 +1,94 @@
+#!/usr/bin/env python3
+"""
+Check for unused routes in Flask application
+"""
+
+import os
+import sys
+import re
+from flask import Flask
+
+# Add the parent directory to sys.path
+sys.path.insert(0, os.path.abspath(os.path.join(os.path.dirname(__file__), '..')))
+
+def find_all_routes():
+    """Find all route definitions in Python files"""
+    routes = []
+    route_pattern = re.compile(r'@\w+\.route\([\'"]([^\'"]+)[\'"]')
+    
+    for root, _, files in os.walk('app'):
+        for file in files:
+            if file.endswith('.py'):
+                file_path = os.path.join(root, file)
+                with open(file_path, 'r') as f:
+                    content = f.read()
+                    matches = route_pattern.findall(content)
+                    for match in matches:
+                        routes.append(match)
+    
+    return routes
+
+def find_template_references():
+    """Find all url_for calls in template files"""
+    references = []
+    url_for_pattern = re.compile(r'url_for\([\'"]([^\'"]+)[\'"]')
+    
+    for root, _, files in os.walk('app/templates'):
+        for file in files:
+            if file.endswith('.html'):
+                file_path = os.path.join(root, file)
+                with open(file_path, 'r') as f:
+                    content = f.read()
+                    matches = url_for_pattern.findall(content)
+                    for match in matches:
+                        references.append(match)
+    
+    # Also check Python files for url_for calls
+    for root, _, files in os.walk('app'):
+        for file in files:
+            if file.endswith('.py'):
+                file_path = os.path.join(root, file)
+                with open(file_path, 'r') as f:
+                    content = f.read()
+                    matches = url_for_pattern.findall(content)
+                    for match in matches:
+                        references.append(match)
+    
+    return references
+
+def check_unused_routes():
+    """Find routes that are not referenced by url_for"""
+    from app import create_app
+    
+    app = create_app()
+    
+    # Get all route endpoints from the app
+    all_endpoints = set()
+    for rule in app.url_map.iter_rules():
+        all_endpoints.add(rule.endpoint)
+    
+    # Get all url_for references
+    all_references = set(find_template_references())
+    
+    # Find unused endpoints
+    unused_endpoints = all_endpoints - all_references
+    
+    if unused_endpoints:
+        print("The following routes are defined but not referenced in templates or code:")
+        for endpoint in sorted(unused_endpoints):
+            # Skip static routes, error handlers, etc.
+            if endpoint.startswith('static') or endpoint == 'static':
+                continue
+                
+            print(f"  - {endpoint}")
+            
+            # Find the URL for this endpoint
+            for rule in app.url_map.iter_rules():
+                if rule.endpoint == endpoint:
+                    print(f"    URL: {rule}")
+                    break
+    else:
+        print("All routes are referenced in templates or code. Good job!")
+
+if __name__ == "__main__":
+    check_unused_routes() 
\ No newline at end of file
diff --git a/scripts/cleanup.py b/scripts/cleanup.py
new file mode 100755
index 0000000..e414c0d
--- /dev/null
+++ b/scripts/cleanup.py
@@ -0,0 +1,63 @@
+#!/usr/bin/env python3
+"""
+Cleanup script for Flask applications
+Removes __pycache__ directories, .pyc files, and database files
+"""
+
+import os
+import shutil
+import argparse
+
+def cleanup(directory, verbose=False):
+    """Clean up cache files and database files"""
+    cleaned_dirs = 0
+    cleaned_files = 0
+    
+    # Files to clean
+    file_patterns = ['.pyc', '.pyo', '.~', '.swp', '.swo']
+    db_patterns = ['.db', '.sqlite', '.sqlite3', '-journal']
+    
+    # Directories to clean
+    dir_patterns = ['__pycache__', '.pytest_cache', '.coverage', 'htmlcov']
+    
+    # Clean main directory
+    for root, dirs, files in os.walk(directory):
+        # Clean directories
+        for dir_name in list(dirs):
+            if dir_name in dir_patterns:
+                dir_path = os.path.join(root, dir_name)
+                if verbose:
+                    print(f"Removing directory: {dir_path}")
+                shutil.rmtree(dir_path)
+                cleaned_dirs += 1
+                dirs.remove(dir_name)
+        
+        # Clean files
+        for file in files:
+            if any(file.endswith(pattern) for pattern in file_patterns + db_patterns):
+                file_path = os.path.join(root, file)
+                if verbose:
+                    print(f"Removing file: {file_path}")
+                os.remove(file_path)
+                cleaned_files += 1
+    
+    # Clean instance directory
+    instance_dir = os.path.join(directory, 'instance')
+    if os.path.exists(instance_dir):
+        for file in os.listdir(instance_dir):
+            if any(file.endswith(pattern) for pattern in db_patterns):
+                file_path = os.path.join(instance_dir, file)
+                if verbose:
+                    print(f"Removing database file: {file_path}")
+                os.remove(file_path)
+                cleaned_files += 1
+    
+    print(f"Cleanup completed! Removed {cleaned_dirs} directories and {cleaned_files} files.")
+
+if __name__ == "__main__":
+    parser = argparse.ArgumentParser(description="Clean up Flask application cache and database files")
+    parser.add_argument("-v", "--verbose", action="store_true", help="Show detailed output")
+    parser.add_argument("-d", "--directory", default=".", help="Directory to clean (default: current directory)")
+    
+    args = parser.parse_args()
+    cleanup(args.directory, args.verbose) 
\ No newline at end of file
diff --git a/scripts/create_admin.py b/scripts/create_admin.py
new file mode 100644
index 0000000..4dc187f
--- /dev/null
+++ b/scripts/create_admin.py
@@ -0,0 +1,68 @@
+#!/usr/bin/env python3
+"""
+Create an admin user for the application
+"""
+
+import os
+import sys
+import getpass
+from flask import Flask
+from werkzeug.security import generate_password_hash
+
+# Add the parent directory to sys.path
+sys.path.insert(0, os.path.abspath(os.path.join(os.path.dirname(__file__), '..')))
+
+from app import create_app
+from app.core.extensions import db
+from app.core.auth import User
+
+def create_admin_user(email=None, password=None):
+    """Create an admin user in the database"""
+    app = create_app()
+    
+    with app.app_context():
+        # Check if users already exist
+        if User.query.count() > 0:
+            print("Users already exist in the database.")
+            choice = input("Do you want to create another admin user? (y/n): ")
+            if choice.lower() != 'y':
+                print("Operation cancelled.")
+                return
+        
+        # Prompt for email if not provided
+        if not email:
+            email = input("Enter admin email: ")
+        
+        # Check if user with this email already exists
+        existing_user = User.query.filter_by(email=email).first()
+        if existing_user:
+            print(f"User with email {email} already exists!")
+            return
+        
+        # Prompt for password if not provided
+        if not password:
+            password = getpass.getpass("Enter admin password: ")
+            confirm_password = getpass.getpass("Confirm password: ")
+            
+            if password != confirm_password:
+                print("Passwords do not match!")
+                return
+        
+        # Create the admin user
+        admin = User(email=email, is_admin=True)
+        admin.set_password(password)
+        
+        db.session.add(admin)
+        db.session.commit()
+        
+        print(f"Admin user created successfully: {email}")
+
+if __name__ == "__main__":
+    import argparse
+    
+    parser = argparse.ArgumentParser(description="Create an admin user")
+    parser.add_argument("--email", help="Admin user email")
+    parser.add_argument("--password", help="Admin user password")
+    
+    args = parser.parse_args()
+    create_admin_user(args.email, args.password) 
\ No newline at end of file