diff --git a/app/components/TextWithIcon/TextWithIcon.css b/app/components/TextWithIcon/TextWithIcon.css
index 600e479652..a376269571 100644
--- a/app/components/TextWithIcon/TextWithIcon.css
+++ b/app/components/TextWithIcon/TextWithIcon.css
@@ -6,3 +6,7 @@
 .textContainer {
   width: max-content;
 }
+
+.overflowWrap {
+  overflow-wrap: anywhere;
+}
diff --git a/app/components/TextWithIcon/index.tsx b/app/components/TextWithIcon/index.tsx
index 9d05d2ed26..6a666f417a 100644
--- a/app/components/TextWithIcon/index.tsx
+++ b/app/components/TextWithIcon/index.tsx
@@ -1,4 +1,5 @@
 import { Flex, Icon } from '@webkom/lego-bricks';
+import cx from 'classnames';
 import Tooltip from '../Tooltip';
 import styles from './TextWithIcon.css';
 import type { ReactElement, ReactNode } from 'react';
@@ -34,7 +35,11 @@ const TextWithIcon = ({
   );
 
   return (
-    <Flex alignItems="center" gap={gap} className={className}>
+    <Flex
+      alignItems="center"
+      gap={gap}
+      className={cx(styles.overflowWrap, className)}
+    >
       {iconRight && (
         <div className={styles.textContainer}>
           <span>{content}</span>
@@ -45,7 +50,7 @@ const TextWithIcon = ({
       ) : (
         <>{icon}</>
       )}
-      <div>{iconRight ? <></> : <>{content}</>}</div>
+      {iconRight ? <></> : <>{content}</>}
     </Flex>
   );
 };
diff --git a/app/components/Upload/FileUpload.tsx b/app/components/Upload/FileUpload.tsx
index 9832e92e12..dc311f21ba 100644
--- a/app/components/Upload/FileUpload.tsx
+++ b/app/components/Upload/FileUpload.tsx
@@ -1,72 +1,61 @@
-import { Button } from '@webkom/lego-bricks';
-import { Component } from 'react';
-import { connect } from 'react-redux';
-import { uploadFile } from 'app/actions/FileActions';
+import { Flex, Icon } from '@webkom/lego-bricks';
+import { UploadIcon } from 'lucide-react';
+import { useState, useRef } from 'react';
+import { useAppDispatch } from 'app/store/hooks';
 import styles from './FileUpload.css';
 
-type State = {
-  pending: boolean;
-};
-type Props = {
-  uploadFile: (arg0: { file: File }) => Promise<any>;
+type FileUploadProps = {
+  uploadFile: (arg0: { file: File }) => Promise<{
+    meta: { fileKey: string; fileToken: string };
+  }>;
   onChange: (arg0: string, arg1: string) => void;
   className?: string;
 };
 
-class FileUpload extends Component<Props, State> {
-  input: HTMLInputElement | null | undefined;
-  state = {
-    pending: false,
-  };
-  handleClick = () => {
-    this.input && this.input.click();
-  };
-  handleChange = (e) => {
-    const file = e.target.files[0];
-    this.setState({
-      pending: true,
-    });
-    this.props
-      .uploadFile({
-        file,
-      })
-      .then(({ meta }) => {
-        this.setState({
-          pending: false,
-        });
-        this.props.onChange(meta.fileKey, meta.fileToken);
-      })
-      .catch((error) => {
-        this.setState({
-          pending: false,
-        });
-        throw error;
-      });
+const FileUpload = ({ uploadFile, onChange }: FileUploadProps) => {
+  const [pending, setPending] = useState(false);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const handleClick = () => {
+    inputRef.current && inputRef.current.click();
   };
 
-  render() {
-    return (
-      <div>
-        <Button
-          isPending={this.state.pending}
-          onPress={this.handleClick}
-          className={this.props.className}
-        >
-          Last opp fil
-        </Button>
-        <input
-          ref={(ref) => (this.input = ref)}
-          className={styles.input}
-          onChange={this.handleChange}
-          type="file"
-          accept="application/pdf"
-        />
-      </div>
-    );
-  }
-}
+  const dispatch = useAppDispatch();
 
-const mapDispatchToProps = {
-  uploadFile,
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      setPending(true);
+      dispatch(
+        uploadFile({ file })
+          .then(({ meta }) => {
+            setPending(false);
+            onChange(meta.fileKey, meta.fileToken);
+          })
+          .catch((error) => {
+            setPending(false);
+            throw error;
+          }),
+      );
+    }
+  };
+
+  return (
+    <Flex justifyContent="center">
+      <Icon
+        disabled={pending}
+        name="upload"
+        iconNode={<UploadIcon size={20} />}
+        onClick={handleClick}
+      />
+      <input
+        className={styles.input}
+        onChange={handleChange}
+        type="file"
+        accept="application/pdf"
+      />
+    </Flex>
+  );
 };
-export default connect(null, mapDispatchToProps)(FileUpload);
+
+export default FileUpload;
diff --git a/app/routes/bdb/components/BdbDetail.tsx b/app/routes/bdb/components/BdbDetail.tsx
index b0c9db8ffe..d0d7f5d075 100644
--- a/app/routes/bdb/components/BdbDetail.tsx
+++ b/app/routes/bdb/components/BdbDetail.tsx
@@ -1,6 +1,4 @@
 import {
-  Button,
-  Card,
   ConfirmModal,
   Flex,
   Icon,
@@ -11,27 +9,35 @@ import {
   PageCover,
 } from '@webkom/lego-bricks';
 import { usePreparedEffect } from '@webkom/react-prepare';
-import cx from 'classnames';
+import { isEmpty } from 'lodash';
 import { Trash2 } from 'lucide-react';
 import moment from 'moment-timezone';
-import { useState } from 'react';
 import { Helmet } from 'react-helmet-async';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 import {
   deleteCompanyContact,
+  deleteSemesterStatus,
   editSemesterStatus,
   fetchAdmin,
   fetchSemesters,
 } from 'app/actions/CompanyActions';
 import { fetchEvents } from 'app/actions/EventActions';
 import { fetchAll as fetchAllJoblistings } from 'app/actions/JoblistingActions';
+import CollapsibleDisplayContent from 'app/components/CollapsibleDisplayContent';
 import CommentView from 'app/components/Comments/CommentView';
+import {
+  ContentMain,
+  ContentSection,
+  ContentSidebar,
+} from 'app/components/Content';
 import EmptyState from 'app/components/EmptyState';
-import InfoBubble from 'app/components/InfoBubble';
 import JoblistingItem from 'app/components/JoblistingItem';
 import sharedStyles from 'app/components/JoblistingItem/JoblistingItem.css';
+import Table from 'app/components/Table';
+import TextWithIcon from 'app/components/TextWithIcon';
 import Time from 'app/components/Time';
 import Tooltip from 'app/components/Tooltip';
+import FileUpload from 'app/components/Upload/FileUpload';
 import { selectCommentsByIds } from 'app/reducers/comments';
 import {
   selectEventsForCompany,
@@ -41,18 +47,81 @@ import {
 import { selectAllCompanySemesters } from 'app/reducers/companySemesters';
 import { selectPaginationNext } from 'app/reducers/selectors';
 import { selectUserById } from 'app/reducers/users';
+import SemesterStatus from 'app/routes/bdb/components/SemesterStatus';
+import {
+  indexToCompanySemester,
+  semesterToHumanReadable,
+} from 'app/routes/bdb/utils';
 import { displayNameForEventType } from 'app/routes/events/utils';
 import { useAppDispatch, useAppSelector } from 'app/store/hooks';
 import { EntityType } from 'app/store/models/entities';
 import truncateString from 'app/utils/truncateString';
-import { sortByYearThenSemester, getContactStatuses } from '../utils';
-import SemesterStatusDetail from './SemesterStatusDetail';
 import styles from './bdb.css';
+import type { EntityId } from '@reduxjs/toolkit';
+import type { ColumnProps } from 'app/components/Table';
 import type { TransformedSemesterStatus } from 'app/reducers/companies';
 import type {
+  CompanyContact,
   CompanySemesterContactStatus,
-  SemesterStatus,
 } from 'app/store/models/Company';
+import type { ListEvent } from 'app/store/models/Event';
+
+type RenderFileProps = {
+  semesterStatus: TransformedSemesterStatus;
+  type: string;
+  removeFile: (
+    type: string,
+    semesterStatus: TransformedSemesterStatus,
+  ) => Promise<unknown>;
+  addFile: (
+    name: string,
+    token: string,
+    type: string,
+    semesterStatus: TransformedSemesterStatus,
+  ) => Promise<unknown>;
+};
+
+export const RenderFile = (props: RenderFileProps) => {
+  const { semesterStatus, type, removeFile, addFile } = props;
+
+  const name = semesterStatus[type + 'Name'];
+
+  if (semesterStatus[type]) {
+    return (
+      <span className={styles.deleteFile}>
+        <span>
+          {name ? (
+            <a href={semesterStatus[type]}>{truncateString(name, 30)}</a>
+          ) : (
+            <span className="secondaryFontColor">-</span>
+          )}
+        </span>
+        <ConfirmModal
+          title="Slett fil"
+          message="Er du sikker på at du vil slette denne filen?"
+          onConfirm={() => removeFile(type, semesterStatus)}
+          closeOnConfirm
+        >
+          {({ openConfirmModal }) => (
+            <Icon
+              onClick={openConfirmModal}
+              iconNode={<Trash2 />}
+              size={20}
+              danger
+            />
+          )}
+        </ConfirmModal>
+      </span>
+    );
+  }
+  return (
+    <FileUpload
+      onChange={(fileName, fileToken) =>
+        addFile(fileName, fileToken, type, semesterStatus)
+      }
+    />
+  );
+};
 
 const BdbDetail = () => {
   const { companyId } = useParams<{ companyId: string }>() as {
@@ -61,6 +130,8 @@ const BdbDetail = () => {
   const company = useAppSelector((state) =>
     selectTransformedAdminCompanyById(state, companyId),
   );
+  const fetchingCompany = useAppSelector((state) => state.companies.fetching);
+  const showSkeleton = fetchingCompany && isEmpty(company);
 
   const eventsQuery = {
     company: companyId,
@@ -77,7 +148,7 @@ const BdbDetail = () => {
   const companySemesters = useAppSelector(selectAllCompanySemesters);
   const studentContact = useAppSelector((state) =>
     company?.studentContact !== null
-      ? selectUserById(state, company?.studentContact)
+      ? selectUserById(state, company?.studentContact as EntityId | undefined)
       : undefined,
   );
   const { pagination: eventsPagination } = useAppSelector(
@@ -115,59 +186,44 @@ const BdbDetail = () => {
   );
 
   const navigate = useNavigate();
-
-  const [eventsToDisplay, setEventsToDisplay] = useState(3);
-
   if (!company || !('semesterStatuses' in company)) {
     return <LoadingIndicator loading />;
   }
 
-  const fetchMoreEvents = () => {
-    dispatch(
-      fetchEvents({
-        query: eventsQuery,
-        next: true,
-      }),
-    );
-  };
-
-  const semesterStatusOnChange = async (
-    semesterStatus: TransformedSemesterStatus,
-    status: CompanySemesterContactStatus,
+  const editChangedStatuses = async (
+    companyId: EntityId,
+    tableIndex: number,
+    semesterStatusId: EntityId | undefined,
+    contactedStatus: CompanySemesterContactStatus[],
   ) => {
-    const newStatus = {
-      ...semesterStatus,
-      contactedStatus: getContactStatuses(
-        semesterStatus.contactedStatus,
-        status,
-      ),
-    };
-    const companySemester = companySemesters.find(
-      (companySemester) =>
-        companySemester.year === newStatus.year &&
-        companySemester.semester === newStatus.semester,
-    );
-
-    if (!companySemester) {
-      throw new Error('Could not find company semester');
+    if (!semesterStatusId) {
+      throw new Error('SemesterStatusId is undefined');
     }
+    const startYear = moment().year();
+    const startSemester = moment().month() > 6 ? 1 : 0;
 
-    const sendableSemester = {
-      contactedStatus: newStatus.contactedStatus,
-      semesterStatusId: newStatus.id,
-      semester: companySemester.id,
-      companyId: company.id,
-    };
+    const companySemester = indexToCompanySemester(
+      tableIndex,
+      startYear,
+      startSemester,
+      companySemesters,
+    );
 
-    await dispatch(editSemesterStatus(sendableSemester));
-    navigate(`/bdb/${companyId}/`);
+    const id = companySemester?.id;
+    const semesterStatus = {
+      companyId,
+      contactedStatus,
+      semester: id,
+    };
+    return dispatch(
+      editSemesterStatus({ ...semesterStatus, semesterStatusId }),
+    );
   };
 
   const addFileToSemester = async (
-    fileName: string,
     fileToken: string,
     type: string,
-    semesterStatus: SemesterStatus,
+    semesterStatus,
   ) => {
     const sendableSemester = {
       semesterStatusId: semesterStatus.id,
@@ -179,10 +235,7 @@ const BdbDetail = () => {
     navigate(`/bdb/${companyId}/`);
   };
 
-  const removeFileFromSemester = async (
-    semesterStatus: SemesterStatus,
-    type: string,
-  ) => {
+  const removeFileFromSemester = async (type: string, semesterStatus) => {
     const sendableSemester = {
       semesterStatusId: semesterStatus.id,
       contactedStatus: semesterStatus.contactedStatus,
@@ -193,117 +246,213 @@ const BdbDetail = () => {
     navigate(`/bdb/${companyId}/`);
   };
 
-  const semesters = (company.semesterStatuses ?? [])
-    .slice()
-    .sort(sortByYearThenSemester)
-    .map((semesterStatus) => (
-      <SemesterStatusDetail
-        semesterStatus={semesterStatus}
-        key={semesterStatus.id}
-        companyId={company.id}
-        editFunction={semesterStatusOnChange}
-        addFileToSemester={addFileToSemester}
-        removeFileFromSemester={removeFileFromSemester}
-      />
-    ));
-  // CompanyContact in reverse order, latest comes first
-  const companyContacts =
-    company.companyContacts &&
-    company.companyContacts
-      .map((contact) => (
-        <tr key={contact.id}>
-          <td>{contact.name || '-'}</td>
-          <td>{contact.role || '-'}</td>
-          <td>{contact.mail || '-'}</td>
-          <td>{contact.phone || '-'}</td>
-          <td>
-            <Flex>
-              <Icon
-                to={`/bdb/${String(company.id)}/company-contacts/${String(
-                  contact.id,
-                )}`}
-                name="pencil"
-                edit
-                size={20}
-              />
-              <ConfirmModal
-                title="Slett bedriftskontakt"
-                message="Er du sikker på at du vil slette denne bedriftskontakten?"
-                onConfirm={() =>
-                  dispatch(deleteCompanyContact(company.id, contact.id))
-                }
-                closeOnConfirm
-              >
-                {({ openConfirmModal }) => (
-                  <Icon
-                    onClick={openConfirmModal}
-                    iconNode={<Trash2 />}
-                    danger
-                    size={20}
-                  />
-                )}
-              </ConfirmModal>
-            </Flex>
-          </td>
-        </tr>
-      ))
-      .reverse();
+  const title = `BDB: ${company.name}`;
+
+  const companyInfo = [
+    {
+      text: company.website,
+      icon: 'globe-outline',
+      link: true,
+    },
+    {
+      text: company.address,
+      icon: 'location-outline',
+      link: false,
+    },
+    {
+      text: company.phone,
+      icon: 'call-outline',
+      link: false,
+    },
+    {
+      text: company.companyType,
+      icon: 'briefcase-outline',
+      link: false,
+    },
+    {
+      text: company.paymentMail,
+      icon: 'mail-outline',
+      link: false,
+    },
+    {
+      text: studentContact?.fullName || '-',
+      icon: 'person-outline',
+      link: studentContact
+        ? `abakus.no/users/${studentContact.username}`
+        : false,
+    },
+  ];
 
-  const events =
-    companyEvents &&
-    companyEvents
-      .sort((a, b) => moment(b.startTime).diff(a.startTime))
-      .slice(0, eventsToDisplay)
-      .map((event) => (
-        <tr key={event.id}>
-          <td>
-            <Link to={`events/${event.id}`}>{event.title}</Link>
-          </td>
-          <td>{displayNameForEventType(event.eventType)}</td>
-          <td>
-            <Time time={event.startTime} format="DD.MM.YYYY" />
-          </td>
-          <td>{truncateString(event.location, 50)}</td>
-          <td>{truncateString(event.description, 70)}</td>
-          <td>
-            {event.survey && (
-              <Tooltip
-                content="Spørreundersøkelse"
-                className={styles.surveyContainer}
-              >
+  const contactsColumns: ColumnProps<CompanyContact>[] = [
+    {
+      title: 'Navn',
+      dataIndex: 'name',
+    },
+    {
+      title: 'Rolle',
+      dataIndex: 'role',
+    },
+    {
+      title: 'E-post',
+      dataIndex: 'mail',
+    },
+    {
+      title: 'Telefon',
+      dataIndex: 'phone',
+    },
+    {
+      title: '',
+      dataIndex: '',
+      render: (_, contact) =>
+        contact && (
+          <Flex>
+            <Icon
+              to={`/bdb/${String(company.id)}/company-contacts/${String(
+                contact.id,
+              )}`}
+              name="pencil"
+              edit
+              size={20}
+            />
+            <ConfirmModal
+              title="Slett bedriftskontakt"
+              message="Er du sikker på at du vil slette denne bedriftskontakten?"
+              onConfirm={() =>
+                dispatch(deleteCompanyContact(company.id, contact.id))
+              }
+              closeOnConfirm
+            >
+              {({ openConfirmModal }) => (
                 <Icon
-                  to={`/surveys/${event.survey}`}
-                  name="bar-chart-outline"
+                  onClick={openConfirmModal}
+                  iconNode={<Trash2 />}
+                  danger
                   size={20}
                 />
-              </Tooltip>
-            )}
-          </td>
-        </tr>
-      ));
+              )}
+            </ConfirmModal>
+          </Flex>
+        ),
+    },
+  ];
 
-  const title = `BDB: ${company.name}`;
+  const eventColumns: ColumnProps<ListEvent>[] = [
+    {
+      title: 'Tittel',
+      dataIndex: 'title',
+      render: (title) => <Link to={`/events/${title.id}`}>{title}</Link>,
+    },
+    {
+      title: 'Type',
+      dataIndex: 'eventType',
+      render: (eventType) => displayNameForEventType(eventType),
+    },
+    {
+      title: 'Når',
+      dataIndex: 'startTime',
+      render: (startTime) => <Time time={startTime} format="DD.MM.YYYY" />,
+    },
+    {
+      title: 'Sted',
+      dataIndex: 'location',
+    },
+    {
+      title: 'Beskrivelse',
+      dataIndex: 'description',
+    },
+    {
+      title: '',
+      dataIndex: '',
+      render: (_, event) =>
+        event.survey && (
+          <Tooltip
+            content="Spørreundersøkelse"
+            className={styles.surveyContainer}
+          >
+            <Icon
+              to={`/surveys/${event.survey}`}
+              name="bar-chart-outline"
+              size={20}
+            />
+          </Tooltip>
+        ),
+    },
+  ];
+
+  const semesterColumns: ColumnProps<TransformedSemesterStatus>[] = [
+    {
+      title: 'Semester',
+      dataIndex: 'semester',
+      render: (_, semesterStatus: TransformedSemesterStatus) =>
+        semesterToHumanReadable(semesterStatus),
+    },
+    {
+      title: 'Status',
+      dataIndex: 'contactedStatus',
+      render: (_, semesterStatus: TransformedSemesterStatus) => (
+        <SemesterStatus
+          semesterStatus={semesterStatus}
+          companyId={company.id}
+          editChangedStatuses={editChangedStatuses}
+          semIndex={0}
+        />
+      ),
+    },
+    ...[
+      ['Kontrakt', 'contract'],
+      ['Statistikk', 'statistics'],
+      ['Evaluering', 'evaluation'],
+    ].map(([title, type]) => {
+      return {
+        title: title,
+        dataIndex: type,
+        render: (_, semesterStatus: TransformedSemesterStatus) => (
+          <RenderFile
+            semesterStatus={semesterStatus}
+            type={type}
+            addFile={addFileToSemester}
+            removeFile={removeFileFromSemester}
+          />
+        ),
+      };
+    }),
+    {
+      title: '',
+      dataIndex: '',
+      render: (_, semesterStatus: TransformedSemesterStatus) => (
+        <ConfirmModal
+          title="Slett semesterstatus"
+          message={`Er du sikker på at du vil slette semesterstatusen for ${semesterToHumanReadable(
+            semesterStatus,
+          )}? Alle filer for dette semesteret vil bli slettet.`}
+          onConfirm={() =>
+            dispatch(deleteSemesterStatus(company.id, semesterStatus.id))
+          }
+          closeOnConfirm
+        >
+          {({ openConfirmModal }) => (
+            <Icon
+              onClick={openConfirmModal}
+              iconNode={<Trash2 />}
+              danger
+              size={20}
+            />
+          )}
+        </ConfirmModal>
+      ),
+    },
+  ];
 
   return (
     <Page
       cover={
-        company.logo && (
-          <PageCover image={company.logo} alt={`${company.name} sin logo`} />
-        )
+        <PageCover
+          image={company?.logo}
+          imagePlaceholder={company?.logoPlaceholder}
+          skeleton={showSkeleton}
+        />
       }
-      title={[
-        title,
-        !company.active && (
-          <span
-            style={{
-              color: 'var(--danger-color)',
-            }}
-          >
-            {' '}
-            (Inaktiv)
-          </span>
-        ),
-      ]}
+      title={title}
       back={{
         href: '/bdb',
       }}
@@ -315,190 +464,54 @@ const BdbDetail = () => {
     >
       <Helmet title={title} />
 
-      <Flex column gap="var(--spacing-md)">
-        <p className={cx(!company.description && 'secondaryFontColor')}>
-          {company.description || 'Ingen beskrivelse tilgjengelig'}
-        </p>
-
-        <div className={styles.infoBubbles}>
-          <InfoBubble
-            icon="briefcase"
-            data={company.companyType}
-            meta="Type bedrift"
-            style={{
-              order: 0,
-            }}
-          />
-          <InfoBubble
-            icon="mail"
-            data={company.paymentMail}
-            meta="Fakturamail"
-            style={{
-              order: 1,
-            }}
-          />
-          <InfoBubble
-            icon="call"
-            data={company.phone}
-            meta="Telefon"
-            style={{
-              order: 2,
-            }}
-          />
-          <InfoBubble
-            icon="at"
-            data={company.website}
-            meta="Nettside"
-            style={{
-              order: 3,
-            }}
-            link={company.website}
+      <ContentSection>
+        <ContentMain className={styles.mainContent}>
+          <CollapsibleDisplayContent
+            content={company.description}
+            skeleton={showSkeleton}
           />
-          <InfoBubble
-            icon="home"
-            data={company.address}
-            meta="Adresse"
-            style={{
-              order: 4,
-            }}
-          />
-          <InfoBubble
-            icon="person"
-            data={(studentContact && studentContact.fullName) || '-'}
-            meta="Studentkontakt"
-            link={
-              studentContact && `abakus.no/users/${studentContact.username}`
-            }
-            style={{
-              order: 5,
-            }}
-          />
-        </div>
 
-        <div>
-          <h3>
-            Bedriftskontakter{' '}
-            <span className={styles.newestFirst}>(Nyest øverst)</span>
-          </h3>
-          {companyContacts && companyContacts.length > 0 ? (
-            <div className={styles.companyList}>
-              <table className={styles.contactTable}>
-                <thead>
-                  <tr>
-                    <th>Navn</th>
-                    <th>Rolle</th>
-                    <th>E-post</th>
-                    <th>Telefonnummer</th>
-                    <th />
-                  </tr>
-                </thead>
-                <tbody>{companyContacts}</tbody>
-              </table>
-            </div>
+          <Flex justifyContent="space-between" alignItems="center">
+            <h3>Bedriftskontakter</h3>
+            <LinkButton href={`/bdb/${company.id}/company-contacts/add`}>
+              Legg til bedriftskontakt
+            </LinkButton>
+          </Flex>
+          {company.companyContacts?.length > 0 ? (
+            <Table
+              columns={contactsColumns}
+              data={company.companyContacts}
+              hasMore={false}
+              loading={showSkeleton}
+            />
           ) : (
             <EmptyState body="Ingen bedriftskontakter registrert" />
           )}
-          <Link
-            to={`/bdb/${company.id}/company-contacts/add`}
-            style={{
-              marginTop: '10px',
-            }}
-          >
-            <i className="fa fa-plus-circle" /> Legg til bedriftskontakt
-          </Link>
-        </div>
 
-        <div>
           <h3>Semesterstatuser</h3>
-          {semesters.length > 0 ? (
-            <div
-              className={styles.companyList}
-              style={{
-                marginBottom: '10px',
-              }}
-            >
-              <Card severity="info">
-                <Card.Header>Tips</Card.Header>
-                Du kan endre semesterstatuser ved å trykke på dem i listen!
-              </Card>
-              <table className={styles.detailTable}>
-                <thead>
-                  <tr>
-                    <th>Semester</th>
-                    <th>Status</th>
-                    <th>Kontrakt</th>
-                    <th>Statistikk</th>
-                    <th>Evaluering</th>
-                    <th />
-                  </tr>
-                </thead>
-                <tbody>{semesters}</tbody>
-              </table>
-            </div>
+          {company.semesterStatuses?.length > 0 ? (
+            <Table
+              columns={semesterColumns}
+              data={company.semesterStatuses}
+              hasMore={false}
+              loading={showSkeleton}
+            />
           ) : (
-            <EmptyState body="Ingen sememsterstatuser" />
+            <EmptyState body="Ingen semesterstatuser registrert" />
           )}
-          <Link to={`/bdb/${company.id}/semesters/add`}>
-            <i className="fa fa-plus-circle" /> Legg til nytt semester
-          </Link>
-        </div>
 
-        <div>
-          <h3>Filer</h3>
-          <ul>
-            {!company.files || company.files.length === 0 ? (
-              <EmptyState body="Ingen filer" />
-            ) : (
-              company.files.map((file) => (
-                <li key={file.id}>
-                  <a href={file.file}>{truncateString(file.file, 100)}</a>
-                </li>
-              ))
-            )}
-          </ul>
-        </div>
-
-        <div className={styles.adminNote}>
-          <h3>Notat i listen</h3>
-          {company.adminComment || <EmptyState body="Ingen notater" />}
-        </div>
-
-        <div>
           <h3>Bedriftens arrangementer</h3>
-          {events.length > 0 ? (
-            <div className={styles.companyList}>
-              <table className={styles.eventsTable}>
-                <thead>
-                  <tr>
-                    <th>Tittel</th>
-                    <th>Arrangementstype</th>
-                    <th>Når</th>
-                    <th>Hvor</th>
-                    <th>Hva</th>
-                    <th />
-                  </tr>
-                </thead>
-                <tbody>{events}</tbody>
-              </table>
-              {eventsToDisplay === 3 ? (
-                <Button
-                  className={styles.showAllButton}
-                  onPress={() => setEventsToDisplay(100)}
-                >
-                  Vis alle arrangementer
-                </Button>
-              ) : (
-                showFetchMoreEvents && (
-                  <Button onPress={fetchMoreEvents}>Hent flere</Button>
-                )
-              )}
-            </div>
+          {companyEvents.length > 0 ? (
+            <Table
+              columns={eventColumns}
+              data={companyEvents}
+              hasMore={showFetchMoreEvents}
+              loading={fetchingCompany}
+            />
           ) : (
-            <EmptyState body="Ingen arrangementer" />
+            <EmptyState body="Ingen arrangementer registrert" />
           )}
-        </div>
 
-        <div>
           <h3>Bedriftens jobbannonser</h3>
           {fetchingJoblistings && !joblistings.length ? (
             <Skeleton className={sharedStyles.joblistingItem} />
@@ -511,16 +524,44 @@ const BdbDetail = () => {
           ) : (
             <EmptyState body="Ingen tidligere jobbannonser" />
           )}
-        </div>
 
-        {company.contentTarget && (
-          <CommentView
-            contentTarget={company.contentTarget}
-            comments={comments}
-            newOnTop
-          />
-        )}
-      </Flex>
+          {company.contentTarget && (
+            <CommentView
+              contentTarget={company.contentTarget}
+              comments={comments}
+              newOnTop
+            />
+          )}
+        </ContentMain>
+        <ContentSidebar>
+          {showSkeleton
+            ? companyInfo.map((info, index) => (
+                <TextWithIcon
+                  key={index}
+                  iconName={info.icon}
+                  content={<Skeleton className={styles.companyInfo} />}
+                />
+              ))
+            : companyInfo.some((info) => info.text) &&
+              companyInfo.map(
+                (info) =>
+                  info.text && (
+                    <TextWithIcon
+                      key={info.text}
+                      iconName={info.icon}
+                      className={styles.companyInfo}
+                      content={
+                        info.link ? (
+                          <a href={info.text}>{company.name}</a>
+                        ) : (
+                          info.text
+                        )
+                      }
+                    />
+                  ),
+              )}
+        </ContentSidebar>
+      </ContentSection>
     </Page>
   );
 };
diff --git a/app/routes/bdb/components/SemesterStatusDetail.tsx b/app/routes/bdb/components/SemesterStatusDetail.tsx
deleted file mode 100644
index ef03d5bf01..0000000000
--- a/app/routes/bdb/components/SemesterStatusDetail.tsx
+++ /dev/null
@@ -1,185 +0,0 @@
-import {
-  ConfirmModal,
-  Icon,
-  Flex,
-  LoadingIndicator,
-} from '@webkom/lego-bricks';
-import { Trash2 } from 'lucide-react';
-import { useState } from 'react';
-import { deleteSemesterStatus } from 'app/actions/CompanyActions';
-import FileUpload from 'app/components/Upload/FileUpload';
-import { useAppDispatch } from 'app/store/hooks';
-import truncateString from 'app/utils/truncateString';
-import {
-  getStatusColor,
-  selectMostProminentStatus,
-  semesterCodeToName,
-} from '../utils';
-import SemesterStatusContent from './SemesterStatusContent';
-import styles from './bdb.css';
-import type { EntityId } from '@reduxjs/toolkit';
-import type { TransformedSemesterStatus } from 'app/reducers/companies';
-import type { CompanySemesterContactStatus } from 'app/store/models/Company';
-
-const FILE_NAME_LENGTH = 30;
-type Props = {
-  semesterStatus: TransformedSemesterStatus;
-  companyId: EntityId;
-  editFunction: (
-    semesterStatus: TransformedSemesterStatus,
-    statusString: CompanySemesterContactStatus,
-  ) => Promise<unknown>;
-  addFileToSemester: (
-    fileName: string,
-    fileToken: string,
-    type: string,
-    semesterStatus: TransformedSemesterStatus,
-  ) => Promise<unknown>;
-  removeFileFromSemester: (
-    semesterStatus: TransformedSemesterStatus,
-    type: string,
-  ) => Promise<unknown>;
-};
-
-const SemesterStatusDetail = (props: Props) => {
-  const [editing, setEditing] = useState(false);
-
-  const dispatch = useAppDispatch();
-
-  const semesterToHumanReadable = () => {
-    const { year, semester } = props.semesterStatus;
-    const semesterName = semesterCodeToName(semester);
-    return `${year} ${semesterName}`;
-  };
-
-  const addFile = (fileName: string, fileToken: string, type: string) => {
-    setEditing(false);
-    return props.addFileToSemester(
-      fileName,
-      fileToken,
-      type,
-      props.semesterStatus,
-    );
-  };
-
-  const removeFile = (type: string) =>
-    props.removeFileFromSemester(props.semesterStatus, type);
-
-  const { semesterStatus, editFunction } = props;
-
-  if (!semesterStatus) return <LoadingIndicator loading />;
-
-  const humanReadableSemester = semesterToHumanReadable();
-  return (
-    <tr key={semesterStatus.id}>
-      <td>{humanReadableSemester}</td>
-      <td
-        style={{
-          padding: '5px',
-          lineHeight: '18px',
-          backgroundColor: getStatusColor(
-            selectMostProminentStatus(semesterStatus.contactedStatus),
-          ),
-        }}
-      >
-        <SemesterStatusContent
-          contactedStatus={semesterStatus.contactedStatus}
-          editFunction={(statusCode) =>
-            editFunction(semesterStatus, statusCode)
-          }
-        />
-      </td>
-
-      {['contract', 'statistics', 'evaluation'].map((type) => (
-        <td key={type}>
-          <RenderFile
-            semesterStatus={semesterStatus}
-            type={type}
-            addFile={addFile}
-            removeFile={removeFile}
-            editing={editing}
-          />
-        </td>
-      ))}
-      <td>
-        <Flex>
-          <Icon
-            onClick={() => setEditing(!editing)}
-            name="pencil"
-            edit
-            size={20}
-          />
-          <ConfirmModal
-            title="Slett semesterstatus"
-            message={`Er du sikker på at du vil slette semesterstatusen for ${humanReadableSemester}? Alle filer for dette semesteret vil bli slettet.`}
-            onConfirm={() =>
-              dispatch(deleteSemesterStatus(props.companyId, semesterStatus.id))
-            }
-            closeOnConfirm
-          >
-            {({ openConfirmModal }) => (
-              <Icon
-                onClick={openConfirmModal}
-                iconNode={<Trash2 />}
-                danger
-                size={20}
-              />
-            )}
-          </ConfirmModal>
-        </Flex>
-      </td>
-    </tr>
-  );
-};
-
-export default SemesterStatusDetail;
-
-type RenderFileProps = {
-  semesterStatus: TransformedSemesterStatus;
-  type: string;
-  removeFile: (type: string) => Promise<unknown>;
-  addFile: (name: string, token: string, type: string) => Promise<unknown>;
-  editing: boolean;
-};
-
-const RenderFile = (props: RenderFileProps) => {
-  const { semesterStatus, type, removeFile, addFile, editing } = props;
-
-  const uploadButton = (type: string) => (
-    <FileUpload
-      onChange={(fileName, fileToken) => addFile(fileName, fileToken, type)}
-    />
-  );
-
-  const fileNameToShow = (name: string, url?: string) =>
-    name ? <a href={url}>{truncateString(name, FILE_NAME_LENGTH)}</a> : '-';
-
-  const fileName = fileNameToShow(
-    semesterStatus[type + 'Name'],
-    semesterStatus[type],
-  );
-  const displayDeleteButton = editing && semesterStatus[type];
-  const displayUploadButton = editing && !semesterStatus[type];
-
-  if (displayDeleteButton) {
-    return (
-      <span className={styles.deleteFile}>
-        <span>{fileName}</span>
-        <ConfirmModal
-          title="Slett fil"
-          message="Er du sikker på at du vil slette denne filen?"
-          onConfirm={() => removeFile(type)}
-          closeOnConfirm
-        >
-          {({ openConfirmModal }) => (
-            <Icon onClick={openConfirmModal} iconNode={<Trash2 />} danger />
-          )}
-        </ConfirmModal>
-      </span>
-    );
-  } else if (displayUploadButton) {
-    return uploadButton(type);
-  }
-
-  return fileName;
-};
diff --git a/app/routes/bdb/components/bdb.css b/app/routes/bdb/components/bdb.css
index c387555fd6..c9ce53729b 100644
--- a/app/routes/bdb/components/bdb.css
+++ b/app/routes/bdb/components/bdb.css
@@ -1,36 +1,5 @@
 @import url('~app/styles/variables.css');
 
-.companyList table {
-  border-collapse: collapse;
-}
-
-.companyList th {
-  padding: 5px 0;
-  border-top: 1px solid var(--border-gray);
-  border-bottom: 1px solid var(--border-gray) !important;
-}
-
-.companyList th,
-.companyList td {
-  padding-left: 7px;
-  width: 140px;
-  border-bottom: 1px dashed var(--border-gray);
-  text-align: left;
-  display: table-cell;
-
-  &:first-child {
-    width: 180px;
-  }
-
-  &:nth-child(5) {
-    width: 190px;
-  }
-
-  &:nth-child(6) {
-    width: 180px;
-  }
-}
-
 .title {
   float: left;
   width: 80%;
@@ -54,129 +23,10 @@
   }
 }
 
-/* Semesters in detailroute */
-
-.detailTable thead th:nth-child(1),
-.detailTable tbody td:nth-child(1) {
-  width: 120px;
-}
-
-.detailTable thead th:nth-child(2),
-.detailTable tbody td:nth-child(2) {
-  width: 210px;
-}
-
-.detailTable thead th:nth-child(3),
-.detailTable tbody td:nth-child(3),
-.detailTable thead th:nth-child(4),
-.detailTable tbody td:nth-child(4),
-.detailTable thead th:nth-child(5),
-.detailTable tbody td:nth-child(5) {
-  max-width: 220px;
-  min-width: 220px;
-  width: 220px;
-  word-wrap: break-word;
-}
-
-.detailTable tbody td:nth-child(3),
-.detailTable tbody td:nth-child(4),
-.detailTable tbody td:nth-child(5) {
-  line-height: 1.3;
-  font-size: var(--font-size-sm);
-  padding: 5px;
-
-  & a {
-    color: var(--lego-link-color);
-    transition: color var(--easing-medium);
-  }
-
-  & a:hover {
-    color: var(--lego-red-color-hover);
-  }
-}
-
-.detailTable thead th:nth-child(6),
-.detailTable tbody td:nth-child(6) {
-  width: 30px;
-}
-
-/* company contact in detailroute */
-
-.contactTable thead th:nth-child(1),
-.contactTable tbody td:nth-child(1) {
-  width: 250px;
-}
-
-.contactTable thead th:nth-child(2),
-.contactTable tbody td:nth-child(2) {
-  width: 270px;
-}
-
-.contactTable thead th:nth-child(3),
-.contactTable tbody td:nth-child(3) {
-  width: 330px;
-}
-
-.contactTable thead th:nth-child(4),
-.contactTable tbody td:nth-child(4) {
-  width: 180px;
-}
-
-/* Events in company detailroute */
-
-.eventsTable thead th:nth-child(1),
-.eventsTable tbody td:nth-child(1) {
-  width: 350px;
-}
-
-.eventsTable thead th:nth-child(2),
-.eventsTable tbody td:nth-child(2) {
-  width: 180px;
-}
-
-.eventsTable thead th:nth-child(3),
-.eventsTable tbody td:nth-child(3) {
-  width: 100px;
-}
-
-.eventsTable thead th:nth-child(4),
-.eventsTable tbody td:nth-child(4) {
-  width: 200px;
-  line-height: 20px;
-  padding: 5px;
-}
-
-.eventsTable thead th:nth-child(5),
-.eventsTable tbody td:nth-child(5) {
-  width: 300px;
-  line-height: 20px;
-  padding: 5px;
-}
-
 .showAllButton {
   margin-top: var(--spacing-sm);
 }
 
-.infoBubbles {
-  display: flex;
-  text-align: center;
-  flex-wrap: wrap;
-  justify-content: space-between;
-
-  @media (--mobile-device) {
-    justify-content: space-around;
-    align-items: center;
-  }
-}
-
-.infoBubbles > div {
-  margin: 30px 0;
-
-  @media (--mobile-device) {
-    margin-right: 20px;
-  }
-}
-
 .adminNote {
   width: 400px;
 }
@@ -198,3 +48,12 @@
 .navigateThroughTime svg {
   color: var(--color-gray-7);
 }
+
+.companyInfo {
+  min-width: 180px;
+  min-height: 21px;
+}
+
+.mainContent {
+  gap: var(--spacing-md);
+}
diff --git a/app/routes/bdb/utils.tsx b/app/routes/bdb/utils.tsx
index 8f63a3961f..06725c5c34 100644
--- a/app/routes/bdb/utils.tsx
+++ b/app/routes/bdb/utils.tsx
@@ -83,6 +83,12 @@ export const semesterNameOf = (index: number) => {
   };
   return indexToSemesterName[index] || 'spring';
 };
+export const semesterToHumanReadable = (
+  semester: TransformedSemesterStatus,
+) => {
+  const semesterName = semesterCodeToName(semester.semester);
+  return `${semester.year} ${semesterName}`;
+};
 export const semesterCodeToName = (code: Semester) => {
   const codeToName = {
     spring: 'Vår',
diff --git a/app/store/models/Company.ts b/app/store/models/Company.ts
index 0ebf0933d6..119fe80d5b 100644
--- a/app/store/models/Company.ts
+++ b/app/store/models/Company.ts
@@ -159,6 +159,7 @@ export type AdminDetailCompany = Pick<
   | 'logo'
   | 'files'
   | 'companyContacts'
+  | 'logoPlaceholder'
 >;
 
 export type UnknownCompany = (