diff --git a/.gitignore b/.gitignore
index 51d4744..8d4e2a6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,4 +3,5 @@ mhackspace/media/*
 __pycache__/
 node_modules
 src
-.env
\ No newline at end of file
+.env
+staticfiles/*
diff --git a/config/settings/common.py b/config/settings/common.py
index fc4941c..6f767f0 100644
--- a/config/settings/common.py
+++ b/config/settings/common.py
@@ -192,7 +192,7 @@ STATICFILES_FINDERS = (
     'django.contrib.staticfiles.finders.AppDirectoriesFinder',
     'sass_processor.finders.CssFinder',
 )
-
+SASS_PROCESSOR_AUTO_INCLUDE = True
 # MEDIA CONFIGURATION
 # ------------------------------------------------------------------------------
 # See: https://docs.djangoproject.com/en/dev/ref/settings/#media-root
@@ -292,3 +292,5 @@ PAYMENT_PROVIDERS = {
     }
 }
 
+SASS_PRECISION = 8
+
diff --git a/config/settings/local.py b/config/settings/local.py
index f70d9c7..b6def96 100644
--- a/config/settings/local.py
+++ b/config/settings/local.py
@@ -89,3 +89,5 @@ CAPTCHA = {
     'secret': '',
     'site': ''
 }
+
+SASS_PROCESSOR_AUTO_INCLUDE = False
diff --git a/mhackspace/static/images/membership_card_background.png b/mhackspace/static/images/membership_card_background.png
new file mode 100644
index 0000000..da7cc44
Binary files /dev/null and b/mhackspace/static/images/membership_card_background.png differ
diff --git a/mhackspace/static/sass/components/_membership.scss b/mhackspace/static/sass/components/_membership.scss
new file mode 100644
index 0000000..82c5205
--- /dev/null
+++ b/mhackspace/static/sass/components/_membership.scss
@@ -0,0 +1,13 @@
+#membercard {
+    color: #000;
+    background-color: #8C50A5;
+    border-radius: 14px;
+    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.5);
+    background-image: url('/static/images/membership_card_background.png');
+    width: 430px;
+    height: 240px;
+    margin-left: 20px;
+    text-shadow: 1px 1px #FFF;
+    position: relative;
+    float: right;
+}
diff --git a/mhackspace/static/sass/project.scss b/mhackspace/static/sass/project.scss
index 2265e89..dc86b25 100644
--- a/mhackspace/static/sass/project.scss
+++ b/mhackspace/static/sass/project.scss
@@ -4,6 +4,7 @@
 
 @import "components/alert";
 @import "components/header";
+@import "components/membership";
 @import "components/footer";
 
 @import "pages/home";
diff --git a/mhackspace/templates/base.html b/mhackspace/templates/base.html
index 2277ab5..3ef4418 100644
--- a/mhackspace/templates/base.html
+++ b/mhackspace/templates/base.html
@@ -1,3 +1,4 @@
+{% load sass_tags %}
 {% load i18n compress %}
 {% load static from staticfiles %}
 <!DOCTYPE html>
@@ -30,7 +31,7 @@
     <!-- Your stuff: Third-party CSS libraries go here -->
     {#    { compress css }#}
     <!-- This file stores project-specific CSS -->
-    <link href="{% static 'css/project.css' %}" rel="stylesheet">
+    <link href="{% sass_src 'css/project.css' %}" rel="stylesheet">
     {#    { endcompress }#}
   {% endblock %}
 </head>
@@ -50,7 +51,7 @@
       Maidstone Hackspace
     </a>
 
-    <div class="collapse" id="navbarSideMenu" style="position:absolute;top:80px;left:0px;z-index:1;background-color:#bbbbbb;">
+    <div class="collapse navbar-inverse bg-inverse" id="navbarSideMenu" style="position:absolute;top:72px;left:0px;z-index:1;background-color:#bbbbbb;">
       <ul class="nav flex-column navbar-left navbar-nav mr-auto" >
 
         {% if request.user.is_authenticated %}
diff --git a/mhackspace/templates/users/user_detail.html b/mhackspace/templates/users/user_detail.html
index e731a00..7e09d77 100644
--- a/mhackspace/templates/users/user_detail.html
+++ b/mhackspace/templates/users/user_detail.html
@@ -1,25 +1,12 @@
 {% extends "base.html" %}
+{% load i18n %}
 {% load static %}
+{% load crispy_forms_tags %}
 
 {% block title %}User: {{ object.username }}{% endblock %}
 
 {% block content %}
 <div class="container">
-  <style>
-#membercard {
-    color: #000;
-    background-color: #8C50A5;
-    border-radius: 14px;
-    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.5);
-    background-image: url('/static/images/membership_card_background.png');
-    width: 430px;
-    height: 240px;
-    margin-left: 20px;
-    text-shadow: 1px 1px #FFF;
-    position: relative;
-    float: right;
-}
-  </style>
 <h2>Profile</h2>
 <div class="row">
   <div class="col-md-6">
@@ -42,6 +29,12 @@
       <div class="date">Joined {{membership.date}}</div>
       <div class="container">
         <div class="middle">
+
+          <form method="POST" action="{% url 'contact' %}" class="contact_us_form">
+            {% csrf_token %}
+            {{ membership_form|crispy }}
+            <button class="btn btn-primary" type="submit" name="action">{% trans "Send" %}</button>
+          </form>
           <p>MHS{{ user.id|stringformat:"05d" }}</p><p>{{user.name}}{{user.last_name}}</p>
           <a href="/profile/membership/cancel">Cancel Membership</a>
         </div>
diff --git a/mhackspace/users/forms.py b/mhackspace/users/forms.py
index 4c2b43e..41465bc 100644
--- a/mhackspace/users/forms.py
+++ b/mhackspace/users/forms.py
@@ -1,10 +1,22 @@
 # -*- coding: utf-8 -*-
 from django.db import models
-from django.forms import ModelForm
+from django import forms
 
 from .models import Blurb
 
-class BlurbForm(ModelForm):
+PAYMENT_PROVIDERS = (
+    ('gocardless', 'GoCardless'),
+    # ('braintree', 'Braintree'),
+)
+class BlurbForm(forms.ModelForm):
     class Meta:
         model = Blurb
         exclude = ['user']
+
+class MembershipJoinForm(forms.Form):
+    payment_provider = forms.ChoiceField(
+        required=True,
+        widget=forms.Select,
+        choices=PAYMENT_PROVIDERS)
+
+    amount = forms.DecimalField(required=True, decimal_places=2)
diff --git a/mhackspace/users/views.py b/mhackspace/users/views.py
index e511bcd..518d263 100644
--- a/mhackspace/users/views.py
+++ b/mhackspace/users/views.py
@@ -10,7 +10,7 @@ from .models import User
 from .models import Blurb
 from .models import Membership
 
-from .forms import BlurbForm
+from .forms import BlurbForm, MembershipJoinForm
 
 class UserDetailView(LoginRequiredMixin, DetailView):
     model = User
@@ -23,6 +23,7 @@ class UserDetailView(LoginRequiredMixin, DetailView):
         context = super(UserDetailView, self).get_context_data(**kwargs)
         context['blurb'] = Blurb.objects.filter(user=self.get_object()).first()
         context['membership'] = Membership.objects.filter(user=self.get_object()).first()
+        context['membership_form'] = MembershipJoinForm(initial={'amount': 20.00})
         return context
 
 class UserRedirectView(LoginRequiredMixin, RedirectView):
diff --git a/requirements/base.txt b/requirements/base.txt
index d97a070..52bf1b9 100644
--- a/requirements/base.txt
+++ b/requirements/base.txt
@@ -45,7 +45,7 @@ redis>=2.10.5
 rcssmin==1.0.6
 django-compressor==2.1
 django-sass-processor==0.5.3
-
+libsass
 lxml==3.7.2
 
 # Your custom requirements go here
