diff --git a/packages/web/pages/guild/[guildname].tsx b/packages/web/pages/guild/[guildname].tsx
index eea50d4b..ab5b8153 100644
--- a/packages/web/pages/guild/[guildname].tsx
+++ b/packages/web/pages/guild/[guildname].tsx
@@ -11,6 +11,8 @@ import {
 import Error from 'next/error';
 import { useRouter } from 'next/router';
 import React from 'react';
+import { BOX_TYPE } from 'utils/boxTypes';
+import { getPlayerCoverImageFull } from 'utils/playerHelpers';
 
 import { PageContainer } from '../../components/Container';
 import { GuildHero } from '../../components/Guild/GuildHero';
@@ -20,9 +22,20 @@ import { HeadComponent } from '../../components/Seo';
 
 type Props = InferGetStaticPropsType<typeof getStaticProps>;
 
-const GuildPage: React.FC<Props> = ({ guild, quests }) => {
+const GuildPage: React.FC<Props> = ({ guild }) => {
   const router = useRouter();
 
+  // Hidden until implemented
+  // BOX_TYPE.GUILD.SKILLS,
+  // BOX_TYPE.GUILD.STATS,
+  // BOX_TYPE.GUILD.QUESTS,
+  // BOX_TYPE.GUILD.GALLERY,
+
+  const boxes = [
+    [BOX_TYPE.GUILD.PLAYERS],
+    [BOX_TYPE.GUILD.ANNOUNCEMENTS, BOX_TYPE.GUILD.LINKS],
+  ];
+
   if (router.isFallback) {
     return <LoadingState />;
   }
@@ -31,72 +44,112 @@ const GuildPage: React.FC<Props> = ({ guild, quests }) => {
     return <Error statusCode={404} />;
   }
 
+  const getBox = (name: string): React.ReactNode => {
+    switch (name) {
+      case BOX_TYPE.GUILD.PLAYERS:
+        return <GuildPlayers guildId={guild.id} guildname={guild.guildname} />;
+      case BOX_TYPE.GUILD.LINKS:
+        return <GuildLinks guild={guild} />;
+      case BOX_TYPE.GUILD.ANNOUNCEMENTS:
+        return (
+          <ProfileSection title="Announcements">
+            <p>No announcements.</p>
+          </ProfileSection>
+        );
+      default:
+        return <></>;
+    }
+  };
+
   return (
-    <PageContainer>
-      <HeadComponent
-        title={guild.name}
-        description={`${guild.description}`}
-        url={`https://my.metagame.wtf/guild/${guild.guildname}`}
-        img={`${guild.logo}`}
+    <PageContainer p={0}>
+      <Box
+        background={`url(${getPlayerCoverImageFull({})}) no-repeat`}
+        bgSize="cover"
+        bgPos="center"
+        h={72}
+        position="absolute"
+        w="full"
       />
       <Flex
+        w="full"
+        minH="100vh"
+        pl={[4, 8, 12]}
+        pr={[4, 8, 12]}
+        pb={[4, 8, 12]}
+        pt={200 - 72}
+        direction="column"
         align="center"
-        direction={{ base: 'column', lg: 'row' }}
-        alignItems="flex-start"
-        maxWidth="7xl"
+        zIndex={1}
       >
-        <Box width={{ base: '100%', lg: '33%' }} mr={{ base: 0, lg: 4 }}>
-          <Box mb="6">
-            <GuildHero guild={guild} />
+        <HeadComponent
+          title={guild.name}
+          description={`${guild.description}`}
+          url={`https://my.metagame.wtf/guild/${guild.guildname}`}
+          img={`${guild.logo}`}
+        />
+        <Flex
+          align="center"
+          direction={{ base: 'column', md: 'row' }}
+          alignItems="flex-start"
+          maxWidth="7xl"
+        >
+          <Box
+            width={{ base: '100%', md: '50%', lg: '33%' }}
+            mr={{ base: 0, md: 4 }}
+          >
+            <Box mb="6">
+              <GuildHero guild={guild} />
+            </Box>
           </Box>
-          <Box mb="6">
-            <ProfileSection title="Skills" />
+          <Box
+            width={{ base: '100%', md: '50%', lg: '66%' }}
+            ml={{ base: 0, md: 4 }}
+            mt={[0, 0, 100]}
+            mb={[100, 100, 0]}
+          >
+            <Box width="100%">
+              <Flex
+                align="center"
+                direction={{ base: 'column', lg: 'row' }}
+                alignItems="flex-start"
+              >
+                <Box
+                  width={{ base: '100%', lg: '50%' }}
+                  mr={{ base: 0, lg: 4 }}
+                >
+                  {boxes[0].map((name) => (
+                    <Box mb="6" key={name}>
+                      {getBox(name)}
+                    </Box>
+                  ))}
+                </Box>
+                <Box
+                  width={{ base: '100%', lg: '50%' }}
+                  ml={{ base: 0, lg: 4 }}
+                >
+                  {boxes[1].map((name) => (
+                    <Box mb="6" key={name}>
+                      {getBox(name)}
+                    </Box>
+                  ))}
+                </Box>
+              </Flex>
+            </Box>
           </Box>
-          <Box mb="6">
-            <GuildLinks guild={guild} />
-          </Box>
-        </Box>
-        <Box width={{ base: '100%', lg: '66%' }} ml={{ base: 0, lg: 4 }}>
-          <Box width="100%">
-            <Flex
-              align="center"
-              direction={{ base: 'column', lg: 'row' }}
-              alignItems="flex-start"
-            >
-              <Box width={{ base: '100%', lg: '50%' }} mr={{ base: 0, lg: 4 }}>
-                <Box mb="6">
-                  <GuildPlayers
-                    guildId={guild.id}
-                    guildname={guild.guildname}
-                  />
-                </Box>
-                <Box mb="6">
-                  <ProfileSection title="Stats" />
-                </Box>
-              </Box>
-              <Box width={{ base: '100%', lg: '50%' }} ml={{ base: 0, lg: 4 }}>
-                <Box mb="6">
-                  <ProfileSection title="Announcements">
-                    <p>No announcements.</p>
-                  </ProfileSection>
-                </Box>
-                <Box mb="6">
-                  <ProfileSection title="Quests">
-                    {quests?.length ? (
-                      <p>Available quests</p>
-                    ) : (
-                      <p>Currently no available quests</p>
-                    )}
-                  </ProfileSection>
-                </Box>
-                <Box mb="6">
-                  <ProfileSection title="Gallery" />
-                </Box>
-              </Box>
-            </Flex>
-          </Box>
-        </Box>
+        </Flex>
       </Flex>
+      {/* to be implemented  */}
+      {/* <ProfileSection title="Skills" />
+      <ProfileSection title="Stats" />
+      <ProfileSection title="Quests">
+        {quests?.length ? (
+          <p>Available quests</p>
+        ) : (
+          <p>Currently no available quests</p>
+        )}
+      </ProfileSection>
+      <ProfileSection title="Gallery" /> */}
     </PageContainer>
   );
 };