diff --git a/src/components/elements/CompactAddressComponent.vue b/src/components/elements/CompactAddressComponent.vue
new file mode 100644
index 00000000..68794a42
--- /dev/null
+++ b/src/components/elements/CompactAddressComponent.vue
@@ -0,0 +1,35 @@
+<template>
+  <router-link
+    :to="{ name: 'UserView', params: { id: safeAddr } }"
+    class="hover:underline relative group"
+    >{{ shortenedAddr }}
+    <div
+      class="absolute z-10 invisible group-hover:visible bg-black rounded p-2"
+    >
+      {{ safeAddr }}
+    </div>
+  </router-link>
+</template>
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    addr: string;
+  }>(),
+  {
+    addr: "none",
+  }
+);
+
+const safeAddr = computed(() => {
+  return props.addr ? props.addr : "none";
+});
+
+const shortenedAddr = computed(() => {
+  const len = safeAddr.value.length;
+  return len > 11
+    ? safeAddr.value.slice(0, 5) + "..." + safeAddr.value.slice(len - 5, len)
+    : safeAddr;
+});
+</script>
diff --git a/src/components/elements/KeywordComponent.vue b/src/components/elements/KeywordComponent.vue
index dec80cb1..ee78d41b 100644
--- a/src/components/elements/KeywordComponent.vue
+++ b/src/components/elements/KeywordComponent.vue
@@ -5,13 +5,10 @@
       :key="index"
       class="Keywords"
     >
-      <p
-        class="Keyword"
-      >
+      <p class="font-bold">
         {{ keyword[0] }}
       </p>
       <p>{{ keyword[1] }}</p>
-      <br>
     </div>
   </div>
 </template>
@@ -21,41 +18,41 @@ import * as R from "ramda";
 import { useCardsRules } from "@/def-composables/useCardRules";
 import { onMounted, reactive, watch } from "vue";
 
-const { rules } = useCardsRules()
+const { rules } = useCardsRules();
 
-const props = withDefaults(defineProps<{
-  keywords: Array<Array<string>>
-}>(), {
-  keywords: () => [],
-})
+const props = withDefaults(
+  defineProps<{
+    keywords: Array<Array<string>>;
+  }>(),
+  {
+    keywords: () => [],
+  }
+);
 
 const initialState: {
-  keywordDescriptions: Array<Array<string>>
+  keywordDescriptions: Array<Array<string>>;
 } = {
-  keywordDescriptions: new Array<Array<string>>()
+  keywordDescriptions: new Array<Array<string>>(),
 };
 
 const state = reactive(initialState);
 
 const init = () => {
   state.keywordDescriptions = R.map(
-    (keyword) => [keyword, rules.value.definitions[firstLetterToLower(keyword as String)].description],
-  R.uniq(R.flatten(props.keywords))
-  )
-}
+    (keyword) => [
+      keyword,
+      rules.value.definitions[firstLetterToLower(keyword as String)]
+        .description,
+    ],
+    R.uniq(R.flatten(props.keywords))
+  );
+};
 
 const firstLetterToLower = (string: String) => {
   return string[0].toLowerCase() + string.substring(1);
-}
+};
 
 watch(props, init);
 
-onMounted(init)
-
+onMounted(init);
 </script>
-
-<style>
-.Keyword {
-  font-weight: bold;
-}
-</style>
\ No newline at end of file
diff --git a/src/components/elements/ModalInner.vue b/src/components/elements/ModalInner.vue
new file mode 100644
index 00000000..623fe87c
--- /dev/null
+++ b/src/components/elements/ModalInner.vue
@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <header class="flex text-white text-4xl my-2 font-bold">
+      <p class="grow my-auto">{{ heading }}</p>
+      <button @click="emit('close')" class="group">
+        <img
+          :src="closeImg"
+          alt="close"
+          class="h-12 group-hover:drop-shadow-md"
+        />
+      </button>
+    </header>
+    <div class="bg-neutral-800 p-8">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import closeImg from "@/assets/figma/close.svg";
+
+const props = withDefaults(
+  defineProps<{
+    heading: string;
+  }>(),
+  {
+    heading: "Lorem impsum dolor",
+  }
+);
+
+const emit = defineEmits(["close"]);
+</script>
diff --git a/src/components/modals/ModalFrame.vue b/src/components/modals/ModalFrame.vue
index ff244e7a..a4fbd24e 100644
--- a/src/components/modals/ModalFrame.vue
+++ b/src/components/modals/ModalFrame.vue
@@ -1,24 +1,15 @@
 <template>
   <div class="fixed top-0 flex h-[100vh] w-[100%] bg-black/50">
