diff --git a/background.html b/background.html
index 7510c953..1b177c9f 100644
--- a/background.html
+++ b/background.html
@@ -132,6 +132,12 @@
       {{> avatar }}
       <div class='contact-details'> {{> contact_name_and_number }} </div>
   </script>
+  <script type='text/x-tmpl-mustache' id='new-contact'>
+      {{> avatar }}
+      <div class='contact-details'>
+          {{> contact_name_and_number }}
+      </div>
+  </script>
   <script type='text/x-tmpl-mustache' id='conversation-preview'>
       {{> avatar }}
       <div class='contact-details'>
diff --git a/js/views/conversation_search_view.js b/js/views/conversation_search_view.js
index a20e33c7..5226e831 100644
--- a/js/views/conversation_search_view.js
+++ b/js/views/conversation_search_view.js
@@ -5,6 +5,31 @@
     'use strict';
     window.Whisper = window.Whisper || {};
 
+    Whisper.NewContactView = Whisper.View.extend({
+        templateName: 'new-contact',
+        className: 'conversation-list-item contact',
+        events: {
+            'click': 'validate'
+        },
+        initialize: function() {
+            this.listenTo(this.model, 'change', this.render); // auto update
+        },
+        render_attributes: function() {
+            return {
+                    number: 'Click to create new contact',
+                    title: this.model.getNumber(),
+                    avatar: this.model.getAvatar(),
+            };
+        },
+        validate: function() {
+            if (this.model.isValid()) {
+                this.$el.addClass('valid');
+            } else {
+                this.$el.removeClass('valid');
+            }
+        },
+    });
+
     Whisper.ConversationSearchView = Whisper.View.extend({
         className: 'conversation-search',
         initialize: function(options) {
@@ -25,7 +50,7 @@
         },
 
         events: {
-            'select .new-contact': 'createConversation',
+            'click .new-contact': 'createConversation',
         },
 
         filterContacts: function(e) {
@@ -34,7 +59,9 @@
                 if (this.maybeNumber(query)) {
                     this.new_contact_view.model.set('id', query);
                     this.new_contact_view.render().$el.show();
+                    this.new_contact_view.validate();
                     this.hideHints();
+
                 } else {
                     this.new_contact_view.$el.hide();
                 }
@@ -55,7 +82,7 @@
                 this.new_contact_view.$el.hide();
             }
             // Creates a view to display a new contact
-            this.new_contact_view = new Whisper.ConversationListItemView({
+            this.new_contact_view = new Whisper.NewContactView({
                 el: this.$new_contact,
                 model: ConversationController.create({
                     type: 'private',
@@ -66,8 +93,7 @@
 
         createConversation: function() {
             var conversation = this.new_contact_view.model;
-            var error = conversation.validate(conversation.attributes);
-            if (!error) {
+            if (this.new_contact_view.model.isValid()) {
                 ConversationController.findOrCreatePrivateById(
                     this.new_contact_view.model.id
                 ).then(function(conversation) {
@@ -75,6 +101,9 @@
                     this.initNewContact();
                     this.resetTypeahead();
                 }.bind(this));
+            } else {
+                this.new_contact_view.$('.number').text("Invalid number");
+                this.$input.focus();
             }
         },
 
diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss
index a811b9e8..a7288e19 100644
--- a/stylesheets/_index.scss
+++ b/stylesheets/_index.scss
@@ -147,15 +147,17 @@ input.search {
 .new-contact {
   display: none;
   cursor: pointer;
+  opacity: 0.7;
   background: $grey_l;
-  .name, .last-timestamp, .avatar { display: none; }
-  .contact-details::before {
-    content: 'Create new contact';
+  .contact-details .number {
     display: block;
     font-style: italic;
-    opacity: 0.7;
     padding-right: 8px;
   }
+
+  &.valid {
+    opacity: 1.0
+  }
 }
 
 .index {
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index 72449e33..c7bddb64 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -487,15 +487,14 @@ input.search {
 .new-contact {
   display: none;
   cursor: pointer;
+  opacity: 0.7;
   background: #f3f3f3; }
-  .new-contact .name, .new-contact .last-timestamp, .new-contact .avatar {
-    display: none; }
-  .new-contact .contact-details::before {
-    content: 'Create new contact';
+  .new-contact .contact-details .number {
     display: block;
     font-style: italic;
-    opacity: 0.7;
     padding-right: 8px; }
+  .new-contact.valid {
+    opacity: 1; }
 
 .index {
   max-width: 1300px;