diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index 6c347c0..63e576d 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -15,7 +15,7 @@ jobs:
       - name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
         run: |
           yarn install
-          yarn build
+          NODE_ENV=production yarn build
 
       - name: Deploy 🚀
         uses: JamesIves/github-pages-deploy-action@3.5.9
diff --git a/src/App.tsx b/src/App.tsx
index 0bdf98a..02a0fdc 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,8 +8,8 @@ import AppRouter from './Router';
 const App: React.FC = () => (
   <GithubProvider username="morten-olsen">
     <EncryptionProvider>
-      <Layout>
-        <Layout.Content style={{ padding: '25px' }}>
+      <Layout style={{minHeight:"100vh"}}>
+        <Layout.Content style={{ padding: '25px', flex: 1 }}>
           <AppRouter/>
         </Layout.Content>
       </Layout>
diff --git a/src/Router.tsx b/src/Router.tsx
index 6adbae5..ee7f0e8 100644
--- a/src/Router.tsx
+++ b/src/Router.tsx
@@ -6,6 +6,7 @@ import {
 } from 'react-router-dom';
 
 import Encrypt from './screens/Encrypt';
+import Welcome from './screens/Welcome';
 import Debug from './screens/Debug';
 
 const AppRouter: React.FC = () => (
@@ -14,6 +15,9 @@ const AppRouter: React.FC = () => (
       <Route path="/debug">
         <Debug />
       </Route>
+      <Route path="/welcome">
+        <Welcome />
+      </Route>
       <Route path="/">
         <Encrypt />
       </Route>
diff --git a/src/components/Add.tsx b/src/components/Add.tsx
index c3dc6a0..541e37b 100644
--- a/src/components/Add.tsx
+++ b/src/components/Add.tsx
@@ -1,46 +1,22 @@
-import React, { Fragment, useState } from 'react';
-import { Menu, Dropdown, Form } from 'antd';
-import { DownOutlined, FileOutlined, FileTextOutlined } from '@ant-design/icons';
+import React, { useState } from 'react';
+import { Radio, Divider } from 'antd';
+import { FileOutlined, FileTextOutlined } from '@ant-design/icons';
 import AddText from './AddText';
 import AddFile from './AddFile';
 
-const layout = {
-  labelCol: { span: 2 },
-};
+const DEFAULT_VALUE = 'text';
 
 const Add: React.FC = () => {
-  const [type, setType] = useState<'file' | 'text'>('text');
-
-  const menu = (
-    <Menu>
-      <Menu.Item
-        onClick={() => setType('file')}
-        active={type === 'file'}
-        icon={<FileOutlined />}
-      >
-        File
-      </Menu.Item>
-      <Menu.Item
-        onClick={() => setType('text')}
-        active={type === 'text'}
-        icon={<FileTextOutlined />}
-      >
-        Text
-      </Menu.Item>
-    </Menu>
-  );
+  const [type, setType] = useState<'file' | 'text'>(DEFAULT_VALUE);
 
   return (
     <>
-      <Form {...layout}>
-        <Form.Item
-          label="I want to encrypt a"
-        >
-          <Dropdown overlay={menu}>
-            <a>{type} <DownOutlined /></a>
-          </Dropdown>
-      </Form.Item>
-      </Form>
+      <Divider>
+        <Radio.Group onChange={evt => setType(evt.target.value)} defaultValue={DEFAULT_VALUE}>
+          <Radio.Button value="text"><FileTextOutlined /> Text</Radio.Button>
+          <Radio.Button value="file"><FileOutlined /> File</Radio.Button>
+        </Radio.Group>
+      </Divider>
       {type === 'text' && <AddText />}
       {type === 'file' && <AddFile />}
     </>
diff --git a/src/components/AddFile.tsx b/src/components/AddFile.tsx
index 75fb308..b3e5b68 100644
--- a/src/components/AddFile.tsx
+++ b/src/components/AddFile.tsx
@@ -1,12 +1,13 @@
 import React, { useContext, useCallback } from 'react';
 import styled from 'styled-components';
 import { Layout } from 'antd';
-import { UploadOutlined } from '@ant-design/icons';
+import { FileAddTwoTone } from '@ant-design/icons';
 import { useDropzone } from 'react-dropzone';
 import EncryptionContext from '../contexts/Encryption';
 
-const Icon = styled(UploadOutlined)`
+const Icon = styled(FileAddTwoTone)`
   font-size: 100px;
+  margin-bottom: 20px;
 `;
 
 const DropWrapper = styled(Layout)`
diff --git a/src/components/AddText.tsx b/src/components/AddText.tsx
index 0ce67cf..79f96a1 100644
--- a/src/components/AddText.tsx
+++ b/src/components/AddText.tsx
@@ -3,14 +3,6 @@ import { Input, Form, Button } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 import EncryptionContext from '../contexts/Encryption';
 
-const layout = {
-  labelCol: { span: 2 },
-};
-
-const tailLayout = {
-  wrapperCol: { offset: 2 },
-};
-
 const AddText : React.FC = () => {
   const { addText } = useContext(EncryptionContext);
   const [name, setName] = useState('');
@@ -23,25 +15,23 @@ const AddText : React.FC = () => {
   }, [text, addText]);
 
   return (
-    <Form {...layout}>
-      <Form.Item
-        label="Name"
-      >
+    <Form>
+      <Form.Item>
         <Input
+          placeholder="Title"
           value={name}
           onChange={evt => setName(evt.target.value)}
         />
       </Form.Item>
-      <Form.Item
-        label="Message"
-      >
+      <Form.Item>
         <Input.TextArea
+          placeholder="Your message here..."
           value={text} 
-          rows={10}
+          rows={6}
           onChange={evt => setText(evt.target.value)} 
         />
       </Form.Item>
-      <Form.Item {...tailLayout}>
+      <Form.Item>
         <Button
           onClick={add}
           type="primary"
diff --git a/src/components/File.tsx b/src/components/File.tsx
index c3b4f2c..8b7ac63 100644
--- a/src/components/File.tsx
+++ b/src/components/File.tsx
@@ -2,6 +2,8 @@ import React, {useMemo} from 'react';
 import {
   List,
   Button,
+  Tooltip,
+  Popconfirm,
 } from 'antd';
 import {
   DeleteOutlined,
@@ -46,12 +48,12 @@ const share = async (file: FileType, fileData: File[]) => {
 }
 
 const IconText = ({ icon, text, ...props }) => (
-  <Button
-    {...props}
-    icon={React.createElement(icon)}
-  >
-    {text}
-  </Button>
+  <Tooltip title={text}>
+    <Button
+      {...props}
+      icon={React.createElement(icon)}
+    />
+  </Tooltip>
 );
 
 const FileView: React.FC<Props> = ({
@@ -67,12 +69,18 @@ const FileView: React.FC<Props> = ({
 
   if (file.link) {
     actions.push(
-      <IconText
-        icon={DeleteOutlined}
-        danger
-        text="Delete"
-        onClick={remove}
-      />
+      <Popconfirm
+        title="Are you sure delete this file?"
+        onConfirm={remove}
+        okText="Yes"
+        cancelText="No"
+      >
+        <IconText
+          icon={DeleteOutlined}
+          danger
+          text="Delete"
+        />
+      </Popconfirm>
     );
   }
 
diff --git a/src/contexts/Encryption.tsx b/src/contexts/Encryption.tsx
index d1dc55d..d2d88c0 100644
--- a/src/contexts/Encryption.tsx
+++ b/src/contexts/Encryption.tsx
@@ -58,7 +58,6 @@ const EncryptionProvider: React.FC = ({
 
   const add = (name: string) => {
     const id = nanoid();
-    message.info(`Beginning to encrypt ${name}`);
     const file: FileType = {
       name: `${name}.asc`,
       reciever: username,
diff --git a/src/index.tsx b/src/index.tsx
index 48748cd..332532c 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -4,5 +4,6 @@ import { render }  from 'react-dom';
 import App from './App';
 
 const root = document.createElement('div');
+root.style.height = '100%';
 document.body.appendChild(root);
 render(<App />, root);
diff --git a/src/screens/Encrypt.tsx b/src/screens/Encrypt.tsx
index 424cbd2..d5ae47a 100644
--- a/src/screens/Encrypt.tsx
+++ b/src/screens/Encrypt.tsx
@@ -1,32 +1,28 @@
-import React, { useContext } from 'react';
-import { Collapse, Badge } from 'antd';
-import Profile from '../components/Profile';
+import React, { useContext, useEffect } from 'react';
+import { Divider, PageHeader } from 'antd';
+import { useHistory } from 'react-router';
 import Add from '../components/Add';
 import FileList from '../components/FileList';
 import EncryptionContext from '../contexts/Encryption';
 
 const Encrypt: React.FC = () => {
+  const history = useHistory();
   const { files } = useContext(EncryptionContext);
+  useEffect(() => {
+    if (localStorage.getItem('welcome') !== 'seen') {
+      history.replace('/welcome');
+    }
+  }, []);
+
   return (
     <>
-      <Collapse ghost defaultActiveKey={[2, 3]}>
-        <Collapse.Panel key={2} header="Encrypt">
-          <Add />
-        </Collapse.Panel>
-        <Collapse.Panel
-          key={3}
-          header={(
-            <Badge count={Object.keys(files).length} offset={[20, 7]}>
-              Files
-            </Badge>
-          )}
-        >
+      <Add />
+      {Object.keys(files).length > 0 && (
+        <>
+          <Divider>Files</Divider>
           <FileList />
-        </Collapse.Panel>
-        <Collapse.Panel key={1} header="Profile">
-          <Profile />
-        </Collapse.Panel>
-      </Collapse>
+        </>
+      )}
     </>
   );
 };
diff --git a/src/screens/Welcome.tsx b/src/screens/Welcome.tsx
new file mode 100644
index 0000000..449ca44
--- /dev/null
+++ b/src/screens/Welcome.tsx
@@ -0,0 +1,54 @@
+import React, { useEffect } from 'react';
+import { Space, Layout, Button, Typography, notification } from 'antd';
+import { AlignLeftOutlined, EyeInvisibleTwoTone, ArrowRightOutlined } from '@ant-design/icons';
+import { useHistory } from 'react-router';
+
+const openNotification = () => {
+  notification.warn({
+    message: 'Slow down!',
+    description: 'I am still working on this, but thanks for the interrest.'
+  });
+};
+
+const Welcome: React.FC = () => {
+  const history = useHistory();
+  useEffect(() => {
+    localStorage.setItem('welcome', 'seen');
+  });
+
+  return (
+    <Layout style={{ maxWidth: 800, margin: 'auto', textAlign: 'center' }}>
+      <Space direction="vertical">
+        <EyeInvisibleTwoTone style={{ fontSize: 200 }} />
+        <Typography.Title level={1}>Protect before sending</Typography.Title>
+        <p>
+        The internet can seem like a scary place, especially if you want to send sensitiv information across it.
+        </p>
+        <p>
+            The truth is that a lot of systems, including e-mails, was not build for the internet that we have today.
+        </p>
+        <p>
+          This is why it is so important to make sure your documents are well protected before sharing.
+        </p>
+        <p>
+          This tool can be used to protect information before sharing them with me. The documents will be encrypted so that only I can ever unlock them, so no snoppy man in the middle...
+        </p>
+        <Button
+          type="primary"
+          icon={<ArrowRightOutlined />}
+          onClick={() => history.push('/')}
+        >
+          Start protecting!
+        </Button>
+        <Button
+          icon={<AlignLeftOutlined />}
+          onClick={openNotification}
+        >
+          Read all the technical stuff
+        </Button>
+      </Space>
+    </Layout>
+  );
+};
+
+export default Welcome;
diff --git a/webpack.config.ts b/webpack.config.ts
index d99ad07..91e0aa4 100644
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -1,12 +1,14 @@
-import webpack, { Configuration } from 'webpack';
+import { Configuration } from 'webpack';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import path from 'path';
 
+const __DEV__ = process.env.NODE_ENV !== 'production';
+
 const config: Configuration = {
-  mode: 'development',
+  mode: __DEV__ ? 'development' : 'production',
   entry: {
     app: [
-      'react-hot-loader/patch',
+      ...(__DEV__ ? ['react-hot-loader/patch'] : []),
       path.join(__dirname, 'src', 'index.tsx'),
     ],
   },
@@ -20,7 +22,10 @@ const config: Configuration = {
     },
   },
   plugins: [
-    new HtmlWebpackPlugin(),
+    new HtmlWebpackPlugin({
+      title: 'Parcel',
+      minify: true,
+    }),
   ],
   module: {
     rules: [{