diff --git a/static/css/member-management.css b/static/css/member-management.css
new file mode 100644
index 0000000..98e2fb6
--- /dev/null
+++ b/static/css/member-management.css
@@ -0,0 +1,25 @@
+.member-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    object-fit: cover;
+    margin-right: 1rem;
+}
+
+.badge-creator {
+    background-color: #d1f2eb;
+    color: #117a65;
+    font-weight: 500;
+}
+
+.btn-remove-member {
+    background: #f8d7da;
+    color: #c82333;
+    border: none;
+    font-weight: 500;
+}
+
+.btn-remove-member:hover {
+    background: #f5c6cb;
+    color: #a71d2a;
+} 
\ No newline at end of file
diff --git a/static/js/create-conversation.js b/static/js/create-conversation.js
new file mode 100644
index 0000000..297e6e7
--- /dev/null
+++ b/static/js/create-conversation.js
@@ -0,0 +1,88 @@
+$(document).ready(function() {
+    $('.select2').select2({
+        theme: 'bootstrap-5',
+        width: '100%',
+        placeholder: 'Search for a user...',
+        allowClear: true
+    });
+
+    // Keep track of added members
+    var addedMembers = new Set();
+    var creatorId = document.querySelector('.member-row').dataset.userId;
+    addedMembers.add(creatorId);
+
+    // Function to show alert modal
+    function showAlert(message) {
+        $('#alertModalMessage').text(message);
+        var alertModal = new bootstrap.Modal(document.getElementById('alertModal'));
+        alertModal.show();
+    }
+
+    // Handle Add Member button click
+    $('#addMemberBtn').click(function() {
+        var selectedUserId = $('#user_id').val();
+        var selectedUserName = $('#user_id option:selected').text();
+        var selectedUserEmail = $('#user_id option:selected').data('email') || '';
+        var selectedUserAvatar = $('#user_id option:selected').data('avatar') || "/static/default-avatar.png";
+        
+        if (!selectedUserId) {
+            showAlert('Please select a user to add.');
+            return;
+        }
+
+        if (addedMembers.has(selectedUserId)) {
+            showAlert('This user has already been added.');
+            return;
+        }
+
+        // Add to the set of added members
+        addedMembers.add(selectedUserId);
+
+        // Disable the option in the dropdown
+        $('#user_id option[value="' + selectedUserId + '"]').prop('disabled', true);
+        $('#user_id').val(null).trigger('change');
+
+        // Create the member list item
+        var memberItem = $('<div class="list-group-item d-flex align-items-center member-row" data-user-id="' + selectedUserId + '">')
+            .append($('<img class="member-avatar">').attr('src', selectedUserAvatar))
+            .append($('<div class="flex-grow-1">')
+                .append($('<div class="fw-bold">').text(selectedUserName))
+                .append($('<div class="text-muted small">').text(selectedUserEmail))
+            )
+            .append($('<button type="button" class="btn btn-remove-member ms-2">')
+                .append($('<i class="fas fa-user-minus me-1"></i>'))
+                .append('Remove')
+                .click(function() {
+                    $(this).closest('.list-group-item').remove();
+                    addedMembers.delete(selectedUserId);
+                    // Re-enable the option in the dropdown
+                    $('#user_id option[value="' + selectedUserId + '"]').prop('disabled', false);
+                    $('#user_id').trigger('change');
+                    updateHiddenInputs();
+                })
+            );
+
+        // Add to the list
+        $('#selectedMembersList').append(memberItem);
+
+        // Update hidden inputs
+        updateHiddenInputs();
+    });
+
+    function updateHiddenInputs() {
+        // Remove any existing members inputs
+        $('#conversationForm input[name="members"]').remove();
+        
+        // Add new hidden inputs for each member
+        addedMembers.forEach(function(memberId) {
+            var input = $('<input>')
+                .attr('type', 'hidden')
+                .attr('name', 'members')
+                .val(memberId);
+            $('#conversationForm').append(input);
+        });
+    }
+
+    // Initialize hidden inputs
+    updateHiddenInputs();
+}); 
\ No newline at end of file
diff --git a/templates/conversations/create_conversation.html b/templates/conversations/create_conversation.html
index c0c9e54..5d0c0cb 100644
--- a/templates/conversations/create_conversation.html
+++ b/templates/conversations/create_conversation.html
@@ -6,6 +6,7 @@
 {% block extra_css %}
 <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
 <link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet" />
