diff --git a/cmd/playground/main.go b/cmd/playground/main.go
index 0e0b521a..338843db 100644
--- a/cmd/playground/main.go
+++ b/cmd/playground/main.go
@@ -62,13 +62,13 @@ func start(packagesFile, addr, goRoot string, debug bool) error {
 
 	r := mux.NewRouter()
 	langserver.New(packages).Mount(r.PathPrefix("/api").Subrouter())
-	r.PathPrefix("/").Handler(http.FileServer(http.Dir("./public")))
+	r.PathPrefix("/").Handler(langserver.SpaFileServer("./public"))
 
 	zap.S().Infof("Listening on %q", addr)
 
 	var handler http.Handler
 	if debug {
-		zap.S().Warn("Debug mode enabled, CORS disabled")
+		zap.S().Info("Debug mode enabled, CORS disabled")
 		handler = langserver.NewCORSDisablerWrapper(r)
 	} else {
 		handler = r
diff --git a/docker.mk b/docker.mk
index 125c4e5a..b2921005 100644
--- a/docker.mk
+++ b/docker.mk
@@ -1,6 +1,5 @@
 DOCKERFILE ?= ./build/Dockerfile
 IMG_NAME ?= x1unix/go-playground
-TAG ?= 1.0.0
 
 .PHONY: docker
 docker: docker-login docker-make-image
@@ -20,5 +19,8 @@ docker-login:
 
 .PHONY: docker-make-image
 docker-make-image:
+	@if [ -z "$(TAG)" ]; then\
+		echo "required parameter TAG is undefined" && exit 1; \
+	fi;
 	@echo "- Building '$(IMG_NAME):latest' $(TAG)..."
 	docker image build -t $(IMG_NAME):latest -t $(IMG_NAME):$(TAG) -f $(DOCKERFILE) .
\ No newline at end of file
diff --git a/pkg/analyzer/decl.go b/pkg/analyzer/decl.go
index 95be91c4..0b314a02 100644
--- a/pkg/analyzer/decl.go
+++ b/pkg/analyzer/decl.go
@@ -10,7 +10,7 @@ func formatFieldAndType(t ast.Expr, id *ast.Ident) string {
 	return id.String() + " " + typeStr
 }
 
-func formatFuncParams(params *ast.FieldList) (string, int) {
+func formatFieldsList(params *ast.FieldList, joinChar string) (string, int) {
 	if params == nil {
 		return "", 0
 	}
@@ -30,7 +30,7 @@ func formatFuncParams(params *ast.FieldList) (string, int) {
 		}
 	}
 
-	return strings.Join(fieldTypePair, ", "), paramsLen
+	return strings.Join(fieldTypePair, joinChar), paramsLen
 }
 
 func valSpecToItem(isConst bool, v *ast.ValueSpec, withPrivate bool) []*CompletionItem {
@@ -61,26 +61,30 @@ func valSpecToItem(isConst bool, v *ast.ValueSpec, withPrivate bool) []*Completi
 	return items
 }
 
-func funcToItem(fn *ast.FuncDecl) *CompletionItem {
-	ci := &CompletionItem{
-		Label:         fn.Name.String(),
-		Kind:          Function,
-		Documentation: fn.Doc.Text(),
-	}
-
-	params, _ := formatFuncParams(fn.Type.Params)
-	ci.Detail = "func(" + params + ")"
-	ci.InsertText = ci.Label + "(" + params + ")"
-
-	returns, retCount := formatFuncParams(fn.Type.Results)
+func funcToString(fn *ast.FuncType) string {
+	params, _ := formatFieldsList(fn.Params, ", ")
+	str := "func(" + params + ")"
+	returns, retCount := formatFieldsList(fn.Results, ", ")
 	switch retCount {
 	case 0:
 		break
 	case 1:
-		ci.Detail += " " + returns
+		str += " " + returns
 	default:
-		ci.Detail += " (" + returns + ")"
+		str += " (" + returns + ")"
+	}
+
+	return str
+}
+
+func funcToItem(fn *ast.FuncDecl) *CompletionItem {
+	ci := &CompletionItem{
+		Label:         fn.Name.String(),
+		Kind:          Function,
+		Documentation: fn.Doc.Text(),
 	}
 
+	ci.Detail = funcToString(fn.Type)
+	ci.InsertText = ci.Label + "()"
 	return ci
 }
diff --git a/pkg/analyzer/expr.go b/pkg/analyzer/expr.go
index 76d516eb..853f2346 100644
--- a/pkg/analyzer/expr.go
+++ b/pkg/analyzer/expr.go
@@ -23,6 +23,24 @@ func expToString(exp ast.Expr) string {
 		return v.Sel.String()
 	case *ast.StarExpr:
 		return "*" + expToString(v.X)
+	case *ast.Ellipsis:
+		return "..." + expToString(v.Elt)
+	case *ast.MapType:
+		keyT := expToString(v.Key)
+		valT := expToString(v.Value)
+		return "map[" + keyT + "]" + valT
+	case *ast.ChanType:
+		chanT := expToString(v.Value)
+		return "chan " + chanT
+	case *ast.InterfaceType:
+		typ := "interface{"
+		fields, fieldCount := formatFieldsList(v.Methods, "\n")
+		if fieldCount > 0 {
+			typ += "\n" + fields + "\n"
+		}
+		return typ + "}"
+	case *ast.FuncType:
+		return funcToString(v)
 	default:
 		log.Warnf("expToString: unknown expression - [%[1]T %[1]v]", exp)
 		return "interface{}"
diff --git a/pkg/goplay/client.go b/pkg/goplay/client.go
index 89486ade..dba3113e 100644
--- a/pkg/goplay/client.go
+++ b/pkg/goplay/client.go
@@ -4,7 +4,6 @@ import (
 	"bytes"
 	"context"
 	"fmt"
-	"go.uber.org/zap"
 	"io"
 	"net/http"
 	"net/url"
@@ -22,29 +21,47 @@ const (
 
 var ErrSnippetTooLarge = fmt.Errorf("code snippet too large (max %d bytes)", maxSnippetSize)
 
+func newRequest(ctx context.Context, method, queryPath string, body io.Reader) (*http.Request, error) {
+	uri := goPlayURL + "/" + queryPath
+	req, err := http.NewRequestWithContext(ctx, method, uri, body)
+	if err != nil {
+		return nil, err
+	}
+
+	req.Header.Add("User-Agent", userAgent)
+	return req, nil
+}
+
+func getRequest(ctx context.Context, queryPath string) (*http.Response, error) {
+	req, err := newRequest(ctx, http.MethodGet, queryPath, nil)
+	if err != nil {
+		return nil, nil
+	}
+
+	return http.DefaultClient.Do(req)
+}
+
 func doRequest(ctx context.Context, method, url, contentType string, body io.Reader) ([]byte, error) {
-	url = goPlayURL + "/" + url
-	zap.S().Debug("doRequest ", url)
-	req, err := http.NewRequestWithContext(ctx, method, url, body)
+	req, err := newRequest(ctx, method, url, body)
 	if err != nil {
 		return nil, err
 	}
 	req.Header.Add("Content-Type", contentType)
-	req.Header.Add("User-Agent", userAgent)
 	response, err := http.DefaultClient.Do(req)
 	if err != nil {
 		return nil, err
 	}
 
-	var bodyBytes bytes.Buffer
-	_, err = io.Copy(&bodyBytes, io.LimitReader(response.Body, maxSnippetSize+1))
+	bodyBytes := &bytes.Buffer{}
+	_, err = io.Copy(bodyBytes, io.LimitReader(response.Body, maxSnippetSize+1))
 	defer response.Body.Close()
 	if err != nil {
 		return nil, err
 	}
-	if bodyBytes.Len() > maxSnippetSize {
-		return nil, ErrSnippetTooLarge
+	if err = ValidateContentLength(bodyBytes); err != nil {
+		return nil, err
 	}
+
 	return bodyBytes.Bytes(), nil
 }
 
diff --git a/pkg/goplay/errors.go b/pkg/goplay/errors.go
new file mode 100644
index 00000000..92af7464
--- /dev/null
+++ b/pkg/goplay/errors.go
@@ -0,0 +1,18 @@
+package goplay
+
+import "errors"
+
+var ErrSnippetNotFound = errors.New("snippet not found")
+
+type CompileFailedError struct {
+	msg string
+}
+
+func (c CompileFailedError) Error() string {
+	return c.msg
+}
+
+func IsCompileError(err error) bool {
+	_, ok := err.(CompileFailedError)
+	return ok
+}
diff --git a/pkg/goplay/methods.go b/pkg/goplay/methods.go
index bc72e078..8802600e 100644
--- a/pkg/goplay/methods.go
+++ b/pkg/goplay/methods.go
@@ -5,9 +5,60 @@ import (
 	"encoding/json"
 	"fmt"
 	"go.uber.org/zap"
+	"io"
+	"io/ioutil"
+	"net/http"
 	"net/url"
 )
 
+type lener interface {
+	Len() int
+}
+
+func ValidateContentLength(r lener) error {
+	if r.Len() > maxSnippetSize {
+		return ErrSnippetTooLarge
+	}
+
+	return nil
+}
+
+func GetSnippet(ctx context.Context, snippetID string) (*Snippet, error) {
+	fileName := snippetID + ".go"
+	resp, err := getRequest(ctx, "p/"+fileName)
+	if err != nil {
+		return nil, err
+	}
+
+	defer resp.Body.Close()
+	switch resp.StatusCode {
+	case http.StatusOK:
+		snippet, err := ioutil.ReadAll(resp.Body)
+		if err != nil {
+			return nil, err
+		}
+
+		return &Snippet{
+			FileName: fileName,
+			Contents: string(snippet),
+		}, nil
+	case http.StatusNotFound:
+		return nil, ErrSnippetNotFound
+	default:
+		return nil, fmt.Errorf("error from Go Playground server - %d %s", resp.StatusCode, resp.Status)
+	}
+}
+
+func Share(ctx context.Context, src io.Reader) (string, error) {
+	resp, err := doRequest(ctx, http.MethodPost, "share", "text/plain", src)
+	if err != nil {
+		return "", err
+	}
+
+	shareID := string(resp)
+	return shareID, nil
+}
+
 func GoImports(ctx context.Context, src []byte) (*FmtResponse, error) {
 	form := url.Values{}
 	form.Add("imports", "true")
diff --git a/pkg/goplay/types.go b/pkg/goplay/types.go
index 8ffdc4c4..b4007603 100644
--- a/pkg/goplay/types.go
+++ b/pkg/goplay/types.go
@@ -5,6 +5,12 @@ import (
 	"time"
 )
 
+// Snippet represents shared snippet
+type Snippet struct {
+	FileName string
+	Contents string
+}
+
 // FmtResponse is the response returned from
 // upstream play.golang.org/fmt request
 type FmtResponse struct {
@@ -17,7 +23,7 @@ func (r *FmtResponse) HasError() error {
 		return nil
 	}
 
-	return errors.New(r.Error)
+	return CompileFailedError{msg: r.Error}
 }
 
 // CompileEvent represents individual
diff --git a/pkg/langserver/request.go b/pkg/langserver/request.go
index 7b62caf1..8078a000 100644
--- a/pkg/langserver/request.go
+++ b/pkg/langserver/request.go
@@ -13,6 +13,15 @@ import (
 	"github.com/x1unix/go-playground/pkg/analyzer"
 )
 
+type SnippetResponse struct {
+	FileName string `json:"fileName"`
+	Code     string `json:"code"`
+}
+
+type ShareResponse struct {
+	SnippetID string `json:"snippetID"`
+}
+
 type SuggestionRequest struct {
 	PackageName string `json:"packageName"`
 	Value       string `json:"value"`
diff --git a/pkg/langserver/server.go b/pkg/langserver/server.go
index f6f54963..9d587b52 100644
--- a/pkg/langserver/server.go
+++ b/pkg/langserver/server.go
@@ -27,6 +27,8 @@ func (s *Service) Mount(r *mux.Router) {
 	r.Path("/suggest").HandlerFunc(s.GetSuggestion)
 	r.Path("/compile").Methods(http.MethodPost).HandlerFunc(s.Compile)
 	r.Path("/format").Methods(http.MethodPost).HandlerFunc(s.FormatCode)
+	r.Path("/share").Methods(http.MethodPost).HandlerFunc(s.Share)
+	r.Path("/snippet/{id}").Methods(http.MethodGet).HandlerFunc(s.GetSnippet)
 }
 
 func (s *Service) lookupBuiltin(val string) (*SuggestionsResponse, error) {
@@ -107,7 +109,7 @@ func (s *Service) goImportsCode(w http.ResponseWriter, r *http.Request) ([]byte,
 	}
 
 	if err = resp.HasError(); err != nil {
-		Errorf(http.StatusBadRequest, err.Error())
+		Errorf(http.StatusBadRequest, err.Error()).Write(w)
 		return nil, err, false
 	}
 
@@ -118,6 +120,10 @@ func (s *Service) goImportsCode(w http.ResponseWriter, r *http.Request) ([]byte,
 func (s *Service) FormatCode(w http.ResponseWriter, r *http.Request) {
 	code, err, _ := s.goImportsCode(w, r)
 	if err != nil {
+		if goplay.IsCompileError(err) {
+			return
+		}
+
 		s.log.Error(err)
 		return
 	}
@@ -125,9 +131,53 @@ func (s *Service) FormatCode(w http.ResponseWriter, r *http.Request) {
 	WriteJSON(w, CompilerResponse{Formatted: string(code)})
 }
 
+func (s *Service) Share(w http.ResponseWriter, r *http.Request) {
+	shareID, err := goplay.Share(r.Context(), r.Body)
+	defer r.Body.Close()
+	if err != nil {
+		if err == goplay.ErrSnippetTooLarge {
+			Errorf(http.StatusRequestEntityTooLarge, err.Error()).Write(w)
+			return
+		}
+
+		s.log.Error("failed to share code: ", err)
+		NewErrorResponse(err).Write(w)
+	}
+
+	WriteJSON(w, ShareResponse{SnippetID: shareID})
+}
+
+func (s *Service) GetSnippet(w http.ResponseWriter, r *http.Request) {
+	vars := mux.Vars(r)
+	snippetID := vars["id"]
+	snippet, err := goplay.GetSnippet(r.Context(), snippetID)
+	if err != nil {
+		if err == goplay.ErrSnippetNotFound {
+			Errorf(http.StatusNotFound, "snippet %q not found", snippetID).Write(w)
+			return
+		}
+
+		s.log.Errorw("failed to get snippet",
+			"snippetID", snippetID,
+			"err", err,
+		)
+		NewErrorResponse(err).Write(w)
+		return
+	}
+
+	WriteJSON(w, SnippetResponse{
+		FileName: snippet.FileName,
+		Code:     snippet.Contents,
+	})
+}
+
 func (s *Service) Compile(w http.ResponseWriter, r *http.Request) {
 	src, err, changed := s.goImportsCode(w, r)
 	if err != nil {
+		if goplay.IsCompileError(err) {
+			return
+		}
+
 		s.log.Error(err)
 		return
 	}
@@ -149,6 +199,6 @@ func (s *Service) Compile(w http.ResponseWriter, r *http.Request) {
 		result.Formatted = string(src)
 	}
 
-	s.log.Debugw("resp from compiler", "res", res)
+	s.log.Debugw("response from compiler", "res", res)
 	WriteJSON(w, result)
 }
diff --git a/pkg/langserver/spa.go b/pkg/langserver/spa.go
new file mode 100644
index 00000000..5abb689b
--- /dev/null
+++ b/pkg/langserver/spa.go
@@ -0,0 +1,70 @@
+package langserver
+
+import (
+	"net/http"
+	"os"
+	"path"
+	"path/filepath"
+	"strings"
+)
+
+// Advanced static server
+type spaFileServer struct {
+	root            http.Dir
+	NotFoundHandler func(http.ResponseWriter, *http.Request)
+}
+
+func (fs *spaFileServer) ServeHTTP(w http.ResponseWriter, r *http.Request) {
+
+	if containsDotDot(r.URL.Path) {
+		Errorf(http.StatusBadRequest, "Bad Request").Write(w)
+		return
+	}
+
+	//if empty, set current directory
+	dir := string(fs.root)
+	if dir == "" {
+		dir = "."
+	}
+
+	//add prefix and clean
+	upath := r.URL.Path
+	if !strings.HasPrefix(upath, "/") {
+		upath = "/" + upath
+		r.URL.Path = upath
+	}
+	upath = path.Clean(upath)
+
+	//path to file
+	name := path.Join(dir, filepath.FromSlash(upath))
+
+	//check if file exists
+	f, err := os.Open(name)
+	if err != nil {
+		if os.IsNotExist(err) {
+			http.ServeFile(w, r, string(fs.root)+"/index.html")
+			return
+		}
+	}
+	defer f.Close()
+
+	http.ServeFile(w, r, name)
+}
+
+func containsDotDot(v string) bool {
+	if !strings.Contains(v, "..") {
+		return false
+	}
+	for _, ent := range strings.FieldsFunc(v, isSlashRune) {
+		if ent == ".." {
+			return true
+		}
+	}
+	return false
+}
+
+func isSlashRune(r rune) bool { return r == '/' || r == '\\' }
+
+func SpaFileServer(root http.Dir) http.Handler {
+	return &spaFileServer{root: root}
+}
diff --git a/web/package.json b/web/package.json
index b99c8044..d0c554d4 100644
--- a/web/package.json
+++ b/web/package.json
@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^7.1.2",
     "axios": "^0.19.1",
     "circular-dependency-plugin": "^5.2.0",
+    "connected-react-router": "^6.6.1",
     "file-saver": "^2.0.2",
     "monaco-editor": "^0.19.3",
     "monaco-editor-webpack-plugin": "^1.8.2",
@@ -17,8 +18,10 @@
     "react-dom": "^16.12.0",
     "react-monaco-editor": "^0.33.0",
     "react-redux": "^7.1.3",
+    "react-router-dom": "^5.1.2",
     "react-scripts": "3.3.0",
     "redux": "^4.0.5",
+    "redux-thunk": "^2.3.0",
     "typescript": "^3.7.4"
   },
   "scripts": {
diff --git a/web/public/index.html b/web/public/index.html
index 4f18b394..f919bf47 100644
--- a/web/public/index.html
+++ b/web/public/index.html
@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Better Go Playground with syntax highlight support"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
diff --git a/web/src/App.tsx b/web/src/App.tsx
index 742c5d91..12046d96 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -1,30 +1,31 @@
 import React from 'react';
 import { Provider } from 'react-redux';
-import { loadTheme } from '@uifabric/styling';
-import {Fabric} from 'office-ui-fabric-react/lib/Fabric'
+import {Fabric} from 'office-ui-fabric-react/lib/Fabric';
+import { ConnectedRouter } from 'connected-react-router';
+import {Switch, Route} from "react-router-dom";
 
-import { store } from './store';
-import { Header } from './Header';
-import { LightTheme, DarkTheme } from './services/colors';
-import CodeEditor from './editor/CodeEditor';
+import { configureStore } from './store';
+import { history } from './store/configure';
+import Playground from './Playground';
 import './App.css';
-import Preview from './Preview';
+import config from './services/config'
 
-const changeFabricTheme = () => {
-    const { darkMode } = store.getState();
-    loadTheme(darkMode ? DarkTheme : LightTheme);
-};
-store.subscribe(changeFabricTheme);
-changeFabricTheme();
+const store = configureStore();
+config.sync();
 
 function App() {
   return (
     <Provider store={store}>
-        <Fabric className="App">
-            <Header/>
-            <CodeEditor />
-            <Preview />
-        </Fabric>
+        <ConnectedRouter history={history}>
+            <Fabric className="App">
+                <Switch>
+                    <Route
+                        path="/(snippet)?/:snippetID?"
+                        component={Playground}
+                    />
+                </Switch>
+            </Fabric>
+        </ConnectedRouter>
     </Provider>
   );
 }
diff --git a/web/src/Header.tsx b/web/src/Header.tsx
index 87188037..f8afcd2a 100644
--- a/web/src/Header.tsx
+++ b/web/src/Header.tsx
@@ -1,18 +1,18 @@
 import React from 'react';
 import './Header.css'
 import { CommandBar, ICommandBarItemProps } from 'office-ui-fabric-react/lib/CommandBar';
-import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner';
-import * as actions from './editor/actions';
-import { Connect, dispatchToggleTheme } from './store';
 import { getTheme } from '@uifabric/styling';
+import {
+    Connect,
+    newImportFileDispatcher,
+    formatFileDispatcher,
+    runFileDispatcher,
+    saveFileDispatcher,
+    dispatchToggleTheme, shareSnippetDispatcher
+} from './store';
 
-
-interface HeaderState {
-    loading: boolean
-}
-
-@Connect(s => ({darkMode: s.darkMode}))
-export class Header extends React.Component<{darkMode?: boolean}, HeaderState> {
+@Connect(s => ({darkMode: s.settings.darkMode, loading: s.status?.loading}))
+export class Header extends React.Component<any> {
     private fileInput?: HTMLInputElement;
 
     constructor(props) {
@@ -29,22 +29,13 @@ export class Header extends React.Component<{darkMode?: boolean}, HeaderState> {
         this.fileInput = fileElement;
     }
 
-    async onItemSelect() {
+    onItemSelect() {
         const file = this.fileInput?.files?.item(0);
         if (!file) {
             return;
         }
 
-        try {
-            await actions.loadFile(file);
-        } catch (err) {
-            console.error(err);
-        }
-    }
-
-    onFileSave() {
-        actions.saveEditorContents()
-            .catch(err => console.error('failed to save file: %s', err))
+        this.props.dispatch(newImportFileDispatcher(file));
     }
 
     get menuItems(): ICommandBarItemProps[] {
@@ -53,20 +44,35 @@ export class Header extends React.Component<{darkMode?: boolean}, HeaderState> {
                 key: 'openFile',
                 text: 'Open',
                 iconProps: {iconName: 'OpenFile'},
+                disabled: this.props.loading,
                 onClick: () => this.fileInput?.click(),
             },
+            {
+                key: 'run',
+                text: 'Run',
+                ariaLabel: 'Run',
+                iconProps: {iconName: 'Play'},
+                disabled: this.props.loading,
+                onClick: () => {
+                    this.props.dispatch(runFileDispatcher);
+                }
+            },
             {
                 key: 'share',
                 text: 'Share',
                 iconProps: {iconName: 'Share'},
-                onClick: () => alert('Work in progress 🐨')
+                disabled: this.props.loading,
+                onClick: () => {
+                    this.props.dispatch(shareSnippetDispatcher);
+                }
             },
             {
                 key: 'download',
                 text: 'Download',
                 iconProps: {iconName: 'Download'},
+                disabled: this.props.loading,
                 onClick: () => {
-                    this.onFileSave();
+                    this.props.dispatch(saveFileDispatcher);
                 },
             }
         ];
@@ -74,30 +80,15 @@ export class Header extends React.Component<{darkMode?: boolean}, HeaderState> {
 
     get asideItems(): ICommandBarItemProps[] {
         return [
-            {
-                key: 'run',
-                text: 'Run',
-                ariaLabel: 'Run',
-                iconOnly: true,
-                iconProps: {iconName: 'Play'},
-                disabled: this.state.loading,
-                onClick: () => {
-                    this.setState({loading: true});
-                    actions.buildAndRun()
-                        .finally(() => this.setState({loading: false}));
-                }
-            },
             {
                 key: 'format',
                 text: 'Format',
                 ariaLabel: 'Format',
                 iconOnly: true,
-                disabled: this.state.loading,
+                disabled: this.props.loading,
                 iconProps: {iconName: 'Code'},
                 onClick: () => {
-                    this.setState({loading: true});
-                    actions.reformatCode()
-                        .finally(() => this.setState({loading: false}));
+                    this.props.dispatch(formatFileDispatcher);
                 }
             },
             {
@@ -107,7 +98,7 @@ export class Header extends React.Component<{darkMode?: boolean}, HeaderState> {
                 iconOnly: true,
                 iconProps: {iconName: this.props.darkMode ? 'Brightness' : 'ClearNight'},
                 onClick: () => {
-                    dispatchToggleTheme();
+                    this.props.dispatch(dispatchToggleTheme)
                 },
             }
         ];
@@ -124,20 +115,16 @@ export class Header extends React.Component<{darkMode?: boolean}, HeaderState> {
     render() {
         return <header className='header' style={this.styles}>
             <img
-                src='go-logo-blue.svg'
+                src='/go-logo-blue.svg'
                 className='header__logo'
                 alt='Golang Logo'
             />
-            {this.state.loading ? (
-                <Spinner size={SpinnerSize.large} className="header__preloader" />
-            ) : (
-                <CommandBar
-                    className='header__commandBar'
-                    items={this.menuItems}
-                    farItems={this.asideItems}
-                    ariaLabel='CodeEditor menu'
-                />
-            )}
+            <CommandBar
+                className='header__commandBar'
+                items={this.menuItems}
+                farItems={this.asideItems}
+                ariaLabel='CodeEditor menu'
+            />
         </header>;
     }
 }
diff --git a/web/src/Playground.css b/web/src/Playground.css
new file mode 100644
index 00000000..5638ae64
--- /dev/null
+++ b/web/src/Playground.css
@@ -0,0 +1,10 @@
+.playground {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+    /*background: #ccc;*/
+}
\ No newline at end of file
diff --git a/web/src/Playground.tsx b/web/src/Playground.tsx
new file mode 100644
index 00000000..73b45320
--- /dev/null
+++ b/web/src/Playground.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Header } from './Header';
+import CodeEditor from './editor/CodeEditor';
+import './Playground.css';
+import Preview from './Preview';
+import { useParams } from "react-router-dom";
+import {newSnippetLoadDispatcher} from "./store";
+import { connect } from 'react-redux';
+
+const Playground = connect()(function (props) {
+    const {snippetID} = useParams();
+    props.dispatch(newSnippetLoadDispatcher(snippetID));
+
+    return <div className="playground">
+        <Header />
+        <CodeEditor />
+        <Preview />
+    </div>;
+});
+
+export default Playground;
\ No newline at end of file
diff --git a/web/src/Preview.css b/web/src/Preview.css
index 05392733..5e8427c1 100644
--- a/web/src/Preview.css
+++ b/web/src/Preview.css
@@ -4,6 +4,9 @@
     max-height: 640px;
     height: 50%;
     box-sizing: border-box;
+}
+
+.app-preview__content {
     padding: 15px;
     font-size: 10pt;
 }
@@ -16,4 +19,29 @@
 .app-preview__epilogue {
     color: #999;
     margin-top: 15px;
+}
+
+.app-preview__build-error {
+    margin: 0 0 5px;
+}
+
+.app-preview__label {
+    display: block;
+    margin-bottom: 2px;
+}
+
+.app-preview__errors {
+    margin: 0;
+    padding: 0;
+    font: inherit;
+}
+
+.app-preview__progress {
+    position: relative;
+    bottom: 8px;
+    margin-bottom: -18px;
+}
+
+.app-preview__progress--hidden {
+    display: none;
 }
\ No newline at end of file
diff --git a/web/src/Preview.tsx b/web/src/Preview.tsx
index 3f13e87f..cc9c4bf4 100644
--- a/web/src/Preview.tsx
+++ b/web/src/Preview.tsx
@@ -1,17 +1,21 @@
 import React from 'react';
 import './Preview.css';
 import { EDITOR_FONTS } from './editor/props';
-import { Connect } from './store/state';
+import { Connect } from './store';
 import {EvalEvent} from './services/api';
 import EvalEventView from './EvalEventView';
 import { getTheme } from '@uifabric/styling';
+import { MessageBar, MessageBarType } from 'office-ui-fabric-react';
+import {ProgressIndicator} from "office-ui-fabric-react/lib/ProgressIndicator";
+
 
 interface PreviewProps {
     lastError?:string | null;
     events?: EvalEvent[]
+    loading?: boolean
 }
 
-@Connect(s => ({lastError: s.lastError, events: s.events, darkMode: s.darkMode}))
+@Connect(s => ({darkMode: s.settings.darkMode, ...s.status}))
 export default class Preview extends React.Component<PreviewProps> {
     get styles() {
         const { palette } = getTheme();
@@ -21,10 +25,20 @@ export default class Preview extends React.Component<PreviewProps> {
             fontFamily: EDITOR_FONTS
         }
     }
+
+    get progressClass() {
+        return this.props.loading ? 'app-preview__progress' : 'app-preview__progress--hidden';
+    }
+
     render() {
         let content;
         if (this.props.lastError) {
-            content = <span className="app-preview__error">{this.props.lastError}</span>;
+            content = <MessageBar messageBarType={MessageBarType.error} isMultiline={true}>
+                <b className='app-preview__label'>Error</b>
+                <pre className='app-preview__errors'>
+                    {this.props.lastError}
+                </pre>
+            </MessageBar>
         } else if (this.props.events) {
             content = this.props.events.map((e, k) => <EvalEventView
                 key={k}
@@ -39,7 +53,10 @@ export default class Preview extends React.Component<PreviewProps> {
         }
 
         return <div className="app-preview" style={this.styles}>
-            {content}
+            <ProgressIndicator className={this.progressClass}/>
+            <div className='app-preview__content'>
+                {content}
+            </div>
         </div>;
     }
 }
\ No newline at end of file
diff --git a/web/src/editor/CodeEditor.tsx b/web/src/editor/CodeEditor.tsx
index 6feebbce..88b6b351 100644
--- a/web/src/editor/CodeEditor.tsx
+++ b/web/src/editor/CodeEditor.tsx
@@ -1,24 +1,24 @@
 import React from 'react';
 import MonacoEditor from 'react-monaco-editor';
 import {editor} from 'monaco-editor';
-import { Connect } from '../store/state';
-import { dispatchFileChange } from '../store';
+import { Connect, newFileChangeAction } from '../store';
 // import { connect } from 'react-redux';
 
 import { DEFAULT_EDITOR_OPTIONS, LANGUAGE_GOLANG } from './props';
 
 interface CodeEditorState {
     code?: string
+    loading?:boolean
 }
 
-@Connect(s => ({code: s.code, darkMode: s.darkMode}))
-export default class CodeEditor extends React.Component<{code?: string, darkMode?: boolean}, CodeEditorState> {
+@Connect(s => ({code: s.editor.code, darkMode: s.settings.darkMode, loading: s.status?.loading}))
+export default class CodeEditor extends React.Component<any, CodeEditorState> {
     editorDidMount(editor: editor.IStandaloneCodeEditor, monaco: any) {
         editor.focus();
     }
 
     onChange(newValue: string, e: editor.IModelContentChangedEvent) {
-        dispatchFileChange(newValue);
+        this.props.dispatch(newFileChangeAction(newValue));
     }
 
     render() {
diff --git a/web/src/editor/actions.ts b/web/src/editor/actions.ts
deleted file mode 100644
index 1f096598..00000000
--- a/web/src/editor/actions.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import {
-    store,
-    dispatchImportFile,
-    dispatchBuildError,
-    dispatchBuildResult, dispatchFileChange
-} from '../store';
-import client from '../services/api';
-import { saveAs } from 'file-saver';
-
-export const loadFile = (f: File) => {
-    return new Promise((res, rej) => {
-        const reader = new FileReader();
-        reader.onload = e => {
-            const data = e.target?.result as string;
-            dispatchImportFile(f.name, data);
-            res(data);
-        };
-
-        reader.onerror = e => {
-            rej(e);
-        };
-
-        reader.readAsText(f, 'UTF-8');
-    });
-};
-
-export const saveEditorContents = () => {
-    return new Promise((res, rej) => {
-        try {
-            const {fileName, code } = store.getState();
-            const blob = new Blob([code], {type: 'text/plain;charset=utf-8'});
-            saveAs(blob, fileName);
-            res();
-        } catch (err) {
-            rej(err)
-        }
-    })
-};
-
-export const buildAndRun = async () => {
-    try {
-        const {code} = store.getState();
-        const res = await client.evaluateCode(code);
-
-        dispatchBuildResult(res);
-    } catch (err) {
-        console.log('compile error', {err});
-        dispatchBuildError(err.message);
-    }
-};
-
-export const reformatCode = async() => {
-    try {
-        const {code} = store.getState();
-        const res = await client.formatCode(code);
-
-        dispatchFileChange(res.formatted ?? code)
-    } catch (err) {
-        console.log('GoImports error', {err});
-        dispatchBuildError(err.message);
-    }
-};
-
-export const runFile = () => {};
-
diff --git a/web/src/services/api.ts b/web/src/services/api.ts
index 0219a360..359d57b9 100644
--- a/web/src/services/api.ts
+++ b/web/src/services/api.ts
@@ -6,6 +6,15 @@ const apiAddress = process.env['REACT_APP_LANG_SERVER'] ?? window.location.origi
 
 let axiosClient = axios.default.create({baseURL: `${apiAddress}/api`});
 
+export interface ShareResponse {
+    snippetID: string
+}
+
+export interface Snippet {
+    fileName: string
+    code: string
+}
+
 export interface EvalEvent {
     Message: string
     Kind: string
@@ -22,6 +31,8 @@ export interface IAPIClient {
     getSuggestions(query: {packageName?: string, value?:string}): Promise<monaco.languages.CompletionList>
     evaluateCode(code: string): Promise<CompilerResponse>
     formatCode(code: string): Promise<CompilerResponse>
+    getSnippet(id: string): Promise<Snippet>
+    shareSnippet(code: string): Promise<ShareResponse>
 }
 
 class Client implements IAPIClient {
@@ -44,6 +55,14 @@ class Client implements IAPIClient {
         return this.post<CompilerResponse>('/format', code);
     }
 
+    async getSnippet(id: string): Promise<Snippet> {
+        return this.get<Snippet>(`/snippet/${id}`);
+    }
+
+    async shareSnippet(code: string): Promise<ShareResponse> {
+        return this.post<ShareResponse>('/share', code);
+    }
+
     private async get<T>(uri: string): Promise<T> {
         try {
             const resp = await this.client.get<T>(uri);
diff --git a/web/src/services/config.ts b/web/src/services/config.ts
index 4b883241..f8ad1bb4 100644
--- a/web/src/services/config.ts
+++ b/web/src/services/config.ts
@@ -1,12 +1,23 @@
+import {loadTheme} from '@uifabric/styling';
+import {DarkTheme, LightTheme} from "./colors";
+
 const DARK_THEME_KEY = 'ui.darkTheme.enabled';
 
+function setThemeStyles(isDark: boolean) {
+    loadTheme(isDark ? DarkTheme : LightTheme);
+}
+
 export default {
     get darkThemeEnabled(): boolean {
         const v = localStorage.getItem(DARK_THEME_KEY);
         return v === 'true';
     },
 
-    set darkThemeEnabled(val: boolean) {
-      localStorage.setItem(DARK_THEME_KEY, val ? 'true' : 'false');
+    set darkThemeEnabled(enable: boolean) {
+        setThemeStyles(enable);
+        localStorage.setItem(DARK_THEME_KEY, enable ? 'true' : 'false');
+    },
+    sync() {
+        setThemeStyles(this.darkThemeEnabled);
     }
 };
\ No newline at end of file
diff --git a/web/src/services/routes.ts b/web/src/services/routes.ts
new file mode 100644
index 00000000..87a1f9ec
--- /dev/null
+++ b/web/src/services/routes.ts
@@ -0,0 +1,10 @@
+const snippetRegex = /\/snippet\/([A-Za-z0-9]+)$/;
+
+export function getSnippetID(): string | null {
+    const matches = snippetRegex.exec(window.location.pathname);
+    if (!matches || !matches[1]) {
+        return null;
+    }
+
+    return matches[1];
+}
\ No newline at end of file
diff --git a/web/src/store/actions.ts b/web/src/store/actions.ts
index 28b00844..7ddcc05d 100644
--- a/web/src/store/actions.ts
+++ b/web/src/store/actions.ts
@@ -1,8 +1,11 @@
+import {CompilerResponse} from "../services/api";
+
 export enum ActionType {
     IMPORT_FILE     = 'IMPORT_FILE',
     FILE_CHANGE     = 'FILE_CHANGE',
+    LOADING         = 'LOADING',
+    ERROR           = 'ERROR',
     COMPILE_RESULT  = 'COMPILE_RESULT',
-    COMPILE_FAIL    = 'COMPILE_FAIL',
     TOGGLE_THEME    = 'TOGGLE_THEME'
 }
 
@@ -16,6 +19,40 @@ export interface FileImportArgs {
     contents: string
 }
 
-export type ActionTypes = keyof typeof ActionType;
+export const newImportFileAction = (fileName: string, contents: string) =>
+    ({
+        type: ActionType.IMPORT_FILE,
+        payload: {fileName, contents},
+    });
+
+export const newFileChangeAction = (contents: string) =>
+    ({
+        type: ActionType.FILE_CHANGE,
+        payload: contents,
+    });
+
+export const newBuildResultAction = (resp: CompilerResponse) =>
+    ({
+        type: ActionType.COMPILE_RESULT,
+        payload: resp,
+    });
+
+export const newErrorAction = (err: string) =>
+    ({
+        type: ActionType.ERROR,
+        payload: err,
+    });
+
+export const newToggleThemeAction = () =>
+    ({
+        type: ActionType.TOGGLE_THEME,
+        payload: null,
+    });
+
+export const newLoadingAction = () =>
+    ({
+        type: ActionType.LOADING,
+        payload: null,
+    });
 
 
diff --git a/web/src/store/configure.ts b/web/src/store/configure.ts
new file mode 100644
index 00000000..0369883c
--- /dev/null
+++ b/web/src/store/configure.ts
@@ -0,0 +1,26 @@
+import { createBrowserHistory } from 'history'
+import { applyMiddleware, compose, createStore, Store } from 'redux'
+import thunk from 'redux-thunk'
+import { routerMiddleware } from 'connected-react-router'
+
+import { createRootReducer, getInitialState } from './reducers'
+import {Action} from "./actions";
+import {State} from "./state";
+
+const composeEnhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+
+export const history = createBrowserHistory();
+
+export function configureStore(): Store<State, Action> {
+    const preloadedState = getInitialState();
+    return createStore(
+        createRootReducer(history),
+        preloadedState as any,
+        composeEnhancers(
+            applyMiddleware(
+                routerMiddleware(history),
+                thunk,
+            ),
+        ),
+    );
+}
\ No newline at end of file
diff --git a/web/src/store/dispatch.ts b/web/src/store/dispatch.ts
index 672a0194..f65a8f65 100644
--- a/web/src/store/dispatch.ts
+++ b/web/src/store/dispatch.ts
@@ -1,38 +1,114 @@
-import {store} from './state';
-import {CompilerResponse} from '../services/api';
-import {Action, ActionType, FileImportArgs} from './actions';
-
-export function dispatchImportFile(fileName: string, contents: string) {
-    store.dispatch<Action<FileImportArgs>>({
-        type: ActionType.IMPORT_FILE,
-        payload: {fileName, contents},
-    });
-}
+import { saveAs } from 'file-saver';
+import { push } from 'connected-react-router';
+import {
+    newErrorAction,
+    newBuildResultAction,
+    newImportFileAction,
+    newLoadingAction,
+    newToggleThemeAction
+} from './actions';
+import {State} from "./state";
+import client from '../services/api';
+import config from '../services/config';
+import {DEMO_CODE} from '../editor/props';
 
-export function dispatchFileChange(contents: string) {
-    store.dispatch<Action<string>>({
-        type: ActionType.FILE_CHANGE,
-        payload: contents,
-    });
-}
+type StateProvider = () => State
+type DispatchFn = (Action) => any
+type Dispatcher = (DispatchFn, StateProvider) => void
+
+/////////////////////////////
+//      Dispatchers        //
+/////////////////////////////
 
-export function dispatchBuildResult(resp: CompilerResponse) {
-    store.dispatch<Action<CompilerResponse>>({
-        type: ActionType.COMPILE_RESULT,
-        payload: resp,
-    });
+export function newImportFileDispatcher(f: File): Dispatcher {
+    return (dispatch: DispatchFn, _: StateProvider) => {
+        const reader = new FileReader();
+        reader.onload = e => {
+            const data = e.target?.result as string;
+            dispatch(newImportFileAction(f.name, data));
+        };
+
+        reader.onerror = e => {
+            // TODO: replace with a nice modal
+            alert(`Failed to import a file: ${e}`)
+        };
+
+        reader.readAsText(f, 'UTF-8');
+    };
 }
 
-export function dispatchBuildError(err: string) {
-    store.dispatch<Action<string>>({
-        type: ActionType.COMPILE_FAIL,
-        payload: err,
-    });
+export function newSnippetLoadDispatcher(snippetID: string): Dispatcher {
+    return async(dispatch: DispatchFn, _: StateProvider) => {
+        if (!snippetID) {
+            dispatch(newImportFileAction('prog.go', DEMO_CODE));
+            return;
+        }
+
+        try {
+            console.log('loading snippet %s', snippetID);
+            const resp = await client.getSnippet(snippetID);
+            const { fileName, code } = resp;
+            dispatch(newImportFileAction(fileName, code));
+        } catch(err) {
+            dispatch(newErrorAction(err.message));
+        }
+    }
 }
 
-export function dispatchToggleTheme() {
-    store.dispatch<Action>({
-        type: ActionType.TOGGLE_THEME,
-        payload: null,
-    });
-}
\ No newline at end of file
+export const shareSnippetDispatcher: Dispatcher =
+    async (dispatch: DispatchFn, getState: StateProvider) => {
+        dispatch(newLoadingAction());
+        try {
+            const {code} = getState().editor;
+            const res = await client.shareSnippet(code);
+            dispatch(push(`/snippet/${res.snippetID}`));
+        } catch (err) {
+            dispatch(newErrorAction(err.message));
+        }
+    };
+
+export const saveFileDispatcher: Dispatcher =
+    (_: DispatchFn, getState: StateProvider) => {
+        try {
+            const {fileName, code } = getState().editor;
+            const blob = new Blob([code], {type: 'text/plain;charset=utf-8'});
+            saveAs(blob, fileName);
+        } catch (err) {
+            // TODO: replace with a nice modal
+            alert(`Failed to save a file: ${err}`)
+        }
+    };
+
+export const runFileDispatcher: Dispatcher =
+    async (dispatch: DispatchFn, getState: StateProvider) => {
+        dispatch(newLoadingAction());
+        try {
+            const {code} = getState().editor;
+            const res = await client.evaluateCode(code);
+            dispatch(newBuildResultAction(res));
+        } catch (err) {
+            dispatch(newErrorAction(err.message));
+        }
+    };
+
+export const formatFileDispatcher: Dispatcher =
+    async (dispatch: DispatchFn, getState: StateProvider) => {
+        dispatch(newLoadingAction());
+        try {
+            const {code} = getState().editor;
+            const res = await client.formatCode(code);
+
+            if (res.formatted) {
+                dispatch(newBuildResultAction(res));
+            }
+        } catch (err) {
+            dispatch(newErrorAction(err.message));
+        }
+    };
+
+export const dispatchToggleTheme: Dispatcher =
+    (dispatch: DispatchFn, getState: StateProvider) => {
+        const { darkMode } = getState().settings;
+        config.darkThemeEnabled = !darkMode;
+        dispatch(newToggleThemeAction())
+    };
diff --git a/web/src/store/helpers.ts b/web/src/store/helpers.ts
new file mode 100644
index 00000000..cab520a8
--- /dev/null
+++ b/web/src/store/helpers.ts
@@ -0,0 +1,20 @@
+import {Action, ActionType} from './actions';
+
+export type Reducer<S,T> = (s: S, a: Action<T>) => S;
+export type ActionReducers<T> = {[k in keyof typeof ActionType | string]: Reducer<T, any>};
+
+/**
+ * Maps reducers by action type
+ * @param reducers Key value pair of action type and reducer
+ * @param initialState Initial state
+ */
+export function mapByAction<T>(reducers: ActionReducers<T>, initialState: T): Reducer<T, any> {
+    return (state: T = initialState, action: Action) => {
+        if (reducers[action.type]) {
+            const newState = {...state};
+            return reducers[action.type](newState, action);
+        }
+
+        return state;
+    };
+}
\ No newline at end of file
diff --git a/web/src/store/index.ts b/web/src/store/index.ts
index 51a31022..4eb69b69 100644
--- a/web/src/store/index.ts
+++ b/web/src/store/index.ts
@@ -1,3 +1,4 @@
-export { ActionType } from './actions';
-export { store, Connect } from './state';
+export * from './actions';
+export * from './state';
 export * from './dispatch';
+export { configureStore } from './configure';
diff --git a/web/src/store/reducers.ts b/web/src/store/reducers.ts
index 21219d5a..dde76ce4 100644
--- a/web/src/store/reducers.ts
+++ b/web/src/store/reducers.ts
@@ -1,55 +1,75 @@
+import { connectRouter } from 'connected-react-router';
+import { combineReducers } from 'redux';
+
 import {Action, ActionType, FileImportArgs} from './actions';
-import {DEMO_CODE} from "../editor/props";
-import {State} from "./state";
+import {EditorState, SettingsState, State, StatusState} from './state';
 import { CompilerResponse } from '../services/api';
 import localConfig from '../services/config'
+import {mapByAction} from './helpers';
 
-const initialState = {
-    fileName: 'main.go',
-    code: DEMO_CODE,
-    darkMode: localConfig.darkThemeEnabled
-};
-
-type Reducer<T> = (s: State, a: Action<T>) => State;
+const reducers = {
+    editor: mapByAction<EditorState>({
+        [ActionType.FILE_CHANGE]: (s: EditorState, a: Action<string>) => {
+            s.code = a.payload;
+            return s;
+        },
+        [ActionType.IMPORT_FILE]: (s: EditorState, a: Action<FileImportArgs>) => {
+            const {contents, fileName} = a.payload;
+            console.log('Loaded file "%s"', fileName);
+            return {
+                code: contents,
+                fileName,
+            };
+        },
+        [ActionType.COMPILE_RESULT]: (s: EditorState, a: Action<CompilerResponse>) => {
+            if (a.payload.formatted) {
+                s.code = a.payload.formatted;
+            }
 
-const reducers: {[k in ActionType]: Reducer<any>} = {
-    [ActionType.FILE_CHANGE]: (s: State, a: Action<string>) => {
-        s.code = a.payload;
-        return s;
-    },
-    [ActionType.IMPORT_FILE]: (s: State, a: Action<FileImportArgs>) => {
-        console.log('Loaded file "%s"', a.payload.fileName);
-        s.code = a.payload.contents;
-        s.fileName = a.payload.fileName;
-        return s;
-    },
-    [ActionType.COMPILE_RESULT]: (s: State, a: Action<CompilerResponse>) => {
-        s.lastError = null;
-        s.events = a.payload.events;
-
-        if (a.payload.formatted) {
-            s.code = a.payload.formatted;
+            return s;
+        },
+    }, {fileName: 'main.go', code: ''}),
+    status: mapByAction<StatusState>({
+        [ActionType.COMPILE_RESULT]: (s: StatusState, a: Action<CompilerResponse>) => {
+            return {
+                loading: false,
+                lastError: null,
+                events: a.payload.events,
+            }
+        },
+        [ActionType.IMPORT_FILE]: (s: StatusState, a: Action<string>) => {
+            return {...s, loading: false, lastError: null}
+        },
+        [ActionType.ERROR]: (s: StatusState, a: Action<string>) => {
+            return {...s, loading: false, lastError: a.payload}
+        },
+        [ActionType.LOADING]: (s: StatusState, a: Action<string>) => {
+            return {...s, loading: true}
+        },
+    }, {loading: false}),
+    settings: mapByAction<SettingsState>({
+        [ActionType.TOGGLE_THEME]: (s: SettingsState, a: Action) => {
+            s.darkMode = !s.darkMode;
+            localConfig.darkThemeEnabled = s.darkMode;
+            return s;
         }
+    }, {darkMode: localConfig.darkThemeEnabled})
+};
 
-        return s;
+export const getInitialState = (): State => ({
+    status: {
+        loading: true
     },
-    [ActionType.COMPILE_FAIL]: (s: State, a: Action<string>) => {
-        s.lastError = a.payload;
-        return s
+    editor: {
+        fileName: 'prog.go',
+        code: ''
     },
-    [ActionType.TOGGLE_THEME]: (s: State, a: Action) => {
-        s.darkMode = !s.darkMode;
-        localConfig.darkThemeEnabled = s.darkMode;
-        return s;
+    settings: {
+        darkMode: localConfig.darkThemeEnabled
     },
-};
-
-export function rootReducer(state = initialState, action: Action) {
-    const newState = Object.assign({}, state) as State;
-    const r = reducers[action.type];
-    if (!r) {
-        return newState;
-    }
+});
 
-    return reducers[action.type](newState, action);
-}
+export const createRootReducer = history => combineReducers({
+    router: connectRouter(history),
+    ...reducers,
+});
diff --git a/web/src/store/state.ts b/web/src/store/state.ts
index 6b4edd6c..b1c4030c 100644
--- a/web/src/store/state.ts
+++ b/web/src/store/state.ts
@@ -1,23 +1,26 @@
-import {compose, createStore, Store} from 'redux';
 import { connect } from 'react-redux';
-
-import { Action } from './actions';
-import { rootReducer } from './reducers';
 import { EvalEvent } from '../services/api';
 
-export interface State {
-    fileName: string
+export interface EditorState {
+    fileName: string,
     code: string
-    lastError?: string | null
+}
+
+export interface StatusState {
+    loading: boolean,
+    lastError?: string | null,
     events?: EvalEvent[]
+}
+
+export interface SettingsState {
     darkMode: boolean
 }
 
-const composeEnhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
-export const store = createStore<State, Action, null, null>(
-    rootReducer,
-    composeEnhancers(),
-) as Store<State, Action>;
+export interface State {
+    editor: EditorState
+    status?: StatusState,
+    settings: SettingsState
+}
 
 export function Connect(fn: (state: State) => any) {
     return function (constructor: Function) {
diff --git a/web/yarn.lock b/web/yarn.lock
index 3059c6bf..f870b611 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -923,7 +923,7 @@
   dependencies:
     regenerator-runtime "^0.13.2"
 
-"@babel/runtime@^7.5.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.4.0", "@babel/runtime@^7.5.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.8.3.tgz#0811944f73a6c926bb2ad35e918dcc1bfab279f1"
   integrity sha512-fVHx1rzEmwB130VTkLnxR+HmxcTjGzH12LYQcFFoBwakMd3aOMD4OsRN7tGG/UOYE2ektgFrS8uACAoRk1CY0w==
@@ -3001,6 +3001,15 @@ connect-history-api-fallback@^1.6.0:
   resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz#8b32089359308d111115d81cad3fceab888f97bc"
   integrity sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==
 
+connected-react-router@^6.6.1:
+  version "6.6.1"
+  resolved "https://registry.yarnpkg.com/connected-react-router/-/connected-react-router-6.6.1.tgz#f6b7717abf959393fab6756c8d43af1a57d622da"
+  integrity sha512-a/SE3HgpZABCxr083bfAMpgZwUzlv1RkmOV71+D4I77edoR/peg7uJMHOgqWnXXqGD7lo3Y2ZgUlXtMhcv8FeA==
+  dependencies:
+    immutable "^3.8.1"
+    prop-types "^15.7.2"
+    seamless-immutable "^7.1.3"
+
 console-browserify@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.2.0.tgz#67063cef57ceb6cf4993a2ab3a55840ae8c49336"
@@ -4808,6 +4817,11 @@ growly@^1.3.0:
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
   integrity sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=
 
+gud@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
+  integrity sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==
+
 gzip-size@5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-5.1.1.tgz#cb9bee692f87c0612b232840a873904e4c135274"
@@ -4936,6 +4950,18 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
+history@^4.9.0:
+  version "4.10.1"
+  resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
+  integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    loose-envify "^1.2.0"
+    resolve-pathname "^3.0.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+    value-equal "^1.0.1"
+
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -4945,7 +4971,7 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.3.0:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#101685d3aff3b23ea213163f6e8e12f4f111e19f"
   integrity sha512-wbg3bpgA/ZqWrZuMOeJi8+SKMhr7X9TesL/rXMjTzh0p0JUBo3II8DHboYbuIXWRlttrUFxwcu/5kygrCw8fJw==
@@ -5159,6 +5185,11 @@ immer@1.10.0:
   resolved "https://registry.yarnpkg.com/immer/-/immer-1.10.0.tgz#bad67605ba9c810275d91e1c2a47d4582e98286d"
   integrity sha512-O3sR1/opvCDGLEVcvrGTMtLac8GJ5IwZC4puPrLuRj3l7ICKvkmA0vGuU9OW8mV9WIBRnaxp5GJh9IEAaNOoYg==
 
+immutable@^3.8.1:
+  version "3.8.2"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.2.tgz#c2439951455bb39913daf281376f1530e104adf3"
+  integrity sha1-wkOZUUVbs5kT2vKBN28VMOEErfM=
+
 import-cwd@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9"
@@ -5602,6 +5633,11 @@ is-wsl@^2.1.0:
   resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.1.1.tgz#4a1c152d429df3d441669498e2486d3596ebaf1d"
   integrity sha512-umZHcSrwlDHo2TGMXv0DZ8dIUGunZ2Iv68YZnrmCiBPkZ4aaOhtv7pXJKeki9k3qJ3RJr0cDyitcl5wEH3AYog==
 
+isarray@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+  integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=
+
 isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
@@ -6437,7 +6473,7 @@ loglevel@^1.6.4:
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.6.tgz#0ee6300cc058db6b3551fa1c4bf73b83bb771312"
   integrity sha512-Sgr5lbboAUBo3eXCSPL4/KoVz3ROKquOjcctxmHIt+vol2DrqTQe3SwkKKuYhEiWB5kYa13YyopJ69deJ1irzQ==
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -6644,6 +6680,15 @@ min-indent@^1.0.0:
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.0.tgz#cfc45c37e9ec0d8f0a0ec3dd4ef7f7c3abe39256"
   integrity sha1-z8RcN+nsDY8KDsPdTvf3w6vjklY=
 
+mini-create-react-context@^0.3.0:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.3.2.tgz#79fc598f283dd623da8e088b05db8cddab250189"
+  integrity sha512-2v+OeetEyliMt5VHMXsBhABoJ0/M4RCe7fatd/fBy6SMiKazUSEt3gxxypfnk2SHMkdBYvorHRoQxuGoiwbzAw==
+  dependencies:
+    "@babel/runtime" "^7.4.0"
+    gud "^1.0.0"
+    tiny-warning "^1.0.2"
+
 mini-css-extract-plugin@0.8.0:
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.8.0.tgz#81d41ec4fe58c713a96ad7c723cdb2d0bd4d70e1"
@@ -7549,6 +7594,13 @@ path-to-regexp@0.1.7:
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
   integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
 
+path-to-regexp@^1.7.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.8.0.tgz#887b3ba9d84393e87a0a0b9f4cb756198b53548a"
+  integrity sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==
+  dependencies:
+    isarray "0.0.1"
+
 path-type@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-2.0.0.tgz#f012ccb8415b7096fc2daa1054c3d72389594c73"
@@ -8642,7 +8694,7 @@ react-error-overlay@^6.0.4:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.4.tgz#0d165d6d27488e660bc08e57bdabaad741366f7a"
   integrity sha512-ueZzLmHltszTshDMwyfELDq8zOA803wQ1ZuzCccXa1m57k1PxSHfflPD5W9YIiTXLs0JTLzoj6o1LuM5N6zzNA==
 
-react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.9.0:
+react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.9.0:
   version "16.12.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"
   integrity sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==
@@ -8667,6 +8719,35 @@ react-redux@^7.1.3:
     prop-types "^15.7.2"
     react-is "^16.9.0"
 
+react-router-dom@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.1.2.tgz#06701b834352f44d37fbb6311f870f84c76b9c18"
+  integrity sha512-7BPHAaIwWpZS074UKaw1FjVdZBSVWEk8IuDXdB+OkLb8vd/WRQIpA4ag9WQk61aEfQs47wHyjWUoUGGZxpQXew==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    history "^4.9.0"
+    loose-envify "^1.3.1"
+    prop-types "^15.6.2"
+    react-router "5.1.2"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+
+react-router@5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.1.2.tgz#6ea51d789cb36a6be1ba5f7c0d48dd9e817d3418"
+  integrity sha512-yjEuMFy1ONK246B+rsa0cUam5OeAQ8pyclRDgpxuSCrAlJ1qN9uZ5IgyKC7gQg0w8OM50NXHEegPh/ks9YuR2A==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    history "^4.9.0"
+    hoist-non-react-statics "^3.1.0"
+    loose-envify "^1.3.1"
+    mini-create-react-context "^0.3.0"
+    path-to-regexp "^1.7.0"
+    prop-types "^15.6.2"
+    react-is "^16.6.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+
 react-scripts@3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-3.3.0.tgz#f26a21f208f20bd04770f43e50b5bbc151920c2a"
@@ -8823,6 +8904,11 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
+redux-thunk@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"
+  integrity sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw==
+
 redux@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"
@@ -9024,6 +9110,11 @@ resolve-from@^4.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
+resolve-pathname@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd"
+  integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==
+
 resolve-url-loader@3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/resolve-url-loader/-/resolve-url-loader-3.1.1.tgz#28931895fa1eab9be0647d3b2958c100ae3c0bf0"
@@ -9251,6 +9342,11 @@ schema-utils@^2.0.0, schema-utils@^2.0.1, schema-utils@^2.1.0, schema-utils@^2.2
     ajv "^6.10.2"
     ajv-keywords "^3.4.1"
 
+seamless-immutable@^7.1.3:
+  version "7.1.4"
+  resolved "https://registry.yarnpkg.com/seamless-immutable/-/seamless-immutable-7.1.4.tgz#6e9536def083ddc4dea0207d722e0e80d0f372f8"
+  integrity sha512-XiUO1QP4ki4E2PHegiGAlu6r82o5A+6tRh7IkGGTVg/h+UoeX4nFBeCGPOhb4CYjvkqsfm/TUtvOMYC1xmV30A==
+
 select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
@@ -10034,6 +10130,16 @@ timsort@^0.3.0:
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
+tiny-invariant@^1.0.2:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.0.6.tgz#b3f9b38835e36a41c843a3b0907a5a7b3755de73"
+  integrity sha512-FOyLWWVjG+aC0UqG76V53yAWdXfH8bO6FNmyZOuUrzDzK8DI3/JRY25UD7+g49JWM1LXwymsKERB+DzI0dTEQA==
+
+tiny-warning@^1.0.0, tiny-warning@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
+  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
@@ -10386,6 +10492,11 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
+value-equal@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c"
+  integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==
+
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"