diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 5d24124..6a931dc 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -36,10 +36,12 @@ export default function HomePage() {
         {/* Title */}
         <HomePageTitle />
 
-        <div className="flex">
-          <ConnectButton />
+        <div className="flex h-full gap-12">
+          <div className="w-[45%]">
+            <ConnectButton />
+          </div>
 
-          <div className="mt-12 flex min-w-[25rem] flex-col items-start justify-center gap-4">
+          <div className="flex w-[55%] min-w-[25rem] flex-col items-start justify-center gap-4">
             <ChatMessages />
           </div>
         </div>
diff --git a/frontend/src/components/web3/chat-messages.tsx b/frontend/src/components/web3/chat-messages.tsx
index 468b441..66bfe36 100644
--- a/frontend/src/components/web3/chat-messages.tsx
+++ b/frontend/src/components/web3/chat-messages.tsx
@@ -15,14 +15,13 @@ import { SendMessage } from './send-message'
 
 export const ChatMessages: FC = () => {
   const { activeChain } = useInkathon()
-  const { isChatroomLoading, isChatroomActive, messages, isMessagesLoading } =
+  const { isChatroomLoading, isChatroomActive, messages, chatroomId, isMessagesLoading } =
     useContext(AppContext)
-  console.log('ischatroomactive', isChatroomActive)
 
   // Connection Loading Indicator
   if (isChatroomLoading)
     return (
-      <div className="my-8 flex w-full flex-col items-center justify-center space-y-3 text-center font-mono text-sm text-gray-400 sm:flex-row sm:space-x-3 sm:space-y-0">
+      <div className="flex h-full w-full flex-col items-center justify-center space-y-3 rounded-md border text-center font-mono text-sm text-gray-400 sm:flex-row sm:space-x-3 sm:space-y-0">
         <Spinner />
         <div>Connecting to chatrooms</div>
       </div>
@@ -30,7 +29,7 @@ export const ChatMessages: FC = () => {
   if (!isChatroomLoading && !isChatroomActive)
     // No chatroom found
     return (
-      <div className="my-8 flex w-full flex-col items-center justify-center space-y-3 text-center font-mono text-sm text-gray-400 sm:flex-row sm:space-x-3 sm:space-y-0">
+      <div className=" flex h-full w-full flex-col items-center justify-center space-y-3 rounded-md border text-center font-mono text-sm text-gray-400 sm:flex-row sm:space-x-3 sm:space-y-0">
         <BsChatSquareQuote />
         <div>No chatroom found</div>
       </div>
@@ -39,7 +38,9 @@ export const ChatMessages: FC = () => {
   return (
     <>
       <div className="flex w-full grow flex-col gap-4">
-        <h2 className="text-center font-mono text-gray-400">Chatroom</h2>
+        <h2 className="text-center font-mono text-gray-400">
+          Chatroom ID: <span className="truncate"> {chatroomId} </span>
+        </h2>
 
         <Card>
           <CardContent className="p-4">
diff --git a/frontend/src/components/web3/connect-button.tsx b/frontend/src/components/web3/connect-button.tsx
index 91947af..a90ecf9 100644
--- a/frontend/src/components/web3/connect-button.tsx
+++ b/frontend/src/components/web3/connect-button.tsx
@@ -35,6 +35,7 @@ import {
 import { env } from '@/config/environment'
 import { truncateHash } from '@/utils/truncate-hash'
 
+import { Input } from '../ui/input'
 import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip'
 import NewChatRoomButton from './new-chatroom-button'
 
@@ -116,18 +117,18 @@ export const ConnectButton: FC<ConnectButtonProps> = () => {
   // Account Menu & Disconnect Button
   return (
     <div>
-      <div className="flex select-none flex-wrap items-stretch justify-center gap-4">
+      <div className="flex select-none flex-wrap items-stretch justify-between gap-2">
         {/* Account Name, Address, and AZERO.ID-Domain (if assigned) */}
         <DropdownMenu>
           <DropdownMenuTrigger
             asChild
             className="rounded-2xl bg-gray-900 px-4 py-6 font-bold text-foreground"
           >
-            <Button className="min-w-[14rem] border" translate="no">
+            <Button className="w-[52%] min-w-[8rem] border" translate="no">
               <div className="flex items-center justify-between gap-2">
                 <div className="flex flex-col items-center justify-center">
                   <AccountName account={activeAccount} />
-                  <span className="text-xs font-normal">
+                  <span className="text-[10px] font-normal">
                     {truncateHash(
                       encodeAddress(activeAccount.address, activeChain?.ss58Prefix || 42),
                       8,
@@ -203,7 +204,7 @@ export const ConnectButton: FC<ConnectButtonProps> = () => {
 
         {/* Account Balance */}
         {reducibleBalanceFormatted !== undefined && (
-          <div className="flex min-w-[10rem] items-center justify-center gap-2 rounded-2xl border bg-gray-900 px-4 py-3 font-mono text-sm font-bold text-foreground">
+          <div className="flex w-[30%] min-w-[8rem] items-center justify-center gap-2 rounded-2xl border bg-gray-900 px-4 py-3 font-mono text-sm font-bold text-foreground">
             {reducibleBalanceFormatted}
             {(!reducibleBalance || reducibleBalance?.isZero()) && (
               <Tooltip>
diff --git a/frontend/src/components/web3/new-chatroom-button.tsx b/frontend/src/components/web3/new-chatroom-button.tsx
index 0ceacef..0cba2b3 100644
--- a/frontend/src/components/web3/new-chatroom-button.tsx
+++ b/frontend/src/components/web3/new-chatroom-button.tsx
@@ -1,7 +1,7 @@
 import { useContext, useState } from 'react'
 
 import { AppContext } from '@/context/app-context'
-import { useInkathon, useRegisteredContract } from '@scio-labs/use-inkathon'
+import { useInkathon } from '@scio-labs/use-inkathon'
 import { FiChevronDown } from 'react-icons/fi'
 
 import { env } from '@/config/environment'
@@ -18,7 +18,9 @@ import { Input } from '../ui/input'
 const NewChatRoomButton = () => {
   const { activeAccount } = useInkathon()
   const [participantId, setParticipantId] = useState<string>()
-  const { isChatroomActive, createChatroom, deleteChatroom, inviteFriends } = useContext(AppContext)
+  const [joinChatroomId, setJoinChatroomId] = useState<string>()
+  const { isChatroomActive, createChatroom, deleteChatroom, inviteFriends, joinChatroom } =
+    useContext(AppContext)
 
   const handleCreateChat = async (chain: any) => {
     if (chain.name == 'Aleph Zero') {
@@ -38,57 +40,87 @@ const NewChatRoomButton = () => {
     await inviteFriends([participantId])
   }
 
+  const handleJoinChatroom = async () => {
+    if (!joinChatroomId) return
+
+    await joinChatroom(joinChatroomId)
+  }
+
   return (
     <div className="mt-8 w-full">
-      {activeAccount && isChatroomActive ? ( //
-        <DropdownMenu>
-          <DropdownMenuTrigger
-            asChild
-            className="rounded-2xl bg-gray-900 px-4 py-6 font-bold text-foreground"
-          >
+      {activeAccount && !isChatroomActive ? ( //
+        <>
+          <DropdownMenu>
+            <DropdownMenuTrigger
+              asChild
+              className="rounded-2xl bg-gray-900 px-4 py-6 font-bold text-foreground"
+            >
+              <Button
+                className="h-12 w-full min-w-[14rem] gap-2 rounded-2xl border border-white/10 bg-primary px-4 py-3 font-bold text-foreground"
+                translate="no"
+              >
+                <div className="flex items-center justify-between gap-2">
+                  <div className="flex flex-col items-center justify-center">
+                    <span className="text-xs font-normal">New Chatroom</span>
+                  </div>
+                  <FiChevronDown className="shrink-0" size={22} aria-hidden="true" />
+                </div>
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              align="end"
+              className="no-scrollbar max-h-[40vh] w-full min-w-[20rem] overflow-scroll rounded-2xl"
+            >
+              {/* Deploy chatroom to a supported chain */}
+              {env.chatroomChains.map((chain) => (
+                <DropdownMenuItem
+                  key={`network-${chain.name}`}
+                  className="cursor-pointer"
+                  onClick={async () => await handleCreateChat(chain)}
+                >
+                  <div className="flex w-full flex-col items-center justify-start gap-2">
+                    <p>{chain.name}</p>
+                  </div>
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+
+          {/* Join chatroom form */}
+          <div className="mt-5 flex w-full gap-4">
+            <Input
+              placeholder="Chatroom ID"
+              type="text"
+              className="w-[65%]"
+              onChange={(e) => setJoinChatroomId(String(e.target.value))}
+            />
+
             <Button
-              className="h-12 w-full min-w-[14rem] gap-2 rounded-2xl border border-white/10 bg-primary px-4 py-3 font-bold text-foreground"
+              onClick={handleJoinChatroom}
+              disabled={joinChatroomId?.length == 0}
+              variant="secondary"
+              className="w-[35%] min-w-[6rem] border"
               translate="no"
             >
-              <div className="flex items-center justify-between gap-2">
-                <div className="flex flex-col items-center justify-center">
-                  <span className="text-xs font-normal">New Group Chat</span>
-                </div>
-                <FiChevronDown className="shrink-0" size={22} aria-hidden="true" />
-              </div>
+              Join Chatroom
             </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent
-            align="end"
-            className="no-scrollbar max-h-[40vh] w-full min-w-[20rem] overflow-scroll rounded-2xl"
-          >
-            {/* Supported Chains */}
-            {env.chatroomChains.map((chain) => (
-              <DropdownMenuItem
-                key={`network-${chain.name}`}
-                className="cursor-pointer"
-                onClick={async () => await handleCreateChat(chain)}
-              >
-                <div className="flex w-full flex-col items-center justify-start gap-2">
-                  <p>{chain.name}</p>
-                </div>
-              </DropdownMenuItem>
-            ))}
-          </DropdownMenuContent>
-        </DropdownMenu>
+          </div>
+        </>
       ) : (
         <div className="flex select-none flex-wrap items-stretch justify-center gap-4">
-          <div className="flex w-full">
+          {/* Invite friends form */}
+          <div className="flex w-full gap-4">
             <Input
               placeholder="Account ID"
               type="text"
+              className="w-[65%]"
               onChange={(e) => setParticipantId(String(e.target.value))}
             />
 
             <Button
               onClick={handleInviteFriends}
-              variant="outline"
-              className="min-w-[14rem] border"
+              variant="secondary"
+              className="w-[35%] min-w-[6rem] border"
               translate="no"
             >
               Invite friends
@@ -96,8 +128,8 @@ const NewChatRoomButton = () => {
           </div>
           <Button
             onClick={handleDeleteChatroom}
-            variant="destructive"
-            className="min-w-[10rem] border"
+            variant="ghost"
+            className="w-full min-w-[10rem] border"
             translate="no"
           >
             Delete chatroom
diff --git a/frontend/src/components/web3/send-message.tsx b/frontend/src/components/web3/send-message.tsx
index 746a933..2d69282 100644
--- a/frontend/src/components/web3/send-message.tsx
+++ b/frontend/src/components/web3/send-message.tsx
@@ -30,8 +30,8 @@ export const SendMessage: FC = () => {
 
   // send a message
   const handleSendMessage: SubmitHandler<z.infer<typeof formSchema>> = async ({ newMessage }) => {
-    toast.error('Please type a message')
     if (newMessage == '') {
+      toast.error('Please type a message')
       return
     }
     await sendMessage(newMessage)
@@ -63,7 +63,7 @@ export const SendMessage: FC = () => {
                   <Button
                     type="submit"
                     className="bg-primary font-bold"
-                    disabled={form.formState.isSubmitting}
+                    disabled={form.formState.isSubmitting || !form.formState.isValid}
                     isLoading={form.formState.isSubmitting}
                   >
                     Send
diff --git a/frontend/src/context/app-context.tsx b/frontend/src/context/app-context.tsx
index 0db1c49..c13aeff 100644
--- a/frontend/src/context/app-context.tsx
+++ b/frontend/src/context/app-context.tsx
@@ -21,9 +21,10 @@ type AppContextProps = {
   createChatroom: () => Promise<void>
   deleteChatroom: () => Promise<void>
   inviteFriends: (participants: string[]) => Promise<void>
+  joinChatroom: (chatroomId: string) => Promise<void>
   refreshMessages: () => Promise<void>
   messages: MessageProps[]
-  chatroomId: string | null
+  chatroomId: string | undefined
   isAppLoading: boolean
   isChatroomLoading: boolean
   isMessagesLoading: boolean
@@ -36,9 +37,10 @@ const defaultData: AppContextProps = {
   createChatroom: async () => {},
   deleteChatroom: async () => {},
   inviteFriends: async (participants: string[]) => {},
+  joinChatroom: async (chatroomId: string) => {},
   refreshMessages: async () => {},
   messages: [],
-  chatroomId: null,
+  chatroomId: undefined,
   isAppLoading: true,
   isChatroomLoading: true,
   isMessagesLoading: true,
@@ -48,7 +50,7 @@ export const AppContext = createContext(defaultData)
 export function AppProvider({ children }: { children: React.ReactNode }) {
   // app state
   const [isChatroomActive, setIsChatroomActive] = useState(false)
-  const [chatroomId, setChatroomId] = useState('5CqRGE6QMZUxh8anBchE69P8gt3sojPtwNQkmpKwWPz9yPRB')
+  const [chatroomId, setChatroomId] = useState<string>()
   const [messages, setMessages] = useState<MessageProps[]>([])
 
   // loading state
@@ -60,8 +62,57 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
   const { api, activeAccount, activeSigner } = useInkathon()
   const { contract, address: contractAddress } = useRegisteredContract(ContractIds.Chatroom)
 
+  // set app as loaded
+  useEffect(() => {
+    async function loadApp() {
+      if (activeAccount && contract && activeSigner && api) {
+        // check if the active account has an active chatroom, load it
+        const room = await queryChatroom(activeAccount.address)
+        // check if room object is not empty
+        if (!(Object.keys(room).length === 0 && room.constructor === Object)) {
+          console.log('room', room)
+          setIsChatroomActive(true)
+          setChatroomId(activeAccount.address)
+          setMessages(room.messages)
+        } else {
+          // you haven't created a chatroom, so join one if you've been invited
+          setIsChatroomActive(false)
+        }
+        setIsAppLoading(false)
+        setIsChatroomLoading(false)
+        setIsMessagesLoading(false)
+      }
+    }
+    loadApp()
+  }, [activeAccount, contract, activeSigner, api])
+
   // functions
 
+  // query chatroom
+  async function queryChatroom(_chatroomId: string): Promise<any> {
+    if (!activeAccount || !contract || !activeSigner || !api) {
+      toast.error('Wallet not connected. Try again… chatroom')
+      return
+    }
+
+    try {
+      const result = await contractQuery(api, activeAccount.address, contract, 'getChatroom', {}, [
+        _chatroomId,
+      ])
+      const { output, isError, decodedOutput } = decodeOutput(result, contract, 'getChatroom')
+      if (isError) throw new Error(decodedOutput)
+      console.log('out', output, decodedOutput)
+      if (!(Object.keys(output).length === 0 && output.constructor === Object)) {
+        // TODO change contract to output None and check for null here
+        return output
+      }
+    } catch (e) {
+      console.error(e)
+      toast.error('Error while loading chatroom. Try again…')
+    }
+    return {}
+  }
+
   // fetch chatroom
   const fetchChatroom = async () => {
     if (!activeAccount || !contract || !activeSigner || !api) {
@@ -72,11 +123,13 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
     setIsChatroomLoading(true)
 
     try {
+      console.log('chatroomId in fetchchatroom', chatroomId)
       const result = await contractQuery(api, activeAccount.address, contract, 'getChatroom', {}, [
         chatroomId,
       ])
       const { output, isError, decodedOutput } = decodeOutput(result, contract, 'getChatroom')
       if (isError) throw new Error(decodedOutput)
+      console.log('in fetchChatroom. output:', output)
       if (!(Object.keys(output).length === 0 && output.constructor === Object)) {
         // TODO change contract to output None and check for null here
         setIsChatroomActive(true)
@@ -91,9 +144,11 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
     }
   }
 
-  useEffect(() => {
-    fetchChatroom()
-  }, [api, activeAccount, contract, activeSigner])
+  // useEffect(() => {
+  //   if (chatroomId) {
+  //     fetchChatroom()
+  //   }
+  // }, [isAppLoading])
 
   // Fetch messages
   const getMessages = async () => {
@@ -137,6 +192,7 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
         chatroomId,
         newMessage,
       ])
+      await getMessages()
     } catch (e) {
       console.error(e)
     } finally {
@@ -152,6 +208,12 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
 
     try {
       await contractTxWithToast(api, activeAccount.address, contract, 'createChatroom', {}, [])
+      //set chatroomid to the caller of the create function
+      setChatroomId(activeAccount.address)
+      //fetch messages
+      await getMessages()
+      //set active chat to true
+      setIsChatroomActive(true)
     } catch (e) {
       console.error(e)
     } finally {
@@ -199,6 +261,32 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
     }
   }
 
+  // join chatroom
+  async function joinChatroom(joinChatroomId: string) {
+    setIsChatroomLoading(true)
+    setIsMessagesLoading(true)
+    if (!activeAccount || !contract || !activeSigner || !api) {
+      toast.error('Wallet not connected. Try again…')
+      return
+    }
+
+    //check if you've been invited
+
+    const room = await queryChatroom(joinChatroomId)
+    // check if room object is not empty
+    if (!(Object.keys(room).length === 0 && room.constructor === Object)) {
+      console.log('room', room)
+      setIsChatroomActive(true)
+      setChatroomId(joinChatroomId)
+      setMessages(room.messages)
+    } else {
+      // you haven't created a chatroom, so join one if you've been invited
+      setIsChatroomActive(false)
+    }
+    setIsChatroomLoading(false)
+    setIsMessagesLoading(false)
+  }
+
   return (
     <AppContext.Provider
       value={{
@@ -211,6 +299,7 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
         createChatroom,
         deleteChatroom,
         inviteFriends,
+        joinChatroom,
         sendMessage,
         messages,
         chatroomId,