diff --git a/staff/angelzrc/unsocial/compo.js b/staff/angelzrc/unsocial/compo.js
deleted file mode 100644
index e11ec78b..00000000
--- a/staff/angelzrc/unsocial/compo.js
+++ /dev/null
@@ -1,91 +0,0 @@
-/**
- * Constructs Compo instances
- * 
- * @param {HTMLElement} container  The Dom container of the Compo instance
- */
-function Compo(container) {
-    this.children = []
-    this.container = container
-}
-
-
-Compo.prototype.add = function (child) {
-    this.children.push(child)
-    this.container.appendChild(child.container)
-}
-
-Compo.prototype.remove = function () {
-    this.container.remove()
-}
-
-Compo.prototype.addBehavior = function (type, callback) {
-    this.container.addEventListener(type, callback)
-}
-
-/**Constructs Form instances */
-function Form() {
-    Compo.call(this, document.createElement('form'))
-}
-
-Form.prototype = Object.create(Compo.prototype)
-Form.prototype.constructor = Form
-
-Form.prototype.reset = function () {
-    this.container.reset()
-}
-
-
-function Button(text, type) {
-    Compo.call(this, document.createElement('button'))
-
-    this.container.innerText = text
-    this.container.type = type
-}
-
-Button.prototype = Object.create(Compo.prototype)
-Button.prototype.constructor = Button
-
-function Label(text, id) {
-    Compo.call(this, document.createElement('label'))
-
-    this.container.innerText = text
-    this.container.htmlfor = id
-}
-
-Label.prototype = Object.create(Compo.prototype)
-Label.prototype.constructor = Label
-
-function Input(type, id) {
-    Compo.call(this, document.createElement('input'))
-    this.container.type = type
-    this.container.id = id
-}
-
-Input.prototype = Object.create(Compo.prototype)
-Input.prototype.constructor = Input
-
-Input.prototype.getValue = function (value) {
-    return this.container.value
-}
-
-Input.prototype.setValue = function (value) {
-    this.container.value = value
-}
-
-function Heading(text, level) {
-    Compo.call(this, document.createElement('h' + level))
-    this.container.innerText = text
-}
-
-Heading.prototype = Object.create(Compo.prototype)
-Heading.prototype.constructor = Heading
-
-function Link(text) {
-    Compo.call(this, document.createElement('a'))
-    this.container.href = ''
-    this.container.innerText = text
-}
-
-Link.prototype = Object.create(Compo.prototype)
-Link.prototype.constructor = Link
-
diff --git a/staff/angelzrc/unsocial/data/posts.js b/staff/angelzrc/unsocial/data/posts.js
new file mode 100644
index 00000000..ab99b59f
--- /dev/null
+++ b/staff/angelzrc/unsocial/data/posts.js
@@ -0,0 +1,14 @@
+const posts = [
+    {
+        image: 'https://i.pinimg.com/originals/8c/60/1a/8c601a25311a1a5098896f751a784b54.jpg',
+        text: 'here we are',
+        username: 'peterpan',
+        date: new Date
+    },
+    {
+        image: 'https://pm1.aminoapps.com/8360/ad07e2d2cdf6e1733328d6e7b7848b87db38a2bbr1-1536-2048v2_hq.jpg',
+        text: 'here i am',
+        username: 'wendydarling',
+        date: new Date
+    }
+]
\ No newline at end of file
diff --git a/staff/angelzrc/unsocial/data.js b/staff/angelzrc/unsocial/data/users.js
similarity index 92%
rename from staff/angelzrc/unsocial/data.js
rename to staff/angelzrc/unsocial/data/users.js
index 7478bdcb..702bf71f 100644
--- a/staff/angelzrc/unsocial/data.js
+++ b/staff/angelzrc/unsocial/data/users.js
@@ -1,4 +1,4 @@
-var users = [
+const users = [
     { name: 'Peter Pan', email: 'peter@pan.com', username: 'peterpan', password: '123123123' },
     { name: 'Wendy Darling', email: 'wendy@darling.com', username: 'wendydarling', password: '123123123' }
 ]
\ No newline at end of file
diff --git a/staff/angelzrc/unsocial/index.html b/staff/angelzrc/unsocial/index.html
index 7134efac..4fae9185 100644
--- a/staff/angelzrc/unsocial/index.html
+++ b/staff/angelzrc/unsocial/index.html
@@ -5,20 +5,29 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Unsocial</title>
+
     <link rel="shortcut icon" href="https://b00tc4mp.com/favicon.ico" type="image/x-icon">
 
-    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="style.css">
 </head>
 
 <body>
-    <h1>Welcome to unSociaL</h1>
+    <div id="root"></div>
+
+    <script src="data/users.js"></script>
+    <script src="data/posts.js"></script>
+
+    <script src="logic/authenticateUser.js"></script>
+    <script src="logic/createPost.js"></script>
+    <script src="logic/getPosts.js"></script>
+    <script src="logic/registerUser.js"></script>
 
-    <script src="data.js"></script>
-    <script src="logic.js"></script>
-    <script src="compo.js"></script>
-    <script src="view.js"></script>
-    <script src="main.js"></script>
+    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
 
+    
+    <script src="main.jsx" type="text/babel"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/staff/angelzrc/unsocial/logic.js b/staff/angelzrc/unsocial/logic.js
deleted file mode 100644
index 6a4933ce..00000000
--- a/staff/angelzrc/unsocial/logic.js
+++ /dev/null
@@ -1,63 +0,0 @@
-
-//function to register user
-function registerUser(nameInput, emailInput, usernameInput, passwordInput, passwordRepeatInput) {
-
-    if (nameInput.length < 2) {
-        throw new Error('Invalid name')
-    }
-
-    if (!/^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i.test(emailInput)) {
-        throw new Error('invalid e-mail')
-    }
-
-    if (usernameInput.length < 4 || username.length > 12) {
-        throw new Error('Invalid username')
-    }
-
-    if (passwordInput.length < 8) {
-        throw new Error('Invalid password')
-    }
-
-    if (passwordRepeatInput !== passwordInput) {
-        throw new Error('Passwords do not match!')
-    }
-    //check if the username or email already exists
-    var user = users.find(function (element) {
-        return element.username === usernameInput || element.email === emailInput
-    })
-
-    if (user !== undefined) {
-        throw new Error('User already exists')
-    }
-
-    var user = {
-        name: nameInput,
-        email: emailInput,
-        username: usernameInput,
-        password: passwordInput
-    }
-
-    users.push(user)
-}
-
-
-//function to authenticate logins
-
-function authenticateUser(username, password) {
-    // create conditions for login
-    if (username.length < 4 || username.length > 12) {
-        throw new Error('Invalid username')
-    }
-
-    if (password.length < 8) {
-        throw new Error('Invalid password')
-    }
-
-    var user = users.find(function (element) {
-        return (element.username === username) && (element.password === password)
-    })
-    if (user === undefined) {
-        throw new Error('Wrong credentials')
-    }
-    return user
-}
\ No newline at end of file
diff --git a/staff/angelzrc/unsocial/logic/authenticateUser.js b/staff/angelzrc/unsocial/logic/authenticateUser.js
new file mode 100644
index 00000000..20471469
--- /dev/null
+++ b/staff/angelzrc/unsocial/logic/authenticateUser.js
@@ -0,0 +1,16 @@
+const authenticateUser = (username, password) => {
+    if (username.length < 4 || username.length > 12)
+        throw new Error('invalid username')
+
+    if (password.length < 8)
+        throw new Error('invalid password')
+
+    const user = users.find( user => 
+        user.username === username && user.password === password
+    )
+
+    if (user === undefined)
+        throw new Error('wrong credentials')
+
+    return user
+}
\ No newline at end of file
diff --git a/staff/angelzrc/unsocial/logic/createPost.js b/staff/angelzrc/unsocial/logic/createPost.js
new file mode 100644
index 00000000..a566ad1e
--- /dev/null
+++ b/staff/angelzrc/unsocial/logic/createPost.js
@@ -0,0 +1,15 @@
+const createPost = (username, image, text) => {
+    if (username.length < 4 || username.length > 12)
+        throw new Error('invalid username')
+
+    // TODO input validation (and throw error)
+
+    var post = {
+        image: image,
+        text: text,
+        username: username,
+        date: new Date
+    }
+
+    posts.push(post)
+}
\ No newline at end of file
diff --git a/staff/angelzrc/unsocial/logic/getPosts.js b/staff/angelzrc/unsocial/logic/getPosts.js
new file mode 100644
index 00000000..f35a7821
--- /dev/null
+++ b/staff/angelzrc/unsocial/logic/getPosts.js
@@ -0,0 +1 @@
+const getPosts = () =>  posts
\ No newline at end of file
diff --git a/staff/angelzrc/unsocial/logic/registerUser.js b/staff/angelzrc/unsocial/logic/registerUser.js
new file mode 100644
index 00000000..a2a45b6d
--- /dev/null
+++ b/staff/angelzrc/unsocial/logic/registerUser.js
@@ -0,0 +1,25 @@
+const registerUser = (name, email, username, password, passwordRepeat) => {
+    if (name.length < 2)
+        throw new Error('invalid name')
+
+    if (!/^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i.test(email))
+        throw new Error('invalid e-mail')
+
+    if (username.length < 4 || username.length > 12)
+        throw new Error('invalid username')
+
+    if (password.length < 8)
+        throw new Error('invalid password')
+
+    if (password !== passwordRepeat)
+        throw new Error('passwords do not match')
+
+    let user = users.find(user => user.username === username || user.email === email)
+
+    if (user !== undefined)
+        throw new Error('user already exists')
+
+    user = { name: name, email: email, username: username, password: password }
+
+    users.push(user)
+}
\ No newline at end of file
diff --git a/staff/angelzrc/unsocial/main.js b/staff/angelzrc/unsocial/main.js
deleted file mode 100644
index 14a1439b..00000000
--- a/staff/angelzrc/unsocial/main.js
+++ /dev/null
@@ -1,7 +0,0 @@
-var loggedInUser = null
-
-var body = new Compo(document.querySelector('body'))
-var loginSection = buildLoginSection()
-
-
-body.add(loginSection)
\ No newline at end of file
diff --git a/staff/angelzrc/unsocial/main.jsx b/staff/angelzrc/unsocial/main.jsx
new file mode 100644
index 00000000..24165071
--- /dev/null
+++ b/staff/angelzrc/unsocial/main.jsx
@@ -0,0 +1,155 @@
+let loggedInUser = null
+
+const rootElement = document.getElementById('root')
+const root = ReactDOM.createRoot(rootElement)
+
+const { Component } = React
+
+class PasswordInput extends Component {
+    constructor(props) {
+        console.log('PasswordInput -> constructor')
+        super(props)
+
+        this.state = {status: '😌', type: 'password' }
+    }
+
+    render() {
+        console.log('PasswordInput -> render')
+
+        return <div style= {{display: 'flex'}}>
+            <input type={this.state.type} id= {this.props.id} style= {{ width: '100%', boxSizing: 'border-box'}} />
+            <span
+                style = {{cursor: 'pointer', position: 'absolute'}}
+                onClick = {() => this.setState({
+                    status: this.state.status === '😌' ? '😳' : '😌',
+                    type: this.state.type === 'password' ? 'text' : 'password'
+                })}
+            >{this.state.status}</span>
+                
+        </div>
+
+
+    }
+}
+
+function Login(props) {
+    console.log('Login -> render')
+
+    return <section>
+        <h2>Login</h2>
+
+        <form onSubmit= {event => {
+            event.preventDefault()
+            const { target: { username: { value: username }, password: { value: password }}} = event
+
+            try {
+                loggedInUser = authenticateUser(username, password)
+
+                event.target.reset()
+
+                props.onLoggedIn()
+            } catch(error)  {
+                alert(error.message)
+                console.error(error)
+            }
+        }}>
+            <label htmlFor="username">Username</label>
+            <input type="text" id='username' style={{ width: '100%', boxSizing: 'border-box'}} />
+            
+            <label htmlFor="password">Password</label>
+            <PasswordInput id="password"/>
+
+            <button type='submit'>Login</button>
+        </form>
+
+        <a href="" onClick = { event => {
+            event.preventDefault()
+            return props.goRegister()
+        }}>Register</a>
+    </section>
+}
+
+function Register() {
+    return <section>
+        <h2>Register</h2>
+
+        <form>
+            <label htmlFor="name">Name</label>
+            <input type="text" id="name" style={{ width: '100%', boxSizing: 'border-box' }} />
+
+            <label htmlFor="email">E-mail</label>
+            <input type="email" id="email" style={{ width: '100%', boxSizing: 'border-box' }} />
+
+            <label htmlFor="username">Username</label>
+            <input type="text" id="username" style={{ width: '100%', boxSizing: 'border-box' }} />
+
+            <label htmlFor="password">Password</label>
+            <PasswordInput id="password" />
+
+            <label htmlFor="password-repeat">Repeat Password</label>
+            <PasswordInput id="password-repeat" />
+
+            <button type="submit">Register</button>
+        </form>
+
+        <a href="">Login</a>
+
+
+    </section>
+}
+
+function Home() {
+    return <section>
+            <h2>Home</h2>
+
+            <h3>Hello, Peter Pan!</h3>
+            <button type="button">Logout</button>
+            <button type="button">➕</button>
+
+            <div>
+                <h3>Posts</h3>
+
+                 <article>
+                   <h4>wendydarling</h4>
+                    <img src="https://pm1.aminoapps.com/8360/ad07e2d2cdf6e1733328d6e7b7848b87db38a2bbr1-1536-2048v2_hq.jpg" style={{ width: '100%' }} />
+                    <p>here i am</p>
+                    <time>Thu Oct 17 2024 12:59:05 GMT+0200 (Central European Summer Time)</time>
+                </article>
+
+                <article>
+                    <h4>peterpan</h4>
+                    <img src="https://i.pinimg.com/originals/8c/60/1a/8c601a25311a1a5098896f751a784b54.jpg" style={{ width: '100%' }} />
+                    <p>here we are</p>
+                    <time>Thu Oct 17 2024 12:59:05 GMT+0200 (Central European Summer Time)</time>
+                </article>
+            </div>
+
+
+    </section>
+}
+
+
+class App extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {view: 'login'}
+    
+    }
+
+    changeView(view) {
+        this.setState({ view })
+    }
+
+    render() {
+        return <div>
+            <h1>Unsocial</h1>
+    
+            {this.state.view === 'login' && <Login onLoggedIn= { () => this.setState({ view: 'home' })} goRegister= {() => this.setState({ view: 'register'})}/> }
+            {this.state.view === 'register' && <Register />}
+            {this.state.view === 'home' && <Home />}  
+    </div>
+    }
+}
+
+root.render(<App />)
\ No newline at end of file
diff --git a/staff/angelzrc/unsocial/view.js b/staff/angelzrc/unsocial/view.js
deleted file mode 100644
index 8be98dbe..00000000
--- a/staff/angelzrc/unsocial/view.js
+++ /dev/null
@@ -1,232 +0,0 @@
-/* function buildFormField(id, text, type) {
-    var label = document.createElement('label')
-    label.htmlFor = id
-    label.innerText = text
-
-    var input = document.createElement('input')
-    input.type = type
-    input.id = id
-
-    return [label, input]
-} */
-
-
-function buildLoginSection() {
-    var compo = new Compo(document.createElement('section'))
-
-    /* var title = document.createElement('h2')
-    title.innerText = 'Login'
-    compo.container.appendChild(title) */
-    var title = new Heading('Login', 2)
-    compo.add(title)
-
-    var form = new Form()
-    compo.add(form)
-/* 
-    var usernameField = buildFormField('username', 'Username', 'text')
-    form.container.appendChild(usernameField[0])
-    form.container.appendChild(usernameField[1]) */
-
-    var usernameLabel = new Label('Username', 'username')
-    form.add(usernameLabel)
-    var usernameInput = new Input('text', 'username')
-    form.add(usernameInput)
-
-/*     var passwordField = buildFormField('password', 'Password', 'password')
-    form.container.appendChild(passwordField[0])
-    form.container.appendChild(passwordField[1]) */
-
-    var passwordLabel = new Label('Password', 'password')
-    form.add(passwordLabel)
-    var passwordInput = new Input('password', 'password')
-    form.add(passwordInput)
-
-    var submitButton = new Button('Login', 'submit')
-    form.add(submitButton)
-
-    form.addBehavior('submit', function (event) {
-        event.preventDefault()
-
-        var username = usernameInput.getValue()
-        var password = passwordInput.getValue()
-
-        try {
-            loggedInUser = authenticateUser(username, password)
-
-            form.reset()
-
-            compo.container.remove()
-
-            var homeSection = buildHomeSection()
-
-            body.add(homeSection)
-        } catch (error) {
-            passwordInput.setValue('')
-
-            alert(error.message)
-
-            console.error(error)
-        }
-    })
-
-  /*   var registerLink = document.createElement('a')
-    registerLink.href = ''
-    registerLink.innerText = 'Register'
-    compo.container.appendChild(registerLink) */
-
-    var registerLink = new Link('Register')
-    compo.add(registerLink)
-
-    registerLink.addBehavior('click', function (event) {
-        event.preventDefault()
-
-        compo.remove()
-
-        var registerSection = buildRegisterSection()
-
-        body.add(registerSection)
-    })
-
-    return compo
-}
-
-function buildRegisterSection() {
-    var compo = new Compo(document.createElement('section'))
-
-   
-
-    /* var title = document.createElement('h2')
-    title.innerText = 'Register'
-    compo.container.appendChild(title) */
-
-    var title = new Heading('Register', 2)
-    compo.add(title)
-
-    var form = new Form()
-    compo.add(form)
-
-    /* var nameField = buildFormField('name', 'Name', 'text')
-    form.container.appendChild(nameField[0])
-    form.container.appendChild(nameField[1]) */
-    var nameLabel = new Label('Name', 'name')
-    form.add(nameLabel)
-    var nameInput = new Input('text', 'name')
-    form.add(nameInput)
-
-
-    /* var emailField = buildFormField('email', 'E-mail', 'email')
-    form.container.appendChild(emailField[0])
-    form.container.appendChild(emailField[1]) */
-
-    var emailLabel = new Label('E-mail', 'email')
-    form.add(emailLabel)
-    var emailInput = new Input('email', 'email')
-    form.add(emailInput)
-
-
-   /*  var usernameField = buildFormField('username', 'Username', 'text')
-    form.container.appendChild(usernameField[0])
-    form.container.appendChild(usernameField[1]) */
-
-    var usernameLabel = new Label('Username', 'username')
-    form.add(usernameLabel)
-    var usernameInput = new Input('text', 'username')
-    form.add(usernameInput)
-
- /*    var passwordField = buildFormField('password', 'Password', 'password')
-    form.container.appendChild(passwordField[0])
-    form.container.appendChild(passwordField[1]) */
-
-    var passwordLabel = new Label('Password', 'password')
-    form.add(passwordLabel)
-    var passwordInput = new Input('password', 'password')
-    form.add(passwordInput)
-
-   /*  var passwordRepeatField = buildFormField('password-repeat', 'Repeat Password', 'password')
-    form.container.appendChild(passwordRepeatField[0])
-    form.container.appendChild(passwordRepeatField[1])
- */
-
-    var passwordRepeatLabel = new Label('Password Repeat', 'password-repeat')
-    form.add(passwordRepeatLabel)
-    var passwordRepeatInput = new Input('password', 'password-repeat')
-    form.add(passwordRepeatInput)
-    
-    var submitButton = new Button('Register', 'submit')
-    form.add(submitButton)
-
-    form.addBehavior('submit', function (event) {
-        event.preventDefault()
-
-        var name = nameInput.getValue()
-        var email = emailInput.getValue()
-        var username = usernameInput.getValue()
-        var password = passwordInput.getValue()
-        var passwordRepeat = passwordRepeatInput.getValue()
-
-        try {
-            registerUser(name, email, username, password, passwordRepeat)
-
-            form.reset()
-
-            compo.remove()
-
-            body.add(loginSection)
-        } catch (error) {
-            alert(error.message)
-
-            console.error(error)
-        }
-    })
-
-  /*   var loginLink = document.createElement('a')
-    loginLink.href = ''
-    loginLink.innerText = 'Login'
-    compo.container.appendChild(loginLink) */
-
-    var loginLink = new Link('Login')
-    compo.add(loginLink)
-
-    loginLink.addBehavior('click', function (event) {
-        event.preventDefault()
-
-        compo.remove()
-        body.add(loginSection)
-    })
-
-    return compo
-}
-
-function buildHomeSection() {
-    var compo = new Compo(document.createElement('section'))
-
-    
-
-    /* var title = document.createElement('h2')
-    title.innerText = 'Home'
-    compo.container.appendChild(title) */
-    var title = new Heading('Home', 2)
-    compo.add(title)
-
-   /*  var userTitle = document.createElement('h3')
-    userTitle.innerText = 'Hello, ' + loggedInUser.name + '!'
-    compo.container.appendChild(userTitle)
- */
-    var userTitle = new Heading('Hello, ' + loggedInUser.name + '!', 3)
-    compo.add(userTitle)
-
-    var logoutButton = new Button('Logout', 'button')
-    compo.add(logoutButton)
-
-    logoutButton.addBehavior('click', function (event) {
-        event.preventDefault()
-
-        loggedInUser = null
-
-        compo.remove()
-
-        body.add(loginSection)
-    })
-
-    return compo
-}
\ No newline at end of file