-    <div :class="['p-10', 'z-100', 'm-auto'].concat(props.class)">
-      <header class="flex text-white text-4xl my-2 font-bold">
-        <p class="grow my-auto">{{ heading }}</p>
-        <button @click="emit('close')" class="group">
-          <img
-            :src="closeImg"
-            alt="close"
-            class="h-12 group-hover:drop-shadow-md"
-          />
-        </button>
-      </header>
-      <div class="bg-neutral-800 p-8">
-        <slot></slot>
-      </div>
-    </div>
+    <ModalInner
+      :class="['p-10', 'z-100', 'm-auto'].concat(props.class)"
+      @close="emit('close')"
+    >
+      <slot></slot>
+    </ModalInner>
   </div>
 </template>
 <script setup lang="ts">
-import closeImg from "@/assets/figma/close.svg";
+import ModalInner from "@/components/elements/ModalInner.vue";
 
 const props = withDefaults(
   defineProps<{
diff --git a/src/views/AdvancedCardViewPage.vue b/src/views/AdvancedCardViewPage.vue
index 87c58e43..e2e60c62 100644
--- a/src/views/AdvancedCardViewPage.vue
+++ b/src/views/AdvancedCardViewPage.vue
@@ -1,123 +1,106 @@
 <template>
-  <div align="center">
-    <h1 class="header__h2">
-      {{ state.card.CardName }}
-    </h1>
-    <a v-if="state.card.FlavourText" class="FlavourText">"{{ state.card.FlavourText }}"</a>
-    <br /><br />
-    <div class="Container">
-      <!-- Keyword Element -->
-      <div class="Element" align="left">
-        <h3>Used Keywords</h3>
-        <br />
-        <keyword-component :keywords="state.card.Keywords" />
-      </div>
-      <!-- Card Element -->
-      <div class="ELement">
-        <CardComponent :id="'card'" :model="state.card" :image-u-r-l="state.card.image" />
-      </div>
-      <!-- Basic Element -->
-      <div class="Element" align="left">
-        <!-- General -->
-        <h3>Advanced Card Information</h3>
-        <a>
-          Votepool: {{ state.card.votePool.normalize().pretty() }} <br />
-          Status: {{ state.card.status }} <br />
-          Notes: {{ state.card.notes }} <br />
-          Owner:
-          <router-link
-            v-if="state.card.owner"
-            :to="{ name: 'UserView', params: { id: state.card.owner } }"
-          >
-            {{ state.card.owner }}
-          </router-link>
+  <div class="bg-black text-white flex lg:h-[80vh] p-16 lg:p-8">
+    <ModalInner
+      :heading="state.card.CardName"
+      class="m-auto"
+      @close="$router.back()"
+    >
+      <div
+        class="lg:flex justify-center space-y-20 lg:space-y-0 lg:space-x-20 p-6"
+      >
+        <div>
+          <p class="text-center max-w-xs pb-8 mx-auto" v-if="state.card.FlavourText">
+            <i>"{{ state.card.FlavourText }}"</i>
+          </p>
+          <div>
+            <CardComponent
+              class="block"
+              :model="state.card"
+              :image-u-r-l="state.card.image"
+            />
+          </div>
+        </div>
+        <div>
+          <p class="font-bold text-2xl">Advanced Card Information</p>
+          <br />
+          <p>
+            Votepool: {{ state.card.votePool.normalize().pretty() }} <br />
+            Status: {{ state.card.status }} <br />
+            Notes: {{ state.card.notes }} <br />
+            Owner:
+            <CompactAddressComponent :addr="state.card.owner" />
+            <br />
+            Artist:
+            <CompactAddressComponent :addr="state.card.artist" />
+          </p>
           <br />
-          Artist:
-          <router-link
-            v-if="state.card.artist"
-            :to="{ name: 'UserView', params: { id: state.card.artist } }"
-          >
-            {{ state.card.artist }}
-          </router-link> </a
-        ><br />
-        <br />
-        <!-- Voting -->
-        <h3>Latest Voting Results</h3>
-        <a>
-          Inappropriate Votes: {{ state.card.inappropriateVotes }} <br />
-          Underpowered Votes: {{ state.card.underpoweredVotes }} <br />
-          Overpowered Votes: {{ state.card.overpoweredVotes }} <br />
-          Fair Enough Votes: {{ state.card.fairEnoughVotes }} <br />
-          Nerflevel: {{ state.card.nerflevel }} <br />
-        </a>
-        <br />
-        <div class="ccbutton">
-          <button v-if="canVote" @click="vote(VoteType.underpowered)">
-            Vote Underpowered
-          </button>
-          <button v-if="canVote" @click="vote(VoteType.overpowered)">
-            Vote Overpowered
-          </button>
-          <button
-            v-if="canVote"
-            class="btn--default"
-            @click="vote(VoteType.fairEnough)"
-          >
-            Vote Fair Enough
-          </button>
-          <button
-            v-if="canVote"
-            class="btn--default"
-            @click="vote(VoteType.inappropriate)"
-          >
-            Vote Inappropriate
-          </button>
-          <br /><br />
-          <button v-if="isArtist" class="btn--default" @click="edit()">
-            Edit artwork
-          </button>
-          <button v-if="isOwner" class="btn--default" @click="edit()">
-            Edit card
-          </button>
-          <button v-if="isOwner" class="btn--default" @click="showModal()">
-            Transfer card
-          </button>
-          <TransferCardModal
-            v-show="state.isModalVisible"
-            :card="String(state.id)"
-            @close="closeModal"
-          />
+          <p class="font-bold text-2xl">Latest Voting Results</p>
+          <p>
+            Inappropriate Votes: {{ state.card.inappropriateVotes }} <br />
+            Underpowered Votes: {{ state.card.underpoweredVotes }} <br />
+            Overpowered Votes: {{ state.card.overpoweredVotes }} <br />
+            Fair Enough Votes: {{ state.card.fairEnoughVotes }} <br />
+            Nerflevel: {{ state.card.nerflevel }} <br />
+          </p>
+          <br />
+        </div>
+        <div>
+          <p class="font-bold text-2xl">Used Keywords</p>
+          <br />
+          <KeywordComponent :keywords="state.card.Keywords" />
         </div>
       </div>
-    </div>
+      <div
+        class="flex flex-col lg:flex-row justify-center lg:justify-end space-y-6 lg:space-x-6 lg:space-y-0"
+      >
+        <BaseCCButton :type="ButtonType.RED" v-if="isArtist" @click="edit()">
+          Edit artwork
+        </BaseCCButton>
+        <BaseCCButton :type="ButtonType.RED" v-if="isOwner" @click="edit()">
+          Edit card
+        </BaseCCButton>
+        <BaseCCButton
+          v-if="isOwner"
+          :type="ButtonType.RED"
+          @click="showModal()"
+        >
+          Transfer card
+        </BaseCCButton>
+      </div>
+    </ModalInner>
   </div>
+  <TransferCardModal
+    v-show="state.isModalVisible"
+    :card="String(state.id)"
+    @close="closeModal"
+  />
 </template>
 
 <script setup lang="ts">
 import CardComponent from "@/components/elements/CardComponent.vue";
 import TransferCardModal from "@/components/modals/TransferCardModal.vue";
 import KeywordComponent from "@/components/elements/KeywordComponent.vue";
-import { useQuery } from "@/def-composables/useQuery";
 import { useAddress } from "@/def-composables/useAddress";
 import { useLoggedIn } from "@/def-composables/useLoggedIn";
 import { Card } from "@/model/Card";
 import { useCardCreatorCards } from "@/def-composables/useCardCreatorCards";
 import { computed, onMounted, reactive } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import {
-  VoteType
-} from "decentralcardgame-cardchain-client-ts/DecentralCardGame.cardchain.cardchain/types/cardchain/cardchain/voting";
+import { VoteType } from "decentralcardgame-cardchain-client-ts/DecentralCardGame.cardchain.cardchain/types/cardchain/cardchain/voting";
 import { useVoting } from "@/def-composables/useVoting";
 import { useCards } from "@/def-composables/useCards";
+import ModalInner from "@/components/elements/ModalInner.vue";
+import CompactAddressComponent from "@/components/elements/CompactAddressComponent.vue";
+import BaseCCButton from "@/components/elements/CCButton/BaseCCButton.vue";
+import { ButtonType } from "@/components/elements/CCButton/ButtonType";
 
-const { queryQCard } = useQuery();
 const { editCard } = useCardCreatorCards();
 const { address } = useAddress();
 const { loggedIn } = useLoggedIn();
 const { add, send, isEmpty, cardsLeft, current } = useVoting();
-const { getCard } = useCards()
+const { getCard } = useCards();
 const route = useRoute();
-const router = useRouter()
+const router = useRouter();
 
 const initialState: {
   isModalVisible: boolean;
@@ -130,9 +113,12 @@ const initialState: {
 };
 
 const state = reactive(initialState);
-const canVote = computed(() => cardsLeft.value.includes(state.id))
-const isOwner = computed(() => state.card.owner === address.value && loggedIn.value);
-const isArtist = computed(() => state.card.artist === address.value && loggedIn.value)
+const isOwner = computed(
+  () => state.card.owner === address.value && loggedIn.value
+);
+const isArtist = computed(
+  () => state.card.artist === address.value && loggedIn.value
+);
 
 onMounted(() => {
   state.id = parseInt(route.params.id as string);
@@ -142,7 +128,7 @@ onMounted(() => {
 });
 
 const loadCard = async () => {
-  state.card = await getCard(state.id)
+  state.card = await getCard(state.id);
 };
 const vote = (type: VoteType) => {
   add(state.id, type);
@@ -159,9 +145,9 @@ const edit = () => {
   editCard.card.value = state.card;
   router.push("/cardCreator");
 };
-const showModal = () => state.isModalVisible = true
+const showModal = () => (state.isModalVisible = true);
 const closeModal = () => {
   state.isModalVisible = false;
   loadCard();
 };
-</script>
\ No newline at end of file
+</script>