diff --git a/packages/server/play-node-go/src/components/Button/Archive/Archive.js b/packages/server/play-node-go/src/components/Button/Archive/Archive.js
new file mode 100644
index 0000000..70e5d34
--- /dev/null
+++ b/packages/server/play-node-go/src/components/Button/Archive/Archive.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import './Archive.scss';
+
+const ArchiveButton = () => {
+ return (
+ <>
+ Archive
+ >
+ );
+}
+
+export default ArchiveButton;
\ No newline at end of file
diff --git a/packages/server/play-node-go/src/components/Login/Login.scss b/packages/server/play-node-go/src/components/Button/Archive/Archive.scss
similarity index 100%
rename from packages/server/play-node-go/src/components/Login/Login.scss
rename to packages/server/play-node-go/src/components/Button/Archive/Archive.scss
diff --git a/packages/server/play-node-go/src/components/Button/Library/Library.js b/packages/server/play-node-go/src/components/Button/Library/Library.js
new file mode 100644
index 0000000..d5eba68
--- /dev/null
+++ b/packages/server/play-node-go/src/components/Button/Library/Library.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import './Library.scss';
+
+const LibraryButton = () => {
+ return (
+ <>
+ Library
+ >
+ );
+}
+
+export default LibraryButton;
\ No newline at end of file
diff --git a/packages/server/play-node-go/src/components/Sidebar/Sidebar.scss b/packages/server/play-node-go/src/components/Button/Library/Library.scss
similarity index 100%
rename from packages/server/play-node-go/src/components/Sidebar/Sidebar.scss
rename to packages/server/play-node-go/src/components/Button/Library/Library.scss
diff --git a/packages/server/play-node-go/src/components/Button/NewGame/NewGame.js b/packages/server/play-node-go/src/components/Button/NewGame/NewGame.js
new file mode 100644
index 0000000..de0d1eb
--- /dev/null
+++ b/packages/server/play-node-go/src/components/Button/NewGame/NewGame.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import './NewGame.scss';
+
+const NewGameButton = () => {
+ return (
+ <>
+ New Game
+ >
+ );
+}
+
+export default NewGameButton;
\ No newline at end of file
diff --git a/packages/server/play-node-go/src/components/Signup/Signup.scss b/packages/server/play-node-go/src/components/Button/NewGame/NewGame.scss
similarity index 100%
rename from packages/server/play-node-go/src/components/Signup/Signup.scss
rename to packages/server/play-node-go/src/components/Button/NewGame/NewGame.scss
diff --git a/packages/server/play-node-go/src/components/Button/NewRoom/NewRoom.js b/packages/server/play-node-go/src/components/Button/NewRoom/NewRoom.js
new file mode 100644
index 0000000..e16239a
--- /dev/null
+++ b/packages/server/play-node-go/src/components/Button/NewRoom/NewRoom.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import './NewRoom.scss';
+
+const NewRoomButton = () => {
+ return (
+ <>
+ New Room
+ >
+ );
+}
+
+export default NewRoomButton;
\ No newline at end of file
diff --git a/packages/server/play-node-go/src/components/Button/NewRoom/NewRoom.scss b/packages/server/play-node-go/src/components/Button/NewRoom/NewRoom.scss
new file mode 100644
index 0000000..e69de29
diff --git a/packages/server/play-node-go/src/components/FormError/FormError.js b/packages/server/play-node-go/src/components/Error/FormError/FormError.js
similarity index 100%
rename from packages/server/play-node-go/src/components/FormError/FormError.js
rename to packages/server/play-node-go/src/components/Error/FormError/FormError.js
diff --git a/packages/server/play-node-go/src/components/Error/FormError/FormError.scss b/packages/server/play-node-go/src/components/Error/FormError/FormError.scss
new file mode 100644
index 0000000..6ae3f66
--- /dev/null
+++ b/packages/server/play-node-go/src/components/Error/FormError/FormError.scss
@@ -0,0 +1,5 @@
+@import '../../../../public/stylesheets/partials/variables';
+
+span.FormError {
+ color: map-get($colors, "error");;
+}
\ No newline at end of file
diff --git a/packages/server/play-node-go/src/components/FormError/FormError.test.js b/packages/server/play-node-go/src/components/Error/FormError/FormError.test.js
similarity index 100%
rename from packages/server/play-node-go/src/components/FormError/FormError.test.js
rename to packages/server/play-node-go/src/components/Error/FormError/FormError.test.js
diff --git a/packages/server/play-node-go/src/components/Form/FindGame/FindGame.js b/packages/server/play-node-go/src/components/Form/FindGame/FindGame.js
new file mode 100644
index 0000000..31f1a5e
--- /dev/null
+++ b/packages/server/play-node-go/src/components/Form/FindGame/FindGame.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import './FindGame.scss';
+
+const FindGameForm = () => {
+ return (
+ <>
+ Find Game
+ >
+ );
+}
+
+export default FindGameForm;
\ No newline at end of file
diff --git a/packages/server/play-node-go/src/components/Form/FindGame/FindGame.scss b/packages/server/play-node-go/src/components/Form/FindGame/FindGame.scss
new file mode 100644
index 0000000..e69de29
diff --git a/packages/server/play-node-go/src/components/Form/FindRoom/FindRoom.js b/packages/server/play-node-go/src/components/Form/FindRoom/FindRoom.js
new file mode 100644
index 0000000..17aca22
--- /dev/null
+++ b/packages/server/play-node-go/src/components/Form/FindRoom/FindRoom.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import './FindRoom.scss';
+
+const FindRoomForm = () => {
+ return (
+ <>
+ Find Room
+ >
+ );
+}
+
+export default FindRoomForm;
\ No newline at end of file
diff --git a/packages/server/play-node-go/src/components/Form/FindRoom/FindRoom.scss b/packages/server/play-node-go/src/components/Form/FindRoom/FindRoom.scss
new file mode 100644
index 0000000..e69de29
diff --git a/packages/server/play-node-go/src/components/Login/Login.js b/packages/server/play-node-go/src/components/Form/Login/Login.js
similarity index 95%
rename from packages/server/play-node-go/src/components/Login/Login.js
rename to packages/server/play-node-go/src/components/Form/Login/Login.js
index 17cb123..4b1500e 100644
--- a/packages/server/play-node-go/src/components/Login/Login.js
+++ b/packages/server/play-node-go/src/components/Form/Login/Login.js
@@ -1,7 +1,7 @@
import React, { useState } from 'react';
import './Login.scss';
-import authServices from '../../services/authServices';
-import FormError from '../FormError/FormError';
+import authServices from '../../../services/authServices';
+import FormError from '../../Error/FormError/FormError';
const Login = (props) => {
const [username, setUsername] = useState('');
diff --git a/packages/server/play-node-go/src/components/Form/Login/Login.scss b/packages/server/play-node-go/src/components/Form/Login/Login.scss
new file mode 100644
index 0000000..e69de29
diff --git a/packages/server/play-node-go/src/components/Login/Login.test.js b/packages/server/play-node-go/src/components/Form/Login/Login.test.js
similarity index 100%
rename from packages/server/play-node-go/src/components/Login/Login.test.js
rename to packages/server/play-node-go/src/components/Form/Login/Login.test.js
diff --git a/packages/server/play-node-go/src/components/Signup/Signup.js b/packages/server/play-node-go/src/components/Form/Signup/Signup.js
similarity index 96%
rename from packages/server/play-node-go/src/components/Signup/Signup.js
rename to packages/server/play-node-go/src/components/Form/Signup/Signup.js
index 0add6ae..4f848cb 100644
--- a/packages/server/play-node-go/src/components/Signup/Signup.js
+++ b/packages/server/play-node-go/src/components/Form/Signup/Signup.js
@@ -1,7 +1,7 @@
import React, { useState, useEffect } from 'react';
import './Signup.scss';
-import authServices from '../../services/authServices';
-import FormError from '../FormError/FormError';
+import authServices from '../../../services/authServices';
+import FormError from '../../Error/FormError/FormError';
const Signup = (props) => {
const [ username, setUsername ] = useState('');
diff --git a/packages/server/play-node-go/src/components/Form/Signup/Signup.scss b/packages/server/play-node-go/src/components/Form/Signup/Signup.scss
new file mode 100644
index 0000000..e69de29
diff --git a/packages/server/play-node-go/src/components/Signup/Signup.test.js b/packages/server/play-node-go/src/components/Form/Signup/Signup.test.js
similarity index 100%
rename from packages/server/play-node-go/src/components/Signup/Signup.test.js
rename to packages/server/play-node-go/src/components/Form/Signup/Signup.test.js
diff --git a/packages/server/play-node-go/src/components/FormError/FormError.scss b/packages/server/play-node-go/src/components/FormError/FormError.scss
deleted file mode 100644
index 2c1129c..0000000
--- a/packages/server/play-node-go/src/components/FormError/FormError.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@import '../../../public/stylesheets/partials/variables';
-
-span.FormError {
- color: map-get($colors, "error");;
-}
\ No newline at end of file
diff --git a/packages/server/play-node-go/src/components/Logo/Logo.js b/packages/server/play-node-go/src/components/Logo/Logo.js
new file mode 100644
index 0000000..0c35a75
--- /dev/null
+++ b/packages/server/play-node-go/src/components/Logo/Logo.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import './Logo.scss';
+
+const Logo = () => {
+ return (
+ <>
+ Logo
+ >
+ );
+}
+
+export default Logo;
\ No newline at end of file
diff --git a/packages/server/play-node-go/src/components/Logo/Logo.scss b/packages/server/play-node-go/src/components/Logo/Logo.scss
new file mode 100644
index 0000000..e69de29
diff --git a/packages/server/play-node-go/src/components/MainWrapper/MainWrapper.scss b/packages/server/play-node-go/src/components/MainWrapper/MainWrapper.scss
deleted file mode 100644
index e7678c7..0000000
--- a/packages/server/play-node-go/src/components/MainWrapper/MainWrapper.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-@import '../../../public/stylesheets/partials/mixins';
-
-div.main-wrapper {
- display: flex;
- justify-content: flex-start;
- @include fullspan;
-
- aside {
- display: flex;
- flex-direction: column;
- flex-grow: 1;
- max-width: 20vw;
- a {
- display: block;
- }
- }
-
- main {
- display: flex;
- justify-content: center;
- align-items: center;
- flex-grow: 4;
- }
-}
-
-div.Game {
- display: flex;
- justify-content: space-between;
- @include fullspan;
- aside {
- @include flexAround(column);
- flex-grow: 1;
- }
-
- div.game-area {
- @include flexAround(column);
- flex-grow: 2;
- }
-}
\ No newline at end of file
diff --git a/packages/server/play-node-go/src/pages/Home/HomeSidebar.js b/packages/server/play-node-go/src/pages/Home/HomeSidebar.js
index ca4b8b4..7c078aa 100644
--- a/packages/server/play-node-go/src/pages/Home/HomeSidebar.js
+++ b/packages/server/play-node-go/src/pages/Home/HomeSidebar.js
@@ -1,19 +1,30 @@
import React, { useState } from 'react';
-import Signup from '../../components/Signup/Signup';
-import Login from '../../components/Login/Login';
+import Signup from '../../components/Form/Signup/Signup';
+import Login from '../../components/Form/Login/Login';
+import NewRoomButton from '../../components/Button/NewRoom/NewRoom';
+import FindRoomForm from '../../components/Form/FindRoom/FindRoom';
+import LibraryButton from '../../components/Button/Library/Library';
const HomeSidebar = (props) => {
const [ showForm, setShowForm ] = useState('');
+ const ifUser = <>
+
{setShowForm('login')}}>Login
+ {showForm === 'login' ?{setShowForm('signup')}}>Signup
+ {showForm === 'signup' ?