diff --git a/resources/views/tools/bread/edit-add.blade.php b/resources/views/tools/bread/edit-add.blade.php
index b41b2a03b4..511968406c 100644
--- a/resources/views/tools/bread/edit-add.blade.php
+++ b/resources/views/tools/bread/edit-add.blade.php
@@ -559,10 +559,6 @@ function sort() {
         /********** Relationship functionality **********/
 
        $(function () {
-            $('.rowDrop').each(function(){
-                populateRowsFromTable($(this));
-            });
-
             $('.relationship_type').change(function(){
                 if($(this).val() == 'belongsTo'){
                     $(this).parent().parent().find('.relationshipField').show();
@@ -584,19 +580,16 @@ function sort() {
             });
 
             $('.btn-new-relationship').click(function(){
+                // Update table data
+                $('#new_relationship_modal .relationship_table').trigger('change');
+
                 $('#new_relationship_modal').modal('show');
             });
 
             relationshipTextDataBinding();
 
             $('.relationship_table').on('change', function(){
-                var tbl_selected = $(this).val();
-                var rowDropDowns = $(this).parent().parent().find('.rowDrop');
-                $(this).parent().parent().find('.rowDrop').each(function(){
-                    console.log('1');
-                    $(this).data('table', tbl_selected);
-                    populateRowsFromTable($(this));
-                });
+                populateRowsFromTable($(this));
             });
 
             $('.voyager-relationship-details-btn').click(function(){
@@ -611,23 +604,32 @@ function sort() {
         });
 
         function populateRowsFromTable(dropdown){
-            var tbl = dropdown.data('table');
-            var selected_value = dropdown.data('selected');
-            if(tbl.length != 0){
-                $.get('{{ route('voyager.database.index') }}/' + tbl, function(data){
-                    $(dropdown).empty();
-                    for (var option in data) {
-                       $('<option/>', {
-                         value: option,
-                         html: option
-                       }).appendTo($(dropdown));
-                    }
+            var tbl = dropdown.val();
 
-                    if($(dropdown).find('option[value="'+selected_value+'"]').length > 0){
-                        $(dropdown).val(selected_value);
+            $.get('{{ route('voyager.database.index') }}/' + tbl, function(data){
+                var tbl_selected = $(dropdown).val();
+
+                $(dropdown).parent().parent().find('.rowDrop').each(function(){
+                    var selected_value = $(this).data('selected');
+
+                    var options = $.map(data, function (obj, key) {
+                        obj.id = key;
+                        obj.text = key; 
+
+                        return obj;
+                    });
+
+                    $(this).empty().select2({
+                        data: options
+                    });
+
+                    if (selected_value == '' || !$(this).find("option[value='"+selected_value+"']").length) {
+                        selected_value = $(this).find("option:first-child").val();
                     }
+
+                    $(this).val(selected_value).trigger('change');
                 });
-            }
+            });
         }
 
         function relationshipTextDataBinding(){
diff --git a/resources/views/tools/bread/relationship-new-modal.blade.php b/resources/views/tools/bread/relationship-new-modal.blade.php
index 913d0056ea..d413d22d93 100644
--- a/resources/views/tools/bread/relationship-new-modal.blade.php
+++ b/resources/views/tools/bread/relationship-new-modal.blade.php
@@ -56,11 +56,11 @@
 				                <div class="well">
 				                    <label>{{ __('voyager::database.relationship.selection_details') }}</label>
 				                    <p><strong>{{ __('voyager::database.relationship.display_the') }} <span class="label_table_name"></span>: </strong>
-				                        <select name="relationship_label" class="rowDrop select2" data-table="{{ $tables[0] }}" data-selected="">
+				                        <select name="relationship_label" class="rowDrop select2" data-table="{{ $tables[0] }}" data-selected="" style="width: 100%">
 				                        </select>
 				                    </p>
 				                    <p class="relationship_key"><strong>{{ __('voyager::database.relationship.store_the') }} <span class="label_table_name"></span>: </strong>
-				                        <select name="relationship_key" class="rowDrop select2" data-table="{{ $tables[0] }}" data-selected="">
+				                        <select name="relationship_key" class="rowDrop select2" data-table="{{ $tables[0] }}" data-selected="" style="width: 100%">
 				                        </select>
 									</p>
 
diff --git a/resources/views/tools/bread/relationship-partial.blade.php b/resources/views/tools/bread/relationship-partial.blade.php
index 5de017ddc6..10da829eb9 100644
--- a/resources/views/tools/bread/relationship-partial.blade.php
+++ b/resources/views/tools/bread/relationship-partial.blade.php
@@ -75,6 +75,7 @@
                 <div class="relationship_details_content margin_top hasOneMany @if($relationshipDetails->type == 'hasOne' || $relationshipDetails->type == 'hasMany') flexed @endif">
                     <label>{{ __('voyager::database.relationship.which_column_from') }} <span class="label_table_name"></span> {{ __('voyager::database.relationship.is_used_to_reference') }} <span>{{ \Illuminate\Support\Str::singular(ucfirst($table)) }}</span>?</label>
                     <select name="relationship_column_{{ $relationship['field'] }}" class="new_relationship_field select2 rowDrop" data-table="{{ $relationshipDetails->table ?? '' }}" data-selected="{{ $relationshipDetails->column }}">
+                        <option value="{{ $relationshipDetails->column ?? '' }}">{{ $relationshipDetails->column ?? '' }}</option>
                     </select>
                 </div>
             </div>
@@ -89,9 +90,11 @@
         <div class="relationship_details_content margin_top">
             <label>{{ __('voyager::database.relationship.display_the') }} <span class="label_table_name"></span></label>
             <select name="relationship_label_{{ $relationship['field'] }}" class="rowDrop select2" data-table="{{ $relationshipDetails->table ?? '' }}" data-selected="{{ $relationshipDetails->label ?? ''}}">
+                <option value="{{ $relationshipDetails->label ?? '' }}">{{ $relationshipDetails->label ?? '' }}</option>
             </select>
             <label class="relationship_key" style="@if($relationshipDetails->type == 'belongsTo' || $relationshipDetails->type == 'belongsToMany') display:block @endif">{{ __('voyager::database.relationship.store_the') }} <span class="label_table_name"></span></label>
             <select name="relationship_key_{{ $relationship['field'] }}" class="rowDrop select2 relationship_key" style="@if($relationshipDetails->type == 'belongsTo' || $relationshipDetails->type == 'belongsToMany') display:block @endif" data-table="@if(isset($relationshipDetails->table)){{ $relationshipDetails->table }}@endif" data-selected="@if(isset($relationshipDetails->key)){{ $relationshipDetails->key }}@endif">
+                <option value="{{ $relationshipDetails->key ?? '' }}">{{ $relationshipDetails->key ?? '' }}</option>
             </select>
             <br>
             @isset($relationshipDetails->taggable)