diff --git a/assets/locales/en-us.json b/assets/locales/en-us.json
index e008f65c..c3c30397 100644
--- a/assets/locales/en-us.json
+++ b/assets/locales/en-us.json
@@ -260,5 +260,9 @@
         "customColor": "Custom Color",
         "resetSettings": "Reset Settings",
         "resetSettingsWarning": "Resetting your settings returns them all to the original state, this cannot be undone."
+    },
+    "Socials": {
+        "twitter": "Follow Us!",
+        "github": "Star Us!"
     }
 }
\ No newline at end of file
diff --git a/renderer/src/styles/ui/changelog.css b/renderer/src/styles/ui/changelog.css
index aea4237e..e0d2891a 100644
--- a/renderer/src/styles/ui/changelog.css
+++ b/renderer/src/styles/ui/changelog.css
@@ -1,3 +1,4 @@
+.bd-changelog-modal iframe,
 .bd-changelog-modal video,
 .bd-changelog-modal img {
     width: 100%;
@@ -95,10 +96,16 @@
     border-radius: 0;
 }
 
-.bd-changelog-modal .bd-modal-content img {
+.bd-changelog-modal .bd-modal-content img,
+.bd-changelog-modal .bd-modal-content video,
+.bd-changelog-modal .bd-modal-content iframe {
     width: 100%;
 }
 
+.bd-changelog-modal .bd-modal-content iframe {
+    height: 346px;
+}
+
 .bd-changelog-modal .bd-modal-content a {
     color: hsl(200, calc(var(--saturation-factor, 1) * 100%), 49.4%);
     transition: 0.05s;
@@ -194,11 +201,13 @@
     background-color: hsl(235, calc(var(--saturation-factor, 1)*86.1%), 77.5%);
 }
 
+.theme-dark .bd-changelog-modal iframe,
 .theme-dark .bd-changelog-modal video,
 .theme-dark .bd-changelog-modal img {
     box-shadow: 0 2px 10px 0 hsl(var(0, calc(var(--saturation-factor, 1)*0%), 0%-hsl)/.2);
 }
 
+.theme-light .bd-changelog-modal iframe,
 .theme-light .bd-changelog-modal video,
 .theme-light .bd-changelog-modal img {
     box-shadow: 0 2px 10px 0 hsl(var(0, calc(var(--saturation-factor, 1)*0%), 0%-hsl)/.1);
@@ -214,4 +223,17 @@
 
 .theme-dark .socialLink-1qjJIk {
     color: hsl(210, calc(var(--saturation-factor, 1)*9.3%), 78.8%);
-} */
\ No newline at end of file
+} */
+
+.bd-social {
+    opacity: 0.7;
+    transition: 0.17s ease opacity;
+}
+
+.bd-social:hover {
+    opacity: 1;
+}
+
+.bd-social + .bd-social {
+    margin-left: 10px;
+}
\ No newline at end of file
diff --git a/renderer/src/ui/icons/twitch.jsx b/renderer/src/ui/icons/twitch.jsx
deleted file mode 100644
index 2800b4e3..00000000
--- a/renderer/src/ui/icons/twitch.jsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from "@modules/react";
-
-export default function Twitch(props) {
-    const size = props.size || "18px";
-    return <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style={{width: size, height: size}}>
-        <path fill="currentColor" d="M40.1 32L10 108.9v314.3h107V480h60.2l56.8-56.8h87l117-117V32H40.1zm357.8 254.1L331 353H224l-56.8 56.8V353H76.9V72.1h321v214zM331 149v116.9h-40.1V149H331zm-107 0v116.9h-40.1V149H224z"/>
-        </svg>;
-}
\ No newline at end of file
diff --git a/renderer/src/ui/icons/twitter.jsx b/renderer/src/ui/icons/twitter.jsx
new file mode 100644
index 00000000..c76a6193
--- /dev/null
+++ b/renderer/src/ui/icons/twitter.jsx
@@ -0,0 +1,8 @@
+import React from "@modules/react";
+
+export default function Twitter(props) {
+    const size = props.size || "18px";
+    return <svg xmlns="http://www.w3.org/2000/svg" fill="#26a7de" viewBox="0 0 24 24" style={{width: size, height: size}}>
+        <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
+        </svg>;
+}
\ No newline at end of file
diff --git a/renderer/src/ui/modals/changelog.jsx b/renderer/src/ui/modals/changelog.jsx
index 7f4083e8..ba6afcc1 100644
--- a/renderer/src/ui/modals/changelog.jsx
+++ b/renderer/src/ui/modals/changelog.jsx
@@ -1,6 +1,7 @@
 import React from "@modules/react";
 import WebpackModules from "@modules/webpackmodules";
 import DiscordModules from "@modules/discordmodules";
+import Strings from "@modules/strings";
 
 import Root from "./root";
 import Header from "./header";
@@ -12,6 +13,8 @@ import Text from "../base/text";
 import CloseButton from "./close";
 
 import SimpleMarkdownExt from "@structs/markdown";
+import Twitter from "@ui/icons/twitter";
+import GitHub from "@ui/icons/github";
 
 const {useMemo} = React;
 
@@ -26,6 +29,33 @@ const joinSupportServer = (click) => {
 const supportLink = <a className={`${AnchorClasses.anchor} ${AnchorClasses.anchorUnderlineOnHover}`} onClick={joinSupportServer}>Join our Discord Server.</a>;
 const defaultFooter = <Text>Need support? {supportLink}</Text>;
 
+const twitter = <DiscordModules.Tooltip color="primary" position="top" text={Strings.Socials.twitter}>
+    {p => <a {...p} className="bd-social" href="https://x.com/_BetterDiscord_" rel="noopener noreferrer" target="_blank">
+        <Twitter />
+        </a>}
+    </DiscordModules.Tooltip>;
+
+const github = <DiscordModules.Tooltip color="primary" position="top" text={Strings.Socials.github}>
+    {p => <a {...p} className="bd-social" href="https://github.com/BetterDiscord/BetterDiscord" rel="noopener noreferrer" target="_blank">
+        <GitHub />
+        </a>}
+    </DiscordModules.Tooltip>;
+
+function YoutubeEmbed({src}) {
+    return <iframe
+            src={src}
+            title="YouTube video player"
+            frameBorder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+            allowFullScreen
+        />;
+}
+
+function Video({src, poster}) {
+    if (src.toLowerCase().includes("youtube.com")) return <YoutubeEmbed src={src} />;
+    return <video src={src} poster={poster} controls={true} className="bd-changelog-poster" />;
+}
+
 
 export default function ChangelogModal({transitionState, footer, title, subtitle, onClose, video, poster, image, description, changes}) {
 
@@ -37,14 +67,18 @@ export default function ChangelogModal({transitionState, footer, title, subtitle
         <CloseButton onClick={onClose} />
     </Header>, [title, subtitle, onClose]);
 
-    const ChangelogFooter = useMemo(() => <Footer>
+    const ChangelogFooter = useMemo(() => <Footer justify={Flex.Justify.BETWEEN} direction={Flex.Direction.HORIZONTAL}>
         <Flex.Child grow="1" shrink="1">
             {footer ? footer : defaultFooter}
         </Flex.Child>
+        {!footer && <Flex.Child grow="0" shrink="0">
+            {twitter}
+            {github}
+        </Flex.Child>}
     </Footer>, [footer]);
 
     const changelogItems = useMemo(() => {
-        const items = [video ? <video src={video} poster={poster} controls={true} className="bd-changelog-poster" /> : <img src={image} className="bd-changelog-poster" />];
+        const items = [video ? <Video src={video} poster={poster} /> : <img src={image} className="bd-changelog-poster" />];
         if (description) items.push(<p>{SimpleMarkdownExt.parseToReact(description)}</p>);
         for (let c = 0; c < changes.length; c++) {
             const entry = changes[c];
@@ -58,7 +92,7 @@ export default function ChangelogModal({transitionState, footer, title, subtitle
         return items;
     }, [description, video, image, poster, changes]);
 
-    return <Root className="bd-changelog-modal" transitionState={transitionState} size={Root.Sizes.SMALL} style={Root.Styles.STANDARD}>
+    return <Root className="bd-changelog-modal" transitionState={transitionState} size={Root.Sizes.MEDIUM} style={Root.Styles.STANDARD}>
         {ChangelogHeader}
         <Content>{changelogItems}</Content>
         {ChangelogFooter}
diff --git a/renderer/src/ui/modals/footer.jsx b/renderer/src/ui/modals/footer.jsx
index 59c56b9f..7aeea017 100644
--- a/renderer/src/ui/modals/footer.jsx
+++ b/renderer/src/ui/modals/footer.jsx
@@ -4,16 +4,16 @@ import Utilities from "@modules/utilities";
 import Flex from "../base/flex";
 
 
-export default function Footer({id, className, children}) {
+export default function Footer({id, className, children, justify, direction, align, wrap}) {
     return <Flex
                 id={id}
                 className={Utilities.className("bd-modal-footer", className)}
                 grow={0}
                 shrink={0}
-                direction={Flex.Direction.HORIZONTAL_REVERSE}
-                justify={Flex.Justify.START}
-                align={Flex.Align.STRETCH}
-                wrap={Flex.Wrap.NO_WRAP}
+                direction={direction ?? Flex.Direction.HORIZONTAL_REVERSE}
+                justify={justify ?? Flex.Justify.START}
+                align={align ?? Flex.Align.STRETCH}
+                wrap={wrap ?? Flex.Wrap.NO_WRAP}
             >
         {children}
     </Flex>;