+<link href="{{ url_for('static', filename='css/member-management.css') }}" rel="stylesheet" />
 <style>
     .member-avatar {
         width: 40px;
@@ -145,94 +146,5 @@
 {% block extra_js %}
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
-<script>
-$(document).ready(function() {
-    $('.select2').select2({
-        theme: 'bootstrap-5',
-        width: '100%',
-        placeholder: 'Search for a user...',
-        allowClear: true
-    });
-
-    // Keep track of added members
-    var addedMembers = new Set();
-    var creatorId = '{{ current_user.id }}';
-    addedMembers.add(creatorId);
-
-    // Function to show alert modal
-    function showAlert(message) {
-        $('#alertModalMessage').text(message);
-        var alertModal = new bootstrap.Modal(document.getElementById('alertModal'));
-        alertModal.show();
-    }
-
-    // Handle Add Member button click
-    $('#addMemberBtn').click(function() {
-        var selectedUserId = $('#user_id').val();
-        var selectedUserName = $('#user_id option:selected').text();
-        var selectedUserEmail = $('#user_id option:selected').data('email') || '';
-        var selectedUserAvatar = $('#user_id option:selected').data('avatar') || "{{ url_for('static', filename='default-avatar.png') }}";
-        
-        if (!selectedUserId) {
-            showAlert('Please select a user to add.');
-            return;
-        }
-
-        if (addedMembers.has(selectedUserId)) {
-            showAlert('This user has already been added.');
-            return;
-        }
-
-        // Add to the set of added members
-        addedMembers.add(selectedUserId);
-
-        // Disable the option in the dropdown
-        $('#user_id option[value="' + selectedUserId + '"]').prop('disabled', true);
-        $('#user_id').val(null).trigger('change');
-
-        // Create the member list item
-        var memberItem = $('<div class="list-group-item d-flex align-items-center member-row" data-user-id="' + selectedUserId + '">')
-            .append($('<img class="member-avatar">').attr('src', selectedUserAvatar))
-            .append($('<div class="flex-grow-1">')
-                .append($('<div class="fw-bold">').text(selectedUserName))
-                .append($('<div class="text-muted small">').text(selectedUserEmail))
-            )
-            .append($('<button type="button" class="btn btn-remove-member ms-2">')
-                .append($('<i class="fas fa-user-minus me-1"></i>'))
-                .append('Remove')
-                .click(function() {
-                    $(this).closest('.list-group-item').remove();
-                    addedMembers.delete(selectedUserId);
-                    // Re-enable the option in the dropdown
-                    $('#user_id option[value="' + selectedUserId + '"]').prop('disabled', false);
-                    $('#user_id').trigger('change');
-                    updateHiddenInputs();
-                })
-            );
-
-        // Add to the list
-        $('#selectedMembersList').append(memberItem);
-
-        // Update hidden inputs
-        updateHiddenInputs();
-    });
-
-    function updateHiddenInputs() {
-        // Remove any existing members inputs
-        $('#conversationForm input[name="members"]').remove();
-        
-        // Add new hidden inputs for each member
-        addedMembers.forEach(function(memberId) {
-            var input = $('<input>')
-                .attr('type', 'hidden')
-                .attr('name', 'members')
-                .val(memberId);
-            $('#conversationForm').append(input);
-        });
-    }
-
-    // Initialize hidden inputs
-    updateHiddenInputs();
-});
-</script>
+<script src="{{ url_for('static', filename='js/create-conversation.js') }}"></script>
 {% endblock %} 
\ No newline at end of file