diff --git a/components/browseArchives/index.js b/components/browseArchives/index.js
index 3b4f7ad..678d6ef 100644
--- a/components/browseArchives/index.js
+++ b/components/browseArchives/index.js
@@ -19,6 +19,7 @@ class Search extends React.Component {
       activeSingleInterviewId: 1,
       isSearchActive: false,
     };
+
     this.onInputChange = this.onInputChange.bind(this);
     this.toggleSingleInterview = this.toggleSingleInterview.bind(this);
     this.toggleInterviewsListModal = this.toggleInterviewsListModal.bind(this);
@@ -43,6 +44,7 @@ class Search extends React.Component {
 
   toggleInterviewsListModal() {
     const { isInterviewsListModalOpen } = this.state;
+
     this.setState({
       isInterviewsListModalOpen: !isInterviewsListModalOpen,
       isSingleInterviewModalOpen: false,
@@ -51,6 +53,7 @@ class Search extends React.Component {
 
   toggleSingleInterview(event) {
     const { isSingleInterviewModalOpen, isInterviewsListModalOpen } = this.state;
+
     this.setState({
       isInterviewsListModalOpen: !isInterviewsListModalOpen,
       isSingleInterviewModalOpen: !isSingleInterviewModalOpen,
diff --git a/components/interviews/interviewsList/sss b/components/interviews/interviewsList/sss
new file mode 100644
index 0000000..cd39879
--- /dev/null
+++ b/components/interviews/interviewsList/sss
@@ -0,0 +1,356 @@
+const data = [
+  { id: 1,
+    name: 'Fabio Berger + Remco Bloemen',
+    content: '<div>\n' +
+    '<p class="c13"></p>\n' +
+    '</div>\n' +
+    '<h2 class="c16" id="h.5oofkjz263bh"><span class="c10 c11">Fabio\n' +
+    'Berger + Remco Bloemen</span></h2>\n' +
+    '<p class="c13"></p>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-0 start" start="1">\n' +
+    '<li class="c6"><span class="c9">What type of apps do you\n' +
+    'build?</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-1 start" start="1">\n' +
+    '<li class="c8"><span class="c3">0x - Decentralized exchange\n' +
+    'protocol. It is a set of smart contracts that handle standard\n' +
+    'transactions in an order format.</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-2 start" start="1">\n' +
+    '<li class="c5"><span class="c3">The key advantage here is that\n' +
+    'these smart contracts leads to shared liquidity</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-1" start="2">\n' +
+    '<li class="c8"><span class="c3">We also achieve increased security\n' +
+    'and network liquidity through our architecture.</span></li>\n' +
+    '<li class="c8"><span class="c3">We launched the network in August\n' +
+    '2017.</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-2 start" start="1">\n' +
+    '<li class="c5"><span class="c3">It works, but is V1. We are working\n' +
+    'on V2 which helps people build hybrid stations, supports new token\n' +
+    'standards, and makes the contract more gas efficient.</span></li>\n' +
+    '<li class="c5"><span class="c3">V1 only allows humans to create\n' +
+    'orders; V2 will allow new smart contract to create orders. This is\n' +
+    'HUGE.</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-1" start="4">\n' +
+    '<li class="c8"><span class="c3">Notes:</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-2 start" start="1">\n' +
+    '<li class="c5"><span class="c3">We’re building the protocol;\n' +
+    'designing the standard; building dev tools for anyone to build a\n' +
+    'decentralized exchange.</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-1" start="5">\n' +
+    '<li class="c8"><span class="c3">Orders may become invalid for any\n' +
+    'reason:</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-2 start" start="1">\n' +
+    '<li class="c5"><span class="c3">Order being filled</span></li>\n' +
+    '<li class="c5"><span class="c3">Griefing attacks</span></li>\n' +
+    '<li class="c5"><span class="c3">We’ve now built an OrderWatcher\n' +
+    'that keeps relayers updated on the state of orders.</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-3 start" start="1">\n' +
+    '<li class="c7"><span class="c3">We’re using contract Events as a\n' +
+    'proxy for state changes.</span></li>\n' +
+    '<li class="c7"><span class="c3">Can do a diff between state trees\n' +
+    'and between block headers.</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-2" start="4">\n' +
+    '<li class="c5"><span class="c3">We also have a set of smart\n' +
+    'contracts to handle settlement;</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-3 start" start="1">\n' +
+    '<li class="c7"><span class="c3">Everyone who wants to trade is\n' +
+    'setting allowances on a smart contract.</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-4 start" start="1">\n' +
+    '<li class="c0"><span class="c3">We want upgradability.</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-0" start="2">\n' +
+    '<li class="c6"><span class="c9 c10">What are the\n' +
+    'tools/libraries/frameworks you use?</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-1 start" start="1">\n' +
+    '<li class="c8"><span class="c3">EthereumJS / truffle hardwallet\n' +
+    'provider / Typedoc (to generate documentation) /</span></li>\n' +
+    '<li class="c8"><span class="c3">We don’t use Truffle\n' +
+    'anymore</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-2 start" start="1">\n' +
+    '<li class="c5"><span class="c3">Not reliable – can have race\n' +
+    'conditions;</span></li>\n' +
+    '<li class="c5"><span class="c3">Artifacts don’t allow you to have\n' +
+    'versions of the contract on different networks</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-3 start" start="1">\n' +
+    '<li class="c7"><span class="c3">You don’t run into this stuff if\n' +
+    'you’re just building a “hello world”</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-2" start="3">\n' +
+    '<li class="c5"><span class="c3">Overwriting parts of the\n' +
+    'contracts;</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-1" start="3">\n' +
+    '<li class="c8"><span class="c3">We rolled our own. It’s open-source\n' +
+    'but not documented. We have other things that are keeping us\n' +
+    'busy.</span></li>\n' +
+    '<li class="c8"><span class="c3">The problem is that Truffle has too\n' +
+    'much functionality –– we would like to see more of a Unix\n' +
+    'philosophy.</span></li>\n' +
+    '<li class="c8"><span class="c3">Cannot support different versions\n' +
+    'of Solidity.</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-2 start" start="1">\n' +
+    '<li class="c5"><span class="c3">Version management doesn’t\n' +
+    'exist.</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-1" start="6">\n' +
+    '<li class="c8"><span class="c3">EthPM –– doesn’t have versioning\n' +
+    'either? It’s going through a big refactor, so we held off. We need\n' +
+    'the NPM package manager.</span></li>\n' +
+    '<li class="c8"><span class="c3">We have built a lot of developer\n' +
+    'tools to interface with the smart contracts ourselves.</span></li>\n' +
+    '<li class="c8"><span class="c3">We have also built own deployer and\n' +
+    'migration tool, as truffle’s did not suit our needs.</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-0" start="3">\n' +
+    '<li class="c6"><span class="c9 c10">What are your biggest\n' +
+    'frustrations?</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-1 start" start="1">\n' +
+    '<li class="c8"><span class="c3">Getting a simple experimental\n' +
+    'environment up is hard</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-2 start" start="1">\n' +
+    '<li class="c5"><span class="c3">Remix is there; but it’s not\n' +
+    'enough.</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-1" start="2">\n' +
+    '<li class="c8"><span class="c3">Tracing and profiling is not\n' +
+    'existent.</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-2 start" start="1">\n' +
+    '<li class="c5"><span class="c3">Remix does it, but can’t do it\n' +
+    'locally.</span></li>\n' +
+    '<li class="c5"><span class="c3">“Code coverage” tool exists but\n' +
+    'inserts console.logs in</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-3 start" start="1">\n' +
+    '<li class="c7"><span class="c3">Adding up gas costs per line of\n' +
+    'code.</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-2" start="3">\n' +
+    '<li class="c5"><span class="c3">Need to do profiling, because gas\n' +
+    'costs depend on inputs.</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-1" start="3">\n' +
+    '<li class="c8"><span class="c3">Solidity language\n' +
+    'itself:</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-2 start" start="1">\n' +
+    '<li class="c5"><span class="c3">Crashed the Solidity compiler twice\n' +
+    'today.</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-3 start" start="1">\n' +
+    '<li class="c7"><span class="c3">E.g. AbiEncoderV2 is pretty new and\n' +
+    'hard to understand/use.</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-2" start="2">\n' +
+    '<li class="c5"><span class="c3">The code that it produces is\n' +
+    'inefficient.</span></li>\n' +
+    '<li class="c5"><span class="c3">There is a stark stack limit in\n' +
+    'solidity</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-3 start" start="1">\n' +
+    '<li class="c7"><span class="c3">All the variables are locally\n' +
+    'scoped.</span></li>\n' +
+    '<li class="c7"><span class="c3">Un-intuitive as it is a curly\n' +
+    'braced language.</span></li>\n' +
+    '<li class="c7"><span class="c3">The lifecycle hook value_of is\n' +
+    'within a function.</span></li>\n' +
+    '<li class="c7"><span class="c3">Can only access top 16 slack slots.\n' +
+    'Including input and output.</span></li>\n' +
+    '<li class="c7"><span class="c3">We need to implement a graph\n' +
+    'coloring register allocator – to find out what the lifetime of the\n' +
+    'variables is.</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-4 start" start="1">\n' +
+    '<li class="c0"><span class="c3">“This stack slot was used in the\n' +
+    'first half –– the second half you can use”</span></li>\n' +
+    '<li class="c0"><span class="c3">Or implement register\n' +
+    'splitting.</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-2" start="4">\n' +
+    '<li class="c5"><span class="c3">Function inlining is frustrating\n' +
+    'sometimes:</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-3 start" start="1">\n' +
+    '<li class="c7"><span class="c3">E.g. SafeMath –– turns every\n' +
+    'operator into function call – which is a huge gas sink.</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-2" start="5">\n' +
+    '<li class="c5"><span class="c3">How Solidity optimizes could be\n' +
+    'improved:</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-3 start" start="1">\n' +
+    '<li class="c7"><span class="c3">It focuses on the code size (which\n' +
+    'makes sense since it’s minimizing the state tree); but sometimes\n' +
+    'you need to optimize size of tx gas (e.g. 0x needs optimized\n' +
+    'fillOrder call)</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-2" start="6">\n' +
+    '<li class="c5"><span class="c3">ABI doesn’t implement\n' +
+    'introspection</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-3 start" start="1">\n' +
+    '<li class="c7"><span class="c3">EIP 165</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-4 start" start="1">\n' +
+    '<li class="c0"><span class="c3">E.g. “does this contract implement\n' +
+    'ERC20, or ERC223?”</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-3" start="2">\n' +
+    '<li class="c7"><span class="c3">Solidity should have this\n' +
+    'in-built.</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-4 start" start="1">\n' +
+    '<li class="c0"><span class="c3">Should be built into the API spec\n' +
+    'and compiler.</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-2" start="7">\n' +
+    '<li class="c5"><span class="c3">Inheritance:</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-3 start" start="1">\n' +
+    '<li class="c7"><span class="c3">Interface or abstract contract –\n' +
+    'e.g. Solidity automatically creates getters for state functions ––\n' +
+    'collides with</span></li>\n' +
+    '<li class="c7"><span class="c3">Contract which implements an\n' +
+    'interface – public or external for abstract functions – they\n' +
+    'collide</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-1" start="4">\n' +
+    '<li class="c8"><span class="c3">ERCs – there is not a formal way to\n' +
+    'describe the interface for contracts.</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-2 start" start="1">\n' +
+    '<li class="c5"><span class="c3">Have a standard repo –– this will\n' +
+    'lead to a canonical ABI definition –– can have semantic rules\n' +
+    'around this. Could run some specific unit tests against</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-0" start="4">\n' +
+    '<li class="c6"><span class="c9 c10">How do you handle\n' +
+    'testing?</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-1 start" start="1">\n' +
+    '<li class="c8"><span class="c3">Testrpc has gotten better\n' +
+    '––</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-2 start" start="1">\n' +
+    '<li class="c5"><span class="c3">Increases the speed at which you\n' +
+    'can dev.</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-1" start="2">\n' +
+    '<li class="c8"><span class="c3">Blockstream is really cool. Written\n' +
+    'by Mica (from Augur?), under the EthereumJS lib.</span></li>\n' +
+    '<li class="c8"><span class="c3">Good dealing with block re-orgs and\n' +
+    'changes in state.</span></li>\n' +
+    '<li class="c8"><span class="c3">Continuous Integration:</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-2 start" start="1">\n' +
+    '<li class="c5"><span class="c3">Doesn’t really work for smart\n' +
+    'contracts.</span></li>\n' +
+    '<li class="c5"><span class="c3">We just use testrpc.</span></li>\n' +
+    '<li class="c5"><span class="c3">Neufund was different than\n' +
+    '0x:</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-3 start" start="1">\n' +
+    '<li class="c7"><span class="c3">Neufund was a trustee for tokens ––\n' +
+    'it was centralized by definition.</span></li>\n' +
+    '<li class="c7"><span class="c3">This made it simpler: I could\n' +
+    'create “open-ended” contracts –– a switch statement, that the\n' +
+    'default would send to another proxy contract.</span></li>\n' +
+    '<li class="c7"><span class="c3">But wouldn’t be able to do this\n' +
+    'with 0x –– e.g. if we wanted to add Shnorr signatures –– because\n' +
+    'it’s a governance / security issues.</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-0" start="5">\n' +
+    '<li class="c6"><span class="c9">How do you handle smart contract\n' +
+    'verification and security?</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-1 start" start="1">\n' +
+    '<li class="c8"><span class="c3">Code audits before\n' +
+    'deployment</span></li>\n' +
+    '<li class="c8"><span class="c3">Want to add a formal verification\n' +
+    'tool to our deployment tool.</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-2 start" start="1">\n' +
+    '<li class="c5"><span class="c3">By analyzing the code, you can find\n' +
+    'patterns.</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-1" start="3">\n' +
+    '<li class="c8"><span class="c3">I manually did an audit in v0 of\n' +
+    '0x:</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-2 start" start="1">\n' +
+    '<li class="c5"><span class="c3">Make sure all functions have a\n' +
+    '“Read -&gt; Write -&gt; External Call” pattern, so you don’t have\n' +
+    'any race conditions.</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-0" start="6">\n' +
+    '<li class="c6"><span class="c9 c10">Other bounties?</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-1 start" start="1">\n' +
+    '<li class="c8"><span class="c3">Rest of the bounties from\n' +
+    'Remco</span></li>\n' +
+    '<li class="c8"><span class="c14">State-watching –– built-in\n' +
+    'diff’ing of state trees</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-2 start" start="1">\n' +
+    '<li class="c5"><span class="c3">Should be implemented in the\n' +
+    'Ethereum clients – Geth and Rust.</span></li>\n' +
+    '<li class="c5"><span class="c3">They want this feature for\n' +
+    'OrderWatcher.</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-1" start="3">\n' +
+    '<li class="c8"><span class="c3">EIP process is\n' +
+    'suboptimal:</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-2 start" start="1">\n' +
+    '<li class="c5"><span class="c3">Lacks in consensus-building.\n' +
+    'There’s vocal people who don’t have good ideas; there’s a lot of\n' +
+    'noise.</span></li>\n' +
+    '<li class="c5"><span class="c3">To improve: committee-based\n' +
+    'approach (reputable stakeholders from reputable projects who get\n' +
+    'together?).</span></li>\n' +
+    '<li class="c5"><span class="c3">Problems are getting solved at the\n' +
+    'wrong abstraction level.</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-3 start" start="1">\n' +
+    '<li class="c7"><span class="c3">E.g. NFT standards.</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-1" start="4">\n' +
+    '<li class="c8"><span class="c3">Neufund was largest Solidity\n' +
+    'project before –– tokenized equity.</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-2 start" start="1">\n' +
+    '<li class="c5"><span class="c3">You want a EuroToken. You don’t\n' +
+    'want your company valuated in Ether.</span></li>\n' +
+    '<li class="c5"><span class="c3">What if blockchain forks; which\n' +
+    'token is actually tied to the company?</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-1" start="5">\n' +
+    '<li class="c8"><span class="c3">Bounty approach gives many\n' +
+    'different styles within the codebase.</span></li>\n' +
+    '</ol>\n' +
+    '<ol class="c1 lst-kix_4ia1cohmgc5c-2 start" start="1">\n' +
+    '<li class="c5"><span class="c3">This is a problem; e.g. OpenSSL\n' +
+    'codebase after Masters / PhDs.</span></li>\n' +
+    '</ol>\n' +
+    '<p class="c13"></p>',
+  },
+];
+
+export default data;
diff --git a/components/modal/index.js b/components/modal/index.js
index 30f780a..0a22fc8 100644
--- a/components/modal/index.js
+++ b/components/modal/index.js
@@ -4,7 +4,7 @@ import './style.scss';
 
 const Modal = props => (
   <div className={`modal ${props.isModalOpen ? 'modal-open' : ''} ${props.modalOnMobileOnly ? 'modal-on-mobile-only' : ''} `}>
-    <div className="modal-inner">
+    <div className="modal-inner container">
       { props.children }
       <div role="button" tabIndex="0" onClick={props.closeModal} className="modal-close">x</div> {/* eslint-disable-line */}
     </div>
diff --git a/components/modal/style.scss b/components/modal/style.scss
index 8926cd3..b2199bc 100644
--- a/components/modal/style.scss
+++ b/components/modal/style.scss
@@ -10,8 +10,9 @@
     left: 0;
     width: 100vw;
     height: 100vh;
-    background-color: rgba(0, 0, 0, 0.6);
     z-index: 3;
+    background-color: #fff;
+    overflow: auto;
   }
 
   &.modal-on-mobile-only {
@@ -40,25 +41,23 @@
 }
 
 .modal-inner {
-  position: relative;
-  z-index: 4;
-  background-color: #fff;
-  width: 90%;
-  height: 90%;
-  top: 5%;
-  left: 5%;
-  overflow: auto;
-  padding: calculateRem(20);
+  width: 100%;
+  height: 100%;
+  padding-top: calculateRem(24);
 
   @media (min-width: $tablet) {
-    padding-top: calculateRem(60);
+    padding-top: calculateRem(48);
+  }
+
+  &.container {
+    max-width: calculateRem(1024);
   }
 }
 
 .modal-close {
-  position: absolute;
-  top: calculateRem(12);
-  right: calculateRem(12);
+  position: fixed;
+  top: calculateRem(16);
+  right: calculateRem(16);
   padding: calculateRem(4);
   background-color: #cfcfcf;
   text-align: center;
@@ -67,6 +66,7 @@
   border-radius: 50%;
   cursor: pointer;
   outline: none;
+  z-index: 4;
 
   &:hover {
     background-color: #c1c1c1;
diff --git a/styles.scss b/styles.scss
index 52c2fce..10abe84 100644
--- a/styles.scss
+++ b/styles.scss
@@ -13,5 +13,6 @@
 .container {
   max-width: calculateRem($container-width);
   margin: 0 auto;
-  padding: 0 calculateRem($container-padding);
+  padding-left: calculateRem($container-padding);
+  padding-right: calculateRem($container-padding);
 }